這篇文章，和大家分享一些在產(chǎn)品和交互設(shè)計(jì)中的一些自己的方法。

經(jīng)過一些項(xiàng)目經(jīng)驗(yàn)，結(jié)合幾個(gè)方法論，我整理出了一個(gè)評(píng)估交互方案完整性的方法，也可以作為前期考慮方案的分析方式。下面就來介紹一下，希望能給大家?guī)椭蛦l(fā)。

背景

“時(shí)間”作為人機(jī)交互界面中經(jīng)常出現(xiàn)的元素，本質(zhì)上都是為了去傳遞時(shí)間維度的信息。但是我們平時(shí)在使用一些互聯(lián)網(wǎng)產(chǎn)品時(shí)會(huì)發(fā)現(xiàn)，關(guān)于“時(shí)間”的顯示狀態(tài)或形式在不同場景、不同頁面里往往是不太一樣的，這是出于怎樣的考慮呢？今天我們就來聊一聊，如何在產(chǎn)品設(shè)計(jì)中把握“時(shí)間”顯示的訣竅，讓其在頁面中發(fā)揮最大的作用。

“時(shí)間”元素的分類

按照“時(shí)間”元素在頁面中的出現(xiàn)場景和所起到的作用，可以大致歸為以下幾類：

A. 事件的關(guān)鍵構(gòu)成要素

時(shí)間作為描述整個(gè)事件的重要組成部分，缺失后會(huì)對(duì)原本所要傳達(dá)的內(nèi)容產(chǎn)生嚴(yán)重的影響，進(jìn)而影響用戶的使用預(yù)期和結(jié)果，比方說用戶可能不能以一個(gè)較低的價(jià)格完成商品購買，或錯(cuò)過了產(chǎn)品發(fā)布會(huì)的時(shí)間。

B. 行為的時(shí)間標(biāo)記

指用戶本人作為行為主體或行為的接收對(duì)象，在某一動(dòng)作發(fā)生后為其所打上的時(shí)間標(biāo)記，比方說“我”購買商品下單的時(shí)間或收到一封郵件的時(shí)間。

C. 內(nèi)容的附屬信息

用戶在使用產(chǎn)品進(jìn)行內(nèi)容消費(fèi)時(shí)，時(shí)間作為該條內(nèi)容的附屬信息，起到補(bǔ)充說明的作用，比方說一條短視頻或新聞的發(fā)布時(shí)間。

在上面的案例中，我們會(huì)發(fā)現(xiàn)“時(shí)間”在對(duì)應(yīng)場景里所發(fā)揮的作用不同，用戶在使用產(chǎn)品時(shí)往往對(duì)時(shí)間存在不一樣的關(guān)注程度。因此我們?cè)谧鲰撁嬖O(shè)計(jì)時(shí)，要根據(jù)具體場景和用戶訴求判斷“時(shí)間”元素的重要性和優(yōu)先級(jí)，通常情況下：時(shí)間作為事件的關(guān)鍵構(gòu)成要素＞行為的時(shí)間標(biāo)記＞內(nèi)容的附屬信息，之后再思考用什么樣的設(shè)計(jì)形式去展示來達(dá)到我們的目標(biāo)。

“時(shí)間”的呈現(xiàn)方式和運(yùn)用技巧

在討論“時(shí)間”元素的設(shè)計(jì)之前，我們先共識(shí)一些有關(guān)時(shí)間的理解和概念。時(shí)間可以劃分為“時(shí)間點(diǎn)”和“時(shí)間段”兩個(gè)維度，類似我們高中物理時(shí)學(xué)過的“時(shí)刻”和”時(shí)間間隔“的概念。

拿開會(huì)舉例子：“下午 4:30 會(huì)議開始”、“下午 6:00 會(huì)議結(jié)束”描述的是事件開始、結(jié)束的時(shí)間點(diǎn)，而“整個(gè)會(huì)議持續(xù) 1.5 小時(shí)”、“會(huì)議時(shí)間為下午 4:30-6:00”描述的是事件過程的時(shí)間段；但是，我們?cè)跁?huì)議開始時(shí)也可以這樣講“會(huì)議將在 1.5 小時(shí)后結(jié)束”。

通過上面的例子我們可以發(fā)下，同樣是描述一件事情，運(yùn)用不同的時(shí)間點(diǎn)、時(shí)間段的方式去表達(dá)，意思一樣但卻傳遞出不一樣的情感，并且兩者存在如下的“換算”關(guān)系：

1）時(shí)間段加上定語會(huì)變成時(shí)間點(diǎn)（但同樣是時(shí)間點(diǎn)，“下午 6:00”是絕對(duì)時(shí)間，而“1.5 小時(shí)后”是相對(duì)時(shí)間，剛好對(duì)應(yīng)到我們?cè)O(shè)計(jì)時(shí)兩種時(shí)間戳類型）；

2）兩個(gè)時(shí)間點(diǎn)之間則表示時(shí)間段。

所以，我們?cè)谄綍r(shí)表達(dá)或設(shè)計(jì)時(shí)，要先想清楚用“時(shí)間”是想側(cè)重表達(dá)某一事件、動(dòng)作發(fā)生的即刻時(shí)間節(jié)點(diǎn)？還是想描述其所持續(xù)的時(shí)間過程？之后我們?cè)籴槍?duì)不同語境去選取合適的文案和呈現(xiàn)方式。

時(shí)間的呈現(xiàn)方式離不開：時(shí)間戳類型、時(shí)間顯示格式、時(shí)間顆粒度。其中，時(shí)間顆粒度指的是描述時(shí)間的最小單位，往往顆粒度越細(xì)，給用戶傳達(dá)的確定感越強(qiáng)（如轉(zhuǎn)賬時(shí)間是 12 日 15:15:20），對(duì)用戶的激勵(lì)作用越明顯（如距搶購結(jié)束僅剩 00 時(shí) 01 分 23.6 秒）。

1. 絕對(duì)時(shí)間戳

絕對(duì)時(shí)間可理解為事物發(fā)生時(shí)的確切時(shí)間，由具體日期（年、月、日）和時(shí)間（時(shí)、分、秒）組成。使用絕對(duì)時(shí)間戳的優(yōu)勢是信息傳達(dá)精準(zhǔn)，顯得正式，給人確定感和安全感，同時(shí)排布規(guī)整，便于形成認(rèn)知習(xí)慣；但缺點(diǎn)是內(nèi)容顯示過長不利于閱讀，并且占用空間較大。

在時(shí)間顯示格式的選擇上，為了避免混淆，推薦使用文字格式或“-”分隔符來分隔日期，而“/”分隔符在不同國家有不同的展示順序習(xí)慣，容易造成誤解，盡量少用。

時(shí)間顆粒度的選擇依情況而定，一般場景總結(jié)如下：

2. 相對(duì)時(shí)間戳

相對(duì)時(shí)間在產(chǎn)品設(shè)計(jì)領(lǐng)域通常是指內(nèi)容生產(chǎn)、到達(dá)、或狀態(tài)發(fā)生改變時(shí)，距當(dāng)前時(shí)間點(diǎn)的時(shí)間差值，多用于 push 通知、信息流產(chǎn)品，側(cè)重強(qiáng)調(diào)內(nèi)容的時(shí)效性；而“倒計(jì)時(shí)”也算相對(duì)時(shí)間的一種，側(cè)重營造時(shí)間的緊迫感。使用相對(duì)時(shí)間戳的優(yōu)勢是用戶辨識(shí)、理解成本低，不用通過計(jì)算來判斷時(shí)間過去或還剩下多久；缺點(diǎn)是不夠精確、正式，并很難衡量兩個(gè)時(shí)間點(diǎn)的臨近性。

在使用相對(duì)時(shí)間時(shí)，要注意格式友好。時(shí)間單位可隨著時(shí)間的推移自動(dòng)改變；數(shù)字不要過多，盡量取整；并且可設(shè)置其與絕對(duì)時(shí)間轉(zhuǎn)換的臨界點(diǎn)。

總結(jié)

在設(shè)計(jì)界面中的“時(shí)間”元素時(shí)，要遵循場景貼合、便于閱讀理解的總體原則；之后根據(jù)場景和目標(biāo)，再選取合適的“時(shí)間”呈現(xiàn)方式（包括時(shí)間戳類型、時(shí)間顯示格式、時(shí)間顆粒度）。

當(dāng)時(shí)間作為“A.事件的關(guān)鍵構(gòu)成要素”時(shí)

一般情況下使用絕對(duì)時(shí)間，并且要看是為了強(qiáng)調(diào)某一關(guān)鍵時(shí)間節(jié)點(diǎn)，還是側(cè)重表達(dá)整個(gè)持續(xù)過程。此外，選用關(guān)聯(lián)場景的文案或者運(yùn)用倒計(jì)時(shí)（相對(duì)時(shí)間）的形式，可一定程度上促進(jìn)用戶更加集中注意力，提升對(duì)信息的關(guān)注度，并達(dá)到特殊的激勵(lì)作用和轉(zhuǎn)化效果。

當(dāng)時(shí)間作為“B.行為的時(shí)間標(biāo)記”時(shí)

該場景通常是為了追求確定感，通過提供精準(zhǔn)的時(shí)間和日期便于用戶定位到過去或?qū)淼哪硞€(gè)時(shí)間點(diǎn)（段）去查找、回顧相應(yīng)內(nèi)容，因此大多數(shù)采用絕對(duì)時(shí)間，時(shí)間顆粒度依具體情況而定。

當(dāng)時(shí)間作為“C.內(nèi)容的附屬信息”時(shí)

如果所設(shè)計(jì)的產(chǎn)品供給內(nèi)容的更新速度快，用戶活躍度高，并且此時(shí)內(nèi)容的時(shí)間信息準(zhǔn)確性不那么重要反而更側(cè)重于內(nèi)容的時(shí)效性，那么通常會(huì)使用相對(duì)時(shí)間。部分信息流產(chǎn)品（比如新聞資訊類、社區(qū)類）會(huì)在列表頁使用相對(duì)時(shí)間，在詳情頁使用絕對(duì)時(shí)間，時(shí)間顆粒度也是依情況而定；并且會(huì)隨著時(shí)間推移，在某一時(shí)間節(jié)點(diǎn)前把相對(duì)時(shí)間轉(zhuǎn)換為絕對(duì)時(shí)間。

文章來源：優(yōu)設(shè) (VMIC UED)

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

復(fù)雜應(yīng)用大多情況下是偏專業(yè)和B端的一些UI界面，它們大多出現(xiàn)在桌面端使用環(huán)境，并且終端用戶類型多樣，涉及流程、鏈條、業(yè)務(wù)也大多呈現(xiàn)出多變復(fù)雜的特征。這篇文章，來自UX設(shè)計(jì)領(lǐng)域的頂級(jí)存在NNGroup，作者為凱特·卡普蘭。

到底什么是復(fù)雜應(yīng)用？

我們之前將「復(fù)雜應(yīng)用」界定為特定專業(yè)領(lǐng)域當(dāng)中，需要經(jīng)過廣泛培訓(xùn)之后使用的，有著非結(jié)構(gòu)化目標(biāo)、非線性工作流程的任何應(yīng)用程序。這個(gè)概念可能聽起來有點(diǎn)抽象，不過這么說你可能會(huì) 更容易理解：從科學(xué)研究到專業(yè)人員，諸如金融分析師，它們常用的那些專業(yè)軟件應(yīng)用。這類應(yīng)用通常有著這些特點(diǎn)：

• 為有專業(yè)知識(shí)和訓(xùn)練有素的用戶提供支持
• 幫助用戶瀏覽、管理大型數(shù)據(jù)庫，并提供高級(jí)的數(shù)據(jù)分析和處理的功能
• 通過可變和多樣的基礎(chǔ)任務(wù)功能來解決問題或者達(dá)成目標(biāo)
• 需要在多個(gè)角色、工具、平臺(tái)之間進(jìn)行協(xié)作或者切換
• 可以用來減輕高影響力/高價(jià)值任務(wù)的風(fēng)險(xiǎn)，降低損失

盡管不同的復(fù)雜應(yīng)用之間差異很大，但是他們的共同點(diǎn)是，專業(yè)的從業(yè)人員對(duì)于這類工具有著極強(qiáng)的依賴性。

考慮到設(shè)計(jì)師和開發(fā)者在面對(duì)這類工具的時(shí)候的挑戰(zhàn)，我梳理總結(jié)了 8 個(gè)復(fù)雜應(yīng)用的設(shè)計(jì)原則和指南。

1、采用邊做邊學(xué)的用戶流程

很多研究表明，對(duì)于復(fù)雜的應(yīng)用和工具，用戶更加青睞可以立刻上手開始使用而不受它復(fù)雜度影響的那類工具。

與大量的教程、文檔、幫助和設(shè)置說明相比，能夠立刻開始的任務(wù)和項(xiàng)目，對(duì)于用戶有著莫大的吸引力。這種現(xiàn)象被稱為「活躍用戶悖論」。

雖然在專業(yè)領(lǐng)域當(dāng)中，倚靠摸索和試錯(cuò)學(xué)習(xí)是不恰當(dāng)也不安全的，但是一定程度的邊做邊學(xué)是必須的，因?yàn)椴豢赡茉谂嘤?xùn)和手冊(cè)當(dāng)中涵蓋所有的使用場景。

所以，在設(shè)計(jì)的時(shí)候應(yīng)該提供「跳過教程」的直接上手的偏好設(shè)置，同時(shí)進(jìn)行相應(yīng)的安全性設(shè)置，避免新手的莽撞操作導(dǎo)致?lián)p失。比如可以限制這個(gè)階段的用戶執(zhí)行長流程多任務(wù)的操作，讓控制面板實(shí)時(shí)顯示操作結(jié)果或者預(yù)覽結(jié)果，這樣用戶無需執(zhí)行全部操作就可以知道大概的結(jié)果。

在 Salesforce 控制面板當(dāng)中，就可以實(shí)時(shí)預(yù)覽面板編輯的效果。

2、為用戶提供有效的方法和建議

絕大多數(shù)用戶都不是進(jìn)階的專家級(jí)用戶，他們?cè)诮^大多數(shù)時(shí)候會(huì)使用基礎(chǔ)但是效率沒那么高的操作和執(zhí)行方案。很多用戶形成習(xí)慣之后，通常不會(huì)主動(dòng)做出改變，而這在日積月累之后導(dǎo)致大量的時(shí)間浪費(fèi)，效率低下。

值得一提的是，這個(gè)時(shí)候依賴冗長的文檔和教程其實(shí)很難達(dá)成效果，更合理的方式是結(jié)合用戶所處的上下文環(huán)境，通過界面工具提示的方式，適時(shí)地告知用戶「有更高效方便的方法」。

通常，可以使用懸停提示，或者是彈出式工具提示來實(shí)現(xiàn)這一功能。

ArcMap 是一款地理信息系統(tǒng)類工具，它通常會(huì)通過上下文環(huán)境下的信息引導(dǎo)，來幫助用戶了解技巧。

3、提供靈活而流暢的功能路徑

復(fù)雜的應(yīng)用程序，通常會(huì)有很多功能是分散的而非線性的，不同的功能組合起來可以實(shí)現(xiàn)特定的功能。在這類工具當(dāng)中，用戶日常可能也不是很確切知道最終的目標(biāo)是什么，而需要通過數(shù)據(jù)分析來逐步推進(jìn)，同時(shí)，在知道確切目標(biāo)的情況下，也應(yīng)該可以遵循不同的路徑靈活地達(dá)成目標(biāo)。

設(shè)計(jì)師這些應(yīng)用的時(shí)候，設(shè)計(jì)師應(yīng)該避免使用固定、唯一、 僵化的實(shí)現(xiàn)路徑，迫使用戶必循嚴(yán)格按照某一固定路徑來做事情。一方面，允許用戶跳過某個(gè)步驟，或者回滾到更早的路徑，另一方面，允許用戶遵循不同的方式和路徑來達(dá)成目標(biāo)。

比如萬事達(dá)卡的自助服務(wù)就可以通過交互式的圖表來引導(dǎo)用戶完成不同的任務(wù)。

4、 幫助用戶跟蹤行為和思考過程

復(fù)雜的任務(wù)，通常意味著它需要很多步驟，不同的環(huán)節(jié)，而在實(shí)際的應(yīng)用場景中，某個(gè)分析步驟耗費(fèi)幾個(gè)小時(shí)甚至幾天，都是有可能的。在高度復(fù)雜的現(xiàn)實(shí)生活中，某個(gè)步驟可能會(huì)換人接手，可能會(huì)因?yàn)橛布?網(wǎng)絡(luò)等問題而暫停甚至丟失，這也意味著「可追溯性」是很重要的。

所以，在這樣的復(fù)雜應(yīng)用當(dāng)中，應(yīng)該允許用戶在使用過程中，可以便捷清晰地記錄、保存、 導(dǎo)出內(nèi)容和記錄，允許用戶中斷，中斷后可以恢復(fù)特定的任務(wù)。在任務(wù)進(jìn)行過程中可以進(jìn)行注釋、保存相關(guān)的說明。

在決策建模軟件TreeAge 當(dāng)中，用戶可以在分析和建模過程中進(jìn)行開放式的注釋，可以后續(xù)在底部快速訪問這些筆記。

5、可以協(xié)調(diào)多工具并且在工作空間之間轉(zhuǎn)換

復(fù)雜的應(yīng)用通常還會(huì)面臨一個(gè)狀況，就是工具本身的不足，用戶需要在多個(gè)工作空間上使用工具和內(nèi)容的時(shí)候，它需要具備切換的功能。對(duì)于不具備的功能，應(yīng)用程序應(yīng)該允許使用第三方的應(yīng)用來作為補(bǔ)充。

比如當(dāng)軟件不支持某個(gè)操作的時(shí)候，應(yīng)該允許用戶從線上的其他數(shù)據(jù)庫中獲取并導(dǎo)出數(shù)據(jù)來使用，可以依托外部文檔作為支持，允許用戶在應(yīng)用中做注釋和評(píng)論。

減輕工作負(fù)擔(dān)的一個(gè)要點(diǎn)，是盡量使用通用的API、接口和標(biāo)準(zhǔn)，盡量兼容行業(yè)標(biāo)準(zhǔn)軟件，比如 Excel、Powerpoint ，盡量使用標(biāo)準(zhǔn)格式，等等。

微軟的商業(yè)分析軟件 PowerBI 就提供了標(biāo)準(zhǔn)化的導(dǎo)出和復(fù)制功能，非常方便

6、減少混亂而不影響功能

復(fù)雜應(yīng)用通常旨在保持泛用性。使用場景多樣，多種不同的功能，一家汽車生產(chǎn)廠家，可能會(huì)和蜜蜂養(yǎng)殖機(jī)構(gòu)采用同樣的工具和軟件來監(jiān)測機(jī)器故障。但是，這種泛用性的另外一面，就是混亂性。復(fù)雜的應(yīng)用可能會(huì)同時(shí)兼顧到基礎(chǔ)型的小白用戶和進(jìn)階型的專家用戶，而后者用到的功能很小概率會(huì)被基礎(chǔ)用戶用到。

所以，設(shè)計(jì)者需要在不降低功能性的情況下，基于應(yīng)用場景、 用戶需求來進(jìn)行簡化和優(yōu)化，在保持功能完整易用的前提之下，降低復(fù)雜度和混亂度。

分階段和層級(jí)展現(xiàn)就是一種降低混亂度但是不影響功能性的一種常見策略。當(dāng)用戶進(jìn)行到特定任務(wù)、特定階段、特等級(jí)別之后，再呈現(xiàn)特定功能，是有效的設(shè)計(jì)方法。

7、主次信息之間要能平穩(wěn)過渡

即使降低了混亂度，在復(fù)雜應(yīng)用當(dāng)中，信息量可能依然是過載的。通常，對(duì)于這種情況可以通過區(qū)分信息層級(jí)的主次來進(jìn)行快速的區(qū)分，不過，從交互上來說，這可能依然不夠。

對(duì)于諸如控制面板一樣的界面，用戶可能需要時(shí)刻查看面板上的信息，需要了解次級(jí)信息但是又不能離開界面，這就體現(xiàn)出主次信息之間的過渡呈現(xiàn)的重要性了。

一般而言，使用類似與懸停顯示的方式，能夠比較柔和地將次級(jí)信息呈現(xiàn)出來，允許用戶查看詳細(xì)的定量數(shù)據(jù)。下面這個(gè)案例當(dāng)中就是，懸停顯示更多次級(jí)信息。

8、在視覺上突出關(guān)鍵信息

復(fù)雜應(yīng)用通常在界面上包含由大量的信息，而這個(gè)時(shí)候關(guān)鍵性的數(shù)據(jù)如果不在視覺上做突出顯示，會(huì)被用戶錯(cuò)過。通過視覺區(qū)分、提示警報(bào)的方式，讓用戶及時(shí)注意到，才有可能規(guī)避可能存在的問題。

值得注意的是，讓關(guān)鍵信息和元素凸顯的方式，并不一定非得是使用鮮艷的色彩和較粗的字體，簡單的放大呈現(xiàn)，使用圖形化的元素輔助提示，或者是提供足夠的留白都可以達(dá)到目的，就像下面的案例一樣：

結(jié)論

復(fù)雜的應(yīng)用多種多樣，支持的服務(wù)和功能也千差萬別，但是無論如何呈現(xiàn)，此類復(fù)雜應(yīng)用的設(shè)計(jì)都是非常挑戰(zhàn)設(shè)計(jì)師的設(shè)計(jì)功底的，需要設(shè)計(jì)師了解業(yè)務(wù)，了解用戶，并且能夠通過設(shè)計(jì)更好地提供服務(wù)。

文章來源：優(yōu)設(shè)(陳子木)   作者：Kate Kaplan

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

放眼過去大量同質(zhì)化或跟風(fēng)的網(wǎng)站風(fēng)格，空有一副美觀的皮囊，卻少了些什么，為何不交互創(chuàng)新一下呢？具有創(chuàng)意的交互必然能使一副黑白的畫面瞬間點(diǎn)亮色彩。

你可能想有創(chuàng)意的交互能為網(wǎng)頁帶來什么？

挺多的，我舉例：一個(gè)連微動(dòng)效都沒有的靜態(tài)網(wǎng)頁你進(jìn)去后也就看見的這樣，那么如果這個(gè)網(wǎng)頁進(jìn)去時(shí)，內(nèi)容會(huì)有入場動(dòng)效，你是不是馬上能感覺到這個(gè)網(wǎng)站有點(diǎn)兒東西，要抄起鼠標(biāo)探索一番？換言之，好的交互創(chuàng)意甚至能讓你產(chǎn)生心流模式，你通過鼠標(biāo)到處點(diǎn)擊，頁面上不斷的給出動(dòng)畫效果，然后你收獲驚喜，最終促使你進(jìn)行更多的嘗試。

好了，說多了，就是希望為更多設(shè)計(jì)師提供設(shè)計(jì)思路或執(zhí)行概念，幫助大家找到更多的創(chuàng)意靈感。

首先了解 Web 端交互支持

Web 端交互圍繞計(jì)算機(jī)為中心。主要涉及鍵盤鼠標(biāo)兩類設(shè)備的交互，個(gè)別網(wǎng)站的產(chǎn)品可能會(huì)涉及麥克風(fēng)聲音采集或攝像頭應(yīng)用。

1. 鼠標(biāo)允許的交互

現(xiàn)在的鼠標(biāo)可以支持更多功能，但是通常來講需要嚴(yán)格的考慮兼容問題，所以僅以鼠標(biāo)左右鍵滾輪滾動(dòng)以及光標(biāo)映射選取為主；

• 光標(biāo)選中/hover
• 左鍵單擊
• 左鍵雙擊
• 左鍵連擊
• 左鍵長按
• 左鍵按住拖拽
• 右鍵單擊
• 右鍵雙擊
• 右鍵連擊
• 右鍵長按
• 右鍵按住拖拽
• 滾輪滑動(dòng)

以上所有交互都可以根據(jù)實(shí)際場景進(jìn)行設(shè)定，不過鑒于用戶習(xí)慣，一般不會(huì)用到快速的連擊交互以及右鍵的雙擊、長按或拖拽，這不符合交互手勢的舒適度或簡化易用的初衷。

2. 鍵盤交互支持

鍵盤支持大量的按鍵交互，除去一些全局的功能按鍵和組合快捷鍵，在網(wǎng)頁交互應(yīng)用中常見的還可以分為以下幾種情況；

• 數(shù)值、字母、符號(hào)輸入
• 某個(gè)指定按鍵單擊/雙擊/連擊/長按
• 用某個(gè)指定的或組合按鍵代表網(wǎng)頁上的功能
• tab 鍵切換網(wǎng)頁選項(xiàng)
• 用空格切換下一屏
• 方位鍵切換選項(xiàng)或移動(dòng)窗口視角
• ESC 退出視頻或全屏查看

在應(yīng)用鍵盤按鍵功能的時(shí)候，除去那些作用明確大眾悉知的按鍵功能，其他的按鍵操作應(yīng)該保證界面上有指引有提示。

常見的交互動(dòng)作組合

組合的交互動(dòng)作常配合不能簡單直接完成的任務(wù)，這里的組合指有兩個(gè)及以上交互動(dòng)作完成的類型，復(fù)雜的交互動(dòng)作盡量少用，且盡可能的為用戶提供操作指引，若非必要，費(fèi)力不討好；

• 鼠標(biāo)左鍵長按橫向拖拽
• 鼠標(biāo)左鍵長按上下拖拽
• 鼠標(biāo)左鍵長按任意拖拽
• 鼠標(biāo)左鍵長按繞中心拖拽
• 鍵盤方位鍵與鼠標(biāo)點(diǎn)擊
• 鍵盤指定按鍵加鼠標(biāo)點(diǎn)擊
• 多個(gè)按鍵組合使用
• 指定按鍵配合鼠標(biāo)長按
• 指定按鍵配合鼠標(biāo)長按拖拽

組合動(dòng)作主要分為以上 9 類，鼠標(biāo)拖拽的組合動(dòng)作通常會(huì)細(xì)分來應(yīng)對(duì)界面場景的應(yīng)用，例如通過橫向拖拽將一個(gè)豎放的圓柱物體旋轉(zhuǎn)起來，那么垂直的拖拽必然是沒辦法轉(zhuǎn)動(dòng)起來的，而且左右還會(huì)決定拖拽的方向。

交互影響的元素

簡單來講，無非就是看得見的元素、聽得見的元素。聽得見的元素?zé)o非就一個(gè)聲音，講深一點(diǎn)，也就涉及一些音效的交互控制。而看得見的元素則會(huì)相對(duì)豐富很多，如果再次細(xì)分的話還可以歸為以下幾種情況；

• 顏色（例如內(nèi)容被選取時(shí)的顏色變化）
• 文字（所有文字相關(guān)的樣式及狀態(tài)）
• 圖形（所有靜態(tài)可見圖形的樣式變化）
• 動(dòng)畫（所有的動(dòng)態(tài)內(nèi)容或交互動(dòng)效）
• 按鈕（所有可操作的按鈕及多狀態(tài)呈現(xiàn)）
• 控件（頁面中用于交互的控件元素）
• 模型（所有可交互的三維內(nèi)容）

1. 常見變化形式

位置變化、透明度變化、角度變化、大小變化、形狀變化、顏色變化、翻轉(zhuǎn)效果、特效變化

網(wǎng)頁交互的概念

web 端的交互概念即觸發(fā)到呈現(xiàn)的過程。用戶可以使用交互設(shè)備進(jìn)行事件觸發(fā)或變量，頁面則將內(nèi)容進(jìn)行對(duì)應(yīng)的呈現(xiàn)。其中交互過程主要影響的事件由“可交互的元素“、“功能交互“、“轉(zhuǎn)場切換“構(gòu)成。

頁面內(nèi)容呈現(xiàn)通常分為“默認(rèn)時(shí)“、“選擇時(shí)“、“運(yùn)行時(shí)”三個(gè)時(shí)態(tài)（鼠標(biāo)短暫的點(diǎn)擊時(shí)屬于“選擇時(shí)”，若長按有內(nèi)容影響則屬于“運(yùn)行時(shí)”），因此在網(wǎng)頁交互的過程中，我們需要考慮好這三種完整的狀態(tài)時(shí)呈現(xiàn)形式，另外在考慮補(bǔ)充合適的動(dòng)效進(jìn)行過濾或信息反饋。歸根到底網(wǎng)頁的交互概念就是控制內(nèi)容呈現(xiàn)罷了，這是網(wǎng)頁價(jià)值的本質(zhì)。

Web 端內(nèi)容呈現(xiàn)結(jié)構(gòu)

web 端內(nèi)容呈現(xiàn)的結(jié)構(gòu)應(yīng)該算是頁面交互的范疇吧，其實(shí)上網(wǎng)頁的頁面并不只是長頁面的形式，實(shí)際上會(huì)有更多種結(jié)構(gòu)可用。因?yàn)殡娔X顯示器更大的緣故，web 端結(jié)構(gòu)上比移動(dòng)端更加靈活，同時(shí)根據(jù)產(chǎn)品的性質(zhì)也有需要考慮移動(dòng)端響應(yīng)式的需求，一般來講這些頁面結(jié)構(gòu)可以分為以下六類：

1. 上下長屏滾動(dòng)結(jié)構(gòu)：通過長頁面布局內(nèi)容，頁面滾動(dòng)查看信息
2. 全屏上下切換結(jié)構(gòu)：每次定焦一屏的范圍顯示內(nèi)容，通過滾輪或按鈕上下切屏
3. 全屏左右切換結(jié)構(gòu)：同樣是定焦一屏顯示內(nèi)容，但采取左右切換結(jié)構(gòu)
4. 全屏頁面覆蓋結(jié)構(gòu)：基于全屏定焦顯示，頁面通過覆蓋式切換或跳轉(zhuǎn)，甚至鼠標(biāo)滾輪深入或淺出頁面。
5. 自適應(yīng)平鋪結(jié)構(gòu)：適用于頁面模塊小而簡單的時(shí)候，直接將模塊在屏幕內(nèi)一個(gè)個(gè)展開即可，一屏放不下時(shí)可以換行或繼續(xù)平鋪并定焦
6. 三維場景結(jié)構(gòu)：將內(nèi)容場景 3D 化，通常導(dǎo)航或部分 UI 控件會(huì)在屏幕上固定，然后可以采取定向鏡頭伸縮查看，也可以是環(huán)繞中心與自由移動(dòng)查看內(nèi)容信息

網(wǎng)頁的組成區(qū)塊通常分為五大類型，即導(dǎo)航、面包屑、背景、內(nèi)容呈現(xiàn)、彈出框。菜單導(dǎo)航欄通常分為頂部導(dǎo)航、側(cè)邊導(dǎo)航、底部導(dǎo)航、組合導(dǎo)航四大類，也有個(gè)別是通過點(diǎn)擊彈出的導(dǎo)航。內(nèi)容布局則更是五花八門了，是板式與技巧的呈現(xiàn)了。

14 種視覺層創(chuàng)意形式

個(gè)別產(chǎn)品本身也是創(chuàng)意的一部分，有一些可能界面交互平平，但是卻有著魔性或引人關(guān)注的產(chǎn)品內(nèi)容。而這里整理了些比較典型的視覺展現(xiàn)形式和交互創(chuàng)意形式的案例，這些方式通常可以根據(jù)產(chǎn)品的定位與特色進(jìn)行組合設(shè)計(jì)和開發(fā)呈現(xiàn)，讓你的網(wǎng)站更富有創(chuàng)意和較好的視覺體驗(yàn)；

1. 幾何色塊搭配文案

色塊搭配標(biāo)題文案，簡約大氣有視覺沖擊力，再也不用擔(dān)心沒有圖片或插畫素材了

2. 精美大圖背景搭配內(nèi)容

采用精美大圖背景搭配文案或交互控件，精美的圖片本身就很搶眼，再搭配標(biāo)題大字，瞬間就使得頁面有沖擊感有層次，常見于游戲官網(wǎng)或活動(dòng)專題

3. 關(guān)聯(lián)插畫或圖標(biāo)搭配文案

采用小范圍的插畫或圖標(biāo)來表達(dá)服務(wù)或產(chǎn)品優(yōu)勢，搭配文案說明，風(fēng)格統(tǒng)一精致耐看。常見于服務(wù)描述或產(chǎn)品說明模塊應(yīng)用

4. 留白大圖搭配文案

將某個(gè)產(chǎn)品或其他元素放大顯示再結(jié)合極簡的排版說明，有較好的視覺沖擊力和產(chǎn)品凸顯效果，同時(shí)留白保證呼吸感和減少視覺噪點(diǎn)，使得用戶能夠更加專注產(chǎn)品圖

5. 動(dòng)態(tài)的背景或微動(dòng)效裝飾

應(yīng)用動(dòng)態(tài)背景或微動(dòng)效的元素裝飾，有較好的內(nèi)容吸引力或氛圍渲染力，可以展現(xiàn)更多的產(chǎn)品細(xì)節(jié)或豐富畫面層次感，不過也比較考驗(yàn)視頻本身或動(dòng)效裝飾自身質(zhì)量

6. 點(diǎn)線面裝飾與文案排版

應(yīng)用簡單點(diǎn)線面元素去裝飾界面，再結(jié)合有對(duì)比有版式的文案排版。頁面簡潔美觀，適合簡約干凈少圖的頁面模塊

7. 柵格化應(yīng)用與板式跳躍率

應(yīng)用柵格化與版式跳躍率，使界面整體充滿平面藝術(shù)，富有節(jié)奏感且不顯凌亂。在日本的網(wǎng)頁設(shè)計(jì)上有大量應(yīng)用

9. 充滿個(gè)性的視覺裝扮

采用卡通化、科技感、故障效果、毛玻璃效果、賽博朋克風(fēng)、手繪插畫等視覺風(fēng)格，來打造符合產(chǎn)品的特殊視覺效果，為網(wǎng)頁印象加分，提升品牌感染力

10. 引用 3D 視覺裝飾

運(yùn)用 3D 視覺搭建頁面場景，常見的有 3D 圖標(biāo)、3D 動(dòng)效或 3D 產(chǎn)品大圖等，有較強(qiáng)畫面立體感和表達(dá)能力，視覺新穎讓人眼前一亮，也是當(dāng)前的一種視覺趨勢效果

11. 產(chǎn)品元素或其他元素來填充背景

將品牌元素進(jìn)行弱化處理后作為背景墻，凸顯個(gè)性和豐富畫面，結(jié)合微動(dòng)效可以有進(jìn)一步的效果增強(qiáng)

12. 矩形陳列或卡片陳列

將內(nèi)容模塊用矩形陳列顯示或卡片陳列，Win10 菜單或 WP 系統(tǒng)的手機(jī)桌面有較好體現(xiàn)，特點(diǎn)是干凈利落模塊分明，適合同類模塊較多的場景進(jìn)行排列顯示

13. 極致的簡約

采用極簡的方式呈現(xiàn)內(nèi)容核心，可以是一張圖一段字、一段文案排版等，總之就這么簡單的搞定了

14. 魔幻或神秘感界面呈現(xiàn)

如示例網(wǎng)址一樣，魔幻且神秘，有著迷之吸引力和趣味性，不過需要慎用，比較惡搞。而適當(dāng)給出一些神秘感，可以使得頁面內(nèi)容更有吸引力，用戶更愿意去點(diǎn)擊嘗試。

24 種交互層創(chuàng)意形式

主要是關(guān)于頁面內(nèi)容元素交互時(shí)的創(chuàng)意形式講解，這里不對(duì)交互動(dòng)效或特效細(xì)節(jié)進(jìn)行過多說明，因?yàn)樵趺慈?dòng)又或者用什么樣的特效去呈現(xiàn)實(shí)在數(shù)不清說不完，如果有興趣可以參考一下文中的精選案例視頻整理和提供的一些體驗(yàn)合集地址。

1. 光標(biāo)跟隨動(dòng)畫

會(huì)使頁面上的元素根據(jù)光標(biāo)的位置或移動(dòng)產(chǎn)生相應(yīng)變換，增加頁面的互動(dòng)性與趣味，適用于裝飾或加強(qiáng)背景層次感，在特定的場景也可以使整套控制 UI 往鼠標(biāo)移動(dòng)的方向微微靠近，結(jié)合菲茲定律公式，距離的不斷縮減也能夠加快選中的效率）

2. 鼠標(biāo)懸浮動(dòng)畫

簡單易用的鼠標(biāo)懸浮動(dòng)畫，用于聚焦顯示或 Tooltip 說明，常用與內(nèi)容選中狀態(tài)區(qū)分或元素細(xì)節(jié)展示，加上一組好的動(dòng)效創(chuàng)意非常能夠凸顯個(gè)性，使用戶感到驚喜為體驗(yàn)加分

如果是一個(gè)完整動(dòng)畫緩慢播放完會(huì)更有敘述性

3. 鼠標(biāo)點(diǎn)擊特效

由鼠標(biāo)點(diǎn)擊進(jìn)行觸發(fā)，基本樣式即點(diǎn)擊狀態(tài)顯示，觸發(fā)后的特效可以是圖標(biāo)動(dòng)畫、光效、音效、界面動(dòng)畫等，游戲場景中較為常見，點(diǎn)擊后不僅有光效反饋還有音效附和，這是一種觸發(fā)反饋效果。

4. 鼠標(biāo)長按特效

當(dāng)鼠標(biāo)長按某個(gè)按鈕時(shí)持續(xù)出現(xiàn)的特殊效果，一般是持續(xù)鼠標(biāo)點(diǎn)擊的特效或維持某個(gè)元素的變化效果，通常對(duì)數(shù)值持續(xù)增減動(dòng)作較為常見，可以代替連續(xù)的點(diǎn)擊，交互更輕松。也或者是需要一定的加載時(shí)間所以用長按配合

通過長按持續(xù)增加細(xì)菌圓點(diǎn)

5. 鼠標(biāo)拖拽特效

通過鼠標(biāo)點(diǎn)擊長按某個(gè)元素進(jìn)行移動(dòng)的組合交互，一般用于拖拽移動(dòng)、內(nèi)容繪制、元素連接等。應(yīng)用場景廣，互動(dòng)性較高，能為用戶帶來更多的參與感和趣味性，甚至制造小驚喜

示例內(nèi)容：阿里內(nèi)測的 Real 3D

6. 鼠標(biāo)滾輪巧妙的聯(lián)動(dòng)效果

主要用于頁面某個(gè)值的控制或頁面滾動(dòng)，在頁面滾動(dòng)的時(shí)候可以配合控制元素變化來實(shí)現(xiàn)更具創(chuàng)意的展現(xiàn)效果，通常元素透明度、位置、大小、序列圖都可以控制

國內(nèi)官網(wǎng)

7. 鼠標(biāo)選中自動(dòng)展開

鼠標(biāo)經(jīng)過選項(xiàng)時(shí)自動(dòng)展開選項(xiàng)并聚焦，可以省去鼠標(biāo)點(diǎn)開的動(dòng)作，但不適用于選項(xiàng)內(nèi)容較多且內(nèi)容密集的場景

8. 按鍵與鼠標(biāo)配合觸發(fā)

通過指定按鍵和鼠標(biāo)配合交互進(jìn)行觸發(fā)，適用于同界面的復(fù)雜交互場景，且存在某些變量需要鼠標(biāo)控制。如果你的網(wǎng)頁內(nèi)交互豐富且包含變量元素，不妨試試看

9. 模塊或分頁加載動(dòng)效

在頁面滑動(dòng)或分頁信息加載時(shí)，界面構(gòu)成元素有序的緩入進(jìn)場。采用流暢的動(dòng)效演示數(shù)據(jù)加載的過程，緩解數(shù)據(jù)加載渲染壓力的同時(shí)，使得用戶可以更加從容不迫地瀏覽信息，讓界面呈現(xiàn)更加精致優(yōu)雅

10. 趣味轉(zhuǎn)場或加載等候

應(yīng)用轉(zhuǎn)場效果與 Loading 動(dòng)畫，運(yùn)用某個(gè)元素變大覆蓋或頁面移動(dòng)交替轉(zhuǎn)場，而非生硬的直接替換，使得頁面切換更有趣味和層級(jí)關(guān)系體現(xiàn)。再對(duì)加載較慢的內(nèi)容補(bǔ)充 Loading 動(dòng)畫，緩解用戶焦慮的同時(shí)還能延展品牌信息

11. 大圖或多圖輪播應(yīng)用

精美的圖片總是想要放大看，看了還想看。運(yùn)用超大的輪播圖展示與沉浸式功能布局，滿足用戶操作與大圖賞析

12. 內(nèi)容穿插滾動(dòng)

運(yùn)用特殊的圖層順序結(jié)構(gòu)，在頁面滾動(dòng)查看時(shí)，形成奇妙的元素穿梭視感。通常會(huì)穿梭替換背景或讓元素接力，這樣相比靜態(tài)寫實(shí)的頁面滾動(dòng)時(shí)會(huì)更有層次感

13. 內(nèi)容自動(dòng)生成

輸入關(guān)鍵內(nèi)容后，頁面自動(dòng)生成結(jié)果進(jìn)行呈現(xiàn)，整個(gè)過程可以是緩慢有序的，適用于降壓或畫面創(chuàng)意生成的產(chǎn)品，可以讓用戶感受整個(gè)過程與細(xì)節(jié)變化

14. 游戲互動(dòng)模式

將產(chǎn)品內(nèi)容以游戲的形式或交互呈現(xiàn)，讓內(nèi)容充滿趣味和互動(dòng)性，使得用戶在參與游戲互動(dòng)的過程中打破了常規(guī)的閱讀體驗(yàn)

15. 三維或全景空間

建立一個(gè)三維或者全景空間進(jìn)行查看或操作，再賦予操作按鈕或說明，實(shí)現(xiàn) 3D 場景的交互與視覺效果，常用與地圖全景查看或 3D 游戲應(yīng)用，可以巧妙的結(jié)合產(chǎn)品 3D 模型，打造非凡的互動(dòng)體驗(yàn)

16. 一鏡到底的視角呈現(xiàn)

打造一個(gè)非平面的視覺場景。用鼠標(biāo)點(diǎn)擊或滾輪聯(lián)動(dòng)交互利用分層的元素變化，營造出由近到遠(yuǎn)或由上至下的一鏡到底的視角穿梭體驗(yàn)。界面場景切換更加自然，還有超強(qiáng)的空間感與趣味性，讓人難以忘懷如臨其境。

17. 按鍵交互效果

將某些功能或任務(wù)引用按鍵進(jìn)行交互或觸發(fā)。常使用字母、數(shù)字、空格、方位鍵，界面需要有提示對(duì)用戶進(jìn)行指導(dǎo)。

18. 個(gè)性的模塊展現(xiàn)方式

常見的有彈窗、抽屜、卡片展開、轉(zhuǎn)盤等，通過個(gè)性輕松的顯示結(jié)構(gòu)與交互方式也能讓人眼前一亮。

19. 可交互的顏色或圖形

對(duì)一些顏色或形狀元素提供切換或 DIY 的空間，允許用戶進(jìn)行意料之外的交互或配置能力，提升網(wǎng)頁趣味性或用戶個(gè)性化需求滿足。

20. 音視頻媒體控制

圍繞產(chǎn)品介紹的媒體內(nèi)容，常見有視頻或音頻且支持基本交互控制，結(jié)合場景需求可以豐富交互的形式或更多媒體控制功能，例如長按快進(jìn)、倒退、剪輯、混音等，常用于娛樂互動(dòng)場景或音視頻類產(chǎn)品。

21. 內(nèi)容或窗口抖動(dòng)

通過抖動(dòng)進(jìn)行報(bào)錯(cuò)或反饋，常見為密碼輸入錯(cuò)誤時(shí)或游戲中受到傷害的場景，可伴隨音效提示一起。使用場景不廣泛，但是也可以進(jìn)行創(chuàng)意應(yīng)用，例如抖掉灰塵小游戲，長按元素抖動(dòng)干凈為止。

22. 打造儀式感

結(jié)合現(xiàn)實(shí)場景中的交互方式，打造相似的線上場景幫助用戶共情帶入，再配合交互和動(dòng)效完成類似的動(dòng)作，為用戶帶來儀式感和共情效果。

23. 有聲交互

通過麥克風(fēng)采集聲音來影響交互，是一種聲音的交互，如果網(wǎng)站支持，甚至可以語音交互，是一種少見的網(wǎng)頁交互形式，并非傳統(tǒng)的音視頻控制而已。

24. 鏡頭交互

通過攝像頭授權(quán)獲取鏡頭畫面進(jìn)行交互，通常是一些鏡頭濾鏡效果或者增強(qiáng)現(xiàn)實(shí)技術(shù)結(jié)合做交互創(chuàng)意，網(wǎng)頁上少見新穎。

網(wǎng)頁創(chuàng)新設(shè)計(jì)的方法

找對(duì)方法去創(chuàng)新很重要！在實(shí)際工作中，我們不僅要衡量界面設(shè)計(jì)與交互效果，同時(shí)還要兼顧開發(fā)資源、實(shí)現(xiàn)難度以及產(chǎn)品架構(gòu)本身考慮。對(duì)此我們也需要了解一下開發(fā)實(shí)現(xiàn)的概念，之后再研究如何進(jìn)行創(chuàng)新設(shè)計(jì)。

1. 開發(fā)者的痛點(diǎn)與解決方案

在進(jìn)行創(chuàng)意設(shè)計(jì)時(shí)不考慮開發(fā)，那不是自嗨就是對(duì)開發(fā)耍流氓。靜態(tài)界面開發(fā)或簡易的切換效果并不難。而代碼層的圖形變化效果、仿物理效果(例如反彈、律動(dòng)、重力等效果)、3D 交互效果相對(duì)會(huì)復(fù)雜許多。大多的動(dòng)效不能依賴 GIF 或 Lottie 進(jìn)行解決，這對(duì)交互控制或性能優(yōu)化都是挑戰(zhàn)，而代碼能夠更好的保障這倆點(diǎn)，所以大量的交互動(dòng)效還是需要開發(fā)者支持，而代碼實(shí)現(xiàn)顯然會(huì)比設(shè)計(jì)師產(chǎn)出復(fù)雜。

那么如何解決呢？

CSS 進(jìn)行實(shí)現(xiàn)，部分動(dòng)畫元素可以由設(shè)計(jì)師通過第三方軟件或在線生成 CSS、Svga、lottie 文件（相對(duì)下 lottie 更消耗性能，在線生成 icon 動(dòng)畫代碼： https://loading.io/ ，在線 Lottie 模版搭配使用： https://design.alipay.com/emotion ，自主繪制導(dǎo)出 lottie： http://airbnb.io/lottie/ ，Svga 在線創(chuàng)造： https://www.svgator.com/ ，2D 動(dòng)畫制作： http://zh.esotericsoftware.com/ ）。而大部分的特殊物理效果或特殊動(dòng)效，其實(shí)會(huì)有可用的第三方庫或代碼資源來解決，首先就是保證你所設(shè)計(jì)出來的動(dòng)效是可行的，過于逆天可能還是有難度，剩下的便是提供動(dòng)效關(guān)鍵詞方便開發(fā)查找相關(guān)資源，或者你給出參考來源。常見的代碼動(dòng)效素材網(wǎng)有： https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等（歡迎補(bǔ)充哈，別藏著掖著）。對(duì)于 3D 效果的前端開發(fā)呢，暫推薦新開源的 Oasis 引擎或 Three js 這些來實(shí)現(xiàn)，當(dāng)然其他引擎也沒問題。2. 網(wǎng)頁創(chuàng)新設(shè)計(jì)的策略考慮

考慮到創(chuàng)新開發(fā)的背景情況不一致，這里我提供了一些創(chuàng)新研發(fā)的策略提供參考：

傳統(tǒng)改版：

1.明確改版目的，挖掘價(jià)值點(diǎn)

會(huì)議說明，清楚改版需求的背景與痛點(diǎn)，挖掘價(jià)值找到設(shè)計(jì)發(fā)力點(diǎn)

制定改版目標(biāo)，明確分工計(jì)劃，同步項(xiàng)目情況

2. 構(gòu)建原型框架，評(píng)審優(yōu)化

設(shè)計(jì)新版架構(gòu)，確認(rèn)范圍層細(xì)節(jié)（功能型：功能規(guī)格支持。信息型：內(nèi)容需求），完善流程與信息框架，然后拉攏項(xiàng)目相關(guān)人員進(jìn)行評(píng)審優(yōu)化，直到新版框架大體定型后，再進(jìn)行視覺層輸出

3. 明確產(chǎn)品定位，建立設(shè)計(jì)語言

要保障產(chǎn)品氣質(zhì)與視覺風(fēng)格的契合，即一個(gè)資訊網(wǎng)站肯定不適合采用電商視覺進(jìn)行輸出。然后根據(jù)內(nèi)容占比，考慮呈現(xiàn)的布局方式，即不同模塊中的視頻、圖片、文字比例情況。然后你可以結(jié)合上文的視覺層創(chuàng)意形式進(jìn)行套用，當(dāng)主要的靜態(tài)視覺設(shè)計(jì)完成后即可進(jìn)入評(píng)審階段

4. 高保真評(píng)審，挖掘交互創(chuàng)新點(diǎn)

對(duì)網(wǎng)頁高保真進(jìn)行評(píng)審，確認(rèn)頁面信息框架或界面設(shè)計(jì)可行。然后對(duì)交互創(chuàng)新方案探討，結(jié)合網(wǎng)頁的板式設(shè)計(jì)，提出交互創(chuàng)新的細(xì)節(jié)，與開發(fā)者同步，確保實(shí)現(xiàn)的可行性與項(xiàng)目工時(shí)可控，同時(shí)披露交互細(xì)節(jié)幫助開發(fā)者進(jìn)行調(diào)研或準(zhǔn)備

5. 交互創(chuàng)新對(duì)齊開發(fā)，進(jìn)入研發(fā)階段

準(zhǔn)備提供交互的細(xì)節(jié) Demo 或參考內(nèi)容，在基礎(chǔ)內(nèi)容開發(fā)完成后或開發(fā)者認(rèn)為適合介入的時(shí)機(jī)，進(jìn)行交互創(chuàng)新內(nèi)容的對(duì)齊，使創(chuàng)新方案在最小可行的基礎(chǔ)上進(jìn)行開發(fā)實(shí)現(xiàn)。之后建議設(shè)計(jì)同學(xué)耐心的陪同開發(fā)小哥進(jìn)行還原，確保效果

6. 測試驗(yàn)收，預(yù)發(fā)上線

最后進(jìn)行成果驗(yàn)收，確?；镜膬?nèi)容是否符合標(biāo)準(zhǔn)，再根據(jù)工時(shí)情況或上線計(jì)劃等，考慮交互創(chuàng)新部分的細(xì)節(jié)還原調(diào)試，適公司實(shí)際情況可以考慮再迭代一版。之后根據(jù)產(chǎn)品情況自行考慮是否 A/B 測試、灰度上線等，上線后就是線上數(shù)據(jù)跟進(jìn)或用戶調(diào)研了，希望你的新版本收獲一片叫好 哈哈

敏捷開發(fā)：

對(duì)于想要敏捷實(shí)現(xiàn)目標(biāo)的話，可以采用谷歌沖刺法（Google Sprint)，當(dāng)前基本分為六個(gè)階段進(jìn)行，分析理解階段、定義階段、發(fā)散思考階段、決策階段、原型產(chǎn)出階段、測試驗(yàn)收階段。這里我結(jié)合交互創(chuàng)新的方法，對(duì)多個(gè)階段進(jìn)行了補(bǔ)充，內(nèi)容如下：

1. Understand 理解

明確建站目的、需求背景、梳理業(yè)務(wù)或用戶需求。通過用戶研究或競品分析等手段，更好的理解產(chǎn)品、行業(yè)現(xiàn)狀以及痛點(diǎn)機(jī)會(huì)，也為后面階段提供可靠的依據(jù)或支撐

2. Define 定義

基于對(duì)此次建站需求與背景深度理解，定義產(chǎn)品設(shè)計(jì)目標(biāo)，挖掘價(jià)值點(diǎn)

3. Diverge 發(fā)散

讓參與者們集思廣益，發(fā)散思考，將不同的點(diǎn)子記錄下來，最好圖文并茂的畫一下，然后形成自己的方案。在這個(gè)過程中不必共處一室，獨(dú)立進(jìn)行即可，這樣可以避免被帶偏或擾亂

4. Decide 決策

方案決策環(huán)節(jié)，產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)小哥等將各自的方案進(jìn)行展示說明，這個(gè)過程中不要急著評(píng)價(jià)對(duì)方，只要投票選出最佳方案即可，這是一個(gè)方案的根基，之后再進(jìn)行優(yōu)化和細(xì)節(jié)完善

5. Prototype 原型

建議先將方案框架進(jìn)行原型繪制或 demo 產(chǎn)出，然后經(jīng)過一輪初步測試評(píng)審后可以再次優(yōu)化復(fù)盤。在原型繪制的過程中，主要是確認(rèn)流程與信息框架，不必著急視覺層的問題。若準(zhǔn)備進(jìn)入視覺設(shè)計(jì)，則可以帶入這幾個(gè)問題進(jìn)行思考；

• 了解框架結(jié)構(gòu)，采取合適的布局方式（參考上文）
• 明確產(chǎn)品定位，挖掘符合產(chǎn)品氣質(zhì)的設(shè)計(jì)方案（制定初步的視覺規(guī)范）
• 根據(jù)產(chǎn)品屬性，頁面內(nèi)容類型選取合適的視覺創(chuàng)意形式（可參考上文）
• 靜態(tài)頁面基本確認(rèn)的情況，添加交互創(chuàng)意畫龍點(diǎn)睛（網(wǎng)頁內(nèi)容呈現(xiàn)是核心，所以交互創(chuàng)意放在后面考慮，確保項(xiàng)目最小可行性優(yōu)先）

6.Validate 驗(yàn)證

首先通過內(nèi)部自測優(yōu)化，再根據(jù)產(chǎn)品類型考慮是否找利益相關(guān)者進(jìn)行可用性測試驗(yàn)證，或者找專家做顧問。之后再進(jìn)行下一步的優(yōu)化完善即可

網(wǎng)頁框架如何搭配創(chuàng)意形式

也許講了這么多，你還是不知道前面諸多的創(chuàng)意方式怎么用，沒關(guān)系，這里我進(jìn)行了簡單的整理對(duì)標(biāo)，希望你看完還有救！

1. 明確產(chǎn)品定位

網(wǎng)站本身即視為一個(gè)產(chǎn)品，一個(gè)產(chǎn)品的風(fēng)格定向一定是由產(chǎn)品本身屬性或用戶屬性影響，了解產(chǎn)品定位或目標(biāo)用戶也是重要的環(huán)節(jié)，這些環(huán)節(jié)可以制定更符合產(chǎn)品或用戶的信息框架或視覺表現(xiàn)。通常我們可以將網(wǎng)站類型分為企業(yè)官網(wǎng)、品牌官網(wǎng)、營銷官網(wǎng)、門戶網(wǎng)站、論壇相關(guān)、綜合網(wǎng)站六大類，這里簡單講一下這些網(wǎng)站定位與視覺特征；

1.  企業(yè)官網(wǎng)風(fēng)格較為莊重正式，個(gè)性化體現(xiàn)少且相對(duì)板正些；
2. 品牌官網(wǎng)內(nèi)容是多元化的，視覺與交互都更具個(gè)性化，沒有太多表現(xiàn)限制，傳遞品牌優(yōu)勢或能力為主；
3. 營銷網(wǎng)站更加體現(xiàn)產(chǎn)品或業(yè)務(wù)能力，并且都有相關(guān)咨詢或消費(fèi)入口，圖片插畫應(yīng)用不會(huì)少；
4. 門戶網(wǎng)站是指提供某類綜合性互聯(lián)網(wǎng)信息資源并提供有關(guān)信息服務(wù)的應(yīng)用系統(tǒng)，內(nèi)容多緊湊型；
5. 論壇相關(guān)又稱 BBS，是聚集用戶進(jìn)行資訊、情感、娛樂等領(lǐng)域的電子公告系統(tǒng)，導(dǎo)航多，偏資訊；
6. 綜合網(wǎng)站，內(nèi)容結(jié)構(gòu)更豐富，如企業(yè)營銷品牌一體化，通常是產(chǎn)品營銷做核心，圖文搭配干活不累；

2. 信息框架決定板式細(xì)節(jié)

通常一個(gè)網(wǎng)頁怎么設(shè)計(jì)版式、如何調(diào)整布局結(jié)構(gòu)、調(diào)整基礎(chǔ)交互，都是需要參考原型的信息框架。信息框架中的元素情況會(huì)直接影響視覺輸入和基本交互。如信息框架中有很多圖，那么設(shè)計(jì)時(shí)就需要考慮是平鋪直敘還是輪播顯示。

信息框架設(shè)計(jì)學(xué)習(xí)：《Web 信息框架》

那么關(guān)于不同的信息架構(gòu)有什么好的布局方法嗎？這一點(diǎn)通過內(nèi)容的搭配形式，整理了幾種方式供參考：

文の處理：

通常一個(gè)純文本的界面是很難設(shè)計(jì)的，因?yàn)檫^于單調(diào)，對(duì)此可采用

• 幾何色塊進(jìn)行搭配，配合字號(hào)對(duì)比形成沖擊力
• 點(diǎn)線面裝飾，標(biāo)點(diǎn)符號(hào)箭頭等都可以合理運(yùn)用
• 利用板式跳躍率排版，有大有小有節(jié)奏有對(duì)比
• 補(bǔ)充插畫搭配文案，采用小范圍插畫彌補(bǔ)單調(diào)
• ……

圖の處理：

純圖片的形式不多見，但是不能否定，一般可能是圖本身有一定的信息傳達(dá)，或者是圖片瀏覽類型的服務(wù)

1. Banner 走馬燈的形式進(jìn)行大圖輪播
2. 大圖展示加預(yù)覽切換控件
3. 非全屏圖片展示，配合 hover 狀態(tài)提示切換，或屏幕上顯示切換按鈕，適合全屏布局
4. 圖片響應(yīng)式陳列排放，鼠標(biāo)懸浮選中時(shí)進(jìn)行聚焦放大
5. 環(huán)繞顯示，通過鼠標(biāo)拖拽或按鈕切換聚焦對(duì)象
6. 多張圖可陳列擺放或通過大小對(duì)比疊加擺放，也以柵格化錯(cuò)位擺放，再適當(dāng)?shù)呐浜锨袚Q控件

圖文の處理：

少量圖文配套是比較好處理的，手法也比較多，根據(jù)配套數(shù)量情況還可以調(diào)換位置形成錯(cuò)位區(qū)分模塊

1. 大圖背景鋪滿加遮罩文案，控件與內(nèi)容少可采用全屏切換的頁面交互
2. 圖片摳圖加文案左右排版，注意留白。多組可左右調(diào)換位置往下排布，或者使用不同的背景色分割
3. 圖片陳列分割或多個(gè)橫向排布，文字可以在圖上下方擺放或圖內(nèi)加遮照顯示，也可以鼠標(biāo)懸浮聚焦時(shí)顯示
4. 小圖片配合加大文案疊加顯示，突出文字，圖片為輔

視頻の處理：

視頻的處理分為自動(dòng)跟手動(dòng)控制，自動(dòng)即作為背景自動(dòng)播放，可進(jìn)行簡單的切換，手動(dòng)則要注意相關(guān)按鈕布局和顯示遮擋問題

1. 視頻封面配合播放按鈕做入口，不用直接播放，入口可以更小數(shù)量更多，點(diǎn)擊后畫中畫或全屏播放都行
2. 設(shè)定好視頻播放的大小或位置，給予封面以及播放按鈕提示，或者鼠標(biāo)移入范圍顯示播放按鈕
3. 單個(gè)模塊的多視頻交互最好給予切換按鈕，或者加以帶縮略封面的切換欄進(jìn)行處理，以減少視頻模塊的占比
4. 在能夠保證內(nèi)容播放清晰的情況下可以多個(gè)陳列擺放，鼠標(biāo)移入目標(biāo)時(shí)可以直接播放達(dá)到視頻預(yù)覽效果

圖文視頻の混合：

通常圖文視頻混合的情況很少見，視覺焦點(diǎn)不好控制，其中視頻做背景是最好處理的，但內(nèi)容信息不易過多

1. 視頻做背景，少量圖文或按鈕搭建頁面框架，確保視頻內(nèi)容不被過分遮擋，也能較好兼容這些元素
2. 在視頻未播放前，也可以疊加遮罩與相關(guān)圖文信息或按鈕控件，點(diǎn)擊播放按鈕后，收起即可
3. 通過鼠標(biāo)懸浮選中目標(biāo)后，Tips 浮框顯示額外的圖文視頻信息或按鈕控件即可
4. 小范圍播放視頻支持全屏，使得圖片文字視頻能夠在有限的范圍顯示更多有效內(nèi)容
5. 半沉浸式全屏視頻交互，采用幽靈式風(fēng)格將圖文按鈕控件等往屏幕邊緣分布，留出核心區(qū)域交互視頻或觀看

三維の處理：

因?yàn)槭侨S的場景，所以需要考慮到三維場景下的視角形式與操作方式

1. 固定視角，有一個(gè)固定的場景和視角，可以通過交互使場景的內(nèi)容發(fā)生變化，內(nèi)容和操作可以輕量化
2. 穿梭視角，通過交互場景中的圖或模型，形成向前后穿梭的效果，適合多層內(nèi)容逐步查看或過程演變
3. 自由視角，控制元素或視角在場景中自由移動(dòng)，或者圍繞某個(gè)元素全景查看，適合細(xì)節(jié)展示或空間體驗(yàn)
4. 固定操作，指固定的操作按鈕布局或通過鍵盤控制場景變化，適合場景中效果簡易有規(guī)律的產(chǎn)品
5. 三維操作，在三維場景中含有鼠標(biāo)可以選取操作的元素，適合帶有場景元素互動(dòng)、交互豐富的產(chǎn)品

按鈕の處理：

按鈕是網(wǎng)頁中最常見的交互控件，是頁面扭轉(zhuǎn)或功能啟用的基礎(chǔ)

1. 色塊按鈕，色塊式的按鈕，有視覺明顯易觸達(dá)的優(yōu)點(diǎn)
2. 線性按鈕，用于弱化顯示或透出背景內(nèi)容時(shí)較為常見的按鈕樣式
3. 鼠標(biāo)懸浮按鈕，不直接顯示而通過鼠標(biāo)經(jīng)過相關(guān)模塊時(shí)顯示對(duì)應(yīng)按鈕
4. 元素按鈕事件，對(duì)圖文內(nèi)容加上點(diǎn)擊事件，通按鈕使用，例如超鏈接

控件の處理：

控件組適用于復(fù)雜場景的任務(wù)交互，通常由多個(gè)按鈕或控件單元組成，特點(diǎn)就是控件單元多模塊占比大

1. 覆蓋式卡片，通過卡片承載控件，控件多了就用更大的卡片唄
2. 幽靈式控件，線性樣式展示控件來兼容背景，并結(jié)合鼠標(biāo)懸浮加強(qiáng)選擇樣式
3. 為控件留白，留出控件交互的區(qū)域，通常采用留白或純色背景來陳列控件組
4. 鼠標(biāo)懸浮展開，結(jié)合圖標(biāo)或直接隱藏，在鼠標(biāo)懸浮選中時(shí)顯示相關(guān)控件詳情
5. 展開收起式控件組，小面積顯示核心控件，配合展開收起按鈕隱藏更多
6. 折疊按鈕與跳轉(zhuǎn)，通過按鈕入口觸發(fā)新的彈框，或者打開新的頁面來陳列控件組完成任務(wù)

3. 交互創(chuàng)意如何下手

結(jié)合信息框架對(duì)不同元素類型進(jìn)行視覺設(shè)計(jì)調(diào)整后，再對(duì)頁面內(nèi)容的基本交互進(jìn)行考慮，例如輪播、切換、彈出、展開收起、轉(zhuǎn)場等。之后才是更加細(xì)膩的交互創(chuàng)意思考。

基本交互發(fā)力點(diǎn)

鼠標(biāo)經(jīng)過反饋：常見且重要的交互方式，通過鼠標(biāo)經(jīng)過時(shí)反饋選中狀態(tài)或提示相關(guān)信息

按鈕點(diǎn)擊反饋：在鼠標(biāo)點(diǎn)擊后，按鈕或控件的顏色形狀變換效果，用于反饋點(diǎn)擊成功，實(shí)現(xiàn)眼手體驗(yàn)一致

按鈕長按效果：長按狀態(tài)的動(dòng)效示意，通過對(duì)長按目標(biāo)加動(dòng)畫響應(yīng)進(jìn)度或持續(xù)的狀態(tài)，而非單純的變色或樣式切換

完善 Loading 動(dòng)畫：如點(diǎn)擊上傳下載更新等，出現(xiàn)對(duì)應(yīng)進(jìn)度條或 loading 動(dòng)畫幫助用戶完善體感

內(nèi)容入出場動(dòng)效：頁面切換加載或滑動(dòng)頁面后，內(nèi)容采取動(dòng)效有序的進(jìn)入場景定格，而非生硬的靜態(tài)切換

多內(nèi)容輪播應(yīng)用：對(duì) Banner 或其他多個(gè)內(nèi)容展現(xiàn)，進(jìn)行輪播交互完善和時(shí)間細(xì)節(jié)控制

錦上添花交互發(fā)力點(diǎn)

按鈕切換動(dòng)畫：通過 icon 的路徑動(dòng)畫表達(dá)按鈕切換，而非直接的圖標(biāo)對(duì)換，更具個(gè)性和視覺觀賞性

鼠標(biāo)跟蹤動(dòng)畫：可以適當(dāng)?shù)淖鲆恍┦髽?biāo)跟蹤事件，讓一些背景或界面元素跟隨鼠標(biāo)律動(dòng)起來，增強(qiáng)互動(dòng)

特殊滾輪聯(lián)動(dòng)效果：通過鼠標(biāo)滾動(dòng)聯(lián)動(dòng)其他元素進(jìn)行交互變化，來呈現(xiàn)更有創(chuàng)意的場景切換或內(nèi)容展示

內(nèi)容穿插滾動(dòng)：將內(nèi)容分層控制，頁面滾動(dòng)時(shí)將元素固定或交替顯示，產(chǎn)生穿梭感提升界面層次

響應(yīng)式展開收起：主要用于二級(jí)或下級(jí)內(nèi)容的自動(dòng)展開，由鼠標(biāo)經(jīng)過自動(dòng)展開并聚焦，減少用戶操作

結(jié)合音視頻媒體控制：在頁面中植入音視頻內(nèi)容通過按鍵或鼠標(biāo)進(jìn)行交互或切換，打造互動(dòng)性更高的媒體傳達(dá)

趣味轉(zhuǎn)場或頁面加載：對(duì)頁面轉(zhuǎn)場或加載深度優(yōu)化。采取更有創(chuàng)意的方式或動(dòng)畫來過渡，讓視覺體驗(yàn)提升億點(diǎn)點(diǎn)

內(nèi)容或窗口抖動(dòng)報(bào)錯(cuò)：合理采用抖動(dòng)效果進(jìn)行報(bào)錯(cuò)反饋或特殊場景應(yīng)用，使呆板提示更靈動(dòng)

可 DIY 的顏色或圖形：提供主題或模塊的 DIY 空間，滿足用戶編輯符合自己喜好的視覺效果

結(jié)合產(chǎn)品的場景創(chuàng)意

打造個(gè)性的模塊呈現(xiàn)方式：結(jié)合產(chǎn)品的應(yīng)用場景打造有個(gè)性的呈現(xiàn)方式

打造游戲互動(dòng)的呈現(xiàn)：將有劇情有故事的產(chǎn)品或內(nèi)容游戲化，可以讓用戶趣味互動(dòng)更加深刻

打造一鏡到底的轉(zhuǎn)場：結(jié)合鼠標(biāo)滾輪聯(lián)動(dòng)做鏡頭創(chuàng)意，突出產(chǎn)品細(xì)節(jié)或內(nèi)容呈現(xiàn)

打造三維或全景場景：根據(jù)產(chǎn)品屬性考慮用三維的場景來增強(qiáng)互動(dòng)與突出產(chǎn)品

打造儀式感交互：利用視覺和交互變化來制作符合產(chǎn)品的應(yīng)用效果，實(shí)現(xiàn)儀式感線上體驗(yàn)

有聲交互：比較少見，視產(chǎn)品情況應(yīng)用，可以使聲音產(chǎn)生互動(dòng)或視覺影響

鏡頭交互：適合有鏡頭針對(duì)性應(yīng)用的產(chǎn)品采用，需要授權(quán)，要做好隱私說明

補(bǔ)充按鈕交互觸發(fā)：在場景更為復(fù)雜交互需求更多后，進(jìn)行的常規(guī)解決方法

補(bǔ)充按鍵與鼠標(biāo)配合交互：適合按鍵觸發(fā)且需要鼠標(biāo)控制變量的復(fù)雜交互

文章來源：優(yōu)設(shè)   作者：泡泡bing

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

2022 年的 UI/UX 設(shè)計(jì)趨勢是什么呢？在本文中，我們將發(fā)現(xiàn)：

1. 3D 視覺設(shè)計(jì)師的內(nèi)卷將會(huì)越來越嚴(yán)重
2. 數(shù)據(jù)可視化的工作將變得越來越重要
3. 服務(wù)的移動(dòng)化還需要做出更多努力
4. scrollytelling 技術(shù)會(huì)越來越流行

滾動(dòng)已死，滾動(dòng)敘事興起

舊的滾動(dòng)是無聊的。如果你想吸引注意力，你就需要實(shí)現(xiàn)滾動(dòng)敘事（scrollytelling）。（彩云注：這個(gè)技術(shù)的核心在于邊滾動(dòng)頁面邊講故事）

《紐約時(shí)報(bào)》是第一批在他們的文章《雪花飄落》中使用滾動(dòng)敘事手法的機(jī)構(gòu)之一。

它是一種敘事形式，可以在網(wǎng)頁和 APP 上呈現(xiàn)。想象一下，在一個(gè)網(wǎng)站中每個(gè)插圖、文本和其他元素都開始變得生動(dòng)起來。自然地，你會(huì)想看到這個(gè)故事的結(jié)局。它就像一個(gè)游戲，帶你穿越迷宮。雖然你不能影響它的進(jìn)程，但卻讓你感覺自己能參與其中。

2022 年，Scrollytelling 將會(huì)出現(xiàn)在你看到的每一個(gè)流行網(wǎng)站上。

另一方面，scrolllytelling 讓用戶真正去閱讀內(nèi)容。你可以用動(dòng)態(tài)文本讓他們產(chǎn)生興趣，比如谷歌的網(wǎng)站。他們的團(tuán)隊(duì)知道如何讓信息看起來更好:

Scrollytelling 在用戶向下滾動(dòng)時(shí)被激活，因此得名。沒有點(diǎn)擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個(gè)地方，但通過滾動(dòng)，把屏幕上的故事慢慢展開。這不僅要求設(shè)計(jì)師創(chuàng)造出酷炫的視覺效果，還需要認(rèn)真思考一個(gè)你想要講述的故事情節(jié)。

所以，最好的網(wǎng)站不可能在 2 天內(nèi)建成，需要更多的時(shí)間去打磨。

IAmBinadam 令人驚艷的敘述設(shè)計(jì)

滾動(dòng)敘事的項(xiàng)目通常需要大量的時(shí)間和精力。不過，這樣做的結(jié)果是值得的。頁面變成“活的”，每一秒都有新的事情發(fā)生，所以在閱讀時(shí)很難感到無聊。

那么移動(dòng)端 APP 呢? Pure 是一款約會(huì)應(yīng)用（彩云注，這個(gè)應(yīng)用在 app store 可以搜到，推薦大家安裝一個(gè)體驗(yàn)一下，非廣告），它創(chuàng)造了一種我稱之為“tappytelling”的故事（當(dāng)你第一次點(diǎn)擊并打開應(yīng)用時(shí)，它就會(huì)被激活）:

Scrollytelling 是為用戶而創(chuàng)建的，用戶很喜歡它，不需要到其他頁面去閱讀整個(gè)故事。相反，網(wǎng)頁設(shè)計(jì)的整個(gè)故事都是事先考慮好的，并盡可能以最有趣的方式設(shè)計(jì)出來。

用戶喜歡看數(shù)據(jù)，數(shù)據(jù)可視化越來越被重視

如何在 2022 年做出一個(gè)還不錯(cuò)的企業(yè)網(wǎng)站？你不會(huì)想告訴用戶你是“XX 領(lǐng)域公認(rèn)的領(lǐng)導(dǎo)者，該領(lǐng)域最好的之一”。這種標(biāo)準(zhǔn)的廣告表達(dá)并不傳達(dá)任何有價(jià)值的信息。

最好不要用形容詞，而是用事實(shí)來說明:你有多少分支機(jī)構(gòu)，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù)，你需要讓它不僅簡單，而且有趣。

數(shù)據(jù)可視化有助于以一種吸引人的方式傳達(dá)正確的信息。它也可以與滾動(dòng)敘事（Scrollytelling）緊密結(jié)合。以下是 IAmBinadam 展示數(shù)據(jù)的方式:

通過去除數(shù)據(jù)集的復(fù)雜性，使信息更容易讓讀者感知。

不同級(jí)別的數(shù)據(jù)具有不同的大小，這樣用戶知道應(yīng)該先從哪里查看

讀者可以很快注意到作者試圖通過圖片引出的結(jié)論?？紤]到如今人們消費(fèi)的數(shù)據(jù)量巨大，那些干凈整潔的數(shù)字帶來的正面影響更大。

有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到

還有一種現(xiàn)象叫做“新冠后遺癥”。這是 Covid 對(duì)公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計(jì)局的數(shù)據(jù)，2018 年，壓力和焦慮的平均得分約為 2.7/10。自新冠疫情發(fā)生以來，得分已升至 4.0/10，很少低于這一水平。同樣因?yàn)榇罅餍?，在過去兩年里工作量增加了 4 個(gè)小時(shí)。

人們壓力太大，卷的太辛苦，以至于不愿去看復(fù)雜的數(shù)據(jù)。

設(shè)計(jì)師做好數(shù)據(jù)可視化，以保持人們的注意力。記住，復(fù)雜的信息通常被忽略，因?yàn)樽x者試圖節(jié)省他們的時(shí)間，更有可能使用滾動(dòng)按鈕。

Illustration by Mona Chalabi

以下是我們推薦的一些表示數(shù)據(jù)的方式

1. 圖表和曲線圖
2. 插圖
3. 靜態(tài)信息圖
4. 互動(dòng)信息圖

Illustration by Ink Factory

如何讓信息圖表看起來更好?

一個(gè)好的圖表，或者任何其他形式的數(shù)據(jù)可視化，都應(yīng)該具有在 Edward Tufte 的“定量信息的可視化顯示”中描述的特征。在他的書中，Tufte 通過圖表解釋了好圖表的 3 個(gè)原則：

1）展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應(yīng)趨向于 1。簡單地說，應(yīng)該刪除一切不必要的元素，保持整潔。

Graph by Hootsuite

2）充分利用好畫面空間。也就是說，需要將數(shù)據(jù)編排的更緊密。

Graph by Hootsuite

3）客觀地描述數(shù)據(jù)。不要使用夸張的圖表，可視化數(shù)據(jù)可以看起來很酷，但真實(shí)永遠(yuǎn)是更重要的。

2022 年還有必要做 APP 嗎？

根據(jù) We Are Social 的數(shù)據(jù)，2021 年有 52.2 億人使用手機(jī)，約占世界人口的 66%。自 2020 年 1 月以來，手機(jī)用戶數(shù)量增長了 1.8%(9300 萬)，而手機(jī)聯(lián)網(wǎng)總數(shù)量增長了 7200 萬(0.9%)，到 2021 年初達(dá)到 80.2 億。

過去一年，社交媒體用戶的數(shù)量增長了 13%以上。到 2021 年初，社交網(wǎng)絡(luò)上已有近 5 億新用戶注冊(cè)。根據(jù) App Annie 的數(shù)據(jù)，Android 用戶每天花在手機(jī)上的時(shí)間超過 4 小時(shí)。2020 年，安卓用戶上網(wǎng)時(shí)長超過 3.5 萬億小時(shí)。

令人印象深刻的數(shù)字，是嗎？似乎到 2022 年，為產(chǎn)品做一個(gè) APP 將成為必須擁有的東西。如何知道你的公司是否真的需要一款應(yīng)用？有以下幾點(diǎn)可供評(píng)估：

1）用戶主要通過移動(dòng)設(shè)備訪問你的網(wǎng)站

這是你應(yīng)該了解的重要數(shù)據(jù)。客戶和你在一起的時(shí)間越長，你就有越多的機(jī)會(huì)去吸引他們，了解他們的習(xí)慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時(shí)長。）

2）幫助內(nèi)部業(yè)務(wù)流程更加有效

如果你想要提高員工的工作效率、改進(jìn)工作流程或增加利潤，那么就制作一個(gè)可以幫助管理業(yè)務(wù)流程的移動(dòng)應(yīng)用。

如今，像這樣的手機(jī)應(yīng)用使企業(yè)能夠執(zhí)行越來越復(fù)雜和多樣化的任務(wù)，加快日常重復(fù)操作和文檔管理。

3）實(shí)現(xiàn)一些網(wǎng)站上沒有的新功能

如果你認(rèn)為 APP 能為用戶打開新的觸點(diǎn)，并讓用戶體驗(yàn)更加友好，那么它就值得考慮開發(fā)。問問自己的 APP 能提供什么新的商業(yè)機(jī)會(huì)？例如，隨著疫情的蔓延，許多人開始用上健身 APP 在家里鍛煉。

4）競爭對(duì)手的情況

要了解競爭對(duì)手在做什么，他們是否有 APP，能做什么，以及他們是否真的對(duì)用戶有用。

查看 App Store 和谷歌 Play 的統(tǒng)計(jì)數(shù)據(jù)。下載和評(píng)論的數(shù)量可以告訴你用戶是如何使用競爭對(duì)手的應(yīng)用的。如果他們的服務(wù)真的很方便而且很有必要，那么你就容易被甩在后面。

5）復(fù)購率

一個(gè)應(yīng)用可以幫助你留住那些習(xí)慣從你那里購買的人。如果想為老客戶開展促銷活動(dòng)了，給他們發(fā)送一個(gè)通知就能完成，成本更低。

在正確的時(shí)間提供的報(bào)價(jià)越有吸引力，人們購買的可能性就越大。

出租車服務(wù)公司有回頭客，他們肯定需要一個(gè)應(yīng)用

6）促銷工具

有了應(yīng)用，你就不需要花錢設(shè)計(jì)和制作實(shí)體卡，客戶也不需要隨身帶卡。將促銷計(jì)劃整合到 APP，并分享有用的促銷信息。

做原生 APP 還是移動(dòng)端網(wǎng)站?

開發(fā)手機(jī)網(wǎng)站比開發(fā)手機(jī)應(yīng)用需要更少的工作量，這反過來可以降低整體推廣成本。

這部分是由于響應(yīng)式設(shè)計(jì)的出現(xiàn)，它允許你根據(jù)打開網(wǎng)站的設(shè)備屏幕來調(diào)整網(wǎng)站。至于 APP，它們必須為許多移動(dòng)平臺(tái)單獨(dú)編寫:Android、iOS、Windows 等。

一些設(shè)計(jì)師認(rèn)為“前端驅(qū)動(dòng)的網(wǎng)絡(luò)體驗(yàn)”會(huì)是 2022 年的一個(gè)好機(jī)會(huì)，我非常同意!
（彩云注：在國內(nèi)，現(xiàn)在開發(fā)小程序的肯定越來越多了。）

3D 設(shè)計(jì)具備更強(qiáng)競爭力

我們一開始并沒有將其放在首位，因?yàn)檫@并不是一個(gè)新的趨勢，在很久以前設(shè)計(jì)師們就已經(jīng)設(shè)計(jì)了很多 3D 圖像和動(dòng)畫了。

Cardi B rhymes with 3D

3D 技術(shù)已經(jīng)在過去流行了很多年，但它不會(huì)很快消失。此外，我們預(yù)測 3D 圖形將變得更加多樣化和包容。

在過去的幾年里，3D 藝術(shù)和動(dòng)畫已經(jīng)出現(xiàn)在各種 UI 設(shè)計(jì)趨勢評(píng)論中。這意味著越來越多的設(shè)計(jì)師將它們整合到頁面中。

3D 當(dāng)然應(yīng)該成為 2022 年最熱門的趨勢和預(yù)測之一，因?yàn)榕c經(jīng)典動(dòng)畫相比，逼真的 3D 形狀結(jié)合動(dòng)畫總是引人注目的。

“從技術(shù)上講，通過 3D 更容易傳達(dá)更多內(nèi)容，因?yàn)樗绕矫鎴D片更接近我們的感知。3D 插圖更有深度，信息量更大，也更具互動(dòng)性?！?

許多設(shè)計(jì)師將 3D 對(duì)象無縫地“安置”在 2D 空間中。它允許創(chuàng)建更有趣的組合，也作為一個(gè)優(yōu)秀的工作方法蘊(yùn)藏著巨大的潛力。

烏克蘭政府網(wǎng)站用 3D 手模擬了黑客帝國

注意一點(diǎn)：在整合 3D 圖形等重量級(jí)內(nèi)容之前，確保你的應(yīng)用性能是 OK 的，能夠快速加載所有元素。

元宇宙風(fēng)潮

Meta 的 logo 既不是 2D 也不是 3D。或者兩者兼而有之？這就是即將到來的 2022 年的莫比烏斯帶和薛定諤的貓。

Meta logo 的變化

（彩云注：這個(gè)概念在去年簡直不要太火，未來幾年肯定還會(huì)是一個(gè)大的趨勢，設(shè)計(jì)師也需要保持關(guān)注。跟著趨勢走，易于放大自身價(jià)值。）

混合動(dòng)畫

越來越多的公司在網(wǎng)站和移動(dòng)應(yīng)用中使用動(dòng)畫，以提高用戶的沉浸感和體驗(yàn)，使內(nèi)容更有趣。

動(dòng)畫是 2022 年重要的網(wǎng)頁設(shè)計(jì)趨勢。2022 年，如果沒有它，你的產(chǎn)品很可能會(huì)看起來就像個(gè)半成品?；旌巷L(fēng)格的動(dòng)畫越來越受歡迎:定格動(dòng)畫和 3D 動(dòng)畫的結(jié)合，2D 動(dòng)畫和 3D 動(dòng)畫的結(jié)合。設(shè)計(jì)師這樣做是為了獲得不同尋常的風(fēng)格解決方案，以及提高最終產(chǎn)品的質(zhì)量。

2022 年，動(dòng)畫設(shè)計(jì)將是品牌市場定位的重要組成部分，想想一個(gè)公司新的視覺形象——?jiǎng)赢嬓蜗蟆ｋS著這個(gè)領(lǐng)域的專業(yè)設(shè)計(jì)師數(shù)量的增長，實(shí)現(xiàn)新想法的機(jī)會(huì)也在增加。

2022 年如何使用網(wǎng)頁動(dòng)畫?

1）講故事

動(dòng)畫可以通過在界面和用戶之間建立情感聯(lián)系來傳達(dá)信息。

加載動(dòng)畫 Yoichi Kobayashi

2）更有趣的加載

用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動(dòng)畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時(shí)間。使用進(jìn)度條或者任何你能想到的可以顯示時(shí)間流逝的東西。

3）光標(biāo)效果

用戶可以精確地觀察光標(biāo)所在的位置。通過添加智能互動(dòng)動(dòng)畫，對(duì)這個(gè)光標(biāo)作出反應(yīng)來探索網(wǎng)站。這種效果在 21 世紀(jì)初非常流行。如你所知，流行趨勢往往每 20 年就會(huì)重演一次。

4）動(dòng)態(tài)排版

你有沒有想過讓字母跳舞?

添加角色的動(dòng)畫插圖

據(jù) Statista 統(tǒng)計(jì)，2020 年全球動(dòng)畫市場達(dá)到了 2700 億美元。趨勢是視頻，而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡(luò)上使用動(dòng)畫制作廣告。毫無疑問，動(dòng)畫插圖的優(yōu)勢是它們非常靈活和多樣化。

寶馬歷史動(dòng)畫

這樣的作品通常用于兩種情況:

1）用于解釋視頻

2）電商廣告

動(dòng)畫解說的趨勢出現(xiàn)在幾年前，解說視頻清楚地顯示點(diǎn)擊的位置或公司的項(xiàng)目是關(guān)于什么的。

在招聘或商業(yè)視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。

微交互，大影響

微交互是幫助用戶瀏覽網(wǎng)站或應(yīng)用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果：它們顯示發(fā)生了什么，將導(dǎo)致什么操作，下一步需要做什么。

圖片來源 awwards

動(dòng)畫交互將為你的設(shè)計(jì)注入活力，并有助于保持用戶粘性。關(guān)注每一個(gè)細(xì)節(jié)是設(shè)計(jì)師工作的關(guān)鍵，因?yàn)樵O(shè)計(jì)中的所有元素都可以帶來積極的用戶體驗(yàn)。

重要的是要達(dá)到元素的和諧，而不是把注意力分散到界面的各個(gè)方面。微交互作用的一個(gè)重要部分是顏色，它們?yōu)榻缑嬖卦鰪?qiáng)價(jià)值。

CTA animated

微交互有助于頁面導(dǎo)航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實(shí)現(xiàn)特定的行為。

動(dòng)態(tài) logo，加深品牌印記

2022 年，在線品牌面臨著新的挑戰(zhàn)，需尋求新的解決方案，其中之一就是動(dòng)畫 logo 設(shè)計(jì)。

圖片來源 Toridori

動(dòng)畫 logo 主要有以下幾點(diǎn)營銷優(yōu)勢:

1. 吸引注意力。這意味著它們有助于提高品牌知名度。
2. 有助于提高 SEO。谷歌更傾向于動(dòng)態(tài)內(nèi)容，帶有動(dòng)態(tài)圖形的頁面更容易吸引用戶。
3. 在移動(dòng)端看起來更好。絲滑的動(dòng)畫看起來比靜態(tài)的 logo 更有趣。
4. 最重要的是展示了歷史。靜態(tài) logo 背后的想法正在動(dòng)畫中發(fā)展。由于這一點(diǎn)，在幾秒鐘內(nèi)，你可以展示品牌的使命，甚至它的價(jià)值!

一家洗衣機(jī)[公司]的標(biāo)志

現(xiàn)在有很多設(shè)計(jì)模板，可以很容易地用字體制作一個(gè)動(dòng)畫 logo:

來源 Shabello, Bobby Voeten

最后的話

設(shè)計(jì)趨勢總是在變化的，但是設(shè)計(jì)的意義不會(huì)變。如果你不能深刻理解這一點(diǎn)，那么任何設(shè)計(jì)趨勢的文章不能幫你做好設(shè)計(jì)。

文章來源：優(yōu)設(shè)   作者：彩云Sky

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

用戶找不到=不存在 

在數(shù)字界面中，可發(fā)現(xiàn)性定義了用戶在產(chǎn)品中查找新內(nèi)容或功能的難易程度。在許多情況下，良好的可發(fā)現(xiàn)性至關(guān)重要，因?yàn)橛脩粽业剿鑳?nèi)容的能力將直接影響其完成特定任務(wù)的能力。

在本文中，我們將討論可發(fā)現(xiàn)性的概念和其重要性所在，以及設(shè)計(jì)可發(fā)現(xiàn)性的詳細(xì)技巧。

為什么為設(shè)計(jì)可發(fā)現(xiàn)性這么困難？

UX中的Findability和Discoverability這兩個(gè)術(shù)語經(jīng)?；Q使用。雖然二者相關(guān)，但它們不是一回事，關(guān)鍵區(qū)別在于用戶對(duì)內(nèi)容的看法。Findability是指用戶已經(jīng)知道或認(rèn)為存在于產(chǎn)品中的內(nèi)容或功能的能力。而Discoverability是用戶遇到新內(nèi)容或以前不知道的內(nèi)容或功能的能力。

這種差別使我們更容易理解——為什么設(shè)計(jì)高度可發(fā)現(xiàn)的界面如此困難。在許多情況下，用戶并不是有意識(shí)地尋找新內(nèi)容。人們只想簡答地使用產(chǎn)品，如果沒有遇到新功能或新內(nèi)容，用戶壓根兒不會(huì)想到去尋找它們，因?yàn)橐婚_始就不知道它們是作為產(chǎn)品的一部分存在的。注重可發(fā)現(xiàn)性是UX設(shè)計(jì)師解決此問題的途徑，好讓用戶更容易發(fā)現(xiàn)這些新功能。

12個(gè)提升UX可發(fā)現(xiàn)性的技巧

許多因素都會(huì)影響用戶界面的可發(fā)現(xiàn)性。以下是12個(gè)技巧，幾乎適用于所有想要提升可發(fā)現(xiàn)性的產(chǎn)品。

技巧1：設(shè)計(jì)熟悉的界面

許多設(shè)計(jì)師喜歡試驗(yàn)和嘗試新方法，但在嘗試創(chuàng)建新內(nèi)容時(shí)，往往適得其反，使用戶更難以理解頁面。

依據(jù)設(shè)計(jì)常識(shí)創(chuàng)建界面，這是設(shè)計(jì)師的責(zé)任。使用現(xiàn)有的設(shè)計(jì)規(guī)范（例如，操作系統(tǒng)的設(shè)計(jì)范例），結(jié)合用戶需求建立可發(fā)現(xiàn)性，更容易獲得用戶的認(rèn)可。因?yàn)槿藗兺ㄟ^自身經(jīng)驗(yàn)去感受一個(gè)新事物時(shí)，是非常容易理解其內(nèi)在邏輯的。例如，許多網(wǎng)站將導(dǎo)航菜單放置在頁面頂部，緊鄰網(wǎng)站的Logo，也是大多數(shù)用戶不假思索就能找到的位置。

技巧2：優(yōu)先安排有價(jià)值的內(nèi)容和功能

當(dāng)我們?cè)赨I中隱藏某些內(nèi)容時(shí)，會(huì)加大用戶找不到它的風(fēng)險(xiǎn)。移動(dòng)應(yīng)用和網(wǎng)站之所以放棄漢堡菜單，轉(zhuǎn)而使用標(biāo)簽欄的原因就是UX的可發(fā)現(xiàn)性。雖然漢堡菜單通過隱藏導(dǎo)航選項(xiàng)來節(jié)省屏幕空間，有句說話說的好“眼不見，心不煩”，隱藏的選項(xiàng)也更容易被忘記。

良好的可見性可以帶來更多的曝光率——元素越明顯可見，用戶就越有可能記住它。可見導(dǎo)航就如一個(gè)標(biāo)簽欄，告訴用戶他們有哪些選項(xiàng)，并使其成為首要考慮因素。

技巧3：按邏輯順序?qū)?nèi)容和功能元素分組

具有密切關(guān)系的項(xiàng)目應(yīng)被組織在一起，該規(guī)則適用于內(nèi)容（例如，電子商務(wù)網(wǎng)站上定義產(chǎn)品類別的信息架構(gòu)）和功能（例如，Instagram上的濾鏡）。通過在結(jié)構(gòu)中引入邏輯順序，可以使用戶更輕松快捷地找到他們想要的東西（在開始UI工作之前，進(jìn)行Tree testing以了解用戶的心理模型至關(guān)重要，它能幫助你根據(jù)用戶需求搭建內(nèi)容）。

技巧4：減少視覺上的混亂

UI設(shè)計(jì)里的一個(gè)常見誤區(qū)，為了使對(duì)象更容易被發(fā)現(xiàn)，它應(yīng)該一直可見。假設(shè)按剛剛說的去設(shè)計(jì)，把所有可用對(duì)象都堆在頁面里，反而更混亂。

視覺混亂通常是出現(xiàn)了不必要的功能和裝飾元素，它們阻止用戶與產(chǎn)品交互。這種混亂不僅放慢了使用速度，還讓基本功變得難易被發(fā)現(xiàn)。

Microsoft Word中，太多可見選項(xiàng)造成視覺混亂 by Amansinghblog

即使頁面/屏幕有非常良好的視覺層次結(jié)構(gòu)，但人們的注意力跨度有限，人腦通過眼睛感知事物的能力也有限。因此，確定對(duì)象的優(yōu)先級(jí)非常重要。刪除所有不必要的元素，為剩余元素增加視覺權(quán)重，才能讓真正重要的內(nèi)容和功能脫穎而出。

技巧5：減少選項(xiàng)總數(shù)

希克定律指出，用戶做出的決定越多，決策過程所需的時(shí)間就越長，限制 or 提供大量選擇？設(shè)計(jì)師要掌握平衡?？礈?zhǔn)時(shí)機(jī)提供選項(xiàng)，不僅簡化決策過程，還能為用戶提供發(fā)現(xiàn)、探索和嘗試所有可用選項(xiàng)的空間（和信心）。

技巧6：提供視覺反饋

視覺反饋是指用戶在執(zhí)行任何交互時(shí)獲得的可見響應(yīng)。例如，當(dāng)我們將鼠標(biāo)懸停在網(wǎng)站鏈接上時(shí)，我們會(huì)看到一個(gè)視覺響應(yīng)——鏈接改變了顏色。這種微小的視覺變化非常重要，因?yàn)樗梢栽鰪?qiáng)用戶體驗(yàn)，消除不確定性。用戶知道某些元素是可以交互的，以及下一步該怎么做，從而采取行動(dòng)。

技巧7：使用常見熟悉的圖標(biāo)

交互元素使用不常見的圖標(biāo)是導(dǎo)致問題的“罪魁禍?zhǔn)住薄．?dāng)用戶看到未知圖標(biāo)時(shí)，他們無法預(yù)測點(diǎn)擊該圖標(biāo)會(huì)發(fā)生什么。這種猜測對(duì)產(chǎn)品團(tuán)隊(duì)來說成本很高，因?yàn)樵谠S多情況下，用戶會(huì)跳過該選項(xiàng)。

怎么才能知道圖標(biāo)是否令人困惑？測試一下，向?qū)嶋H或潛在用戶詢問涉及元素的作用，如果他們給不出明確答案，那就用一個(gè)更常見的圖標(biāo)替換。

技巧8：使用動(dòng)畫吸引用戶的注意力

人眼會(huì)自然地聚焦在移動(dòng)的物體上，微妙的動(dòng)畫可以引導(dǎo)用戶轉(zhuǎn)向某些特定的內(nèi)容或功能，動(dòng)畫還可以解釋如何與對(duì)象交互。

技巧9：注意手勢交互

手勢是隱藏的交互控件，它們可能導(dǎo)致很多可發(fā)現(xiàn)性問題。除非用戶知道某些手勢，否則他們不會(huì)嘗試。產(chǎn)品中使用普遍接受的手勢交互，別試圖加入太新奇的交互形式。考慮到手勢對(duì)于許多用戶來說仍然是一個(gè)相對(duì)較新的概念，因此在新設(shè)備上很有必要進(jìn)行入門介紹。

非常規(guī)手勢（例如雙擊點(diǎn)贊）可能會(huì)對(duì)可發(fā)現(xiàn)性產(chǎn)生負(fù)面影響，用戶可能注意不到這些手勢在應(yīng)用程序里是被支持的 by Dribbble

技巧10：適當(dāng)調(diào)整UI元素的大小

設(shè)計(jì)師為什么要對(duì)標(biāo)題和常規(guī)文本使用不同的視覺樣式，這是有原因的——想讓用戶更容易注意到文本內(nèi)容。同樣的策略也適用于UI設(shè)計(jì)，通過對(duì)比不同大小的元素，將用戶注意力吸引到關(guān)鍵信息上。例如，著陸頁上的一個(gè)超大的號(hào)召性按鈕，清楚地告訴用戶當(dāng)他們點(diǎn)擊該按鈕時(shí)，下一個(gè)動(dòng)作應(yīng)該是什么，以及會(huì)發(fā)生的是什么（大型UI元素在可用性方面也很有益，因?yàn)樗鼈兏菀自谝苿?dòng)設(shè)備上使用）。

號(hào)召性按鈕越大且越突出，你期望用戶執(zhí)行的操作也越明顯 by Firefox

技巧11：提供視覺可供性

有時(shí)候即便用戶發(fā)現(xiàn)了一個(gè)對(duì)象，他們也可能不知道如何使用?？晒┬杂脕碇笇?dǎo)元素如何應(yīng)用，沒有可供性的話，用戶只能靠猜測使用產(chǎn)品/對(duì)象（很可能不會(huì)使用）。在數(shù)字界面中，設(shè)計(jì)師應(yīng)把形狀和產(chǎn)生的交互進(jìn)行具象聯(lián)系，例如，當(dāng)我們看到帶有“提交”標(biāo)簽的矩形對(duì)象時(shí)，我們就知道這是一個(gè)按鈕。

技巧12：提供視覺線索

視覺線索是引導(dǎo)用戶轉(zhuǎn)向特定的內(nèi)容或功能的UI元素，一個(gè)典型示例是滾動(dòng)網(wǎng)站上的動(dòng)畫箭頭，該箭頭會(huì)引導(dǎo)用戶朝特定的方向前進(jìn)。

注意到圖像系列最右端的箭頭嗎？該視覺線索提示訪問者，水平畫廊是可滾動(dòng)的 by Netflix

文章來源：UX辭典(站酷)

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

按鈕設(shè)計(jì)

為了設(shè)計(jì)正確的交互，我們需要回顧一下物理按鈕的歷史和起源。物理按鈕是UI組件的前身，當(dāng)今的數(shù)字產(chǎn)品都還在大量使用它們。按鈕很棒，即使用戶不了解基本的機(jī)制或算法，只用手指觸摸就可以讓電器、汽車或系統(tǒng)運(yùn)行/關(guān)閉。在《Power Button》中，作者Rachel Plotnick描述了當(dāng)今按鈕文化的起源，并解釋了按鈕是如何成為數(shù)字命令方式的。

“你按下按鈕，剩下的我們來做。” ——柯達(dá)相機(jī)的醒目標(biāo)語吸引了潛在消費(fèi)者。

即使在今天，這也是吸引用戶的地方——通過簡單觸摸就能讓事情發(fā)生的即時(shí)滿足感。盡管有大量新的家用電器和設(shè)備都變成了觸摸屏，但物理按鈕并不會(huì)消失，因?yàn)樗鼈冏屓诵纬傻男袨榱?xí)慣，會(huì)影響按鈕設(shè)計(jì)的直觀性和易用性，是一種永遠(yuǎn)存在的實(shí)物參考。

01 按鈕 vs 鏈接

按鈕向用戶傳遞了操作的可執(zhí)行性，在整個(gè)UI里很常見，例如：對(duì)話框、表單和工具欄等。按鈕和鏈接之間的區(qū)別，請(qǐng)注意：

-鏈接是導(dǎo)航到另一個(gè)地方時(shí)應(yīng)用的，例如：“查看全部”頁面、“ Roger Wright”個(gè)人簡介等；

-按鈕是在執(zhí)行動(dòng)作時(shí)應(yīng)用的，例如：“提交”、“合并”、“創(chuàng)建”、“上傳”等。

02 讓用戶直觀感受按鈕狀態(tài)

為按鈕創(chuàng)建正確的交互和樣式，是按鈕設(shè)計(jì)過程中重要的組成部分之一。在不改變組件或產(chǎn)生視覺干擾的前提下，每個(gè)按鈕的狀態(tài)都必須有明確定義，以使其與周圍布局區(qū)別開來。

正常—表示該組件已啟用交互；

突出提示—用戶使用鍵盤，進(jìn)入編輯狀態(tài)；

鼠標(biāo)懸停—當(dāng)用戶將鼠標(biāo)置于交互式元素上方時(shí)；

點(diǎn)擊—按下狀態(tài)表示用戶已輕點(diǎn)按鈕；

進(jìn)度/加載—用戶操作行為沒有立即執(zhí)行，表示正在完成操作中；

禁用—表示該組件當(dāng)前處于非交互狀態(tài)，但將來可以啟用。

03 按鈕的顏色、形狀和大小

常見的是圓角矩形按鈕，這些按鈕即使在輸入框旁，用戶也能快速識(shí)別。按鈕樣式的選擇取決于用途、平臺(tái)和應(yīng)用準(zhǔn)則。以下是一些最受歡迎的樣式變化：

04 建立按鈕樣式等級(jí)

樣式主要用于區(qū)分重要和不重要的動(dòng)作。創(chuàng)建動(dòng)作層次結(jié)構(gòu)，該層次結(jié)構(gòu)將指導(dǎo)用戶進(jìn)行多種選擇。通常，可以有一個(gè)突出的按鈕（該樣式通常稱為“首要”按鈕），剩下的按鈕則依據(jù)重要程度建立不同的樣式等級(jí)。

05 《Don’t Make Me Think》

這是可用性工程師Steve Krug撰寫的書籍標(biāo)題，其中講到了一點(diǎn)：對(duì)用戶而言，界面清晰明了非常重要，不要給用戶制造難題。人們周圍其實(shí)已經(jīng)被電子產(chǎn)品包圍了，多年使用各種設(shè)備、軟件的經(jīng)驗(yàn)，一定程度上固化了人們對(duì)按鈕外觀和功能的認(rèn)知。如果與常見的“標(biāo)準(zhǔn)”存在較大偏差，也會(huì)給用戶造成困惑。

避免對(duì)交互式和非交互式元素使用相同的顏色，否則用戶不知道該點(diǎn)擊哪里。

06 一致性的重要性

“一致性是最強(qiáng)大的可用性原則之一：當(dāng)事物始終表現(xiàn)相同時(shí)，用戶不必?fù)?dān)心會(huì)發(fā)生什么?！?—雅各布·尼爾森（Jakob Nielsen）

一致性提升了速度性和準(zhǔn)確性，有助于避免錯(cuò)誤。創(chuàng)建可預(yù)測性，幫助用戶控制和實(shí)現(xiàn)產(chǎn)品中的目標(biāo)。當(dāng)創(chuàng)建主要、次要和第三種樣式時(shí)，試著找找一致元素，如顏色、形狀等。按鈕設(shè)計(jì)不僅要在設(shè)計(jì)系統(tǒng)內(nèi)部保持一致，在整體平臺(tái)也要進(jìn)行統(tǒng)一。

07 使按鈕足夠大以實(shí)現(xiàn)可靠交互

按下按鈕應(yīng)該是一個(gè)簡單的操作任務(wù)，如果用戶無法正常進(jìn)行，或在過程中錯(cuò)誤地按到了相鄰元素，不但給用戶造成了負(fù)面體驗(yàn)又浪費(fèi)了時(shí)間。

對(duì)于大多數(shù)平臺(tái)，請(qǐng)考慮被觸摸的目標(biāo)至少為48x48dp。無論屏幕大小，這種尺寸的觸摸目標(biāo)的物理尺寸應(yīng)為9mm，觸摸屏元件的目標(biāo)尺寸至少是7-10mm。

對(duì)于圖標(biāo)按鈕來說，請(qǐng)確保觸摸目標(biāo)超出元素的可視范圍。這不僅適用于移動(dòng)設(shè)備、平板電腦，同時(shí)也適用于網(wǎng)絡(luò)上的指示設(shè)備，比如鼠標(biāo)。

08 無障礙設(shè)計(jì)

所有組件都應(yīng)推行無障礙設(shè)計(jì)。目標(biāo)區(qū)域的大小是影響可訪問性的因素之一，其他的則是字體大小、顏色和對(duì)比度，也有很多工具能檢查組件的設(shè)計(jì)性能。

設(shè)計(jì)師應(yīng)與開發(fā)團(tuán)隊(duì)緊密合作，確保按鈕與屏幕閱讀器協(xié)同工作。添加role =“ button”將使一個(gè)元素作為按鈕控件出現(xiàn)在屏幕閱讀器上。

09 手勢應(yīng)用

手勢應(yīng)用，讓用戶可以通過觸摸與應(yīng)用程序進(jìn)行交互。使用觸摸來完成任務(wù)，不僅提供了觸覺控制還非常節(jié)約時(shí)間。某些手勢（比如滑動(dòng)以觸發(fā)上下文動(dòng)作、雙擊或長按來標(biāo)記喜歡等）每天都被人們廣泛使用，但對(duì)于普通用戶而言，它們?nèi)匀徊惶黠@，建議把它們替換給高級(jí)用戶執(zhí)行操作。

10 按鈕標(biāo)簽信息易于理解

按鈕傳達(dá)的信息與其外觀一樣重要，錯(cuò)誤的信息會(huì)讓用戶感到困惑，甚至是誤導(dǎo)用戶操作。正確的按鈕標(biāo)簽會(huì)引導(dǎo)用戶完成操作，最好使用動(dòng)詞，并在按鈕上標(biāo)記其實(shí)際功能。

就像按鈕在問用戶——“您要（添加到購物籃中）嗎？” 或“您要（確認(rèn)訂單）嗎？”，避免使用Yes/No或過于通用的標(biāo)簽，比如Submit。

11 確定/取消，還是取消/確定？

兩者都是正確選擇，但設(shè)計(jì)師可能會(huì)花幾個(gè)小時(shí)來討論哪個(gè)更合適。

-確定按鈕在前，是自然流暢的閱讀順序。Windows把確定按鈕放在了前面；

-確定按鈕在后，可以幫助改善流程。這種順序形式，幫助用戶再采取行動(dòng)前，對(duì)所有選項(xiàng)評(píng)估，有效地幫助人們避免錯(cuò)誤。蘋果則是把確定按鈕放在最后的；

任何一種選擇其實(shí)都沒有錯(cuò)，也不會(huì)造成什么可用性災(zāi)難。

12 避免使用禁用按鈕

每個(gè)人都遇到過這種情況：在屏幕上停留了幾秒或幾分鐘，怎么操作都沒反應(yīng)，這才發(fā)現(xiàn)原來是禁用按鈕使我們無法進(jìn)行下一步。禁用控件讓組件短暫處于非交互狀態(tài)，但如果使用不當(dāng)，則非常容易讓用戶產(chǎn)生負(fù)面情緒。

我建議盡量避免禁用按鈕，最好始終啟用它，如果用戶未提供某些必需信息，則只需突出顯示空白字段或顯示通知可。

文章來源：UX辭典(站酷)

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

交互輸出文檔的作用

文檔這個(gè)東西，我們又愛又恨，愛的是它能夠記錄并且在工作中讓大家高效的協(xié)調(diào)合作，恨的就是很多人對(duì)文檔嗤之以鼻非常敷衍，以至于文檔不但沒有起到它應(yīng)有的作用，反而成為了一個(gè)不負(fù)責(zé)任的借口。所以一份合格或者優(yōu)秀的交互輸出文檔對(duì)于一個(gè)項(xiàng)目的流轉(zhuǎn)以及團(tuán)隊(duì)的配合來說是至關(guān)重要的。交互文檔的主要利益相關(guān)者通常是以下幾個(gè)角色：交互、產(chǎn)品、開發(fā)、UI

交互

首先優(yōu)秀的交互文檔必須在交互組內(nèi)部進(jìn)行過審核，包括一致的撰寫標(biāo)準(zhǔn)和模式的使用，一個(gè)比較規(guī)范的交互設(shè)計(jì)組對(duì)于交互的撰寫標(biāo)準(zhǔn)也是有嚴(yán)格的規(guī)范的，以及在什么情況使用什么交互模式還有組件庫的調(diào)用都會(huì)有詳細(xì)的說明，那么你的交互輸出文檔就必須滿足團(tuán)隊(duì)設(shè)定的規(guī)范。

其次對(duì)于其他交互設(shè)計(jì)師來說，你的設(shè)計(jì)方案中是否會(huì)出現(xiàn)其他人負(fù)責(zé)的模塊，那么在評(píng)審的時(shí)候需要同步，雖然交互輸出文檔對(duì)于其他交互來說不是直接受益人，但是在團(tuán)隊(duì)同步過程中也是非常重要的。

產(chǎn)品

每個(gè)公司對(duì)于文檔的要求和規(guī)則不一樣。小公司可能沒有交互設(shè)計(jì)這個(gè)崗位，那么可能產(chǎn)品連prd文檔也沒有，僅僅只是一個(gè)簡易的需求說明文檔，就更不用說針對(duì)交互規(guī)則的說明文檔了。

很多有完善規(guī)模和流程的團(tuán)隊(duì)不僅會(huì)有詳細(xì)的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點(diǎn)是那么多文檔最后是給誰看的，一共在項(xiàng)目中會(huì)有多少文檔產(chǎn)生。

通常產(chǎn)品經(jīng)理會(huì)在項(xiàng)目初期做一份prd文檔（Product-RequirementDocument，需求說明文檔），這個(gè)prd文檔主要是給業(yè)務(wù)方、交互和開發(fā)看的，在這個(gè)文檔中需要包含一些業(yè)務(wù)規(guī)則以及交互規(guī)則，所以交互的輸出文檔是需要和產(chǎn)品的prd文檔合并的。

當(dāng)然如果你是一位很有自驅(qū)力的人，那么你可以自己推進(jìn)需求并落地，一個(gè)人就可以完成prd文檔的撰寫和需求的落地了。

開發(fā)

特別想給各位提個(gè)醒，在開發(fā)需求評(píng)審的過程中，請(qǐng)一定記住你們?cè)u(píng)審的目的，開發(fā)同學(xué)也要注意，請(qǐng)把重點(diǎn)放在需求是否能實(shí)現(xiàn)以及開發(fā)相關(guān)的地方即可，請(qǐng)不要考慮為什么要這樣做，或者你覺得應(yīng)該怎么設(shè)計(jì)，一旦進(jìn)入了開發(fā)對(duì)需求和設(shè)計(jì)的評(píng)頭論足那么這個(gè)會(huì)議效率就相當(dāng)?shù)拖隆?/strong>專業(yè)的事情就交給專業(yè)的人去做吧，可以私下討論但不要在評(píng)審會(huì)上各抒己見。