Dashboard的含義
Dashboard在B端設(shè)計(jì)的工作中是一個(gè)繞不開(kāi)的話題，在此我根據(jù)自己工作中實(shí)際的一些經(jīng)驗(yàn)總結(jié)給大家歸納出一篇更符合工作場(chǎng)景中Web端的Dashboard設(shè)計(jì)內(nèi)容。
Dashboard的中文直譯是儀表盤(pán)，最初與dashboard相關(guān)在界面出現(xiàn)的是蘋(píng)果電腦系統(tǒng)Mac OS X v10.4 Tiger操作系統(tǒng)中的應(yīng)用程序，用作稱(chēng)為“widget”的小型應(yīng)用程序之運(yùn)行基礎(chǔ)。
2013年Stephen Few寫(xiě)的《Information Dashboard Design》中指出“儀表盤(pán)是為了實(shí)現(xiàn)某些特定目標(biāo)而對(duì)重要信息進(jìn)行的視覺(jué)傳達(dá)，對(duì)一屏上的內(nèi)容進(jìn)行組織呈現(xiàn)使人一瞥便能掌握其所傳達(dá)的信息。簡(jiǎn)單點(diǎn)來(lái)說(shuō)就是：為用戶提供全局概覽，讓用戶快速掌握工作進(jìn)展及進(jìn)入工作狀態(tài)并可以訪問(wèn)最重要的數(shù)據(jù)，功能和控件。
Dashboard設(shè)計(jì)案例
以下是Dashboard常見(jiàn)4點(diǎn)設(shè)計(jì)不是很好的案例，現(xiàn)在帶大家一個(gè)個(gè)看下怎么才是更為合理。
案例一：右邊Dashboard上的信息做了層級(jí)的區(qū)分，相對(duì)左邊更加直觀。
案例二：左邊Dashboard顏色偏熒光色，色彩語(yǔ)言相對(duì)右邊不適合長(zhǎng)期工作使用。
案例三：設(shè)計(jì)方案時(shí)沒(méi)有采用格柵格化解決適配對(duì)不齊等等問(wèn)題
案例四：dashboard模塊之間間距沒(méi)有呼吸感。
B端設(shè)計(jì)中，設(shè)計(jì)師要實(shí)時(shí)了解哪些是重要內(nèi)容以及核心數(shù)據(jù)。Dashboard可以直接傳遞出：“業(yè)務(wù)整體狀況如何？有哪些關(guān)鍵指標(biāo)？各指標(biāo)的運(yùn)行情況分別如何？哪些指標(biāo)出現(xiàn)異常？需要用戶做些什么？”。由此可知，B端Dashboard產(chǎn)品中大多數(shù)都以看為主，輔以功能控制。主要分為監(jiān)控操作、分析處理兩大場(chǎng)景。當(dāng)業(yè)務(wù)較為復(fù)雜時(shí)，可以用戰(zhàn)略概覽場(chǎng)景提供快速入口。
1.監(jiān)控操作：
使用戶可以一目了然地檢查其狀態(tài)，提供關(guān)鍵指標(biāo)實(shí)時(shí)監(jiān)測(cè)并且告知異常狀態(tài)。更重視實(shí)時(shí)觀看狀態(tài)。
2.分析處理：
通過(guò)數(shù)據(jù)圖表，配合控件進(jìn)行不同維度的數(shù)據(jù)分析。以數(shù)據(jù)為中心，并顯示盡可能多的相關(guān)數(shù)據(jù)視圖。
數(shù)據(jù)性Dashboard。數(shù)據(jù)概覽可視化展示為主。幫助用戶提供較為直觀數(shù)據(jù)維度，更好分析決策。
綜合性Dashboard，既有提供數(shù)據(jù)全局概覽可視化，同時(shí)也能快速在頁(yè)面進(jìn)行操作完成工作。國(guó)內(nèi)B端產(chǎn)品最常出現(xiàn)的Dashboard功能模式。本篇文章也是著重介紹如何完成這個(gè)類(lèi)型需求
3.戰(zhàn)略概覽：
在復(fù)雜的業(yè)務(wù)中，可以呈現(xiàn)業(yè)務(wù)分散的重點(diǎn)信息，用戶可以通過(guò)提供入口快速跳轉(zhuǎn)至相關(guān)模塊。
B端設(shè)計(jì)過(guò)程中每多了解一個(gè)維度分析就更有利于下一步Dashboard框架搭建。因此在對(duì)Dashboard有了一些簡(jiǎn)單了解之后，我們?cè)賮?lái)了解下用戶場(chǎng)景。例如：用戶是財(cái)務(wù)人員審批商戶充值申請(qǐng)。工作人員進(jìn)入dashboard之后先是進(jìn)行充值打款申請(qǐng)。那么設(shè)計(jì)時(shí)可以考慮在Dashboard中加入常用功能：充值。并且需要給到相應(yīng)充值數(shù)據(jù)概覽：賬戶余額。每個(gè)B端產(chǎn)品都有自己特定工作場(chǎng)景。因此從用戶、場(chǎng)景和任務(wù)這三方面考慮，可以做到幫助設(shè)計(jì)師更清晰設(shè)計(jì)dashboard布局以及設(shè)計(jì)自查。
因此以上這些信息都是需要在設(shè)計(jì)Dashboard時(shí)弄清楚的內(nèi)容。
信息處理
當(dāng)弄清楚需要呈現(xiàn)信息內(nèi)容后，需要進(jìn)一步對(duì)信息做處理。從用戶的角度，舉個(gè)例子在FMS財(cái)務(wù)系統(tǒng)記賬中，財(cái)務(wù)需要查看季度報(bào)表。那么數(shù)據(jù)的單位以默認(rèn)季度呈現(xiàn)會(huì)更為符合使用用戶需求，準(zhǔn)確且高效。具體可以從以下四個(gè)維度來(lái)做進(jìn)一步處理：覆蓋范圍、時(shí)間跨度、粒度、個(gè)性定制。一般核心指標(biāo)不超過(guò)7個(gè)，確定核心指標(biāo)的聯(lián)系及優(yōu)先級(jí)。
合理的信息結(jié)構(gòu)能夠幫助用戶高效閱讀，理解內(nèi)容。如何將信息碎片有邏輯地組合在一起，合理呈現(xiàn)和布局，選擇使用什么結(jié)構(gòu)視內(nèi)容而定。
舉個(gè)例子：
對(duì)于管理者的角色來(lái)說(shuō)使用Dashboard的訴求是：及時(shí)把控業(yè)務(wù)情況
信息處理內(nèi)容：
1.掌握重要業(yè)務(wù)數(shù)據(jù)：經(jīng)營(yíng)數(shù)據(jù)，訂單數(shù)據(jù)，客戶數(shù)據(jù)；
2.了解員工工作進(jìn)度；
3.處理急需解決的工作任務(wù)。
對(duì)于執(zhí)行者的角色來(lái)說(shuō)使用Dashboard的訴求是：高效完成工作任務(wù)
信息處理內(nèi)容：
1.急需解決的工作任務(wù)：待發(fā)貨訂單，待退款，待跟進(jìn)客戶
2.了解自己的工作進(jìn)度
3.經(jīng)常使用的功能：發(fā)布商品，添加客戶，開(kāi)單
4.查看重要通知公告：公司發(fā)布的公告
Dashboard表現(xiàn)結(jié)構(gòu)常見(jiàn)兩種類(lèi)型：卡片型、流程型。
卡片型
最常見(jiàn)就是卡片型。即將有相關(guān)聯(lián)的內(nèi)容進(jìn)行分組呈現(xiàn)，讓Dashboard內(nèi)容歸類(lèi)而不雜亂無(wú)章。
流程型
內(nèi)容相互之間具有一定的邏輯關(guān)系，如地理位置關(guān)系、數(shù)字包含關(guān)系、對(duì)象父子關(guān)系等，這種結(jié)構(gòu)可以讓對(duì)象之間的邏輯關(guān)系十分直觀。很直觀的呈現(xiàn)了資源對(duì)象之間的相互關(guān)系。
國(guó)內(nèi)B端產(chǎn)品一般是由以下這幾個(gè)部分組成的。全局導(dǎo)航、數(shù)據(jù)概覽、待辦事項(xiàng)、常用功能、任務(wù)進(jìn)展、平臺(tái)推送、數(shù)據(jù)圖表。下面帶大家仔細(xì)看下具體每個(gè)部分具體如何設(shè)計(jì)。
1.全局導(dǎo)航
在B端Dashboard中，全局導(dǎo)航一般由三個(gè)部分組成。平臺(tái)LOGO、功能入口導(dǎo)航、快捷功能導(dǎo)航。
1.1平臺(tái)LOGO
一般這里都會(huì)放LOGO，對(duì)于一些壁壘標(biāo)準(zhǔn)化B端服務(wù)，這里通常是給好標(biāo)準(zhǔn)規(guī)則，后臺(tái)自動(dòng)配不同客戶的LOGO。因此要考慮到區(qū)域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務(wù)，那么就可以直接定制設(shè)計(jì)。
1.2功能入口導(dǎo)航
就是菜單導(dǎo)航，在B端Dashboard一般都是在側(cè)邊。建議最多不要超過(guò)9個(gè)，遵循7±2原則。盡量將同類(lèi)型歸類(lèi)，好好利用下二級(jí)分類(lèi)。另外入口不要太深，用戶容易找不到入口。盡量設(shè)計(jì)優(yōu)化合并來(lái)減少用戶使用負(fù)擔(dān)。
在國(guó)內(nèi)B端產(chǎn)品中，最常就是將功能入口導(dǎo)航放在側(cè)邊。適用于更專(zhuān)注功能和快速操作的系統(tǒng)
優(yōu)點(diǎn)：
拓展性，一級(jí)導(dǎo)航的數(shù)目可以展示更多；
層級(jí)清晰，一二三級(jí)導(dǎo)航都可以流暢展示；
操作效率高，用戶在操作和瀏覽中可以快速定位和切換當(dāng)前位置。
缺點(diǎn)：
視覺(jué)動(dòng)線左右折回，比頂部導(dǎo)航更易疲勞，
內(nèi)容區(qū)的排版空間更小，需要考慮適配問(wèn)題。
在國(guó)內(nèi)B端結(jié)構(gòu)比較龐大的后臺(tái)中,通常會(huì)將功能入口導(dǎo)航設(shè)計(jì)為混合模式。混合模式就是將功能入口分為頂部與側(cè)邊兩邊都有。這是因?yàn)閭?cè)邊模式已經(jīng)無(wú)法層級(jí)擴(kuò)展性已經(jīng)無(wú)法很好的滿足產(chǎn)品架構(gòu)了。
優(yōu)點(diǎn)：
層級(jí)拓展性強(qiáng)，可達(dá)四、五級(jí)導(dǎo)航。
缺點(diǎn)：
操作難度上升、視覺(jué)動(dòng)線更復(fù)雜。
還有一種模式：頂部模式，這種模式在國(guó)外產(chǎn)品中較多，在國(guó)內(nèi)的B端產(chǎn)品中較為少應(yīng)用。原因之一是起初最早的國(guó)內(nèi)B端產(chǎn)品就采用這種排版模式，在國(guó)內(nèi)形成了一種用戶操作習(xí)慣。國(guó)外最常見(jiàn)的B端頂部導(dǎo)航：saleforces、hubspot、zoho。
優(yōu)點(diǎn)：
沉浸感比側(cè)邊以及混合都要強(qiáng)，幾乎不會(huì)對(duì)于用戶的閱讀行為有干擾，因?yàn)閃eb也有頂部瀏覽器菜單。
缺點(diǎn)：
一級(jí)導(dǎo)航欄的欄數(shù)及字段內(nèi)容受限嚴(yán)重。國(guó)內(nèi)B端產(chǎn)品會(huì)有很多快捷功能就更不利用采用這種模式
1.3快捷功能導(dǎo)航
一般包含：消息通知、賬號(hào)信息、幫助中心、設(shè)置。在國(guó)內(nèi)B端產(chǎn)品中基本上都是在右上角
在B端Dashboard中，數(shù)據(jù)概覽通常都是選取最關(guān)注的數(shù)據(jù)指標(biāo)來(lái)展示，而不是全部數(shù)據(jù)；選取最關(guān)注的時(shí)間段，而非全部時(shí)間段。
構(gòu)成：數(shù)據(jù)名稱(chēng)+數(shù)字
這個(gè)模塊在設(shè)計(jì)表現(xiàn)上最重要就是信息層級(jí)的設(shè)計(jì)處理。如何能夠讓用戶一眼就看到最關(guān)注的數(shù)據(jù)內(nèi)容指標(biāo)。設(shè)計(jì)時(shí)注意突出數(shù)據(jù)才是關(guān)鍵。設(shè)計(jì)時(shí)關(guān)鍵數(shù)字上就要字號(hào)大一點(diǎn)，甚至可以采用特殊的數(shù)字字體，例如DIN系列，來(lái)加強(qiáng)對(duì)比。
待辦事項(xiàng)模塊通常是應(yīng)用在執(zhí)行角色的Dashboard中。節(jié)省工作人員尋找任務(wù)的時(shí)間，避免遺漏任務(wù)。
構(gòu)成：待辦事項(xiàng)名稱(chēng)+數(shù)字+可點(diǎn)擊跳轉(zhuǎn)的鏈接
待辦事項(xiàng)的展示方式可以是數(shù)據(jù)可視化也可以是數(shù)據(jù)概覽。但是有一點(diǎn)，數(shù)據(jù)必須是要能夠點(diǎn)擊的，因?yàn)榇k事項(xiàng)就是要有入口去操作。同時(shí)也可以把待辦事項(xiàng)平鋪出來(lái)，平鋪幾個(gè)可以根據(jù)具體情況定。如果待辦樣式本身很多的情況下，可以采用tap切換的樣式全部展示出來(lái)。
用戶高頻操作快捷入口，點(diǎn)擊跳轉(zhuǎn)相應(yīng)操作頁(yè)面。這個(gè)模塊每個(gè)b端產(chǎn)品都不一樣，需要仔細(xì)反復(fù)斟酌是否是用戶需要的高頻功能。
用戶當(dāng)前最關(guān)心的任務(wù)，常用進(jìn)度條或者時(shí)間軸的形式表示。
平臺(tái)用來(lái)觸達(dá)企業(yè)的信息，一般有產(chǎn)品更新動(dòng)態(tài)，學(xué)習(xí)培訓(xùn)，客服，廣告推送，活動(dòng)消息（這個(gè)一般比較常出現(xiàn)在平臺(tái)類(lèi)的b端產(chǎn)品中）
卡片式數(shù)據(jù)圖表可以拆分成圖表+輔助兩種組成部分
7.1圖表
B端設(shè)計(jì)師需要準(zhǔn)確通過(guò)圖表來(lái)表達(dá)出用戶需要的維度信息。
7.1.1折線圖
隨時(shí)間（連續(xù)內(nèi)容）而變化的連續(xù)數(shù)據(jù)，適合表現(xiàn)趨勢(shì)。Y 軸刻度值選擇要合理，以數(shù)據(jù)波動(dòng)要最大化的顯示
7.1.2面積圖
面積圖和折線圖比較類(lèi)似，針對(duì)只有單個(gè)數(shù)據(jù)類(lèi)型有面積區(qū)域的表達(dá)效果比折線圖好。數(shù)據(jù)類(lèi)型盡量不要超過(guò)2個(gè)，有2個(gè)數(shù)據(jù)類(lèi)型時(shí)，注意調(diào)整面積區(qū)域的透明度以及色系保持統(tǒng)一
7.1.3柱狀圖
通常用來(lái)統(tǒng)計(jì)累積疊加數(shù)據(jù)，數(shù)據(jù)之間能夠非常清晰直觀對(duì)比。柱狀圖的單位寬度不要是固定值，單位寬度之間間距在不同分辨率屏幕下的對(duì)比要合理。不用大圓角元素，不夠嚴(yán)謹(jǐn)，太活潑。最多使用兩種顏色，一種默認(rèn)，一種hover或tap，保持界面統(tǒng)一性
7.1.4扇形圖
有共同的上一級(jí)層級(jí)作為統(tǒng)計(jì)總合，數(shù)據(jù)之間平級(jí)且有占比。數(shù)據(jù)必須是正整數(shù)，至少兩個(gè)以上數(shù)據(jù)，且用不同顏色表示
7.1.5環(huán)形圖
與扇形圖很相似，但是比扇形圖更加直觀瀏覽且不被搶視覺(jué)。避免過(guò)于太細(xì)太粗，控制好留白呼吸感
以上是常用的圖形圖表，絕不是全部。有興趣的同學(xué)可以到以下兩個(gè)網(wǎng)站可以利用碎片化時(shí)間擴(kuò)展學(xué)習(xí)
EChart：
https://echarts.apache.org/examples/zh/index.html
AntV:
https://antv.gitee.io/zh](https://antv.gitee.io/zh
7.2輔助元素
卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細(xì)節(jié)元素組成：標(biāo)題、軸、提示信息、標(biāo)簽、氣泡信息、功能（篩選、導(dǎo)出、保存）。當(dāng)然在實(shí)際設(shè)計(jì)中，會(huì)根據(jù)場(chǎng)景去修飾刪減一些元素，以此來(lái)減少冗余信息，幫助用戶快速達(dá)成目標(biāo)，在最少的時(shí)間內(nèi)獲取更多的信息。
7.2.1標(biāo)題
標(biāo)題是區(qū)分卡片信息，迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴(yán)謹(jǐn)不重復(fù)，簡(jiǎn)潔概括。
7.2.2軸
軸上最重要的內(nèi)容就是單位，將每個(gè)數(shù)據(jù)在同一軸上都是維持同種基準(zhǔn)。便于進(jìn)行數(shù)據(jù)測(cè)量。
7.2.2.1軸的細(xì)節(jié)
現(xiàn)在知道了軸由哪幾部分構(gòu)成，那么接著了解細(xì)節(jié)
軸線
軸線細(xì)節(jié)一般只考慮是否顯示，在有網(wǎng)格線的情況下，可以考慮隱藏x/y軸線。通常顯示數(shù)據(jù)的軸作為隱藏，突出視覺(jué)重點(diǎn)，減少不必要的線條。
軸刻度
軸刻度是軸線上的間距不宜過(guò)密，確保信息可讀性以及呼吸感，根據(jù) 7±2 法則，在可見(jiàn)的卡片內(nèi)盡量保持這個(gè)規(guī)則，可以利用抽樣顯示的手段來(lái)優(yōu)化軸標(biāo)簽重疊的問(wèn)題，這種一般是在連續(xù)性內(nèi)容上可以使用。若軸上單位信息確實(shí)過(guò)多，雖然是連續(xù)性內(nèi)容例如展示30天單位，由于本身卡片信息不是過(guò)于最重要層級(jí)，設(shè)計(jì)在相對(duì)狹小空間尺寸中，那么建議考慮在軸線上安排滾動(dòng)條，并將重看單位放置前位。設(shè)計(jì)特別注意點(diǎn)，將滾動(dòng)條設(shè)計(jì)作為輔助元素不宜搶視覺(jué)。
網(wǎng)格線
網(wǎng)格線是用來(lái)輔助圖表數(shù)據(jù)直觀對(duì)比的，增加數(shù)據(jù)更快速的閱讀性。舉個(gè)例子：數(shù)據(jù)展示軸線在左邊。那么離左邊最近的數(shù)據(jù)圖形可能不需要網(wǎng)格線就能立即對(duì)應(yīng)到相應(yīng)數(shù)字。但是越靠近右邊的數(shù)據(jù)圖形就相對(duì)比左邊的數(shù)據(jù)圖形就比較難一眼識(shí)別。因此網(wǎng)格線也擔(dān)任了刻度尺的功能。在設(shè)計(jì)網(wǎng)格線時(shí)要注意網(wǎng)格線更多是輔助的角色。表現(xiàn)類(lèi)型可以選擇虛線或是實(shí)線。但是要把握好顏色選用不搶視覺(jué)重點(diǎn)又能看到。
7.2.3提示信息
以對(duì)照的方式來(lái)理解可視化對(duì)象的項(xiàng)目歸類(lèi)信息，總結(jié)圖形形狀和文本組成內(nèi)容。
7.2.4標(biāo)簽
在圖表中，標(biāo)簽是對(duì)當(dāng)前的一組數(shù)據(jù)進(jìn)行的內(nèi)容標(biāo)注。根據(jù)不同的圖表類(lèi)型選擇使用。
7.2.5氣泡信息
當(dāng)標(biāo)簽?zāi)J(rèn)不顯示，氣泡信息一般是鼠標(biāo)tap或者h(yuǎn)over時(shí)，顯示該位置的數(shù)據(jù)。在簡(jiǎn)潔的頁(yè)面中，也能讓用戶直觀看到信息對(duì)應(yīng)數(shù)據(jù)結(jié)果
7.2.6功能
這個(gè)模塊涉及的內(nèi)容偏多，在表單頁(yè)面更常出現(xiàn)，以后有機(jī)會(huì)可以單獨(dú)說(shuō)。一般常用功能如篩選、導(dǎo)出、保存?？梢宰層脩艨刂坪陀押玫捏w驗(yàn)
確定B端產(chǎn)品的設(shè)計(jì)風(fēng)格
首先tob的產(chǎn)品dashboard說(shuō)到底還是給使用用戶所使用，也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數(shù)據(jù)信息，還要傳遞服務(wù)于人。此外最重要的是B端設(shè)計(jì)師需要理解項(xiàng)目背景。例如某個(gè)財(cái)務(wù)應(yīng)用平臺(tái)不屬于科技未來(lái)感，而是突出一種安全，高效，具有客戶親和力的商業(yè)產(chǎn)品特性。那么關(guān)鍵詞：服務(wù)、輕松、高效、親和、精致。那么一個(gè)干凈、相對(duì)輕量、統(tǒng)一的Dashboard UI界面就提煉出來(lái)。
色彩
常說(shuō)色彩是一種情緒版，在Dashboard設(shè)計(jì)中，色彩也是映射關(guān)鍵詞的非常重要一個(gè)環(huán)節(jié)
字體
B端產(chǎn)品一般都是以數(shù)據(jù)為主要信息源，針對(duì)一些關(guān)鍵信息指標(biāo)時(shí)，可以采用特殊的數(shù)字字體。由于本身數(shù)字字體包內(nèi)存不大，所以也方便調(diào)用。例如DIN系列等等
設(shè)計(jì)稿尺寸
本篇內(nèi)容都是針對(duì)pc端內(nèi)容，具體移動(dòng)端以后有機(jī)會(huì)會(huì)分享。大多數(shù)B端設(shè)計(jì)師都知道以1440x900設(shè)計(jì)，但是在工作中會(huì)以埋點(diǎn)數(shù)據(jù)了解到事實(shí)上真實(shí)場(chǎng)景還是以1920x1080的尺寸為多數(shù)。畢竟時(shí)代不一樣了。以1440做設(shè)計(jì)主要還是考慮從上下兼容的角度的。B端與C端不同，C端往往照顧大多數(shù)的用戶群體或是主要消費(fèi)力群體。但是B端一般不會(huì)放棄任何一個(gè)用戶，哪怕定制化。這個(gè)在C端是不太現(xiàn)實(shí)的。因此適配對(duì)于B端產(chǎn)品來(lái)說(shuō)也是尤為重要。
設(shè)計(jì)原則
上面的內(nèi)容更多是闡述每個(gè)部分的內(nèi)容，實(shí)際工作中設(shè)計(jì)Dashboard時(shí)不一定按照那個(gè)順序進(jìn)行，因此在此再?gòu)?qiáng)調(diào)下設(shè)計(jì)Dashboard的設(shè)計(jì)順序以及原則。要先弄清楚目標(biāo)用戶以及使用場(chǎng)景，確定好關(guān)鍵的大約7個(gè)核心指標(biāo)。將用戶整個(gè)流程梳理流暢之后，再開(kāi)始考慮Dashboard設(shè)計(jì)執(zhí)行。
同時(shí)在設(shè)計(jì)執(zhí)行上也要特別注意幾個(gè)點(diǎn)：
1.突出核心指標(biāo)（7個(gè)左右）
2.信息層級(jí)區(qū)分
3.減少用戶選擇，盡可能默認(rèn)給到用戶需要的數(shù)據(jù)維度
4.界面簡(jiǎn)潔嚴(yán)謹(jǐn)
5.避免過(guò)多顏色與不統(tǒng)一
6.數(shù)據(jù)維度正確圖表選擇
設(shè)計(jì)的注意事項(xiàng)以及建議
1.tob的設(shè)計(jì)師要了解業(yè)務(wù)所處的周期在什么樣的階段。在探索期建議dashboard的設(shè)計(jì)應(yīng)用于市面上現(xiàn)成的組件進(jìn)行搭建，以便與研發(fā)團(tuán)隊(duì)一起為業(yè)務(wù)助力。更好更快的發(fā)展。
2.在tob的dashboard設(shè)計(jì)中，設(shè)計(jì)師要特別注意數(shù)據(jù)表現(xiàn)的落地效果
3.當(dāng)dashboard只在設(shè)計(jì)層面改版，并且改版內(nèi)容過(guò)大時(shí)，推薦保留舊版入口，提前進(jìn)行埋點(diǎn)用戶以便應(yīng)對(duì)用戶對(duì)于大版本適應(yīng)緩解焦慮。如果有新功能或功能調(diào)整要及時(shí)加入一些引導(dǎo)設(shè)計(jì)，以便減少用戶的學(xué)習(xí)成本。關(guān)于引導(dǎo)設(shè)計(jì)的內(nèi)容歡迎參考我的上一篇文章：《B端必看的引導(dǎo)設(shè)計(jì)（一）》
4.允許用戶定制和共享dashboard，雖然不適用于所有的B端產(chǎn)品，如果類(lèi)似于團(tuán)隊(duì)協(xié)作中多種角色共用一套的dashboard平臺(tái)，可以考慮引入這個(gè)功能。幾組定制模塊可以滿足于不同角色的用戶需求，并且能夠增加dashboard的使用率
5.dashboard關(guān)鍵信息數(shù)據(jù)盡量設(shè)計(jì)在一屏以內(nèi)，作為數(shù)據(jù)可視化，內(nèi)容快速瀏覽獲知全局，并且完成任務(wù)是比較重要的。
6. 突出統(tǒng)計(jì)數(shù)據(jù)的變化并對(duì)異常情況作出反應(yīng)
7.數(shù)字設(shè)置不一定要設(shè)置為右對(duì)齊，但是單位是金額，那么要將金額設(shè)置為右對(duì)齊，為了使用用戶識(shí)別方便，快速比較。
8.設(shè)計(jì)完Dashboard一定要自查一遍，是否真的符合工作人員的使用場(chǎng)景。有沒(méi)有理解不準(zhǔn)確的地方。
為什么b端設(shè)計(jì)師要懂得Dashboard，在很多b端業(yè)務(wù)場(chǎng)景中，有個(gè)特點(diǎn)，設(shè)計(jì)師常常會(huì)接到大量數(shù)據(jù)展示要求。如果設(shè)計(jì)師對(duì)dashboard缺乏認(rèn)知，就有很大的可能性會(huì)造成信息雜亂，并且在Dashboard的界面中充斥著一些無(wú)關(guān)緊要的指標(biāo)，這就是失去了Dashboard存在的意義。另一方面在b端產(chǎn)品中，Dashboard往往是以首頁(yè)的形式出現(xiàn)的,是非常重要的。
文章來(lái)源：站酷 作者：一九互七
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
當(dāng)我們?cè)O(shè)計(jì)師輸出了精美的設(shè)計(jì)稿，然后附帶了一個(gè)流暢的手勢(shì)動(dòng)畫(huà)，交付給開(kāi)發(fā)的時(shí)候，也期待著開(kāi)發(fā)大佬搞出和自己預(yù)期一樣體驗(yàn)流暢。但是等到實(shí)際體驗(yàn)的時(shí)候，卻發(fā)現(xiàn)有一種說(shuō)不出的鬧心。
“這個(gè)感覺(jué)不好按...”
“劃起來(lái)咋這么費(fèi)勁呢？”
“怎么感覺(jué)動(dòng)畫(huà)怪怪的?！?
當(dāng)你正準(zhǔn)備和開(kāi)發(fā)一通友好探討的時(shí)候，這個(gè)時(shí)候開(kāi)發(fā)向你發(fā)起了一系列靈魂拷問(wèn)：
“你這個(gè)左滑的手勢(shì)，劃多少才算觸發(fā)？劃多快才算觸發(fā)？如果劃了一半劃回去算不算觸發(fā)？如果我先點(diǎn)擊后滑動(dòng)算不算觸發(fā)？松手之后的動(dòng)畫(huà)是多快的速度？什么速度曲線？要不要回彈效果？回彈阻尼系數(shù)是多少？”
這個(gè)時(shí)候你發(fā)現(xiàn)，自己提出的設(shè)計(jì)需求根本太天真了。
剛才的問(wèn)題真實(shí)原因是，在做很多手勢(shì)識(shí)別或者一些我們看起來(lái)日常的效果，其實(shí)是蘊(yùn)含了很多復(fù)雜邏輯的。
這些復(fù)雜邏輯原本被封裝在操作系統(tǒng)內(nèi)，在系統(tǒng)內(nèi)時(shí)可以隨時(shí)調(diào)用。但是一旦脫離了操作系統(tǒng)，那手勢(shì)的處理邏輯就會(huì)比較簡(jiǎn)陋，導(dǎo)致最終的體驗(yàn)不佳。
那這個(gè)時(shí)候也許你會(huì)想問(wèn)，我們?cè)趺磿?huì)脫離操作系統(tǒng)呢？我們的手機(jī)不都是iOS和Android的嗎？不都是操作系統(tǒng)嗎？其實(shí)這里指的操作系統(tǒng)，是指操作系統(tǒng)的原生組件。這類(lèi)組件只有在原生開(kāi)發(fā)中才能被調(diào)用。
如今，很多App都使用前端語(yǔ)言來(lái)開(kāi)發(fā)內(nèi)部頁(yè)面(HTML/CSS/JS)。隨著Web混合開(kāi)發(fā)，F(xiàn)lutter等跨端技術(shù)棧的出現(xiàn)，越來(lái)越多的團(tuán)隊(duì)開(kāi)始擁抱這樣的跨平臺(tái)技術(shù)棧。在節(jié)約了開(kāi)發(fā)成本的同時(shí)，隨之而來(lái)的就是，在日常開(kāi)發(fā)過(guò)程中，離純?cè)M件越來(lái)越遙遠(yuǎn)。
在這樣的背景下，研發(fā)團(tuán)隊(duì)的體驗(yàn)設(shè)計(jì)師需要自己來(lái)研究用戶行為，手勢(shì)、組件和動(dòng)效，實(shí)現(xiàn)原生組件類(lèi)似的復(fù)雜邏輯，才能最大程度的接近甚至超越原生組件的體驗(yàn)。
其實(shí)使用各個(gè)技術(shù)框架，也是有內(nèi)置一些接口的。例如一些事件監(jiān)聽(tīng)器 / 動(dòng)效曲線等。這也是騰訊文檔之前一直在使用的，但是會(huì)遇到一些問(wèn)題?？偨Y(jié)下來(lái)，主要有以下幾個(gè)問(wèn)題：
無(wú)法精確操作：用戶的操作和操作反饋被自己的手指擋住，無(wú)法完成精確操作。
手勢(shì)識(shí)別誤觸：同一熱區(qū)支持了多個(gè)手勢(shì)，可是用戶的實(shí)操時(shí)的手勢(shì)動(dòng)作又沒(méi)那么標(biāo)準(zhǔn)，導(dǎo)致用戶誤觸其他手勢(shì)。
手勢(shì)觸發(fā)費(fèi)力：滑動(dòng)費(fèi)勁，需要滑動(dòng)很長(zhǎng)距離才能觸發(fā)預(yù)期的動(dòng)作。
動(dòng)畫(huà)不流暢：各個(gè)技術(shù)框架自帶的動(dòng)畫(huà)曲線和插值器，良莠不齊，體驗(yàn)不統(tǒng)一且不夠流暢。
對(duì)于原生組件，我們習(xí)以為常的系統(tǒng)控件和手勢(shì)設(shè)計(jì)，里面蘊(yùn)含的智慧遠(yuǎn)比我想象的更多。
舉個(gè)簡(jiǎn)單的例子：iOS系統(tǒng)的首頁(yè)，它可以支持橫豎各個(gè)方向的滑動(dòng)，并且在觸發(fā)一個(gè)方向的手勢(shì)之后，就無(wú)法再觸發(fā)其他手勢(shì)了。
但是其實(shí)有個(gè)問(wèn)題，手指和平時(shí)演示的不太一樣。
就是手指貼合上屏幕的時(shí)候，手指與屏幕的貼合面，并不是均勻向四周擴(kuò)散的，而是向下的擴(kuò)散更大一些。對(duì)于觸摸中心點(diǎn)，在觸摸的過(guò)程中，就會(huì)有向下的一個(gè)偏移。
如果直接識(shí)別，這個(gè)偏移直接被識(shí)別為向下滑動(dòng)，那就會(huì)無(wú)法觸發(fā)左右滑動(dòng)的手勢(shì)。
例如在iOS內(nèi)的手勢(shì)識(shí)別，有一個(gè)專(zhuān)門(mén)的接口來(lái)做識(shí)別：PanGestureRecognizer，這個(gè)接口會(huì)在10px內(nèi)先判定手指移動(dòng)的方向和距離，再對(duì)具體觸發(fā)的手勢(shì)來(lái)做定義。例如下圖，雖然剛開(kāi)始手指位置有些許下移，但是最終還是可以左滑判定成功。
所以你會(huì)發(fā)現(xiàn)，如果在iOS桌面上輕微的向左右滑動(dòng)(10pt內(nèi))，桌面是不會(huì)有任何響應(yīng)的。就是因?yàn)樵?0pt內(nèi)，系統(tǒng)還無(wú)法確認(rèn)手勢(shì)的方向。
另外，系統(tǒng)還自帶了很多手勢(shì)反饋操作，包括回彈效果，甩出效果。里面的小邏輯設(shè)計(jì)需要非常精準(zhǔn)。并且對(duì)于滑動(dòng)的手勢(shì)還帶了回彈效果，看起來(lái)非常爽。
騰訊文檔是基于Web / Flutter的應(yīng)用，并且接管了很多原生系統(tǒng)的能力，包括排版能力、光標(biāo)選區(qū)能力，拖動(dòng)能力等。因此，很多基于Native開(kāi)發(fā)能很簡(jiǎn)單解決的問(wèn)題，在Web下就要重新打磨一套我們?nèi)粘Ａ?xí)以為常卻邏輯復(fù)雜的組件。
由于騰訊文檔是基于Web的的應(yīng)用，接管了很多原生系統(tǒng)的能力，所以不能使用系統(tǒng)的Gesture Recognizer，也不能使用系統(tǒng)的選區(qū)光標(biāo)能力。
如果是簡(jiǎn)單的使用前端的操作監(jiān)聽(tīng)器，那會(huì)要求用戶使用極其標(biāo)準(zhǔn)的手勢(shì)操作才能觸發(fā)，否則就會(huì)觸發(fā)失敗。因此需要設(shè)計(jì)更精準(zhǔn)且適應(yīng)性的規(guī)則，來(lái)包容用戶不那么標(biāo)準(zhǔn)的實(shí)操手勢(shì)。需要幫助用戶在粗糙的實(shí)操手勢(shì)下，猜測(cè)用戶原圖，并精準(zhǔn)完成的操作。
可能你以為手勢(shì)操作并不常用，其實(shí)并不是的。
一個(gè)單擊，一個(gè)雙擊，其實(shí)本質(zhì)上都是手勢(shì)。
不過(guò)，很多人可能會(huì)認(rèn)為，按說(shuō)這些操作都有原生的監(jiān)聽(tīng)器，不需要再去定義。但是其實(shí)如果不做一些進(jìn)階定義，就會(huì)出現(xiàn)操作不靈敏的問(wèn)題。例如下面這個(gè)問(wèn)題。
在很多安卓手機(jī)上，或者是我們自己的騰訊文檔里，時(shí)常遇到一個(gè)問(wèn)題：就是原本以為雙擊文本區(qū)域可以選中文字，可是卻發(fā)現(xiàn)這個(gè)雙擊成了一個(gè)玄學(xué)事件。雙擊有時(shí)生效而有時(shí)不生效。
理想的雙擊大概是這樣的，是需要2次有效的Tap事件：
這個(gè)Bug讓我們來(lái)定位一下。讓我們還原一下事情的經(jīng)過(guò)：
哦！原來(lái)是因?yàn)殡p擊的其中一稍微偏移了一下，拖動(dòng)到了光標(biāo)，導(dǎo)致系統(tǒng)判定是一次Tap一次Drag的行為，這樣就沒(méi)有辦法觸發(fā)雙擊行為了。
解決方法也很簡(jiǎn)單。把10px偏移距離內(nèi)的滑動(dòng)行為都判定為點(diǎn)擊行為就可以了。從這里看，我們其實(shí)需要做的是，規(guī)范“點(diǎn)擊”這個(gè)手勢(shì)的定義。
因?yàn)樵瓉?lái)的系統(tǒng)自帶定義，容易造成誤操作，而且手指貼上屏幕的時(shí)候，都會(huì)產(chǎn)生輕微位移，或者一不小心滑動(dòng)了頁(yè)面，或者不小心拖動(dòng)了光標(biāo)，導(dǎo)致手勢(shì)識(shí)別的不靈敏。
原定義：“點(diǎn)擊并在500ms內(nèi)在原處松手”。
需重新定義為：“點(diǎn)擊并在在500ms內(nèi)，在10px以內(nèi)處松手”。
另外，文檔移動(dòng)端也定義了一系列更進(jìn)階的手勢(shì)的操作，在這樣對(duì)手勢(shì)的進(jìn)階定義后，操作可以被更精準(zhǔn)和智能的判斷。這些定義被寫(xiě)在了設(shè)計(jì)規(guī)范中，包括了單擊 / 雙擊 / 長(zhǎng)按 / 拖拽
騰訊文檔的整個(gè)文本編輯區(qū)域都是使用Canvas實(shí)現(xiàn)的，由前端自主控制渲染。因此，選區(qū)光標(biāo)就無(wú)法直接使用系統(tǒng)能力，需要設(shè)計(jì)師來(lái)設(shè)計(jì)一套選區(qū)光標(biāo)，并且支持系統(tǒng)的各種選區(qū)光標(biāo)的手勢(shì)。
由于騰訊文檔的光標(biāo)選區(qū)是非?；A(chǔ)基礎(chǔ)的編輯組件。這個(gè)組件在一般的產(chǎn)品中，都是直接復(fù)用的系統(tǒng)組件，但是在騰訊文檔中，就需要重新去考慮光標(biāo)組件。
首先有個(gè)需求，光標(biāo)是可以在文本中快速拖動(dòng)的。
經(jīng)常會(huì)遇到拖動(dòng)。無(wú)論是光標(biāo)拖動(dòng)，還是長(zhǎng)按選中，我們都希望能清楚的看到光標(biāo)的位置，所以我們?cè)谟脩敉蟿?dòng)光標(biāo)和選區(qū)的時(shí)候，使被拖動(dòng)的組件放大1.5倍，使用戶可以看到拖動(dòng)效果。
這就夠了嗎？不夠的。
如果用戶想要精準(zhǔn)的控制光標(biāo)，首先要讓用戶完整的看到光標(biāo)。用戶在拖動(dòng)光標(biāo)的時(shí)候，手指經(jīng)常會(huì)不自覺(jué)的向下移動(dòng)。這是為了讓自己看清光標(biāo)，這個(gè)時(shí)候，我們不應(yīng)該把這個(gè)移動(dòng)當(dāng)做是把光標(biāo)向下移動(dòng)一行，光標(biāo)本身不應(yīng)該跟隨向下，應(yīng)該只在同一行，并且只響應(yīng)左右移動(dòng)。
但是當(dāng)我向下拖更多距離的時(shí)候，光標(biāo)就應(yīng)該一直保持在手的上方，以確保用戶可以精確操作。
同樣，我們定義了長(zhǎng)按后可以拖動(dòng)選擇的手勢(shì)。在拖動(dòng)的過(guò)程中，允許用戶向下偏移一定的區(qū)域，來(lái)看清選區(qū)的具體邊界位置。
手機(jī)端的光標(biāo)選區(qū)，一個(gè)我們?nèi)粘Ａ?xí)以為常的光標(biāo)，里面竟然有那么多小細(xì)節(jié)在里面，才能讓光標(biāo)變得好用。
當(dāng)一個(gè)滑動(dòng)手勢(shì)被觸發(fā)時(shí)，我應(yīng)該如何判斷這個(gè)手勢(shì)已經(jīng)被觸發(fā)了呢？這個(gè)判斷并非簡(jiǎn)單的橫劃豎劃，而是針對(duì)的不同的場(chǎng)景，去做特殊的處理的。
案例1：向下滑動(dòng)手勢(shì)
例如說(shuō)，一個(gè)非常簡(jiǎn)單的手勢(shì)，半屏向下滑動(dòng)關(guān)閉。我們通常來(lái)說(shuō)我們的日常體驗(yàn)，會(huì)是一個(gè)對(duì)距離的判斷，當(dāng)手指拖動(dòng)容器超過(guò)一定的距離，然后松手，就可以觸發(fā)手勢(shì)。
但是僅僅判斷距離是不夠的。因?yàn)槭謩?shì)是對(duì)現(xiàn)實(shí)世界的映射。很多時(shí)候用戶希望滑動(dòng)很短的距離，把東西“甩”出去。
如果僅僅判斷距離，那就很難“甩”出去。這時(shí)候就還需要判定用戶手指在離屏?xí)r的速度了。最后能達(dá)成一個(gè)比較輕松就能觸發(fā)手勢(shì)的結(jié)果。
案例2：左右切換相機(jī)
這是騰訊文檔的文檔掃描頁(yè)面。上半屏是大面積的取景畫(huà)面，底部是文檔類(lèi)型的選擇。
因?yàn)槿【绊?yè)面可以點(diǎn)擊對(duì)焦和測(cè)光，因此輕微的滑動(dòng)不應(yīng)該導(dǎo)致整個(gè)取景頁(yè)面或者底部Tab的滑動(dòng)，應(yīng)當(dāng)是當(dāng)整個(gè)頁(yè)面檢測(cè)到一個(gè)比較大的滑動(dòng)動(dòng)作之后，才自動(dòng)移動(dòng)切換。
但是如果需要離手才能觸發(fā)，如果用戶劃動(dòng)的速度比較慢，整個(gè)體驗(yàn)也會(huì)隨之變得過(guò)于拖沓。所以這里還加了一條邏輯：當(dāng)手指滑動(dòng)速度的加速度急劇減小時(shí)，不用松手也可以觸發(fā)手勢(shì)。這樣的體驗(yàn)感會(huì)覺(jué)得流暢很多。
在騰訊文檔中，點(diǎn)擊、滑動(dòng)、懸浮、長(zhǎng)按等手勢(shì)操作貫穿用戶的使用過(guò)程，動(dòng)畫(huà)效果是所有交互操作的視覺(jué)反饋，也許它沒(méi)有那么的「高逼格」，但它卻是這臺(tái)精密儀器運(yùn)轉(zhuǎn)不可缺少的“潤(rùn)滑劑”，流暢愉悅的動(dòng)效能夠讓體驗(yàn)更美好。
但是由于騰訊文檔起初是基于web混合開(kāi)發(fā)，后面又加入了Flutter框架，這就導(dǎo)致多個(gè)平臺(tái)、框架的動(dòng)效邏輯混在一起，在這個(gè)背景下，設(shè)計(jì)師們就需要從多方面重新梳理并定義動(dòng)畫(huà)的基礎(chǔ)規(guī)則。
自然流暢是騰訊文檔內(nèi)所有動(dòng)效運(yùn)行的基礎(chǔ)原則。
由于騰訊文檔是基于Web、flutter等多框架混合開(kāi)發(fā)的應(yīng)用，動(dòng)畫(huà)曲線又都是基于各自框架自帶的貝塞爾曲線（cubic-bezier），這就經(jīng)常導(dǎo)致一些同類(lèi)型的手勢(shì)操作，最后所呈現(xiàn)的動(dòng)畫(huà)效果卻相差很多。并且原生的動(dòng)畫(huà)曲線，在實(shí)際使用上并沒(méi)有達(dá)到很好的效果，只是能夠比沒(méi)有動(dòng)畫(huà)要強(qiáng)上一些。因此，確定一套統(tǒng)一、自然并且適合騰訊文檔的動(dòng)畫(huà)曲線，是設(shè)計(jì)師優(yōu)先要解決的問(wèn)題。
為此我們根據(jù)動(dòng)畫(huà)使用的場(chǎng)景，定義了四種標(biāo)準(zhǔn)曲線。同時(shí)輸出給開(kāi)發(fā)同學(xué)，作為標(biāo)準(zhǔn)可調(diào)用的曲線。
緩動(dòng)曲線應(yīng)用的場(chǎng)景最為廣泛，也是騰訊文檔的默認(rèn)曲線。相對(duì)于傳統(tǒng)web端或者flutter框架內(nèi)的默認(rèn)曲線，騰訊文檔的緩動(dòng)曲線開(kāi)始時(shí)會(huì)比較迅速，這樣能給用戶及時(shí)反饋、高效運(yùn)行的感受；在運(yùn)動(dòng)快結(jié)束的階段，為了避免快速反饋帶來(lái)急躁的負(fù)面感受，曲線會(huì)更加平緩，進(jìn)而使正在運(yùn)動(dòng)的元素吸引用戶的注意力，并讓用戶能夠有一定的思考時(shí)間，保證動(dòng)畫(huà)的合理性。
即減速曲線。運(yùn)動(dòng)元素在開(kāi)始階段時(shí)位移變化會(huì)很大，但是后面會(huì)越來(lái)越小。緩出曲線前期快速運(yùn)動(dòng)，不需要過(guò)多讓用戶留意，在結(jié)束的時(shí)候逐漸減慢速度，讓用戶關(guān)注到其新的狀態(tài)，用戶就可以提前切入到定位尋找的階段，等動(dòng)畫(huà)停止后就可以立即進(jìn)行操作。這種類(lèi)型的曲線通常是用在元素進(jìn)入界面時(shí)使用。
彈性曲線是一種基于阻尼彈性振蕩的原理實(shí)現(xiàn)的復(fù)雜曲線，阻尼比決定了曲線具體動(dòng)畫(huà)感受，根絕阻尼比的不同，彈性曲線可以分為三種，分別是欠阻尼運(yùn)動(dòng)、臨界阻尼運(yùn)動(dòng)及過(guò)阻尼運(yùn)動(dòng)。在騰訊文檔中，通常只會(huì)使用到欠阻尼運(yùn)動(dòng)及臨界阻尼運(yùn)動(dòng)。
彈性曲線卻并不適合在所有的使用場(chǎng)景中，因?yàn)檫@種運(yùn)動(dòng)一般情況會(huì)需要相對(duì)多一些的時(shí)間來(lái)完成整個(gè)運(yùn)動(dòng)過(guò)程，讓整個(gè)過(guò)程變得過(guò)于拖沓。同時(shí)過(guò)于活潑的彈性動(dòng)畫(huà)也會(huì)過(guò)分的吸引用戶注意力，打斷主進(jìn)程的操作，影響效率。
時(shí)長(zhǎng)是元素移動(dòng)所需的時(shí)間，在創(chuàng)建自然流暢的動(dòng)畫(huà)中起著重要作用。如果動(dòng)畫(huà)太慢，會(huì)使用戶感到卡頓和厭煩；但是如果速度太快，就會(huì)給人緊張急迫的感覺(jué)。因此動(dòng)畫(huà)的持續(xù)時(shí)間應(yīng)該給與用戶充分的反應(yīng)時(shí)間，同時(shí)又不用過(guò)久等待為標(biāo)準(zhǔn)。
在移動(dòng)端上，我們?cè)O(shè)定動(dòng)畫(huà)的持續(xù)時(shí)間在300-400ms。而在web端上，我們?cè)O(shè)定動(dòng)畫(huà)的持續(xù)時(shí)間在200-300ms內(nèi)。具體的運(yùn)動(dòng)時(shí)長(zhǎng)視具體動(dòng)畫(huà)而定，時(shí)長(zhǎng)并不一成不變。
曲線是動(dòng)效的靈魂，有時(shí)候你覺(jué)得平凡的動(dòng)畫(huà)，或許只需要簡(jiǎn)單地?fù)軇?dòng)那條運(yùn)動(dòng)曲線，就可以讓這個(gè)動(dòng)畫(huà)瞬間變得充滿靈氣。盡管曲線可以解決大部分動(dòng)效問(wèn)題，但在動(dòng)畫(huà)的實(shí)際落地中，還是有一些問(wèn)題，是它無(wú)法解決的。這就會(huì)涉及到動(dòng)畫(huà)更底層的渲染及邏輯。比如說(shuō)在web端，前端動(dòng)畫(huà)卡頓與否其實(shí)是和動(dòng)畫(huà)本身實(shí)現(xiàn)性能有關(guān)系的，瀏覽器的屏幕刷新率都可能被代碼拖慢。這也是騰訊文檔在初期并沒(méi)有在web端增加太多動(dòng)畫(huà)的原因，過(guò)多的動(dòng)畫(huà)效果其實(shí)意味著需要更多的性能資源傾斜到動(dòng)畫(huà)上。
在動(dòng)畫(huà)上除了希望提供自然流暢的積極體驗(yàn)，我們也希望繼續(xù)深入，“讓工具褪去冷冰的外殼，走進(jìn)與智能隔空對(duì)話的新世界”。讓體驗(yàn)更有情感，讓用戶更愉悅。
在待辦事項(xiàng)上，優(yōu)化前每當(dāng)用戶點(diǎn)擊完成一項(xiàng)事項(xiàng)時(shí)，完成動(dòng)畫(huà)僅僅是機(jī)械的從未完成向完成圖標(biāo)的替換，反饋效果非常“高效”的完成了它的任務(wù)，但是這樣就足夠了么？不一定，當(dāng)一項(xiàng)事項(xiàng)被列為待辦時(shí)，就證明這件事對(duì)于用戶來(lái)說(shuō)是重要的。在現(xiàn)實(shí)中，當(dāng)重要的事情完成時(shí)，我們都是歡欣的，就像心里在放煙花，完成待辦時(shí)候的動(dòng)畫(huà)理應(yīng)如此，讓用戶在完成的那一刻體驗(yàn)到“煙花”的綻放。
但是總有一些產(chǎn)品，或者是通用性的考慮，或者是一些歷史原因，或者是一些成本考量，走上了非原生開(kāi)發(fā)的路，這樣的產(chǎn)品在未經(jīng)打磨的情況下直接一把梭搞出來(lái)，的確會(huì)顯得卡頓，或者難用。
這其中不僅需要工程師一點(diǎn)一滴的性能優(yōu)化，這也對(duì)體驗(yàn)設(shè)計(jì)師對(duì)細(xì)節(jié)的把控提出了更高的要求。只有對(duì)用戶的行為處處關(guān)照，才能無(wú)限接近最極致的體驗(yàn)。
文章來(lái)源：站酷 作者：騰訊ISUX
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
招行估計(jì)是考慮到?jīng)]有配置現(xiàn)任經(jīng)理的詳情，又不想浪費(fèi)標(biāo)題右側(cè)的空間，才作此設(shè)計(jì)。
其他相關(guān)：這部分包含的基金公司、基金檔案、交易規(guī)則屬于并列關(guān)系，理應(yīng)出現(xiàn)的分割線卻沒(méi)有體現(xiàn)，雖不影響投資者使用但反映出UI組件規(guī)范缺乏一定邏輯性。
交易規(guī)則：在購(gòu)買(mǎi)時(shí)間點(diǎn)缺少了T日（交易日）收盤(pán)時(shí)間（15:00前）提示和周歷提示。頁(yè)面空間是富余的，完全可以將信息曝光提高投資者的時(shí)間感知度，而不是跳轉(zhuǎn)二級(jí)頁(yè)面才能了解詳情。
功能模塊十分豐富，cover了關(guān)于一只基金的所有直接和間接描述。直接的包含了概況、行情、歷史回測(cè)、持倉(cāng)、經(jīng)理介紹等內(nèi)容，間接的包含了問(wèn)答、討論、資訊、公告等內(nèi)容。
在產(chǎn)品的廣度與深度方面，天天基金選擇了把廣度拉寬，將很多二級(jí)內(nèi)容拍平，嵌入到一級(jí)頁(yè)面中，可以說(shuō)非常適合經(jīng)驗(yàn)型投資者，但隨之而來(lái)的劣勢(shì)也十分明顯 - 頁(yè)面過(guò)長(zhǎng)。
非常直觀，天天的基金頁(yè)面長(zhǎng)度是招行（或螞蟻）的兩倍不止。
有了上面招行基金詳情頁(yè)的大致結(jié)構(gòu)做支撐，這里就不把天天基金的頁(yè)面逐個(gè)模塊拆解分析了，我們挑一些有意思的來(lái)說(shuō)。
基金概況：跟隨漲跌變化的紅/綠頁(yè)頭，這是天天最具標(biāo)志性的設(shè)計(jì)之一，個(gè)人對(duì)此保留意見(jiàn)，這么大面積綠色在過(guò)去的一周，實(shí)在是令人焦慮。
凈值行情/歷史數(shù)據(jù)：天天基金在凈值模塊單列出了“單位凈值”和“累計(jì)凈值”的走勢(shì)圖，還直接標(biāo)明了不同時(shí)段區(qū)間內(nèi)的最高最低值。（“累計(jì)凈值”是基金自成立之日起至今的凈值表現(xiàn)，“單位凈值”是基金運(yùn)作期間扣除分紅和份額拆分影響之后的凈值表現(xiàn)。）
聽(tīng)說(shuō)這是區(qū)分老基民和新人小白最直接的一道坎，當(dāng)然作為一個(gè)UX設(shè)計(jì)師，我也就摻這一句，畢竟資格還遠(yuǎn)遠(yuǎn)夠不上老基民。
非常貼心的一點(diǎn)是，天天在這添加了定投該產(chǎn)品的收益可視化。根據(jù)歷史收益率回測(cè)和不同定投算法，進(jìn)行一段時(shí)間內(nèi)的收益率估算。與此類(lèi)似設(shè)計(jì)的產(chǎn)品還有漲樂(lè)財(cái)富通。
特色數(shù)據(jù)：這也是經(jīng)驗(yàn)投資者非常重視的三個(gè)指標(biāo)。波動(dòng)率反映收益率波動(dòng)的程度，越小越好；夏普比率指基金每承受一點(diǎn)風(fēng)險(xiǎn)能夠獲得多少超額收益，越高越好；最大回撤指基金凈值從最高到最低的降幅，越小越好。
基金持倉(cāng)：這又是一個(gè)老基民的福利專(zhuān)區(qū)。上面分析過(guò)招行基金持倉(cāng)tab的優(yōu)勢(shì)，而天天直接把帶有重倉(cāng)股盤(pán)中行情的持倉(cāng)列表、資產(chǎn)/行業(yè)分布餅圖直接嵌入到一級(jí)頁(yè)面里，雖然默認(rèn)只顯示前五只重倉(cāng)股，但對(duì)于了解相關(guān)板塊行情也很有幫助。
這一模塊的二級(jí)頁(yè)面也支持投資者切換時(shí)間去觀察基金經(jīng)理每一季度的調(diào)倉(cāng)風(fēng)格。其實(shí)我個(gè)人更傾向于直接把十大重倉(cāng)股行情全都放進(jìn)來(lái)，默認(rèn)折疊需要時(shí)展開(kāi)。畢竟調(diào)倉(cāng)不是個(gè)高頻動(dòng)作，我不會(huì)需要頻繁地跳進(jìn)二級(jí)頁(yè)面去觀察調(diào)倉(cāng)。
基金經(jīng)理：作為后臺(tái)烹飪的cook，這塊的簡(jiǎn)介過(guò)于“簡(jiǎn)潔”了。其實(shí)次一級(jí)的經(jīng)理詳情頁(yè)里有非常詳實(shí)的背景概述和任期間業(yè)績(jī)回報(bào)評(píng)估，完全可以精選一些標(biāo)簽化的內(nèi)容在一級(jí)模塊里完善包裝。
社交化：然后比較有意思的就是“社區(qū)”概念。天天基金上每只基金都分別有兩個(gè)“bar”，一個(gè)問(wèn)答吧一個(gè)貼吧，貼吧包含了問(wèn)答吧。
這里能體現(xiàn)出天天對(duì)于細(xì)分場(chǎng)景的重視。貼吧里的話題天南海北，吐槽的、圍觀的、提問(wèn)的、表態(tài)的、發(fā)小作文的、曬收益/虧損的，啥都有。
天天的產(chǎn)品經(jīng)理還是為提問(wèn)用戶單獨(dú)開(kāi)辟了一片凈土，讓內(nèi)容的傳播與觸達(dá)更加高效。
回到UI層面，天天基金頁(yè)面的文本內(nèi)容在邏輯結(jié)構(gòu)上比較復(fù)雜，但視覺(jué)上沒(méi)有將不同層級(jí)的對(duì)比度拉開(kāi)，導(dǎo)致文本信息過(guò)于平均，不利于重點(diǎn)信息的快速檢索。
財(cái)富號(hào)視頻：視頻可以展開(kāi)和收起。產(chǎn)品還給它配置了觀看人次，側(cè)面為該基金公司和旗下基金產(chǎn)品做熱度營(yíng)銷(xiāo)。
基金概況：除了基金相關(guān)的基本信息以外，模塊內(nèi)展示了晨星評(píng)級(jí)和關(guān)注人氣。既有客觀權(quán)威評(píng)估體系，也有用戶層的氛圍烘托，通過(guò)兩層信任力建設(shè)占領(lǐng)用戶心智。
信任力背書(shū)：“支付寶金選”是由支付寶理財(cái)智庫(kù)、中國(guó)證券報(bào)聯(lián)合推出的一套理財(cái)產(chǎn)品評(píng)估體系，背后有一些專(zhuān)家KOL背書(shū)。能夠篩選出部分歷史業(yè)績(jī)表現(xiàn)優(yōu)異、基金經(jīng)理業(yè)績(jī)突出的產(chǎn)品。
相比于前幾個(gè)信任力的營(yíng)造，這一點(diǎn)的重要性和優(yōu)先級(jí)遠(yuǎn)遠(yuǎn)勝出。因此在視覺(jué)層面也用黑金配色體現(xiàn)出權(quán)威性和尊享感。
能夠很明顯地察覺(jué)到互金平臺(tái)和金融機(jī)構(gòu)在產(chǎn)品包裝上的玩法不同：互金平臺(tái)傾向于權(quán)威背書(shū)和人氣營(yíng)銷(xiāo)，金融機(jī)構(gòu)傾向于指標(biāo)構(gòu)建和數(shù)據(jù)展示。
行情/數(shù)據(jù)：這一模塊增加了一個(gè)可以手動(dòng)關(guān)閉的tag，是關(guān)于“風(fēng)險(xiǎn)回報(bào)比率”的描述，一個(gè)聽(tīng)上去類(lèi)似“夏普比率”的指標(biāo)。優(yōu)勢(shì)在于螞蟻直接量化轉(zhuǎn)譯了指標(biāo)的結(jié)果——“好于同類(lèi)98%基金”，省去了投資者分析指標(biāo)的過(guò)程。
基金經(jīng)理介紹：關(guān)于這部分，雖然在基金經(jīng)理介紹的二級(jí)詳情頁(yè)里，天天基金比螞蟻財(cái)富要詳實(shí)得多，但一級(jí)模塊里螞蟻的人物包裝還是更到位。“金牛獎(jiǎng)得主”和學(xué)歷/從業(yè)背景簡(jiǎn)述能直觀地提高產(chǎn)品在用戶側(cè)的信任力。
持倉(cāng)行情：這可以說(shuō)是該頁(yè)面視覺(jué)創(chuàng)新的重頭戲。螞蟻財(cái)富由于相關(guān)個(gè)股數(shù)據(jù)缺失，并不能像招行和天天基金那樣橫向比對(duì)每個(gè)季度基金經(jīng)理的調(diào)倉(cāng)動(dòng)作，對(duì)于經(jīng)驗(yàn)投資者研判這只基金來(lái)說(shuō)，少了一個(gè)觀察維度。
而視覺(jué)層面的創(chuàng)新則顯得十分取巧，原本枯燥的個(gè)股行情列表被轉(zhuǎn)譯為可視化的矩陣，矩形的大小和底色能直接映射該股票的持倉(cāng)占比和實(shí)時(shí)行情。并且橫向滑動(dòng)的組件也支持在不跳轉(zhuǎn)的情況下完整顯示10只重倉(cāng)股。
對(duì)于持有或長(zhǎng)期關(guān)注這只基金的用戶而言，除非你要分析調(diào)倉(cāng)，否則是不需要頻繁進(jìn)入二級(jí)頁(yè)面查看持倉(cāng)明細(xì)的。
以及細(xì)致到小數(shù)點(diǎn)后兩位的持倉(cāng)占比，意義也不大，了解大致的配比關(guān)系即可。螞蟻這個(gè)可視化組件在帶來(lái)新穎視覺(jué)觀感的同時(shí)，也解決了這一問(wèn)題。
對(duì)于產(chǎn)品而言，信息架構(gòu)往往是最容易有爭(zhēng)議的部分。而金融產(chǎn)品的信息深度和業(yè)務(wù)復(fù)雜度尤為明顯，與之俱來(lái)的必然是各平臺(tái)在架構(gòu)策略上百花齊放。
文章來(lái)源：站酷 作者：loven
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
運(yùn)動(dòng)對(duì)數(shù)字產(chǎn)品的用戶體驗(yàn)產(chǎn)生了深遠(yuǎn)的影響，但是，如果界面元素沒(méi)有表現(xiàn)出基本的運(yùn)動(dòng)設(shè)計(jì)原理，則可用性會(huì)受到損害。在用戶界面的上下文中，動(dòng)作不僅僅是視覺(jué)裝飾。它是一種強(qiáng)大的力量，可增強(qiáng)產(chǎn)品參與度并擴(kuò)展設(shè)計(jì)交流的范圍。
我們的世界是運(yùn)動(dòng)之一。即使在靜止的瞬間，葉子也會(huì)發(fā)抖，肺部也會(huì)擴(kuò)張。在數(shù)字產(chǎn)品設(shè)計(jì)領(lǐng)域，運(yùn)動(dòng)似乎是第二自然，這是對(duì)日常工作的擴(kuò)展，可以毫不費(fèi)力地加以利用。
從理論上講，使UI元素移動(dòng)很容易。在預(yù)定路徑上定義點(diǎn)，然后軟件對(duì)間隙進(jìn)行補(bǔ)間。實(shí)際上，它不是那樣工作的。工具和技術(shù)是必不可少的，但它們是從原理中獲取力量的。如果要提高數(shù)字產(chǎn)品的可用性，就必須以適用于無(wú)數(shù)用例的不變行為規(guī)則為基礎(chǔ)。
運(yùn)動(dòng)設(shè)計(jì)的起源
運(yùn)動(dòng)設(shè)計(jì)與UX的結(jié)合相對(duì)較新，但其根源是迪士尼。迪斯尼原理是為了講故事而提煉出身體運(yùn)動(dòng)的基本定律。它們使繪制的角色能夠移動(dòng)和表情，但不能充分滿足現(xiàn)代用戶界面對(duì)交互運(yùn)動(dòng)的需求。
當(dāng)代設(shè)計(jì)師試圖彌合這一差距。更具說(shuō)明性的示例之一是動(dòng)畫(huà)設(shè)計(jì)的十項(xiàng)原則，這是迪士尼動(dòng)畫(huà)專(zhuān)家Jorge R. Canedo Estrada的改編作品。
在建立運(yùn)動(dòng)中用戶體驗(yàn)的原則時(shí)，可以從以下幾點(diǎn)入手
A. 從UI動(dòng)畫(huà)中區(qū)分運(yùn)動(dòng)設(shè)計(jì)
B. 闡明運(yùn)動(dòng)如何幫助可用性
C. 解開(kāi)核心運(yùn)動(dòng)行為的內(nèi)部運(yùn)作方式
運(yùn)動(dòng)不僅僅是裝飾
動(dòng)作設(shè)計(jì)不是UI動(dòng)畫(huà)的代名詞。這一點(diǎn)很關(guān)鍵，因?yàn)閁I動(dòng)畫(huà)幾乎總是被當(dāng)作一種經(jīng)過(guò)深思熟慮的外觀，而與UX沒(méi)有任何關(guān)系（除了增加魅力）。動(dòng)作不是裝飾，而是行為，行為只能幫助或阻礙用戶體驗(yàn)。
兩種互動(dòng)類(lèi)型：實(shí)時(shí)與非實(shí)時(shí)
運(yùn)動(dòng)設(shè)計(jì)涉及兩個(gè)基本交互：實(shí)時(shí)和非實(shí)時(shí)。
當(dāng)用戶在屏幕上操作UI元素時(shí)，實(shí)時(shí)交互可提供即時(shí)反饋。換句話說(shuō)，動(dòng)作行為會(huì)立即響應(yīng)用戶輸入。
用戶輸入后會(huì)發(fā)生非實(shí)時(shí)交互，這意味著用戶必須短暫暫停并觀察所產(chǎn)生的運(yùn)動(dòng)行為，然后才能繼續(xù)。
實(shí)時(shí)交互：運(yùn)動(dòng)行為會(huì)立即響應(yīng)用戶輸入。
非實(shí)時(shí)交互：交互后，用戶必須短暫等待并觀察動(dòng)作行為。
運(yùn)動(dòng)支持可用性
運(yùn)動(dòng)設(shè)計(jì)必須以四種不同的方式支持可用性。
A. 期望：當(dāng)用戶與UI元素交互時(shí)，他們期望看到哪些運(yùn)動(dòng)行為？運(yùn)動(dòng)是否符合預(yù)期或引起混亂？
B. 連續(xù)性：交互是否在整個(gè)用戶體驗(yàn)中產(chǎn)生一致的運(yùn)動(dòng)行為？
C. 敘述：交互及其觸發(fā)的動(dòng)作行為是否與滿足用戶意圖的事件的邏輯進(jìn)程相關(guān)聯(lián)？
D. 關(guān)系： UI元素的空間，美學(xué)和層次屬性如何相互關(guān)聯(lián)并影響用戶的決策？運(yùn)動(dòng)如何影響存在的各種元素關(guān)系？
數(shù)字產(chǎn)品的12種運(yùn)動(dòng)設(shè)計(jì)原理
1.緩和
緩和模仿現(xiàn)實(shí)對(duì)象隨時(shí)間加速和減速的方式。它適用于所有顯示運(yùn)動(dòng)的UI元素。
放松的反面是線性運(yùn)動(dòng)。顯示線性運(yùn)動(dòng)的UI元素立即從固定速度變?yōu)槿伲瑥娜僮優(yōu)楣潭?。這種行為在物理世界中不存在，并且對(duì)于用戶而言似乎停滯不前。
UI卡和相應(yīng)的椅子移動(dòng)很快，但是由于緩和，它們可以平穩(wěn)且受控地停下來(lái)。
2.偏移和延遲
當(dāng)多個(gè)UI元素同時(shí)且快速移動(dòng)時(shí)，用戶傾向于將它們組合在一起，而忽略了每個(gè)元素可能具有其自身功能的可能性。
偏移和延遲會(huì)在同時(shí)移動(dòng)的UI元素之間創(chuàng)建層次結(jié)構(gòu)，并傳達(dá)它們是相關(guān)的但又不同的信息。元素的時(shí)序，速度和間距不是完全同步，而是交錯(cuò)排列，從而產(chǎn)生微妙的“一個(gè)接一個(gè)”的效果。
當(dāng)用戶在屏幕之間漫游時(shí)，偏移和延遲表明存在多個(gè)交互選項(xiàng)。
這個(gè)加密貨幣應(yīng)用程序一次引入了多個(gè)UI元素。它們的到來(lái)有些交錯(cuò)，以通知用戶這些元素是相關(guān)的，但又是截然不同的。
3.父子元素關(guān)聯(lián)
父子元素關(guān)聯(lián)將一個(gè)UI元素的屬性鏈接到其他UI元素的屬性。當(dāng)父元素中的屬性更改時(shí)，子元素的鏈接屬性也會(huì)更改。所有元素屬性可以相互鏈接。
例如，父元素的位置可以綁定到子元素的比例。當(dāng)父元素移動(dòng)時(shí)，子元素的大小會(huì)增加或減小。
父子元素關(guān)聯(lián)會(huì)在UI元素之間創(chuàng)建關(guān)系，建立層次結(jié)構(gòu)，并允許多個(gè)元素立即與用戶進(jìn)行通信。因此，關(guān)聯(lián)在實(shí)時(shí)交互中使用時(shí)影響最大。
藍(lán)色滑塊的位置控制背景遮罩的不透明度，燈泡周?chē)陌l(fā)光效果的散布以及光強(qiáng)度標(biāo)度的數(shù)值。
4.轉(zhuǎn)型
當(dāng)一個(gè)UI元素變成另一個(gè)UI元素時(shí)，將發(fā)生轉(zhuǎn)換。例如，下載按鈕將轉(zhuǎn)換為進(jìn)度條，該進(jìn)度條將轉(zhuǎn)換為完成圖標(biāo)。
從UX的角度來(lái)看，轉(zhuǎn)換是一種向用戶顯示其相對(duì)于目標(biāo)的狀態(tài)（系統(tǒng)狀態(tài)的可見(jiàn)性）的有效方法。當(dāng)UI元素之間的進(jìn)度鏈接到帶有開(kāi)始和結(jié)束的過(guò)程（例如，下載文件）時(shí)，這特別有用。
轉(zhuǎn)換表示下載的開(kāi)始，中間和完成。
5.數(shù)據(jù)變化
在數(shù)字界面中，數(shù)據(jù)表示（數(shù)字，基于文本或圖形的表示）豐富，出現(xiàn)在從銀行應(yīng)用程序到個(gè)人日歷到電子商務(wù)站點(diǎn)的產(chǎn)品中。由于這些表示形式與實(shí)際存在的數(shù)據(jù)集相關(guān)聯(lián)，因此它們可能會(huì)發(fā)生變化。
值的變化傳達(dá)了數(shù)據(jù)表示的動(dòng)態(tài)性質(zhì)，并告知用戶數(shù)據(jù)是交互式的，并且可能會(huì)受到一定程度的影響。當(dāng)沒(méi)有動(dòng)靜地引入值時(shí)，用戶參與數(shù)據(jù)的意愿降低。
動(dòng)態(tài)引入值以向用戶顯示他們有能力影響數(shù)據(jù)。
6.遮罩
遮罩是UI元素各部分的戰(zhàn)略性揭示和隱藏。通過(guò)更改元素外圍的形狀和比例，遮罩會(huì)發(fā)出信號(hào)，表示實(shí)用性發(fā)生了變化，同時(shí)允許元素本身保持可識(shí)別性。因此，理想的選擇是諸如照片和插圖之類(lèi)的詳細(xì)視覺(jué)效果。
從可用性的角度來(lái)看，設(shè)計(jì)人員可以實(shí)施屏蔽以向用戶顯示他們正在通過(guò)一系列交互進(jìn)行中。
遮罩用于從圖像捕獲到上傳到在線店面中的過(guò)渡。
7.疊加
在2D空間中，沒(méi)有深度，UI元素只能沿X軸或Y軸移動(dòng)。疊加會(huì)在UI的2D空間中產(chǎn)生前景色/背景色的錯(cuò)覺(jué)。通過(guò)模擬深度，覆蓋可以根據(jù)用戶需要隱藏和顯示元素。
使用重疊時(shí)，信息層次結(jié)構(gòu)是一個(gè)重要的考慮因素。例如，用戶在做筆記應(yīng)用程序中應(yīng)該首先看到的是他們的筆記列表。然后，可以使用滑動(dòng)來(lái)公開(kāi)每個(gè)消息的輔助選項(xiàng)，例如刪除或存檔。
重疊式運(yùn)動(dòng)可讓用戶快速歸檔或刪除此記事應(yīng)用中的條目。
8.克隆
克隆是一種運(yùn)動(dòng)行為，其中一個(gè)UI元素拆分為其他元素。這是突出顯示重要信息或交互選項(xiàng)的聰明方法。
當(dāng)UI元素在界面中實(shí)現(xiàn)時(shí)，它們需要一個(gè)清晰的起點(diǎn)來(lái)鏈接到屏幕上已經(jīng)存在的元素。如果元素只是無(wú)處不在而突然爆發(fā)或消失，則用戶將缺乏進(jìn)行自信交互所需要的上下文。
用戶可以放心地單擊彩色圓圈，因?yàn)樗鼈冿@然源自“添加注釋”圖標(biāo)。
9.模糊
想象磨砂玻璃門(mén)。它需要交互才能打開(kāi)，但是可以（在某種程度上）辨別另一端正在等待什么。
它為用戶提供了一個(gè)界面，該界面要求進(jìn)行交互，同時(shí)顯示要跟隨的屏幕提示。導(dǎo)航菜單，密碼屏幕和文件夾/文件窗口是常見(jiàn)的示例。
模糊處理為用戶提供了重要的互動(dòng)方式，同時(shí)讓他們保持產(chǎn)品敘事的方向。
10.視差
當(dāng)兩個(gè)（或多個(gè)）UI元素同時(shí)移動(dòng)但速度不同時(shí)，將顯示視差。在此，目的是建立層次結(jié)構(gòu)。
A. 交互式元素移動(dòng)速度更快，并顯示在前景中。
B. 非交互式元素的移動(dòng)速度變慢并退回到背景。
視差引導(dǎo)用戶使用交互式UI元素，同時(shí)允許非交互式元素保留在屏幕上并保持設(shè)計(jì)統(tǒng)一性。
使用視差時(shí)，最重要的交互式元素移動(dòng)最快，而非交互式元素移動(dòng)較慢并退回到背景。
11.維度
維度使UI元素似乎具有多個(gè)交互方面，就像物理世界中的對(duì)象一樣。通過(guò)使元素看起來(lái)像是可折疊的，可翻轉(zhuǎn)的，浮動(dòng)的或具有逼真的深度屬性而實(shí)現(xiàn)的。
作為一種敘事設(shè)備，維度意味著UI元素的不同側(cè)面被鏈接在一起，并實(shí)現(xiàn)了無(wú)縫的屏幕過(guò)渡。
維度意味著2D UI元素具有多個(gè)交互方面，就像物理世界中的對(duì)象一樣。
12.變焦
滾動(dòng)和縮放允許用戶在空間上“遍歷” UI元素或增加其比例以顯示更多細(xì)節(jié)。
A. 滾動(dòng)：滾動(dòng)視角發(fā)生在用戶的角度更接近（或遠(yuǎn)離）UI元素時(shí)。想象一下，一個(gè)拿著照相機(jī)的人走到一朵花前要近距離拍攝。
B. 縮放：使用縮放時(shí)，用戶的視點(diǎn)和UI元素保持固定，但是該元素在用戶屏幕內(nèi)的大小增加（或減小）?，F(xiàn)在，假設(shè)該人保持姿勢(shì)并使用相機(jī)的變焦功能使花朵顯得更大。
滾動(dòng)：用戶的視點(diǎn)似乎越來(lái)越接近背景圖像。
縮放：用戶的視角不會(huì)更接近圖像。而是圖像的比例會(huì)增加。
運(yùn)動(dòng)就是溝通
互動(dòng)體驗(yàn)的需求運(yùn)動(dòng)在其所有的輕快和微妙的形式。當(dāng)堅(jiān)持運(yùn)動(dòng)設(shè)計(jì)原則時(shí)，即使最基本的UI元素也成為人類(lèi)交流的復(fù)雜媒介。當(dāng)這些原理被忽略時(shí)，運(yùn)動(dòng)就體現(xiàn)了自然界所沒(méi)有的特征。
運(yùn)動(dòng)設(shè)計(jì)與數(shù)字產(chǎn)品UX之間的關(guān)系正在迅速成熟。原則上的運(yùn)動(dòng)方法可以防止過(guò)度依賴(lài)趨勢(shì)，工具和技術(shù)的短暫使用。更好的是，它跨越了2D屏幕上元素的抽象運(yùn)動(dòng)與3D世界中運(yùn)動(dòng)感知之間的鴻溝。
文章來(lái)源：站酷 作者：DuiaDesign
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
表單已經(jīng)存在了很長(zhǎng)一段時(shí)間，自誕生以來(lái)極大地簡(jiǎn)化了起草申訴和各種法律訴狀的任務(wù)。隨著信息與處理技術(shù)的進(jìn)步，收集數(shù)據(jù)的手段也在不斷發(fā)展，而印刷表單已存在多年，我們可以從其設(shè)計(jì)中學(xué)到一些技巧。
用戶可以在文本欄內(nèi)輸入信息，它們通常以表單和對(duì)話框的形式出現(xiàn)。文本字段組件的設(shè)計(jì)應(yīng)為交互提供清晰的功能支持，使字段在布局中易識(shí)別、易填充和可訪問(wèn)。
以下是組成文本欄的關(guān)鍵要素：
容器：可交互的輸入?yún)^(qū)域；
輸入框：在文本欄中輸入文字；
提示：告訴用戶給出的表單字段是什么信息；
占位符：是所需信息的描述或示例，用戶輸入正確信息內(nèi)容后被替換；
幫助程序或驗(yàn)證文本（可選）：?jiǎn)为?dú)出現(xiàn)或以驗(yàn)證消息的形式出現(xiàn)；
頭部圖標(biāo)（可選）：描述文本字段的輸入類(lèi)型；
尾部圖標(biāo)（可選）：輸入文本的附加控件，例如清除，隱藏/顯示等。
它們大多數(shù)都是相對(duì)基礎(chǔ)的文本字段類(lèi)型，被修改成了處理特定類(lèi)型的信息，例如信用卡號(hào)。以下是我創(chuàng)建的UI中最常用的一些輸入類(lèi)型示例：
為收集的數(shù)據(jù)提供幫助規(guī)避錯(cuò)誤，讓用戶可以正確的輸入信息，從而使過(guò)程簡(jiǎn)單高效。
文本欄的狀態(tài)可以通過(guò)視覺(jué)提示來(lái)實(shí)現(xiàn)，輸入信息時(shí)的狀態(tài)有以下幾種：未激活、懸停、禁用、激活，驗(yàn)證、錯(cuò)誤。所有狀態(tài)應(yīng)清楚地被區(qū)分開(kāi)，并在整個(gè)表單和應(yīng)用中保持一致，簡(jiǎn)潔明了，不要誤導(dǎo)用戶。
通常標(biāo)簽定位有三種：頂部、左側(cè)和右側(cè)對(duì)齊。最適合的樣式將取決于表單的大小、主要目標(biāo)、組件庫(kù)和要為其設(shè)計(jì)的平臺(tái)，但它們都有各自優(yōu)點(diǎn)和缺點(diǎn)。
谷歌的“材料設(shè)計(jì)”指南中，普遍使用的下劃線輸入并不是最佳選擇。有趣的是，在一項(xiàng)研究結(jié)果中發(fā)現(xiàn)用戶更喜歡帶圓角的輸入框。
當(dāng)用戶不熟悉所請(qǐng)求的數(shù)據(jù)時(shí)，這是一個(gè)不錯(cuò)的選擇。
優(yōu)點(diǎn)：易于標(biāo)簽伸縮，充分利用垂直空間；
缺點(diǎn)：標(biāo)簽與對(duì)應(yīng)的文本欄，距離過(guò)元，增加用戶閱讀的時(shí)間成本。
與左對(duì)齊標(biāo)簽相比，完成時(shí)間快了將近兩倍。
優(yōu)點(diǎn)：標(biāo)簽和輸入欄靠近，限制了眼睛移動(dòng)的次數(shù)，從而縮短了完成時(shí)間；
缺點(diǎn)：難以快速瀏覽表單并理解所需的所有信息。
在移動(dòng)設(shè)備上效果很好，因?yàn)樗鼈儾恍枰嗟乃娇臻g。
優(yōu)點(diǎn)：用戶可以快讀瀏覽輸入標(biāo)簽和輸入文本；
缺點(diǎn)：需要更多垂直空間。
表單中的所有文本欄，若設(shè)置相同長(zhǎng)度確實(shí)會(huì)顯得非常美觀，但實(shí)際在操作上，卻很難完成。
占位符文本消失會(huì)給用戶制造緊張感，而去掉標(biāo)簽，用戶則無(wú)法在提交表單前檢查他們提供的信息。如果在設(shè)計(jì)時(shí)需要極簡(jiǎn)的表單，可以使用“材料設(shè)計(jì)”的浮動(dòng)標(biāo)簽法。表單內(nèi)的占位符文本還會(huì)使用戶感到困惑，最好在字段外使用提示文本。
使用自動(dòng)完成功能，填寫(xiě)時(shí)會(huì)幫助填寫(xiě)及查詢。一般在輸入時(shí)可以看到，對(duì)查詢內(nèi)容按Enter或右箭頭鍵就完成了填寫(xiě)；
使用Auto-Suggest搜索關(guān)關(guān)鍵字和短語(yǔ)時(shí)，下拉列表會(huì)顯示多個(gè)建議；
預(yù)填充字段會(huì)經(jīng)常使用智能默認(rèn)值，比如通過(guò)IP或地理位置，就能檢測(cè)獲取到用戶所在的國(guó)家和城市，或是根據(jù)常見(jiàn)的場(chǎng)景，自己定義默認(rèn)情況下的內(nèi)容。需要注意的是，電子商務(wù)是一個(gè)例外，請(qǐng)勿預(yù)先設(shè)置與購(gòu)買(mǎi)相關(guān)的任何偏好，比如尺寸或顏色；
還有一種應(yīng)用情境，自動(dòng)完成功能可以幫助用戶做出正確決定或避免錯(cuò)誤，比如用戶轉(zhuǎn)帳時(shí)看到賬戶余額等，請(qǐng)一定要提供該信息。
指的是用戶輸入信息后，可以實(shí)時(shí)檢查輸入內(nèi)容的有效性，而不是等用戶提交表單時(shí)一次性檢查。正確應(yīng)用，降低信息出錯(cuò)率：
在輸入內(nèi)容的文字欄下方顯示驗(yàn)證消息；
不要突然蹦出嚴(yán)重警告，填寫(xiě)的消息錯(cuò)誤時(shí)，應(yīng)告訴用戶如何解決，而非責(zé)怪。
消除視覺(jué)及認(rèn)知負(fù)擔(dān)，使界面看起來(lái)更加簡(jiǎn)潔。
不要將全名和日期之類(lèi)的文本分成多個(gè)字段；
不要多次詢問(wèn)相同的信息。
逐步公開(kāi)，提供必要提示即可，幫助用戶管理復(fù)雜信息。
根據(jù)用戶回答，條件邏輯允許在表單中自動(dòng)顯示、隱藏字段和跳過(guò)頁(yè)面。這種方法不僅可以減少字段數(shù)，而且可以使填寫(xiě)過(guò)程更像對(duì)話，也更具個(gè)性化。
簡(jiǎn)化表單的最有效方法，其中之一則是為相關(guān)字段進(jìn)行分組。格式塔心理學(xué)里有許多種分組原則，使項(xiàng)目有關(guān)聯(lián)性：接近性、相似性，連續(xù)性、閉合性和連通性。在界面中，如果將數(shù)十個(gè)非結(jié)構(gòu)化字段分組為幾個(gè)可管理的集合，將顯著提高表單的可用性。
一欄布局能為用戶創(chuàng)建一個(gè)清晰的完成路徑；使用多列表單布局，會(huì)導(dǎo)致用戶跳過(guò)實(shí)際需要輸入的字段，將數(shù)據(jù)填寫(xiě)到其他位置，這會(huì)迫使用戶停止甚至放棄填寫(xiě)。
有時(shí)，即使刪除了所有不必要的內(nèi)容后，某些表單還是很龐大。將大型任務(wù)分解為一系列的小任務(wù)反倒容易得多，也能激勵(lì)用戶堅(jiān)持到最后。
顯示步驟，直觀地告訴用戶實(shí)際進(jìn)度，這能提高用戶滿意度并激勵(lì)他們繼續(xù)前進(jìn)；
不要細(xì)化表單，太多的步驟非常啰嗦，只會(huì)惹惱用戶；
對(duì)關(guān)鍵信息進(jìn)行總結(jié)以減輕用戶焦慮，在最后設(shè)置復(fù)查步驟，幫助用戶檢查。
如果表單足夠大，可以分成多個(gè)步驟，那么就應(yīng)該有一個(gè)單獨(dú)的、重點(diǎn)明確的界面來(lái)專(zhuān)門(mén)處理它。在導(dǎo)航中用其他鏈接會(huì)破壞正常流程，導(dǎo)致邏輯混亂，而且在小型彈出窗口中也不建議使用多步驟表單。
Android或iOS提供了幾種不同的鍵盤(pán)類(lèi)型，每種類(lèi)型的鍵盤(pán)都旨在方便不同類(lèi)型的輸入。為了簡(jiǎn)化數(shù)據(jù)輸入，在編輯文本字段時(shí)顯示的鍵盤(pán)應(yīng)適合該字段中的內(nèi)容類(lèi)型，同時(shí)也要注意鍵盤(pán)出現(xiàn)的位置。將文本字段放在上方區(qū)域，避免滾動(dòng)展示。
允許密碼取消隱藏來(lái)代替多次密碼輸入，這對(duì)于生成密碼的應(yīng)用程序也更有效；
隨時(shí)顯示密碼要求，并顯示用戶滿足了哪些條件，方便查看進(jìn)度；
使用強(qiáng)度表鼓勵(lì)用戶創(chuàng)建更強(qiáng)更安全的密碼。
文章來(lái)源：站酷 作者：UX辭典
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
排版將文字從單純的文本轉(zhuǎn)換為巧妙的交流方式。字體和類(lèi)型設(shè)計(jì)可以說(shuō)出這么多–從突出的粗體字體到精致的襯線字體。從傳統(tǒng)的永恒變化到全新的技術(shù)。
字體在現(xiàn)代文化和商業(yè)中的突出地位受到包豪斯藝術(shù)運(yùn)動(dòng)的影響。赫伯特·拜耳（Herbert Bayer）是包豪斯（Bauhaus）的學(xué)生，并通過(guò)采用還原性極簡(jiǎn)主義的原則在版式設(shè)計(jì)上留下了杰出的印記。
數(shù)字圖形媒體和設(shè)計(jì)師本身的爆炸式增長(zhǎng)催生了各種各樣令人驚奇的想法和進(jìn)化。有些想法只是一時(shí)的流行，而另一些則是可以保留的趨勢(shì)。我們重點(diǎn)介紹了2021年最流行的字體趨勢(shì)。
1. 襯線字體
襯線字體當(dāng)然是永恒的–因此，當(dāng)以新的現(xiàn)代方式使用它們時(shí)，它們會(huì)重新出現(xiàn)在趨勢(shì)圖上。通過(guò)將細(xì)長(zhǎng)和粗體元素并置，我們看到古典襯線字體作為一種持續(xù)的趨勢(shì)重新回到設(shè)計(jì)中。尤其是受到美容和DTC品牌的推崇，該款式具有柔和的美感，可以在許多行業(yè)中使用。
我們的示例顯示了帶有泥土色的苗條襯線字體的優(yōu)雅搭配，從而柔和了整體氛圍。
Neubel本身是一家字體鑄造廠，使用柔和而優(yōu)雅的顏色托盤(pán)并將文本覆蓋在對(duì)比鮮明的藝術(shù)品上，以大膽地表達(dá)自己的觀點(diǎn)。
設(shè)計(jì)公司Autumn展示了視覺(jué)層次結(jié)構(gòu)的強(qiáng)大功能以及自信的版式和簡(jiǎn)單的形狀。
2.輪廓字體
輪廓字體在2020年出現(xiàn)了很多的創(chuàng)意，我們希望在2021年會(huì)看到更多。透明字體在與粗體，填充字體并排顯示時(shí)，更加強(qiáng)大。
我們的示例表明，輪廓傾向于在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)中心位置。Heetch在相同顏色的純色襯線字體上方使用藍(lán)紫色輪廓字體，以表現(xiàn)出對(duì)比效果。
Aldo在“走進(jìn)愛(ài)情”廣告系列中使用了當(dāng)年P(guān)antone顏色的陰影。廣告系列以自信和表達(dá)為中心，明亮的黃色將那種感覺(jué)放在了中心。輪廓字體是使粗體黃色發(fā)光的絕佳選擇。日本設(shè)計(jì)師Ukyo Masuda憑借中性灰色調(diào)色板為該群體錦上添花，盡管如此，它還是通過(guò)創(chuàng)意的輪廓字體而栩栩如生。
3.進(jìn)化的野獸派
如果您希望營(yíng)造視覺(jué)張力并擺脫標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的束縛，那么野獸派字體與現(xiàn)代野獸派元素相結(jié)合就可以完成工作。野獸派字體的清晰，原始，略顯復(fù)古的設(shè)計(jì)經(jīng)過(guò)了現(xiàn)代化改造，成為我們所謂的“進(jìn)化的野獸派”。在經(jīng)過(guò)改進(jìn)的版本中，苛刻的元素被軟化并與各種調(diào)色板和形狀結(jié)合在一起。
我們的示例顯示了進(jìn)化的野獸派的不同變體和組合。內(nèi)森·泰勒（Nathan Taylor）使用了大量實(shí)驗(yàn)元素和互動(dòng)性。整個(gè)設(shè)計(jì)是野獸派的，不僅僅是字體。這是對(duì)更加野蠻的野蠻主義的一個(gè)很好的展示，但是現(xiàn)代的元素使這種感覺(jué)更加精致和進(jìn)化。
4.文本與其他元素的分層
通過(guò)有意地分層排列文本和圖像，可以使得整個(gè)頁(yè)面更有空間感。這種組合使焦點(diǎn)很清楚。它允許用戶在滾動(dòng)之前暫停一秒鐘并全部接收信息。
這些示例是最有趣的。登錄Mammut貝加爾湖頁(yè)面后，您即會(huì)感受到電影般的震撼力。圖像的運(yùn)動(dòng)和貝加爾湖文字與人類(lèi)交織在一起，使您感覺(jué)自己像是體驗(yàn)的一部分。
德國(guó)品牌代理公司MJND的層次結(jié)構(gòu)要簡(jiǎn)單得多，但是層次感仍然很突出。對(duì)于那些使用文本和圖像的人來(lái)說(shuō)，這種設(shè)計(jì)更容易上手。
Owlsome Studio使字體更加突出，并在其后面分層顯示較小的正方形圖像。這是其他兩個(gè)示例的替代方案，但是由于它打破了網(wǎng)絡(luò)的現(xiàn)狀，因此可能以自己的方式產(chǎn)生影響。
5.文字圖像融合
比文本分層更進(jìn)一步的是文本與圖像相互融合，而兩者是密不可分的。這給圖像帶來(lái)真正的優(yōu)質(zhì)感，并引起您的注意。它們不再是文本和圖像層的組合，而是變成一個(gè)整體。
我們喜歡這種格式允許的創(chuàng)意表達(dá)，并提供無(wú)盡的組合。Satellite414使用透明的輪廓文字，這些文字實(shí)際上成為照片的一部分。它是動(dòng)態(tài)，現(xiàn)代和新鮮的。
Kieran Baybutt中文字完全取代了圖像。這使得文本部分與典型鏡頭一樣重要。Craig Reynolds中圖像和文本滑入和滑出組合，將它們合并在一起，從而使用戶注意到它們。
6.新迷幻效果
全新迷幻氛圍是對(duì)時(shí)髦色彩的復(fù)古回歸，融合了現(xiàn)代感。它借鑒了過(guò)去的迷幻設(shè)計(jì)。
從1960年代到1970年代的劇烈社會(huì)動(dòng)蕩帶來(lái)了新藝術(shù)和設(shè)計(jì)的變革。迷幻的影響在那個(gè)時(shí)代就很明顯了，今天我們看到了一種新的潮流。韋斯·威爾遜（Wes Wilson）是那個(gè)時(shí)代的重要設(shè)計(jì)師，他創(chuàng)造了一種新字體，成為該地區(qū)的象征-著名的迷幻設(shè)計(jì)。
Victor Moscoso為他的印刷沉重設(shè)計(jì)帶來(lái)了鮮艷的色彩，這些色彩影響了示例中所見(jiàn)的現(xiàn)代霓虹色調(diào)色板。
宙斯·瓊斯（Zeus Jones）是我們所看到的趨勢(shì)的完美典范–光譜中各種鮮艷的色彩，以夢(mèng)幻般的方式與斜體字體結(jié)合在一起，并為流動(dòng)的漸變帶來(lái)了清晰的通信效果。
查理·勒·麥格南（Charlie Le Maignan）為我們提供了一種有趣的復(fù)古字體，可在頁(yè)面上擴(kuò)展和折疊。此外，在Showreel部分，我們看到了一段令人迷惑的文字彩虹，讓人聯(lián)想起1970年代的專(zhuān)輯和那些酸酸的歌曲。
圣馬丁代理公司在令人眼花scene亂的場(chǎng)景中為我們帶來(lái)歡樂(lè)和情感的熔巖燈。字體與背景配合得很好–簡(jiǎn)單性與無(wú)窮復(fù)雜的色彩并置。
7.粗體現(xiàn)代襯線字體
到2021年，這并不是一個(gè)全新的概念，現(xiàn)代的襯線字體處理技術(shù)隨著新外觀的發(fā)展而不斷變化。
一個(gè)新的變化是，我們看到粗體襯線字體完全占據(jù)了屏幕。在許多情況下，文本是整體設(shè)計(jì)，而粗體的現(xiàn)代襯線字體則可解決問(wèn)題。
樣條線使用黑底紅字表示強(qiáng)烈的陳述，并使用完全大寫(xiě)的文字來(lái)增強(qiáng)效果。對(duì)于試圖喚起技能，信心和權(quán)威的公司，這種組合效果很好。
Orto保持簡(jiǎn)單，但將宏偉提升到另一個(gè)層次。超大，明亮的字體只會(huì)迫使您注意并進(jìn)一步深入。
8.賽博朋克風(fēng)格
也許最分裂的想法之一是計(jì)算機(jī)朋克和汽具美學(xué)。計(jì)算機(jī)，視頻游戲和1980年代流行美學(xué)的模糊組合以某種怪異，令人著迷的組合在一起。
80年代是數(shù)字游戲和新的計(jì)算機(jī)浪潮的開(kāi)始。賽博朋克和汽具設(shè)計(jì)是80年代復(fù)古設(shè)計(jì)的變體。隨著計(jì)算機(jī)和AI的發(fā)展，我們可能會(huì)看到印刷術(shù)和美學(xué)的新融合。
Next Big Thing Academy顯然具有對(duì)未來(lái)的關(guān)注。雖然這里的字體選擇不是什么極端的選擇，但總體上符合復(fù)古主義的未來(lái)美學(xué)。
浮標(biāo)也不使用任何大膽創(chuàng)新的字體，但是圖像與字體的整體配對(duì)符合這種趨勢(shì)。
文章來(lái)源：站酷 作者：DuiaDesign
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
排版將文字從單純的文本轉(zhuǎn)換為巧妙的交流方式。字體和類(lèi)型設(shè)計(jì)可以說(shuō)出這么多–從突出的粗體字體到精致的襯線字體。從傳統(tǒng)的永恒變化到全新的技術(shù)。
字體在現(xiàn)代文化和商業(yè)中的突出地位受到包豪斯藝術(shù)運(yùn)動(dòng)的影響。赫伯特·拜耳（Herbert Bayer）是包豪斯（Bauhaus）的學(xué)生，并通過(guò)采用還原性極簡(jiǎn)主義的原則在版式設(shè)計(jì)上留下了杰出的印記。
數(shù)字圖形媒體和設(shè)計(jì)師本身的爆炸式增長(zhǎng)催生了各種各樣令人驚奇的想法和進(jìn)化。有些想法只是一時(shí)的流行，而另一些則是可以保留的趨勢(shì)。我們重點(diǎn)介紹了2021年最流行的字體趨勢(shì)。
1. 襯線字體
襯線字體當(dāng)然是永恒的–因此，當(dāng)以新的現(xiàn)代方式使用它們時(shí)，它們會(huì)重新出現(xiàn)在趨勢(shì)圖上。通過(guò)將細(xì)長(zhǎng)和粗體元素并置，我們看到古典襯線字體作為一種持續(xù)的趨勢(shì)重新回到設(shè)計(jì)中。尤其是受到美容和DTC品牌的推崇，該款式具有柔和的美感，可以在許多行業(yè)中使用。
我們的示例顯示了帶有泥土色的苗條襯線字體的優(yōu)雅搭配，從而柔和了整體氛圍。
Neubel本身是一家字體鑄造廠，使用柔和而優(yōu)雅的顏色托盤(pán)并將文本覆蓋在對(duì)比鮮明的藝術(shù)品上，以大膽地表達(dá)自己的觀點(diǎn)。
設(shè)計(jì)公司Autumn展示了視覺(jué)層次結(jié)構(gòu)的強(qiáng)大功能以及自信的版式和簡(jiǎn)單的形狀。
2.輪廓字體
輪廓字體在2020年出現(xiàn)了很多的創(chuàng)意，我們希望在2021年會(huì)看到更多。透明字體在與粗體，填充字體并排顯示時(shí)，更加強(qiáng)大。
我們的示例表明，輪廓傾向于在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)中心位置。Heetch在相同顏色的純色襯線字體上方使用藍(lán)紫色輪廓字體，以表現(xiàn)出對(duì)比效果。
Aldo在“走進(jìn)愛(ài)情”廣告系列中使用了當(dāng)年P(guān)antone顏色的陰影。廣告系列以自信和表達(dá)為中心，明亮的黃色將那種感覺(jué)放在了中心。輪廓字體是使粗體黃色發(fā)光的絕佳選擇。日本設(shè)計(jì)師Ukyo Masuda憑借中性灰色調(diào)色板為該群體錦上添花，盡管如此，它還是通過(guò)創(chuàng)意的輪廓字體而栩栩如生。
3.進(jìn)化的野獸派
如果您希望營(yíng)造視覺(jué)張力并擺脫標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的束縛，那么野獸派字體與現(xiàn)代野獸派元素相結(jié)合就可以完成工作。野獸派字體的清晰，原始，略顯復(fù)古的設(shè)計(jì)經(jīng)過(guò)了現(xiàn)代化改造，成為我們所謂的“進(jìn)化的野獸派”。在經(jīng)過(guò)改進(jìn)的版本中，苛刻的元素被軟化并與各種調(diào)色板和形狀結(jié)合在一起。
我們的示例顯示了進(jìn)化的野獸派的不同變體和組合。內(nèi)森·泰勒（Nathan Taylor）使用了大量實(shí)驗(yàn)元素和互動(dòng)性。整個(gè)設(shè)計(jì)是野獸派的，不僅僅是字體。這是對(duì)更加野蠻的野蠻主義的一個(gè)很好的展示，但是現(xiàn)代的元素使這種感覺(jué)更加精致和進(jìn)化。
4.文本與其他元素的分層
通過(guò)有意地分層排列文本和圖像，可以使得整個(gè)頁(yè)面更有空間感。這種組合使焦點(diǎn)很清楚。它允許用戶在滾動(dòng)之前暫停一秒鐘并全部接收信息。
這些示例是最有趣的。登錄Mammut貝加爾湖頁(yè)面后，您即會(huì)感受到電影般的震撼力。圖像的運(yùn)動(dòng)和貝加爾湖文字與人類(lèi)交織在一起，使您感覺(jué)自己像是體驗(yàn)的一部分。
德國(guó)品牌代理公司MJND的層次結(jié)構(gòu)要簡(jiǎn)單得多，但是層次感仍然很突出。對(duì)于那些使用文本和圖像的人來(lái)說(shuō)，這種設(shè)計(jì)更容易上手。
Owlsome Studio使字體更加突出，并在其后面分層顯示較小的正方形圖像。這是其他兩個(gè)示例的替代方案，但是由于它打破了網(wǎng)絡(luò)的現(xiàn)狀，因此可能以自己的方式產(chǎn)生影響。
5.文字圖像融合
比文本分層更進(jìn)一步的是文本與圖像相互融合，而兩者是密不可分的。這給圖像帶來(lái)真正的優(yōu)質(zhì)感，并引起您的注意。它們不再是文本和圖像層的組合，而是變成一個(gè)整體。
我們喜歡這種格式允許的創(chuàng)意表達(dá)，并提供無(wú)盡的組合。Satellite414使用透明的輪廓文字，這些文字實(shí)際上成為照片的一部分。它是動(dòng)態(tài)，現(xiàn)代和新鮮的。
Kieran Baybutt中文字完全取代了圖像。這使得文本部分與典型鏡頭一樣重要。Craig Reynolds中圖像和文本滑入和滑出組合，將它們合并在一起，從而使用戶注意到它們。
6.新迷幻效果
全新迷幻氛圍是對(duì)時(shí)髦色彩的復(fù)古回歸，融合了現(xiàn)代感。它借鑒了過(guò)去的迷幻設(shè)計(jì)。
從1960年代到1970年代的劇烈社會(huì)動(dòng)蕩帶來(lái)了新藝術(shù)和設(shè)計(jì)的變革。迷幻的影響在那個(gè)時(shí)代就很明顯了，今天我們看到了一種新的潮流。韋斯·威爾遜（Wes Wilson）是那個(gè)時(shí)代的重要設(shè)計(jì)師，他創(chuàng)造了一種新字體，成為該地區(qū)的象征-著名的迷幻設(shè)計(jì)。
Victor Moscoso為他的印刷沉重設(shè)計(jì)帶來(lái)了鮮艷的色彩，這些色彩影響了示例中所見(jiàn)的現(xiàn)代霓虹色調(diào)色板。
宙斯·瓊斯（Zeus Jones）是我們所看到的趨勢(shì)的完美典范–光譜中各種鮮艷的色彩，以夢(mèng)幻般的方式與斜體字體結(jié)合在一起，并為流動(dòng)的漸變帶來(lái)了清晰的通信效果。
查理·勒·麥格南（Charlie Le Maignan）為我們提供了一種有趣的復(fù)古字體，可在頁(yè)面上擴(kuò)展和折疊。此外，在Showreel部分，我們看到了一段令人迷惑的文字彩虹，讓人聯(lián)想起1970年代的專(zhuān)輯和那些酸酸的歌曲。
圣馬丁代理公司在令人眼花scene亂的場(chǎng)景中為我們帶來(lái)歡樂(lè)和情感的熔巖燈。字體與背景配合得很好–簡(jiǎn)單性與無(wú)窮復(fù)雜的色彩并置。
7.粗體現(xiàn)代襯線字體
到2021年，這并不是一個(gè)全新的概念，現(xiàn)代的襯線字體處理技術(shù)隨著新外觀的發(fā)展而不斷變化。
一個(gè)新的變化是，我們看到粗體襯線字體完全占據(jù)了屏幕。在許多情況下，文本是整體設(shè)計(jì)，而粗體的現(xiàn)代襯線字體則可解決問(wèn)題。
樣條線使用黑底紅字表示強(qiáng)烈的陳述，并使用完全大寫(xiě)的文字來(lái)增強(qiáng)效果。對(duì)于試圖喚起技能，信心和權(quán)威的公司，這種組合效果很好。
Orto保持簡(jiǎn)單，但將宏偉提升到另一個(gè)層次。超大，明亮的字體只會(huì)迫使您注意并進(jìn)一步深入。
8.賽博朋克風(fēng)格
也許最分裂的想法之一是計(jì)算機(jī)朋克和汽具美學(xué)。計(jì)算機(jī)，視頻游戲和1980年代流行美學(xué)的模糊組合以某種怪異，令人著迷的組合在一起。
80年代是數(shù)字游戲和新的計(jì)算機(jī)浪潮的開(kāi)始。賽博朋克和汽具設(shè)計(jì)是80年代復(fù)古設(shè)計(jì)的變體。隨著計(jì)算機(jī)和AI的發(fā)展，我們可能會(huì)看到印刷術(shù)和美學(xué)的新融合。
Next Big Thing Academy顯然具有對(duì)未來(lái)的關(guān)注。雖然這里的字體選擇不是什么極端的選擇，但總體上符合復(fù)古主義的未來(lái)美學(xué)。
浮標(biāo)也不使用任何大膽創(chuàng)新的字體，但是圖像與字體的整體配對(duì)符合這種趨勢(shì)。
文章來(lái)源：站酷 作者：Ballen成名
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
在百度百科的定義中，阻力是物體在流體中相對(duì)運(yùn)動(dòng)所產(chǎn)生與運(yùn)動(dòng)方向相反的力。自然界中存在許多類(lèi)型的阻力，比如空氣阻力、水流阻力，各種各樣的生物因此進(jìn)化出相應(yīng)的身體特征去減少阻力。如下圖所示，擁有流線型外形的海豚掌握獨(dú)特的減少湍流摩擦阻力的游泳方法，這使其游速在某些條件下可以達(dá)到每小時(shí) 70-100km，遠(yuǎn)超現(xiàn)代潛艇的航速。
人類(lèi)為了擺脫自然界設(shè)計(jì)的阻力，做了許許多多的努力。采用纖維模仿鯊魚(yú)皮膚結(jié)構(gòu)的鯊魚(yú)皮泳衣能夠降低 30% 的水阻，提高人類(lèi)游泳速度。汽車(chē)的流線型設(shè)計(jì)減小渦旋作用或避免渦旋的形成大大地減低了空氣對(duì)其的阻力。
在人類(lèi)社會(huì)，人為設(shè)計(jì)的阻力也無(wú)時(shí)無(wú)刻不在。為了公共安全設(shè)立的安檢、為了交通安全而嚴(yán)格控制不同區(qū)域的最高車(chē)速、為了社會(huì)安定而設(shè)立的法律，諸如此類(lèi)的阻力都無(wú)時(shí)無(wú)刻規(guī)范著人類(lèi)的行為。
類(lèi)似地，對(duì)于互聯(lián)網(wǎng)產(chǎn)品，用戶在使用時(shí)也會(huì)被刻意地或非刻意地設(shè)計(jì)出的阻力所影響，這些阻力會(huì)阻礙用戶完成目標(biāo)。
在認(rèn)知心理學(xué)中，我們接受外部世界的刺激之后做出反應(yīng)的過(guò)程中，涉及到我們?nèi)绾胃兄?、學(xué)習(xí)、推理、記憶，以及如何把意圖轉(zhuǎn)化為行為。人類(lèi)數(shù)十萬(wàn)年的進(jìn)化過(guò)程中，對(duì)于感知、學(xué)習(xí)、推理、記憶的神經(jīng)結(jié)構(gòu)已經(jīng)初步進(jìn)化形成，大多數(shù)的人保持著相似的認(rèn)知能力和認(rèn)知缺陷。用戶在使用產(chǎn)品時(shí)感受到的阻力往往來(lái)自于設(shè)計(jì)師未能充分了解用戶的認(rèn)知能力，從而設(shè)計(jì)出容易導(dǎo)致用戶犯下認(rèn)知性錯(cuò)誤的產(chǎn)品。以下常見(jiàn)的人類(lèi)的認(rèn)知特點(diǎn)影響了我們感知和獲取信息的過(guò)程。
對(duì)于一件新事物，我們感知它的方式通常受到三個(gè)因素影響：過(guò)往的經(jīng)驗(yàn)、周?chē)沫h(huán)境、當(dāng)下的目標(biāo)。我們通過(guò)過(guò)往的經(jīng)驗(yàn)將已知概念套用在新事物上，幫助我們理解。一旦產(chǎn)品界面中與用戶的經(jīng)驗(yàn)預(yù)期相悖，就會(huì)產(chǎn)生阻力。
面對(duì)一個(gè)我們從未使用過(guò)的機(jī)器設(shè)備時(shí)，我們很少愿意耐心閱讀完它的說(shuō)明書(shū)再去使用它，而是自信滿滿的希望通過(guò)簡(jiǎn)單的擺弄和熟悉就能夠了解它的使用方法?！饵c(diǎn)石成金：訪客至上的Web和移動(dòng)可用性設(shè)計(jì)秘笈》一書(shū)中的第一條可用性原則就是“Don't let me think（不要讓我思考）”，作者認(rèn)為設(shè)計(jì)者在設(shè)計(jì)一個(gè)界面時(shí)，最好能夠做到讓界面清晰易懂、一目了然，讓用戶能夠不必過(guò)多的思考就能夠使用它，幫助用戶跨越思考過(guò)程，讓用戶能夠輕松做出復(fù)雜的決策，減少認(rèn)知壓力。
我們可能都經(jīng)歷過(guò)心流狀態(tài)，當(dāng)我們?cè)跇O度專(zhuān)注地做某件事時(shí)完全沉浸其中并且非常高效，但如果意外地被打擾，會(huì)讓我們很煩躁。
有關(guān)任務(wù)執(zhí)行的研究文獻(xiàn)中就曾經(jīng)提到過(guò)：中斷會(huì)導(dǎo)致錯(cuò)誤，而且人們?nèi)菀走z忘之前的位置或狀態(tài)。當(dāng)一個(gè)任務(wù)打斷了另外一個(gè)，重新啟動(dòng)需要的時(shí)間會(huì)讓每個(gè)任務(wù)都變慢。
打擾我們的事情可能是工作時(shí)突然的一聲噪聲，也可能是在使用軟件時(shí)冗余的彈窗、過(guò)多的頁(yè)面跳轉(zhuǎn)、無(wú)意的誤操作等等。界面中過(guò)多的干擾會(huì)打斷用戶的心流，造成用戶的使用阻力。
認(rèn)知負(fù)荷理論（Cognitive Load Theory）是在 20 世紀(jì) 80 年代由澳大利亞教育學(xué)家 J.Sweller 提出，由于對(duì)人類(lèi)學(xué)習(xí)認(rèn)知和教學(xué)指導(dǎo)提供了新的理論框架，該理論在教育領(lǐng)域成為重要的心理學(xué)指導(dǎo)理論，在交互設(shè)計(jì)領(lǐng)域也存在著借鑒意義，理論的主要內(nèi)容如下：
認(rèn)知負(fù)荷是指外部信息進(jìn)入個(gè)體短期記憶后中后所需要的注意力資源和記憶容量，被分類(lèi)為內(nèi)在認(rèn)知負(fù)荷、外部認(rèn)知負(fù)荷以及相關(guān)認(rèn)知負(fù)荷（如下圖）。當(dāng)任務(wù)需要消耗的注意力和記憶容量超出學(xué)習(xí)者的極限時(shí)，就會(huì)導(dǎo)致認(rèn)知超負(fù)荷，超出的部分將不會(huì)被學(xué)習(xí)者有效獲取。
不同的呈現(xiàn)形式形成的外部認(rèn)知負(fù)荷是不同的，一般來(lái)說(shuō)，文字>圖式>視聽(tīng)。因此，為了避免認(rèn)知超負(fù)荷給用戶帶來(lái)的使用阻力，我們應(yīng)該設(shè)法簡(jiǎn)化信息來(lái)降低內(nèi)在認(rèn)知負(fù)荷，通過(guò)更合理的信息可視化形式和信息架構(gòu)構(gòu)建降低外部認(rèn)知負(fù)荷。
如下圖，基于上述的用戶的認(rèn)知能力分析，合理的降低阻力，能夠讓用戶在使用產(chǎn)品時(shí)效率更高，成本更低。在提高交互效率方面我們可以通過(guò)減少操作步驟、提高傳達(dá)效率、減少頁(yè)面跳轉(zhuǎn)來(lái)達(dá)到目的。在降低交互成本方面，我們可以通過(guò)降低操作難度、減少用戶思考來(lái)實(shí)現(xiàn),同時(shí)通過(guò)降低認(rèn)知負(fù)荷減少用戶的認(rèn)知負(fù)擔(dān)。阻力并不是越小越好，在某些場(chǎng)景下，我們需要增加阻力和提高用戶的使用成本，進(jìn)而提升用戶體驗(yàn)或達(dá)成產(chǎn)品目標(biāo)。通過(guò)提高防錯(cuò)能力、提供安全感和營(yíng)造儀式感來(lái)優(yōu)化體驗(yàn)。通過(guò)篩選用戶和內(nèi)容把控社區(qū)生態(tài)。通過(guò)功能引導(dǎo)和歧視性策略來(lái)迎合商業(yè)目的。
類(lèi)似于一個(gè)倒金字塔結(jié)構(gòu)，交互流程中的每一個(gè)步驟都伴隨著流失。通過(guò)以下減少操作步驟的方法，可以降低用戶行為路徑中的阻力。
不同的控件有著不同的應(yīng)用場(chǎng)景，控件的選用不當(dāng)會(huì)形成多余的操作步驟。我們需要深入了解每個(gè)控件的屬性和應(yīng)用場(chǎng)景才能夠做到靈活運(yùn)用。
舉一個(gè)例子，在微信的朋友圈發(fā)布頁(yè)中編輯內(nèi)容后點(diǎn)擊取消后，彈出警告框顯示“不保留”和“保留”按鈕，但是考慮到用戶可能會(huì)誤操作點(diǎn)擊取消按鈕的場(chǎng)景，此處應(yīng)增加一個(gè)按鈕讓用戶回到編輯狀態(tài)，否則不管用戶選擇哪個(gè)選項(xiàng)都會(huì)退出發(fā)布頁(yè)重新進(jìn)入，從而使用戶多了一步操作。下廚房的發(fā)布頁(yè)就考慮到了這個(gè)問(wèn)題，使用了默認(rèn)有返回操作的上拉菜單控件作為提示方式，即使在誤操作場(chǎng)景下也不會(huì)增加操作步驟。
控件方面這里就不展開(kāi)講了，大家可以通過(guò)閱讀 iOS 人機(jī)交互指南和安卓 Material Design 規(guī)范來(lái)深入學(xué)習(xí)。
任務(wù)都存在其復(fù)雜性，當(dāng)我們無(wú)法簡(jiǎn)化它時(shí)，可以考慮將復(fù)雜性移交給系統(tǒng)，使其代替用戶操作。
比如我們可以利用用戶已經(jīng)在產(chǎn)品中填寫(xiě)過(guò)的信息來(lái)幫助用戶填寫(xiě)相關(guān)信息。例如通過(guò)身份證號(hào)碼自動(dòng)識(shí)別出用戶的生日和性別，自動(dòng)為用戶填充。
預(yù)判用戶行為分為兩種方式，第一種是在用戶操作前，預(yù)判可能發(fā)生的用戶行為，以建議的形式為用戶提供選擇，縮短用戶行為路徑。
比如拍攝照片后，打開(kāi)微信聊天頁(yè)面，微信會(huì)以氣泡的形式詢問(wèn)用戶是否要發(fā)送圖片，如下圖。
第二種是由于用戶的認(rèn)知錯(cuò)誤進(jìn)行了非目標(biāo)操作時(shí)，系統(tǒng)提前識(shí)別引導(dǎo)用戶進(jìn)入正確的流程并完成任務(wù)。
比如支付寶聊天界面中，很多用戶誤以為可以直接通過(guò)輸入框輸入金額數(shù)后點(diǎn)擊發(fā)送就可以轉(zhuǎn)賬，但實(shí)際上只會(huì)發(fā)出一條消息。支付寶貼心地在用戶輸入數(shù)字后外顯轉(zhuǎn)賬功能，從而避免了用戶的錯(cuò)誤操作，如下圖。
不合理的信息架構(gòu)和流程設(shè)計(jì)會(huì)增加用戶的操作步驟。比如最新 iOS13 的信息應(yīng)用，將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式，導(dǎo)致從一級(jí)頁(yè)面（A）進(jìn)入到二級(jí)頁(yè)面（B或C）后，如果想切換信息列表還需要返回到一級(jí)頁(yè)面再次選擇，增加了一步操作。iOS13 的這種改動(dòng)可能考慮到用戶切換信息列表的頻率沒(méi)有那么高，希望用戶專(zhuān)注于當(dāng)前的信息列表，但是我這樣的用戶經(jīng)常查看過(guò)濾信息列表，擔(dān)心是否有重要信息被屏蔽，多出的一步操作還是給我?guī)?lái)不小的使用阻力。
淘寶訂單模塊的做法就比較合理，從一級(jí)頁(yè)面（A）進(jìn)入二級(jí)的任何頁(yè)面（B 或 C）后，二級(jí)頁(yè)面可以在標(biāo)簽欄互相切換，而不需要退回一級(jí)頁(yè)面再次選擇二級(jí)頁(yè)面，從而節(jié)省了一步操作。
快捷方式有跳轉(zhuǎn)類(lèi)和功能類(lèi)兩種，跳轉(zhuǎn)類(lèi)的快捷方式可以幫助用戶快速觸達(dá)或回退到某個(gè)頁(yè)面。
比如我們可以通過(guò)長(zhǎng)按 iOS 應(yīng)用圖標(biāo)調(diào)出功能的快捷方式使用，減少中間的操作步驟。淘寶可以在大多數(shù)頁(yè)面通過(guò)快捷方式快速回退到首頁(yè)。
功能類(lèi)的快捷方式提供給用戶更快捷的方式完成復(fù)雜或較多的任務(wù)，比如嗶哩嗶哩的一鍵三連。被蘋(píng)果收購(gòu)的應(yīng)用快捷指令可以自定義系統(tǒng)以及第三方應(yīng)用的復(fù)雜任務(wù)，并且在下次一鍵即可完成。
米哈里·契克森米哈賴(lài)在《心流：最佳體驗(yàn)心理學(xué)》中將“最佳體驗(yàn)”定義為：當(dāng)我們?cè)谧瞿承┦虑闀r(shí)，那種全神貫注、投入忘我的狀態(tài)。這種狀態(tài)下，我們身心合一，甚至感覺(jué)不到時(shí)間的存在，技術(shù)水平也會(huì)達(dá)到頂峰，在這件事情完成之后我們會(huì)有一種充滿能量和非常滿足的感受。然而，周?chē)蝗坏母蓴_或環(huán)境刺激都有可能打破心流體驗(yàn)。
用戶在使用軟件產(chǎn)品時(shí)很少有心流體驗(yàn)，因?yàn)檫^(guò)多的頁(yè)面的跳轉(zhuǎn)和刷新會(huì)中斷用戶心流，冗余的頁(yè)面層級(jí)會(huì)增加用戶的理解成本和操作成本。針對(duì)這個(gè)問(wèn)題，我們可以提高單個(gè)頁(yè)面的動(dòng)態(tài)容量，在不跳轉(zhuǎn)頁(yè)面的前提下使用戶完成任務(wù)，為用戶創(chuàng)造在視覺(jué)感受層面上的心流體驗(yàn)，下面是一些方法舉例。
覆蓋層是出現(xiàn)并覆蓋在原頁(yè)面上層的一個(gè)彈出窗口，可以由用戶觸發(fā)或系統(tǒng)自動(dòng)觸發(fā)，在網(wǎng)頁(yè)端和移動(dòng)端都有著廣泛應(yīng)用。我們通常可以將其用于輸入內(nèi)容、附加信息、子頁(yè)面信息外顯、顯示操作指令等。
模態(tài)覆蓋層一般由點(diǎn)擊觸發(fā)，通常出現(xiàn)后會(huì)伴隨亮盒效果，使用戶聚焦于覆蓋層上的任務(wù)，用戶操作完畢后才可以進(jìn)行覆蓋層外的其他操作。模態(tài)覆蓋層的大小不固定，它可以是一個(gè)小型的顯示警示信息的彈窗，也可能是一個(gè)篇幅很大的信息介紹，在保持上下文的情況下展示更多信息，避免了用戶迷失在各種頁(yè)面跳轉(zhuǎn)中。
如下圖，behance的首頁(yè)點(diǎn)擊一個(gè)作品后，會(huì)在當(dāng)前頁(yè)面上生成一個(gè)模態(tài)覆蓋層供用戶瀏覽詳細(xì)的作品內(nèi)容，而不是跳轉(zhuǎn)到新的頁(yè)面。在設(shè)計(jì)師瀏覽單個(gè)作品的場(chǎng)景中，一般只需要 1-3 分鐘的瀏覽后就會(huì)關(guān)閉頁(yè)面，模態(tài)覆蓋層的方式使得打開(kāi)和關(guān)閉的操作更加流暢，提高了設(shè)計(jì)師的瀏覽效率。
模態(tài)覆蓋層在移動(dòng)端同樣也有著應(yīng)用。如果前后兩個(gè)頁(yè)面存在較強(qiáng)的關(guān)聯(lián)性，為了避免用戶產(chǎn)生明顯的割裂感，一般適合采用模態(tài)覆蓋層的方式展示新頁(yè)面。如下圖，知乎使用模態(tài)覆蓋層展示評(píng)論。
詳情覆蓋層在網(wǎng)頁(yè)端通過(guò)光標(biāo)移入觸發(fā)，觸發(fā)后不需要刷新頁(yè)面既可顯示附加信息。如下圖Boss直聘中光標(biāo)移入某條招聘介紹時(shí)，會(huì)觸發(fā)詳情覆蓋層展示出次級(jí)頁(yè)面的詳細(xì)崗位信息，避免了跳轉(zhuǎn)新頁(yè)面。
嵌入層類(lèi)似于抽屜，需要的時(shí)候?qū)⑵湔归_(kāi)，不需要的時(shí)候?qū)⑵涫掌稹Ｅc模態(tài)層不同之處在于，展開(kāi)后也不會(huì)遮蓋頁(yè)面的其他信息和影響其他操作。嵌入層的主要的應(yīng)用場(chǎng)景有：拓展內(nèi)容、展示下級(jí)內(nèi)容。
如下圖，微博的發(fā)現(xiàn)頁(yè)面的功能圖標(biāo)可以通過(guò)嵌入層進(jìn)行拓展從而展示更多功能。
Xmind的嵌入層展示了格式的下級(jí)內(nèi)容，可以在保持能夠繼續(xù)編輯腦圖的前提下進(jìn)行格式設(shè)置。
對(duì)于內(nèi)容豐富的頁(yè)面，希望用戶能夠通過(guò)盡可能少的跳轉(zhuǎn)就能夠觸達(dá)。我們可以將列表導(dǎo)航、宮格導(dǎo)航修改為標(biāo)簽導(dǎo)航或分頁(yè)的形式。
把某些操作難度大耗費(fèi)成本高的操作使用新技術(shù)解決，比如人臉識(shí)別和 OCR 技術(shù)可以降低信息輸入成本，不但幫助用戶使用較少的時(shí)間完成任務(wù)，也降低了用戶的犯錯(cuò)幾率和使用阻力。
手勢(shì)的優(yōu)化也是降低操作難度的可行方法，優(yōu)化的方式有增加多手勢(shì)操作和加大熱區(qū)。比如在 App Store 首頁(yè)進(jìn)入應(yīng)用推薦頁(yè)后，針對(duì)不同使用場(chǎng)景的用戶提供了三種退出的方式，大大降低了操作難度。
舉一個(gè)反例，得到的書(shū)籍詳情頁(yè)中，查看詳情的按鈕熱區(qū)只存在于文字上，但是用戶的使用習(xí)慣會(huì)誤認(rèn)為整塊區(qū)域都可以點(diǎn)擊，因此每次點(diǎn)擊多次失敗后才理解熱區(qū)的正確位置，如果將熱區(qū)擴(kuò)大到整個(gè)區(qū)域就可以降低操作的難度。
想要了解更多交互手勢(shì)知識(shí)可以拓展閱讀： 交互手勢(shì)的容錯(cuò)性和邏輯性
用戶的每一次思考都伴隨著流失的風(fēng)險(xiǎn)。有時(shí)用戶對(duì)于我們提供的選擇不是很了解，會(huì)糾結(jié)和疑惑不同選擇之間的區(qū)別，最終可能導(dǎo)致放棄選擇進(jìn)而流失。我們需要做的是為用戶提供默認(rèn)選擇，同時(shí)允許用戶切換到其他選擇，以此來(lái)減少思考，降低使用阻力。
以手機(jī)淘寶查看相似寶貝功能改版為例，在舊版中，長(zhǎng)按淘寶某個(gè)商品會(huì)出現(xiàn)「找相似」和「找同款」的按鈕選項(xiàng)，點(diǎn)擊后會(huì)跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面。在新版中，長(zhǎng)按淘寶某個(gè)商品會(huì)直接跳轉(zhuǎn)到「相似寶貝」頁(yè)面展示商品，同時(shí)可以通過(guò)分段控件切換為「同款寶貝」。我猜測(cè)的改版原因是，由于舊版的第二步給用戶的兩個(gè)選項(xiàng)讓用戶過(guò)多思考，導(dǎo)致第二步的流失率過(guò)高，很多用戶沒(méi)能體驗(yàn)到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁(yè)展示給用戶，同時(shí)也很方便地去切換到「同款寶貝」，這種交互形式的變化讓用戶無(wú)需思考就可以迅速體驗(yàn)到功能的特色、并在熟悉后下次會(huì)繼續(xù)使用。
我們通過(guò)過(guò)往的經(jīng)驗(yàn)將已知概念套用在新事物上，幫助我們理解。一旦交互界面中與用戶的經(jīng)驗(yàn)預(yù)期相悖，就會(huì)產(chǎn)生阻力。
上文提到過(guò)，我們習(xí)慣于從過(guò)去獲得的經(jīng)驗(yàn)中獲得對(duì)于當(dāng)下問(wèn)題的解決方案。甚至對(duì)于重復(fù)出現(xiàn)的問(wèn)題，我們已經(jīng)形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此，當(dāng)設(shè)計(jì)缺乏一致性時(shí)，不但會(huì)導(dǎo)致我們已經(jīng)形成的條件反射和肌肉記憶失效，還會(huì)更容易導(dǎo)致錯(cuò)誤的發(fā)生。此時(shí)我們不得不從條件反射的無(wú)意識(shí)操作轉(zhuǎn)換為消耗注意力的緩慢操作，從而形成阻力。為了避免這些阻力，我們需要確保按鍵的一致性、交互文案的一致性、交互手勢(shì)的一致性。
如下圖，警告框的按鈕位置一旦第一次用戶經(jīng)過(guò)使用熟悉后，之后用戶會(huì)進(jìn)行無(wú)意識(shí)地快速操作，此時(shí)如果某個(gè)警告框缺乏一致性就會(huì)導(dǎo)致錯(cuò)誤的發(fā)生。
內(nèi)在負(fù)荷是任務(wù)中包含的信息和用戶固有的認(rèn)知結(jié)構(gòu)產(chǎn)生交互作品而形成的負(fù)荷。體現(xiàn)在界面中的信息就是文案的設(shè)計(jì)了，它也是產(chǎn)品設(shè)計(jì)中重要的一環(huán)。悖于用戶認(rèn)知結(jié)構(gòu)的文案設(shè)計(jì)會(huì)帶給用戶理解上的阻力。一份合格的文案設(shè)計(jì)需要做到簡(jiǎn)潔易懂、重點(diǎn)突出、無(wú)歧義性和保持一致。
如果能夠做到簡(jiǎn)潔，就不要冗余。確保每一個(gè)字都有其存在的意義。大部分用戶會(huì)對(duì)冗余的大段文字產(chǎn)生畏難情緒，從而放棄閱讀。詞匯的選擇要符合用戶人群的認(rèn)知范圍，不應(yīng)該使用用戶難以理解的各種黑話和行話。在此基礎(chǔ)上，如果能夠通過(guò)形象生動(dòng)的修辭手法幫助用戶快速理解，就更勝一籌了，比如針對(duì)垃圾分類(lèi)，一些網(wǎng)友發(fā)明的快速記憶方法就是一個(gè)很不錯(cuò)的例子，如下圖。
一段文案中可能有些是重點(diǎn)內(nèi)容，有些是解釋內(nèi)容，并不是所有內(nèi)容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點(diǎn)內(nèi)容告知用戶，能夠引導(dǎo)用戶下一步行動(dòng)就足夠了，至于其他解釋性或者不重要的內(nèi)容弱化即可。
針對(duì)前兩條規(guī)則，我們以 12306 以及飛豬的學(xué)生票和成人票的選擇彈窗作為案例進(jìn)行對(duì)比。如下圖所示，每一次購(gòu)買(mǎi)火車(chē)票的過(guò)程中，當(dāng)我遇到 12306 的這個(gè)彈窗，都會(huì)讓我用不少時(shí)間去進(jìn)行理解和思考。首先在個(gè)人看來(lái)，“溫馨提示”在任何彈窗上都是占用空間沒(méi)有實(shí)際意義的存在，如果沒(méi)有標(biāo)題，直接展示正文即可；其次，正文的內(nèi)容重點(diǎn)信息不突出，其中有一個(gè)句子“請(qǐng)憑購(gòu)票時(shí)所使用的有效身份證件原件和附有學(xué)生火車(chē)票優(yōu)惠卡的有效學(xué)生證原件換票乘車(chē)。”過(guò)于長(zhǎng)和復(fù)雜，很考驗(yàn)用戶的短期記憶和耐心；最后，按鈕文字沒(méi)有提供操作路徑，用戶想知道如何操作需要先閱讀完上面的文案。
飛豬的案例就避免了 12306 所存在的問(wèn)題，做到了簡(jiǎn)潔易懂和重點(diǎn)突出，如下圖。
表意清晰指的是文案?jìng)鬟_(dá)的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案，文案的歧義讓用戶疑惑“取消”按鈕是取消約會(huì)還是取消本次操作。經(jīng)過(guò)修改后歧義性就消失了。
同一個(gè)軟件系統(tǒng)中，表達(dá)相同概念的用詞一致。模塊中的相似文案，語(yǔ)法表達(dá)方式一致。上文提到我們?nèi)祟?lèi)很少愿意思考的特點(diǎn)，一旦一個(gè)軟件系統(tǒng)出現(xiàn)表示同一個(gè)概念，但是名稱(chēng)不一樣的詞語(yǔ)，我們大腦就不得不開(kāi)始被迫思考：“這個(gè)詞語(yǔ)和之前那個(gè)很接近但是有些不一樣，它們是同一個(gè)東西嗎？”這個(gè)思考過(guò)程從而形成了不小的阻力?！墩J(rèn)知與設(shè)計(jì)》一書(shū)中提到一條規(guī)則：“同一個(gè)名稱(chēng)，就是同一個(gè)東西；不同的名稱(chēng)，就是不同的東西?！币虼耍恢滦允亲珜?xiě)交互文案的一條重要原則。
當(dāng)信息的內(nèi)在負(fù)荷不能再進(jìn)行降低時(shí)，通過(guò)改變信息的呈現(xiàn)方式、結(jié)構(gòu)設(shè)計(jì)和邏輯安排來(lái)將復(fù)雜信息可視化，降低外在負(fù)荷，使信息更容易被用戶接受和理解。這里涉及到信息可視化這個(gè)課題，這里就不做展開(kāi)了。
阻力并不是越小越好，在某些場(chǎng)景下，我們需要提高阻力提高用戶的使用成本達(dá)成某些目的。
類(lèi)似于馬路上的減速帶，在車(chē)輛進(jìn)入需要低速行駛區(qū)域時(shí)進(jìn)行阻礙。我們通常在用戶容易犯錯(cuò)的操作前設(shè)定一定的阻力，減緩用戶的操作的節(jié)奏，達(dá)到防錯(cuò)的目的。如下圖，在藍(lán)湖中如果要?jiǎng)h除一個(gè)項(xiàng)目，就需要先輸入項(xiàng)目的名稱(chēng)后才能成功刪除，通過(guò)增加阻力提高了防錯(cuò)能力。
針對(duì)涉及到用戶隱私的敏感操作，通過(guò)設(shè)計(jì)特定的交互流程讓用戶體驗(yàn)到安全感，比如通過(guò)增加指紋、面部識(shí)別等操作降低用戶對(duì)于危險(xiǎn)和風(fēng)險(xiǎn)的擔(dān)憂，增加用戶的確定感和可控感。
生活中大部分的時(shí)刻都是單調(diào)乏味的，我們需要使用各種儀式點(diǎn)綴它。與此類(lèi)似，在用戶的操作行為路徑里增加一些不必要的過(guò)程，也能成為用戶體驗(yàn)旅程中的點(diǎn)睛之筆。
就像多年前堅(jiān)果手機(jī)一代的包裝，設(shè)計(jì)師別具匠心的將包裝設(shè)計(jì)為一次充滿著童趣的體驗(yàn)，雖然拆包裝的過(guò)程時(shí)間增加，但是給予用戶似曾相識(shí)的場(chǎng)景是不可替代的。
看似使用起來(lái)費(fèi)力的微信搖一搖，可以加強(qiáng)用戶的參與感和儀式感，就仿佛融合著一種占卜未知世界的神秘體驗(yàn)，這種感覺(jué)是點(diǎn)擊無(wú)法給予的。當(dāng)初支付寶基于 LBS 和 AR 技術(shù)推出了 AR 實(shí)景紅包，眾多用戶不惜跨越“千山萬(wàn)水”收集線索圖去尋找紅包，并樂(lè)此不疲。盡管增加了操作成本和使用阻力，但是這些富于互動(dòng)性和趣味性的體驗(yàn)帶給用戶的儀式感也是不可多得的。
用戶的屬性和其產(chǎn)生的內(nèi)容質(zhì)量對(duì)于產(chǎn)品的社區(qū)生態(tài)建設(shè)有很大的影響。對(duì)于社區(qū)的認(rèn)同感越高的核心用戶越多，內(nèi)容質(zhì)量就越高，進(jìn)而社區(qū)對(duì)潛在用戶的吸引力就越大。一旦一些修養(yǎng)低或居心不良的用戶大量涌入社區(qū)，就會(huì)同時(shí)帶來(lái)大量的負(fù)面內(nèi)容，造成對(duì)其他用戶的干擾，甚至導(dǎo)致他們大量流失。因此，為了讓一個(gè)產(chǎn)品的社區(qū)生態(tài)能夠健康發(fā)展，我們需要采取一些篩選方法來(lái)設(shè)置阻力，以此來(lái)篩選出對(duì)平臺(tái)有益的用戶和內(nèi)容。
很多產(chǎn)品在冷啟動(dòng)階段，為了避免垃圾用戶和提高社區(qū)質(zhì)量，會(huì)設(shè)立邀請(qǐng)制來(lái)控制用戶來(lái)源，然后根據(jù)現(xiàn)有用戶的使用反饋進(jìn)行可控的優(yōu)化迭代。這種方式可以有效地降低初期的運(yùn)營(yíng)成本，保持服務(wù)器穩(wěn)定，甚至可以制造一種供不應(yīng)求的感覺(jué)，獲得更多的討論度。
網(wǎng)絡(luò)騙局在社交類(lèi)產(chǎn)品屢見(jiàn)不鮮，婚戀類(lèi)產(chǎn)品更是重災(zāi)區(qū)。很多推行高端婚戀或高端社交的產(chǎn)品為了保證用戶質(zhì)量，不僅嚴(yán)防死守，還會(huì)設(shè)立價(jià)格門(mén)檻，不付費(fèi)直接無(wú)法使用，這在現(xiàn)今已經(jīng)廣泛推行的基礎(chǔ)服務(wù)免費(fèi)、增值服務(wù)收費(fèi)的收費(fèi)模式中很少見(jiàn)，但是確實(shí)有效地進(jìn)行了用戶篩選。
通過(guò)設(shè)置測(cè)試題將用戶分成不同的群體，進(jìn)行具有針對(duì)性的權(quán)限設(shè)置。比如 B 站轉(zhuǎn)正時(shí)需要完成具有社區(qū)特色的晉級(jí)考試，需要花費(fèi)的時(shí)間成本比較高，通過(guò)這種方式篩選出真正認(rèn)同 B 站社區(qū)文化的優(yōu)質(zhì)用戶，給予這些用戶更多在社區(qū)中互動(dòng)的權(quán)限，從而也大量減少了低質(zhì)量用戶的負(fù)面行為。
上述的三種用戶篩選方法是否適用，需要考慮的產(chǎn)品屬性。不同維度的篩選用戶的方法還有很多，這里只是簡(jiǎn)單舉例。
不同的內(nèi)容形式對(duì)于社區(qū)的價(jià)值是不一樣，我們可以通過(guò)一定的方式引導(dǎo)用戶生產(chǎn)對(duì)于社區(qū)建設(shè)更有利的內(nèi)容。比如微信發(fā)布朋友圈時(shí)并沒(méi)有直接給用戶提供純文字信息的輸入方式，如果用戶想要發(fā)布純文字內(nèi)容，需要長(zhǎng)按發(fā)布按鈕才能進(jìn)入相應(yīng)界面。原因是微信官方認(rèn)為相對(duì)于純文字內(nèi)容，附有圖片的內(nèi)容對(duì)于其他用戶更具有吸引力，通過(guò)阻礙用戶使用純文字發(fā)布、鼓勵(lì)用戶使用配圖發(fā)布使得整體的朋友圈社區(qū)的內(nèi)容能夠吸引用戶瀏覽更長(zhǎng)的時(shí)間，從而也可以使朋友圈廣告得到更多的曝光。
有時(shí)產(chǎn)品的商業(yè)目標(biāo)和用戶目標(biāo)存在一定沖突時(shí)，損失一定的用戶體驗(yàn)滿足商業(yè)目標(biāo)是不得不進(jìn)行的選擇，這需要我們進(jìn)行合理的平衡。
為了迎合商業(yè)目標(biāo)，我們有時(shí)需要針對(duì)一些功能設(shè)置一定操作阻力將其進(jìn)行弱化，然后引導(dǎo)用戶去使用我們希望其使用的一些特定功能。這類(lèi)阻力設(shè)計(jì)最為常見(jiàn)，比如通過(guò)強(qiáng)化按鈕對(duì)比進(jìn)行功能的引導(dǎo)，如下圖。
歧視性策略常見(jiàn)的的應(yīng)用方式就是通過(guò) VIP 制度或等級(jí)制度將用戶進(jìn)行身份區(qū)分，針對(duì)身份等級(jí)低的用戶設(shè)置使用阻力，以便于引導(dǎo)其投入更多精力和資源，或者通過(guò)此方式給予高等級(jí)用戶優(yōu)越感，刺激其進(jìn)行分享炫耀。
16 年發(fā)布的支付寶生活圈就是一個(gè)很好的案例，芝麻信用 750 分以上才可以使用的歧視性策略非常簡(jiǎn)單粗暴。很多達(dá)標(biāo)的土豪用戶在朋友圈炫耀生活圈的截圖，等待朋友們的膜拜點(diǎn)贊。互聯(lián)網(wǎng)產(chǎn)品中，每增加一個(gè)動(dòng)作，用戶都會(huì)呈幾何級(jí)流失，但是支付寶的歧視性策略給了用戶巨大的動(dòng)力完成了截圖、保存、打開(kāi)微信、分享照片等一系列動(dòng)作，幫助支付寶生活圈實(shí)現(xiàn)了刷屏傳播的效果。
雖然讓用戶暢通無(wú)阻地使用產(chǎn)品是我們的目標(biāo)，但是有時(shí)還需要我們合理地限制。不同的使用場(chǎng)景和商業(yè)目的共同影響著設(shè)計(jì)策略。在如今互聯(lián)網(wǎng)產(chǎn)品越來(lái)越趨于存量競(jìng)爭(zhēng)的態(tài)勢(shì)下，我們更多的工作開(kāi)始專(zhuān)注于產(chǎn)品的優(yōu)化。希望本文能夠提供相應(yīng)的思路，助力你在產(chǎn)品優(yōu)化探索中找到可行的切入點(diǎn)。
文章來(lái)源：站酷 作者：Ballen成名
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
QQ主題自2013年誕生，至今7年時(shí)間，保持了整個(gè)營(yíng)收的Top3的成績(jī)，受到了廣大用戶的喜愛(ài)。隨著QQ數(shù)年來(lái)版本的迭代，我們也漸漸傾聽(tīng)到了一些用戶對(duì)主題的反饋，為了給用戶帶來(lái)更好的體驗(yàn)，我們決定對(duì)QQ主題從上游到下游進(jìn)行一次全面的優(yōu)化。
我們對(duì)QQ主題進(jìn)行了兩輪用戶體驗(yàn)反饋和調(diào)研，發(fā)現(xiàn)：目前的外網(wǎng)主題存在機(jī)型適配效果差、素材制作質(zhì)量差、缺少全局美化等體驗(yàn)問(wèn)題；而同時(shí)，用戶調(diào)研的結(jié)果表明我們的用戶希望體驗(yàn)到更好更高品質(zhì)更全面?zhèn)€性化的主題。
基于現(xiàn)網(wǎng)產(chǎn)品問(wèn)題和用戶調(diào)研結(jié)果，對(duì)優(yōu)化方向進(jìn)行了歸納分類(lèi),最終確定QQ主題體驗(yàn)升級(jí)的項(xiàng)目設(shè)計(jì)目標(biāo)：增加主題覆蓋范圍 ，提升主題的美化質(zhì)量 ，提升主題的可用性。
為了達(dá)成上面的三個(gè)目標(biāo)，一開(kāi)始我們根據(jù)QQ主題的實(shí)現(xiàn)邏輯制定了初步的優(yōu)化方案：通過(guò)新增素材增加主題覆蓋范圍，通過(guò)修改舊素材提升主題可用性和質(zhì)量。
但在進(jìn)行執(zhí)行評(píng)審的時(shí)候，我們意識(shí)到，這樣的方案雖然可行，但落地成本非常的巨大，需要每個(gè)主題包內(nèi)新增兩端共1800多張切圖，花耗多家cp公司至少四個(gè)月的時(shí)間和人力。
我們不得不推倒開(kāi)始的方案，開(kāi)始思考：是否有更好的解決方案？
在對(duì)主題制作流程、客戶端呈現(xiàn)邏輯、日常運(yùn)營(yíng)維護(hù)工作等問(wèn)題進(jìn)行深入的溯源挖掘后發(fā)現(xiàn)：QQ主題目前實(shí)現(xiàn)個(gè)性化的方案是后臺(tái)下發(fā)素材包替換本地客戶端資源實(shí)現(xiàn)個(gè)性化。而這就導(dǎo)致了素材包本身是固定的內(nèi)容，只能被動(dòng)的接受版本更新帶來(lái)的種種問(wèn)題。
在這樣的情況下，即使我們按照一開(kāi)始的方案執(zhí)行落地，多個(gè)版本后我們?nèi)孕璐罅康娜肆θミM(jìn)行維護(hù)和更新才能保證用戶的體驗(yàn)。
所以，我們必須打破舊方案帶來(lái)的弊端，要讓素材活起來(lái)。
在綜合設(shè)計(jì)思維，開(kāi)發(fā)思維，運(yùn)營(yíng)思維去思考問(wèn)題后，我們提出了一個(gè)嶄新的實(shí)現(xiàn)方案：終端染色（使用Color-filter,對(duì)png進(jìn)行染色的技術(shù)）+分色映射（將資源與色值進(jìn)行映射，用一套有限色板去管理無(wú)限資源的概念）。
在這套新的個(gè)性化實(shí)現(xiàn)方案支持下，設(shè)計(jì)師簡(jiǎn)單的對(duì)色板進(jìn)行配色，就能夠?qū)Q客戶端的全局顏色進(jìn)行變化。而當(dāng)版本更新發(fā)生資源變更時(shí)，僅需維護(hù)通用的線上映射關(guān)系，資源即可自動(dòng)適配到應(yīng)有的顏色。
針對(duì)主題方案的變革新方案，分別從優(yōu)點(diǎn)、變化、難點(diǎn)3個(gè)維度進(jìn)行綜合評(píng)估：
- 優(yōu)點(diǎn)：
（1） 整體學(xué)習(xí)，制作，運(yùn)營(yíng)，維護(hù)的成本降低
（2） 美化范圍變大，下載資源變小，用戶體驗(yàn)得到改善
（3） 效率得到優(yōu)化，難度降低，設(shè)計(jì)師有更多時(shí)間提升主題質(zhì)量
- 變化：
（1） CP學(xué)習(xí)新的制作方式
（2） 產(chǎn)品運(yùn)營(yíng)省去了過(guò)往定期維護(hù)素材的工作
（3） 設(shè)計(jì)師在版本迭代時(shí)候進(jìn)行新資源的分色映射關(guān)系
（4） 開(kāi)發(fā)人員進(jìn)行統(tǒng)一的分色映射表維護(hù)管理
- 缺點(diǎn)：
（1） 方案工作量大，多達(dá)120+的界面檢驗(yàn)，上千個(gè)客戶端資源，大量的代碼需要修改。
（2） 方案執(zhí)行難度大，包括如何用有限的色板兼容更多的設(shè)計(jì)需求，資源如何在不同場(chǎng)景得到更有效的復(fù)用，設(shè)計(jì)與開(kāi)發(fā)未來(lái)如何進(jìn)行映射表的對(duì)接，以及版本的上下兼容。
設(shè)計(jì)師提出“終端染色+分色映射”的新方案后，通過(guò)積極拉動(dòng)會(huì)議，向主題業(yè)務(wù)相關(guān)的多角色進(jìn)行新舊方案的優(yōu)劣討論，方案得到一致認(rèn)同后，多方聯(lián)動(dòng)形成項(xiàng)目組。
其次進(jìn)行可行性評(píng)估，與開(kāi)發(fā)結(jié)對(duì)緊密協(xié)作，共同討論難點(diǎn)攻克新方案落地要點(diǎn)。
最后基于前期可行性評(píng)估，以及難點(diǎn)預(yù)研，項(xiàng)目組規(guī)劃出階段性的落地方案。
方案的落地主要為三部分工作： 梳理標(biāo)記->歸納轉(zhuǎn)化->編譯覆蓋。
梳理標(biāo)記：
前端開(kāi)發(fā)逐個(gè)查找界面的資源和代碼并標(biāo)記，交付給設(shè)計(jì)師進(jìn)行資源色值的規(guī)劃
歸納轉(zhuǎn)化：
設(shè)計(jì)師根據(jù)ui的配色規(guī)則以及個(gè)性場(chǎng)景需要，進(jìn)行ui色板的構(gòu)建及資源的顏色映射分配。
在這一過(guò)程使用騰訊文檔進(jìn)行設(shè)計(jì)語(yǔ)言與開(kāi)發(fā)代碼的轉(zhuǎn)化。
編譯覆蓋：
修改代碼，讓資源支持個(gè)性化需要的染色和素材替換、錄入分色映射的騰訊文檔并進(jìn)行實(shí)機(jī)的染色編譯并和設(shè)計(jì)師共同檢驗(yàn)效果。
而在上述工作中，設(shè)計(jì)師的任務(wù)難點(diǎn)就在于色板的設(shè)計(jì)和染色規(guī)則的構(gòu)建。
首先設(shè)計(jì)師根據(jù)QQ的ui規(guī)范，建立初步的色板；下一步，創(chuàng)建界面demo，模擬資源與色板的映射關(guān)系；然后替換多個(gè)不同的色板檢驗(yàn)主題染色后多場(chǎng)景下的效果，再對(duì)色板和染色規(guī)則進(jìn)行反復(fù)的調(diào)整；最后在效果符合預(yù)期的時(shí)候，再輸出色板和染色規(guī)則并最終在真機(jī)上進(jìn)行驗(yàn)證。
QQ舊主題：僅覆蓋6個(gè)界面、素材包內(nèi)涵400+切圖、日常需要花費(fèi)巨大成本維護(hù)1000多套主題。
主題新方案落地后：覆蓋范圍從6個(gè)界面擴(kuò)展到60+界面、素材切圖降低至48張、600多個(gè)資源得到梳理優(yōu)化、60+個(gè)舊主題存在的可用性問(wèn)題得到解決、維護(hù)成本得到大大降低。
主題新方案落地后，考慮到舊主題制作時(shí)間長(zhǎng)，難度大，設(shè)計(jì)費(fèi)用高的問(wèn)題，產(chǎn)品側(cè)希望設(shè)計(jì)師能配合新的染色方案去優(yōu)化主題制作、上架、驗(yàn)收的流程。
根據(jù)舊流程里各個(gè)角色反饋的問(wèn)題點(diǎn)，第2階段的目標(biāo)可提煉為：提升制作效率、打包效率、驗(yàn)收效率?？紤]到舊流程中效率低、出錯(cuò)率高的步驟大多是人工操作部分，我們計(jì)劃設(shè)計(jì)一個(gè)智能化的主題編輯器來(lái)實(shí)現(xiàn)工業(yè)化的主題生產(chǎn)。
以提升效率為目標(biāo)，首先深入制作流程勘察，挖掘制作流程的關(guān)鍵核心點(diǎn)，并提煉關(guān)鍵觸點(diǎn)、痛點(diǎn)問(wèn)題；基于各個(gè)觸點(diǎn)關(guān)鍵問(wèn)題，逐一給出解決方案，并全局的回顧整個(gè)流程，從全局去統(tǒng)領(lǐng)優(yōu)化方案；繼而以落地為導(dǎo)向，明確問(wèn)題解決的優(yōu)先級(jí)，穩(wěn)步前進(jìn)規(guī)劃方案落地。在解決方案中，本地編譯體驗(yàn)已實(shí)現(xiàn)，其他能力落地優(yōu)先級(jí)如下：
- 首先解決智能切圖和智能配色，優(yōu)先級(jí)最高
- 其次解決規(guī)范優(yōu)化和多界面預(yù)覽，優(yōu)先級(jí)居中
- 最后是直連后臺(tái)，運(yùn)營(yíng)做審核，優(yōu)先級(jí)最低
傳統(tǒng)的主題制作中往往最費(fèi)時(shí)間和最易出錯(cuò)的就是切圖，在這里我們使用了雙重保險(xiǎn)。
保險(xiǎn)1:編輯器將內(nèi)置一套智能化的切圖合成處理方案，設(shè)計(jì)師僅需上傳極少量的必須切圖。編輯器還會(huì)對(duì)上傳的切圖會(huì)進(jìn)行命名、尺寸、格式的檢測(cè)。
保險(xiǎn)2:官方設(shè)計(jì)師預(yù)設(shè)主題的PSD/SKETCH設(shè)計(jì)模板,附帶切圖命名尺寸格式等，畫(huà)完后一鍵即可導(dǎo)出全套切圖資源。
新主題的染色規(guī)則中，色板存在21個(gè)顏色需要配色。對(duì)CP來(lái)說(shuō)，即使有設(shè)計(jì)規(guī)范進(jìn)行學(xué)習(xí)，也存在著出錯(cuò)的可能。為了讓制作通過(guò)率達(dá)到最高，我們計(jì)劃通過(guò)編輯器內(nèi)置的智能配色，將復(fù)雜的配色操作簡(jiǎn)化為2步操作，達(dá)到快速穩(wěn)定地輸出合格的配色的效果。
新主題色板中，顏色可分為主色系和背景色系，兩大色系下的色值再各有不同的色值要求。
從設(shè)計(jì)師的理想角度來(lái)看，如果只進(jìn)行主色和背景色的選擇，即可輸出實(shí)現(xiàn)21個(gè)顏色的話，無(wú)疑效率和通過(guò)率都會(huì)得到大大提升。
為了實(shí)現(xiàn)理想效果，我們?cè)O(shè)計(jì)了一套方案：
在選擇主色、背景色后，首先對(duì)它們進(jìn)行一個(gè)檢測(cè)，在這里我們引入了WCAG2.0的標(biāo)準(zhǔn)，檢測(cè)主色元素在背景色元素上的顯示是否符合大眾的閱讀要求。其次我們?cè)侔裃Q設(shè)計(jì)規(guī)范中，對(duì)21個(gè)顏色的不同微小要求，通過(guò)HSB顏色模型轉(zhuǎn)換為數(shù)據(jù)化的代碼條件并內(nèi)置在編輯器中。
這樣，CP選擇的兩個(gè)顏色，通過(guò)顏色檢測(cè)、顏色模型轉(zhuǎn)換、預(yù)設(shè)條件的微調(diào)，就變成了符合我們視覺(jué)層級(jí)規(guī)范要求和可用性要求的21個(gè)顏色。
在實(shí)現(xiàn)了智能切圖、智能配色、導(dǎo)入設(shè)計(jì)稿、在線預(yù)覽、結(jié)構(gòu)化打包、手機(jī)實(shí)際預(yù)覽等能力后，編輯器的能力基本得到滿足，我們接下來(lái)對(duì)編輯器進(jìn)行框架設(shè)計(jì)，在多方案權(quán)衡后，最終采用了元素作導(dǎo)航，右邊區(qū)域保持全局預(yù)覽的交互框架，并設(shè)計(jì)了編輯器的ui界面。
使用編輯器前：從制作到上架需要約4周時(shí)間，每月上架主題平均為12個(gè)。
接入編輯器后：僅需一天即可完成素材的制作到上架，并且得益于制作難度的降低，可制作主題的CP得到了擴(kuò)充，目前每月上架主題穩(wěn)定在2000+個(gè)。
在完成了主題效果優(yōu)化、主題制作優(yōu)化后，我們把注意力放在了制作上架之后的流程-適配維護(hù)。
舊的主題適配維護(hù)涉及到cp/設(shè)計(jì)師/運(yùn)營(yíng)/開(kāi)發(fā)四個(gè)角色的大量人力成本。
而新主題優(yōu)化后，僅需要設(shè)計(jì)師&開(kāi)發(fā)工程師兩位角色進(jìn)行低成本的操作。
但在實(shí)際工作中，版本中的不同更新都是由不同的設(shè)計(jì)師&開(kāi)發(fā)負(fù)責(zé)的，適配工作往往很難執(zhí)行。所以為了保證適配的效果，除了在產(chǎn)品的工作流程中增加適配規(guī)定外，我們還希望能幫助到不同業(yè)務(wù)方降低適配的成本。
新適配流程中，設(shè)計(jì)師其實(shí)僅僅需要根據(jù)染色規(guī)則對(duì)新增資源去定映射關(guān)系，而實(shí)際映射的寫(xiě)入是開(kāi)發(fā)操作的。那如果兩個(gè)角色的工作能合并，并且省去學(xué)習(xí)新適配規(guī)則以及溝通的成本呢？
從幫助開(kāi)發(fā)去理解分色染色的層面，我們把資源元素和顏色進(jìn)行了場(chǎng)景化的匹配應(yīng)對(duì)，并且把規(guī)則關(guān)系整理成了目錄，搭建了Q-Element適配規(guī)范網(wǎng)站；開(kāi)發(fā)同學(xué)在進(jìn)行適配時(shí)候僅需根據(jù)設(shè)計(jì)稿的新增部分，尋找對(duì)應(yīng)目錄下的規(guī)則關(guān)系，即可對(duì)元素進(jìn)行適配。
優(yōu)化前：主題的版本適配需要設(shè)計(jì)開(kāi)發(fā)產(chǎn)品的多方配合，花費(fèi)數(shù)天時(shí)間去完成適配。
優(yōu)化后：僅需開(kāi)發(fā)1個(gè)小時(shí)的時(shí)間即可完成適配和驗(yàn)證。
通過(guò)3個(gè)階段的努力，QQ主題美化初步完成了主題效果、主題制化、主題維護(hù)成本的三大優(yōu)化。上線半年后，目前QQ新主題已經(jīng)達(dá)到1萬(wàn)八千個(gè)，并且借助QQ美化平臺(tái)完成了外部創(chuàng)作人、QQ、QQ用戶三者之間的生態(tài)搭建，正源源不斷的提供給用戶更多更好的個(gè)性化主題。我們也會(huì)進(jìn)一步努力，由QQ主題開(kāi)始對(duì)個(gè)性化進(jìn)行新一輪的優(yōu)化，帶給用戶更好的體驗(yàn)。
最后，廣大設(shè)計(jì)師的機(jī)會(huì)來(lái)了！如果您擅長(zhǎng)插畫(huà)或者動(dòng)畫(huà)，點(diǎn)此鏈接https://ycg.qq.com/qcc，報(bào)名參與我們的原創(chuàng)空間和QQ美化平臺(tái)項(xiàng)目。按照頁(yè)面引導(dǎo)提交作品審核，經(jīng)原創(chuàng)館審核后，就可以獲得創(chuàng)作權(quán)限。 您的原創(chuàng)作品將被QQ及QQ空間數(shù)億用戶付費(fèi)使用，并獲得相應(yīng)比例分成。
文章來(lái)源：站酷 作者：騰訊ISUX
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
針對(duì)不同的受眾我們會(huì)做不一樣的設(shè)計(jì)，今天是針對(duì)兒童進(jìn)行的產(chǎn)品設(shè)計(jì)思路的內(nèi)容分享，面對(duì)兒童產(chǎn)品，我們需要從心理生理上的區(qū)別分析，進(jìn)而推動(dòng)內(nèi)容、交互、視覺(jué)、動(dòng)畫(huà)等設(shè)計(jì)，一起來(lái)了解下吧～
“小山上的風(fēng)，沒(méi)有一個(gè)人知道，沒(méi)有一個(gè)人能告訴我；風(fēng)從什么地方來(lái)，風(fēng)到什么地方去。”
英國(guó)的詩(shī)人米爾恩在給孩子的詩(shī)歌《小山上的風(fēng)》里如是寫(xiě)道。
在不同的年紀(jì)，這個(gè)世界帶給我們的觸動(dòng)和感知都是不一樣的。那么當(dāng)我們?yōu)閮和M(jìn)行設(shè)計(jì)時(shí)，該如何去呈現(xiàn)呢？讓我們一起來(lái)探討下吧。
近年來(lái)，兒童產(chǎn)品的市場(chǎng)是比較火熱的，由于兒童的生長(zhǎng)變化較快，他們?cè)谛睦砗蜕砩隙寂c我們成人有較大不同，對(duì)于外界的信號(hào)，他們更喜歡得到視覺(jué)和聽(tīng)覺(jué)上的反饋。并且常常能夠從挑戰(zhàn)和沖突中獲得快樂(lè)，他們不在意結(jié)果，目的性較弱，還有著非常強(qiáng)烈的好奇心，無(wú)法預(yù)見(jiàn)其行為會(huì)引發(fā)的后果，其模仿能力的強(qiáng)弱隨著年齡成長(zhǎng)呈曲線狀呈現(xiàn)。當(dāng)我們?cè)谠O(shè)計(jì)時(shí)，應(yīng)將兒童的這些特性考慮進(jìn)去。
任務(wù)旅程的設(shè)計(jì)
在某種程度上，兒童產(chǎn)品的客戶形態(tài)有些類(lèi)似我們的 ToB/G 產(chǎn)品的客戶。使用產(chǎn)品的一線用戶，并非最終具有購(gòu)買(mǎi)權(quán)的客戶。孩子的父母是兒童類(lèi)產(chǎn)品最終具有購(gòu)買(mǎi)權(quán)的客戶，他們對(duì)早期教育、智力投資、內(nèi)容是否健康積極等等都有較高要求。
因此我們?cè)趦?nèi)容的設(shè)計(jì)上應(yīng)更加的多元化，將任務(wù)完成后的數(shù)據(jù)量化體現(xiàn)，使父母便于了解孩子情況，同時(shí)也可以從側(cè)面激勵(lì)用戶后續(xù)的付費(fèi)行為。任務(wù)旅程有多種類(lèi)型，在兒童品類(lèi)的設(shè)計(jì)上，我們通常采用下面這 4 種任務(wù)類(lèi)型去設(shè)計(jì)。
好的設(shè)計(jì)可以減少認(rèn)知負(fù)擔(dān)， 可以最大限度地減少理解功能交互所消耗的智力資源。在年幼的孩童時(shí)期，他們的記憶容量比成人小，我們需要關(guān)注到這一點(diǎn)，怎樣的信息容量，交互層級(jí)和人機(jī)互動(dòng)才能讓他們更好的理解和認(rèn)知產(chǎn)品界面。
比如 LG 有一款面向低齡兒童的手表，表盤(pán)上只有一個(gè)按鈕和出聲孔，并且在噪雜環(huán)境下，還考慮到家長(zhǎng)的心情，非常貼心的設(shè)計(jì)了 10 秒自動(dòng)接聽(tīng)的人機(jī)交互方式。
△ 圖片來(lái)源 | 文章作者&Roobo 設(shè)計(jì)團(tuán)隊(duì)
通常，我們成年人對(duì)交互體驗(yàn)，產(chǎn)品易用性都抱有較高的期望，我們期望產(chǎn)品能為我們帶來(lái)效率的提升、便捷的操作、強(qiáng)烈的視覺(jué)沖擊力等等。但是，兒童與成人在人機(jī)交互的互動(dòng)上卻有著天壤之別。當(dāng)產(chǎn)品功能無(wú)法正常運(yùn)行時(shí)，孩子們并不會(huì)像成年人一樣感到失望。當(dāng)設(shè)計(jì)不如他們所希望的那樣時(shí)，雖然也會(huì)暫時(shí)感到沮喪，但他們?cè)谧约荷贸痰膶W(xué)習(xí)嘗試中，也習(xí)慣了那些常常無(wú)法正常進(jìn)行的任務(wù)。隨著成長(zhǎng)經(jīng)驗(yàn)的增加，他們會(huì)逐漸熟悉了解世界的運(yùn)行規(guī)則。
△ 圖片來(lái)源 | 文章作者&Roobo 設(shè)計(jì)團(tuán)隊(duì)
有研究表明，在對(duì) 120 名學(xué)前兒童(3—6歲)進(jìn)行了12種顏色和12種圖形的辨認(rèn)實(shí)驗(yàn)中顯示，實(shí)驗(yàn)刺激用速示器分三種速度(0.01秒、0.05秒、0.1秒)呈現(xiàn)。結(jié)果表明：呈現(xiàn)速度對(duì)辨認(rèn)正確率有著明顯的影響。3-6歲兒童對(duì)顏色和圖形的辨認(rèn)能力均隨年齡增長(zhǎng)而逐步提高。學(xué)前兒童對(duì)顏色的辨別，在三種呈現(xiàn)速度條件下，均對(duì)黃、紅、綠三色的辨認(rèn)正確率為最高。
圖標(biāo) icon 的設(shè)計(jì)上，簡(jiǎn)約、塊面化、造型避免抽象，例如 3 歲+的孩童已經(jīng)可以理解向前、向后的箭頭，有研究顯示，在短時(shí)段內(nèi)，兒童對(duì)圖形的辨認(rèn)在不同呈現(xiàn)速度條件下出現(xiàn)優(yōu)勢(shì)與劣勢(shì)圖形之分。優(yōu)勢(shì)圖形的正確辨認(rèn)率百分比較高，而劣勢(shì)圖形則較低。
現(xiàn)在市場(chǎng)上有很多兒童品類(lèi)的硬件，深受家長(zhǎng)和孩子的喜愛(ài)，在軟硬件的結(jié)合上，我們要善加運(yùn)用，例如硬件自帶的攝像頭、觸摸屏、聲控等等。當(dāng)硬件與產(chǎn)品內(nèi)容相結(jié)合，可以碰撞出更加多種多樣令人振奮的新的交互方式。
△ 圖片來(lái)源 | 文章作者&Roobo 設(shè)計(jì)團(tuán)隊(duì)
在任務(wù)旅程中，內(nèi)容合理優(yōu)質(zhì)的動(dòng)畫(huà)，廣受家長(zhǎng)及兒童的歡迎，但是動(dòng)畫(huà)頻繁變換的畫(huà)面容易引起視覺(jué)疲勞，大多數(shù)動(dòng)畫(huà)片每 6 秒會(huì)變換一次畫(huà)面轉(zhuǎn)場(chǎng)，超出了幼兒視覺(jué)神經(jīng)的承受能力。在兒童不同的年齡段，注意力集中程度都是有所不同的，皮亞杰理論研究顯示 3-4 歲的兒童注意力集中的平均時(shí)長(zhǎng)為 10 分鐘，4-6 歲兒童注意力集中平均時(shí)長(zhǎng)則可達(dá) 15 分鐘。在我們?yōu)楹⒆觽冊(cè)O(shè)計(jì)他們喜愛(ài)的動(dòng)畫(huà)時(shí)，要充分考慮到這些因素。運(yùn)營(yíng)類(lèi)動(dòng)畫(huà)一般控制在 1 分半之內(nèi)是較為合理的。
市場(chǎng)上很多 AI 兒童伴讀機(jī)器人，是可以自動(dòng)推送產(chǎn)品內(nèi)容的，考慮到兒童的健康使用，推送動(dòng)畫(huà)的播放時(shí)間要善加利用，并減少觀看所需的步驟，在家長(zhǎng)端也需要設(shè)計(jì)對(duì)應(yīng)控制內(nèi)容的開(kāi)關(guān)，并將音量的控制開(kāi)關(guān)放在顯眼易點(diǎn)的位置。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：JellyDesign
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn