教培類產(chǎn)品若想更有效地吸引用戶留存，則需要站在用戶的角度進(jìn)行思考，讓用戶有持續(xù)性的動力使用產(chǎn)品。而有“溫度”的設(shè)計可以讓用戶更有動力。本篇文章里，作者從視覺上總結(jié)了B端教育產(chǎn)品的情感化設(shè)計操作策略，一起來看一下。

我們是如何讓工具化教培類產(chǎn)品更具有“溫度”，同時又滿足B端產(chǎn)品多樣、規(guī)范化設(shè)計的。

一、項(xiàng)目背景

此項(xiàng)目是由我們的合作伙伴-清華大學(xué)心理學(xué)系學(xué)習(xí)科學(xué)實(shí)驗(yàn)室執(zhí)行主任宋老師和他的團(tuán)隊(duì)發(fā)起，與我們騰訊云的小伙伴一起完成設(shè)計和開發(fā)的。宋老師的師資團(tuán)隊(duì)在教育培訓(xùn)行業(yè)已有多年的沉淀，且在類工具化的教培線上產(chǎn)品授課經(jīng)驗(yàn)豐富。

宋老師團(tuán)隊(duì)認(rèn)為：“現(xiàn)有的工具化產(chǎn)品并不能足夠滿足團(tuán)隊(duì)的教學(xué)需求和理念”。他們需要更富有情感化的產(chǎn)品，區(qū)別于其它的在線工具化的教培產(chǎn)品。

同時在教學(xué)過程中宋老師團(tuán)隊(duì)的核心痛點(diǎn)在于：如何讓學(xué)員有動力地學(xué)習(xí)下去。21天中長期課程訓(xùn)練營，學(xué)員會經(jīng)常出現(xiàn)無法堅(jiān)持學(xué)習(xí)、學(xué)習(xí)動力不足、中途放棄學(xué)習(xí)等問題，而這些也自然成為我們需要去突破和解決的設(shè)計難點(diǎn)。

1. 核心訴求：如何讓學(xué)員有動力學(xué)習(xí)？

解析問題：老師團(tuán)隊(duì)希望做出與市場上工具化產(chǎn)品有所區(qū)別的產(chǎn)品目標(biāo)，更是一款具有情感化且具有工具屬性的教培產(chǎn)品。根據(jù)這個目標(biāo)和方向，我們快速嘗試了一版方案：讓學(xué)習(xí)進(jìn)度清晰可見—“學(xué)習(xí)地圖”方案。

設(shè)計目標(biāo)

快速迭代1.0 學(xué)習(xí)地圖，定位問題聚焦設(shè)計方向。

1.0版設(shè)計地圖

我們快速打造并模擬上線了1.0版學(xué)習(xí)地圖，并和宋老師團(tuán)隊(duì)溝通發(fā)現(xiàn)：如上圖的信息模式更適合即時性運(yùn)營類的信息傳達(dá)，而在21天這樣的學(xué)習(xí)訓(xùn)練營中，這樣的視覺信息表達(dá)會有以下的問題：

1. 學(xué)習(xí)路徑漫長且曲折，讓學(xué)習(xí)目標(biāo)看起來很難完成；
2. 在漫長的路徑上連續(xù)不斷的關(guān)卡造成一種讓用戶遙不可及且容易中途就放棄學(xué)習(xí)；
3. 節(jié)點(diǎn)的節(jié)奏過于單調(diào)讓學(xué)習(xí)沒有預(yù)期感、缺失成就感。

雖然秉持著創(chuàng)造輕松的學(xué)習(xí)環(huán)境和氣氛的目標(biāo)，我們的設(shè)計還不能滿足實(shí)現(xiàn)情感化的工具產(chǎn)品，所以我們快速的定位問題并調(diào)整了我們學(xué)習(xí)地圖的設(shè)計思路。

1.0版設(shè)計地圖

2. 學(xué)習(xí)如何才能是輕松又有動力的？

回答最初的問題，如何讓學(xué)習(xí)輕松有效又有持續(xù)性？分為以下幾個維度：

1）縮短學(xué)習(xí)路徑— 讓學(xué)習(xí)目標(biāo)看起來輕松可執(zhí)行。

2）拉近終點(diǎn)目標(biāo)— 讓原先看起來遙不可及的目標(biāo)“觸手可及”。

3）只聚焦當(dāng)前任務(wù) 弱化未完成的任務(wù)—幫助學(xué)習(xí)者減負(fù)，學(xué)習(xí)者不需要關(guān)注將來的任務(wù)，只需要把精力聚焦在當(dāng)前的任務(wù)下，完成當(dāng)前的力所能及的“小事”就能打卡成功。

4）放大學(xué)習(xí)成就感— 在21天的訓(xùn)練營，把學(xué)習(xí)分成：初、中、后期。在學(xué)習(xí)初期需要關(guān)注學(xué)習(xí)習(xí)慣的養(yǎng)成；在學(xué)習(xí)中期需要幫助學(xué)習(xí)者在中途不要放棄學(xué)習(xí)，鼓勵學(xué)習(xí)者，并將學(xué)習(xí)回報等可視化，像是累計的學(xué)習(xí)時間獲得驚喜等；在學(xué)期后期放大目標(biāo)，凸顯目標(biāo)任務(wù)近在咫尺的感受，在最后學(xué)習(xí)終點(diǎn)放大學(xué)習(xí)的成就感。

5）放大社交屬性— 騰訊的基因就是有社交屬性的，所以將學(xué)習(xí)組團(tuán)化，學(xué)習(xí)者之間互相鼓勵，讓學(xué)習(xí)變得簡單和快樂。

3. 從籠統(tǒng)的游戲化設(shè)計聚焦關(guān)鍵設(shè)計點(diǎn)

1）輕松

創(chuàng)造更輕松愉快的學(xué)習(xí)氛圍。首先需要拆解分化目標(biāo)本身，聚焦于當(dāng)下要完成的事，而不是想著那個遙不可及的目標(biāo)；其次，讓過程可見，看見學(xué)習(xí)的過程視覺化的量化；最后，驚喜埋點(diǎn)，讓學(xué)習(xí)是一件快樂的事情。

2）激勵

主要的思考方向聚焦在：增加互動，老師上課直播的送花 、標(biāo)示（學(xué)習(xí)積極分子等）創(chuàng)造學(xué)員之間的互動，攀登榜等。其次通過驚喜盲盒讓學(xué)習(xí)也是可以開心并且有成果的。

3）品牌化

以此次的項(xiàng)目代表，不同的教育機(jī)構(gòu)有自己的屬性和教育理念的傳達(dá)，也有大量的運(yùn)營的需求。如何幫助合作伙伴或是客戶更好的快速、清晰、準(zhǔn)確的塑造其品牌和品牌識別度，也是我們需要聚焦的方向。

4）B端設(shè)計

作為B端的設(shè)計，希望后續(xù)面對類似需求的客戶可以將設(shè)計元素組件化，量化復(fù)用的同時，滿足用戶定制化的需求，靈活多變，幫助產(chǎn)品快速的產(chǎn)出。

聚焦設(shè)計關(guān)鍵點(diǎn)

二、差異化學(xué)習(xí)地圖專項(xiàng)設(shè)計

1. 地圖信息屬性調(diào)整

1）節(jié)點(diǎn)

將課程的節(jié)點(diǎn)放大，且增加變量的屬性，讓每節(jié)課程的節(jié)點(diǎn)都“埋藏驚喜”。同時節(jié)點(diǎn)的設(shè)計分為基礎(chǔ)節(jié)點(diǎn)和其它節(jié)點(diǎn)。其它節(jié)點(diǎn)包含：彩蛋節(jié)點(diǎn)、運(yùn)營位節(jié)點(diǎn)等，讓節(jié)點(diǎn)變成一個組件的同時具備了靈活變化的屬性。

節(jié)點(diǎn)組件

2）路徑

節(jié)點(diǎn)自身就可以組成隱形的路徑，相對就壓縮了學(xué)習(xí)路徑，減輕學(xué)習(xí)者的學(xué)習(xí)負(fù)擔(dān)。并且用空間感的“近大遠(yuǎn)小的”路徑設(shè)計從視覺上“拉近”學(xué)習(xí)目標(biāo)終點(diǎn)。

3）角色融入

將學(xué)習(xí)者角色帶入，用了小人“跳一跳”的動態(tài)增加學(xué)習(xí)的趣味性。

動態(tài)跳一跳

4）故事線

服務(wù)于售前，產(chǎn)品可以針對不同的客戶和需求串連不同的故事線。

在做初期提案時，我們的故事線是：學(xué)習(xí)積累水滴灌溉小樹苗，在學(xué)習(xí)過程中小樹苗慢慢成長變成大樹，通過這樣的視覺呈現(xiàn)來體現(xiàn)學(xué)習(xí)的成就感。學(xué)習(xí)者在不同的節(jié)點(diǎn)會解鎖帶有樹苗長大的驚喜“彩蛋”節(jié)點(diǎn)。

作為B端的設(shè)計服務(wù)，不同的客戶有不同的目標(biāo)需求，但是基于這樣的學(xué)習(xí)地圖組件，后續(xù)可以更換不同的故事線，也可以根據(jù)客戶需求靈活定制學(xué)習(xí)地圖。

2. 地圖在界面上的的呈現(xiàn)

1）終點(diǎn)目標(biāo)可見/聚焦當(dāng)前任務(wù)

首屏就可以看到終點(diǎn)，并展示終點(diǎn)第21節(jié)課程，減輕學(xué)習(xí)者的負(fù)擔(dān)。在視覺上呈現(xiàn)出：完成這個目標(biāo)“看起來”也不是很困難的感受，讓學(xué)習(xí)者感覺自己是可以憑借著努力去觸達(dá)學(xué)習(xí)終點(diǎn)的。所以學(xué)習(xí)者只需要聚焦在當(dāng)前需要完成的課程，而不需要考慮還未完成的課程。

地圖的視覺呈現(xiàn)

2）界面結(jié)構(gòu)

• 遠(yuǎn)景：不同的階段感，放大成就感。
• 課程區(qū)域：（減少學(xué)習(xí)負(fù)擔(dān)，聚焦當(dāng)前的任務(wù)。
• 前景區(qū)域：邊走風(fēng)景邊會變化體現(xiàn)成長感，減少學(xué)習(xí)的倦怠感。

3）前、中、遠(yuǎn)景的結(jié)構(gòu)設(shè)計

界面的結(jié)構(gòu)分為：前景、中景、遠(yuǎn)景。

• 前景區(qū)域：隨著學(xué)習(xí)者邊“走”風(fēng)景會變化，在前景處體現(xiàn)學(xué)習(xí)者的成長感，減少學(xué)習(xí)的倦怠。
• 中景：課程區(qū)域，減少學(xué)習(xí)負(fù)擔(dān)，聚焦當(dāng)前的任務(wù)。
• 遠(yuǎn)景：弱化未來的課程，在學(xué)習(xí)后期階段，放大目標(biāo)觸手可及的感受，幫助學(xué)習(xí)者堅(jiān)持學(xué)習(xí)。

4）學(xué)習(xí)地圖元素的組件靈活變化

1.0版本的學(xué)習(xí)地圖設(shè)計重心放在視覺插畫上，而忽略了服務(wù)于B端用戶所需的快速組件化。基于現(xiàn)在的設(shè)計結(jié)構(gòu)，可以有效的產(chǎn)出和預(yù)估設(shè)計的工作量，將其作為有情感沉淀的半自定義組件。

如何通過界面提升學(xué)習(xí)動力

5）最后小結(jié)

學(xué)習(xí)地圖的設(shè)計是為了幫助學(xué)習(xí)者減輕學(xué)習(xí)負(fù)擔(dān)、幫助學(xué)習(xí)者明確學(xué)習(xí)路徑、凸顯學(xué)習(xí)的成長感。靈活的節(jié)點(diǎn)設(shè)計以及隱藏彩蛋增強(qiáng)了學(xué)習(xí)的動力，減少了學(xué)習(xí)的疲勞感。而在產(chǎn)品售賣層面，可以串聯(lián)不同的故事線快速搭建學(xué)習(xí)地圖。

三、幫助合作伙伴樹立品牌

1. 客戶提案

合作伙伴提出了關(guān)鍵詞“成長”，為了更好地管理用戶的預(yù)期，我們做了以“成長”為核心的三個維度展開的設(shè)計提案。方案A為成長沐浴在陽關(guān)下的治愈型方案—向陽而生感受成長的力量。方案B為學(xué)習(xí)也可以很快樂—學(xué)習(xí)嘉年華。方案C為成長的經(jīng)典綠色方案—成長是一種詩意的棲居。

3個不同的提案

確定主題向陽而生

在與合作伙伴溝通后選擇了A方案向陽而生，產(chǎn)品也重新定義了故事主線。將故事主線定義為“登山看日出”所以根據(jù)新的故事主線我們定義了主要的品牌元素及延伸運(yùn)用。

2. 品牌設(shè)計元素的提取與應(yīng)用

宋老師團(tuán)隊(duì)選擇的“向陽而生”的方案，將設(shè)計元素的落點(diǎn)在于“陽光”的設(shè)計點(diǎn)上。

視覺元素提取抽象并賦予視覺的語意“在名師的指導(dǎo)下學(xué)習(xí)成長，猶如沐浴在溫和自在的陽光中，快樂成長，快樂學(xué)習(xí)”，并加入了“學(xué)習(xí)”的元素—筆記本，希望可以通過紙張體現(xiàn)學(xué)習(xí)過程中的“親切感”。

主要設(shè)計元素首先來分解主要的視覺設(shè)計點(diǎn)-陽光，提取陽光“溫暖柔和”的特質(zhì)。將陽光元素抽象出：磨砂模糊的陽光光暈、一束光線的色彩形狀的組合。并將這些特質(zhì)運(yùn)用在界面設(shè)計中，如下圖。

設(shè)計元素在界面上的應(yīng)用在質(zhì)感上運(yùn)用更多偏磨砂的效果，加入有代表性的筆記本元素作為底紋。在界面可以上看到，通過陽光光束突出人名，重要的按鈕及按鈕狀態(tài)也增加了陽光光暈的設(shè)計，在細(xì)節(jié)上潛移默化地呈現(xiàn)教學(xué)與設(shè)計的理念。

設(shè)計元素在界面上的應(yīng)用

3. 差異化：融入新的故事線—放大學(xué)習(xí)成就感

融入新的故事線“登山看日出”。在產(chǎn)品中“學(xué)習(xí)地圖”作為差異化的設(shè)計點(diǎn)的全過程展示，參看下圖視頻演示。

首次學(xué)習(xí)過程模擬學(xué)習(xí)進(jìn)度的視覺化呈現(xiàn)分為三個不同階段：

1. 初期-學(xué)習(xí)新鮮期；
2. 中期-學(xué)習(xí)倦怠期；
3. 后期-學(xué)習(xí)沖刺期。

我們將21天的學(xué)習(xí)進(jìn)程分成不同的階段，并根據(jù)不同的用戶心理改變視覺呈現(xiàn)，前期和中期和后期會有明顯的“視覺改變”，在最后成功的學(xué)習(xí)完成也會有一個儀式感的“學(xué)習(xí)路徑”的層層疊加，凸顯學(xué)習(xí)的成就感，此時也是用戶對自己用心學(xué)習(xí)的最好回饋，將這一些心理狀態(tài)都視覺化地呈現(xiàn)在用戶眼前。

階段的視覺呈現(xiàn)學(xué)習(xí)地圖組件分為：

• 前景：學(xué)習(xí)過程變化的信息；
• 中/遠(yuǎn)景：學(xué)習(xí)節(jié)點(diǎn)，學(xué)習(xí)節(jié)點(diǎn)包括基礎(chǔ)節(jié)點(diǎn)和自定義節(jié)點(diǎn)，自定義節(jié)點(diǎn)可以根據(jù)產(chǎn)品和客戶的需要更改節(jié)點(diǎn)的屬性；
• 遠(yuǎn)景：學(xué)習(xí)結(jié)束的儀式感展現(xiàn)。這一學(xué)習(xí)路徑的視覺展現(xiàn)形式也可以很好地轉(zhuǎn)化為設(shè)計組件，串聯(lián)不同的故事線讓學(xué)員去完成不同天數(shù)的線上學(xué)習(xí)。

學(xué)習(xí)地圖組件

1）其它學(xué)習(xí)激勵頁面

呼應(yīng)“向陽而生”的故事線，我們的設(shè)計還包含了其它的學(xué)習(xí)激勵機(jī)制。例如：每次完成學(xué)習(xí)會獲得一個“太陽”積分、學(xué)習(xí)攀登榜的設(shè)計上，呼應(yīng)登山主題的視覺表達(dá)。

其他激勵頁面

2）設(shè)計規(guī)范與設(shè)計協(xié)同

為感更好地進(jìn)行教育的視覺協(xié)作，我們將視覺規(guī)范分為：設(shè)計總體理念的概覽、設(shè)計基礎(chǔ)組件、設(shè)計特殊組件、界面相關(guān)的具體設(shè)計內(nèi)容、典型頁面和人物封面規(guī)范等，保證內(nèi)外部的設(shè)計輸出規(guī)范，保持產(chǎn)品視覺基調(diào)完整準(zhǔn)確。

設(shè)計規(guī)范

協(xié)同設(shè)計

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：人人都是產(chǎn)品經(jīng)理   作者：騰訊設(shè)計

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

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

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

二、背景

三、對B端C化的理解

四、B端C端的不同

1.使用者不同

2.業(yè)務(wù)不同：

 3.價值主張不同：

4.產(chǎn)品思維不同：

5.產(chǎn)品形態(tài)不同：

五、B端C化在產(chǎn)品中具體的表現(xiàn)

1.結(jié)構(gòu)層 

2.框架層

3.表現(xiàn)層

六、B端C化未來的設(shè)計方向

1.3D化

2.情感化

3.個性化

七、總結(jié)：

說明：文本縮略是指展示空間不足時，隱去部分內(nèi)容并用'...' 替代。常見情況：

· 文本內(nèi)容長度或高度超過列寬或行高；

· 圖表中空間有限，文本內(nèi)容無法完全顯示；

· 自適應(yīng)調(diào)整時寬度變小。

縮略方式

末端截斷

· 內(nèi)容超過列寬時超出的用 '...' 省略；

· 標(biāo)簽內(nèi)文案超出由 '...' 省略。

· 長文本截斷的通用模式。

中間截斷

· 設(shè)置開頭、末端保留的字符數(shù)，在末端保留字符前顯示 '...' ；

· 開頭保留字符數(shù)根據(jù)列寬以「顯示盡量多的字符」的原則來確定（極端情況為開頭不保留字符，即為「開頭截斷」；若空間十分有限，則盡量多地保留末端字符）。

· 中間截斷在文本的開頭相同、末尾字符對區(qū)別字段起到關(guān)鍵作用時使用。

場景舉例 1：實(shí)例名

包括任務(wù)名、文件名、表名、系統(tǒng)名等等。

典型案例：完整字段如下

company_sales_record_20150116

company_sales_record_20150117

縮略結(jié)果：

場景舉例 2：系列名稱

開頭統(tǒng)一的系列長名稱，通過后半部分來區(qū)分的字段。

典型案例：阿里集團(tuán)的 BU 完整名稱如下

口碑-本地生活事業(yè)部-北方大區(qū)-北方運(yùn)營

口碑-本地生活事業(yè)部-七星大區(qū)-東南運(yùn)營

縮略結(jié)果：

設(shè)計要點(diǎn)

· 重要數(shù)字、時間不建議縮略。

· 名稱列縮略可結(jié)合表頭的拖拉控制顯示與縮略，內(nèi)容完全顯示時 '...' 消失。

· 單行文本省略使用 tooltip，多行文本省略使用展開與收起。

· 描述 '...' 支持 hover，標(biāo)簽整個支持 hover。

· 標(biāo)簽數(shù)量多時建議通過折行全部展示，不建議通過 '...' 隱藏后面的標(biāo)簽。

· tooltip 不承載復(fù)雜文本和操作。

· 根據(jù)使用場景為字段設(shè)置合理的字?jǐn)?shù)上限和展示空間，避免隱藏過多的內(nèi)容。

· tooltip 的尺寸不應(yīng)過大，建議最大尺寸不超過長 320px、寬 160px。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷   作者：Ant_Design 

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

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

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

在如今的工作中（尤其是 B 端）越來越多的會開始出現(xiàn)數(shù)據(jù)可視化的身影，對于一部分小伙伴來說這個概念是較為陌生的，面對這道無形之中提升的“門檻”我們常常會表現(xiàn)的手足無措。所以，為了讓大家對于數(shù)據(jù)可視化不再那么束手無措，我希望能通過這篇文章和大家一起交流學(xué)習(xí)，解決一些屬于我們共同的問題。

那么我們還是老規(guī)矩，想要了解一個事物首先需要知道的是它的定義。

數(shù)據(jù)可視化的基本信息

1. 數(shù)據(jù)可視化的定義

較為籠統(tǒng)的來說數(shù)據(jù)可視化是一種由圖形、圖像、數(shù)字等元素組成的語言用于解釋、呈現(xiàn)目標(biāo)數(shù)據(jù)之間的關(guān)系。從這個定義上來看，數(shù)據(jù)可視化從外觀層面來說是與圖形、圖像這些視覺元素密不可分，這也是數(shù)據(jù)可視化最為明顯的特征。

而結(jié)合我們實(shí)際的生活與工作來說，數(shù)據(jù)可視化是一種以圖形符號為主要表現(xiàn)形式，將不可見的、抽象的、復(fù)雜的、枯燥的、專業(yè)的、不直觀的數(shù)據(jù)內(nèi)容，有趣的、淺顯的傳遞給用戶的有效手段。用戶可以通過這樣的手段完成自己的目標(biāo)（例如對選定范圍內(nèi)的數(shù)據(jù)進(jìn)行分析，發(fā)現(xiàn)數(shù)據(jù)的周期與規(guī)律、迅速找到自己目標(biāo)節(jié)點(diǎn)中的關(guān)鍵數(shù)值、對比幾組數(shù)據(jù)以了解當(dāng)下研究對象的情況等）這也是數(shù)據(jù)可視化最為明顯的價值。

2. 可視化發(fā)展簡史

關(guān)于可視化的發(fā)展史上可追溯至 1950 年，當(dāng)時人們利用計算機(jī)創(chuàng)建出了首批圖形圖表，可以說是數(shù)據(jù)可視化圖表最為早期的雛形，而在 50-60 年代的可視化中又以查爾斯·約瑟夫·米納德的《1812－1813 對俄戰(zhàn)爭中法軍人力持續(xù)損失示意圖》為代表。

該圖描繪了拿破侖的軍隊(duì)自離開波蘭到俄羅斯邊界后軍力損失的狀況，也是后世分析拿破侖對俄戰(zhàn)爭的重要數(shù)據(jù)分析資料，后來這種帶狀圖被稱為“?；鶊D”用來解釋能量的流動。

而可視化真正被提到一個應(yīng)用理論的高度是到了 1987 年布魯斯·麥考梅克和馬克沁·布朗所編寫的美國國家科學(xué)基金會報告《Visualization in Scientific Computing》（科學(xué)計算之中的可視化），其意在強(qiáng)調(diào)了基于計算機(jī)的可視化技術(shù)方法的必要性，此時的概念已經(jīng)與現(xiàn)在我們所接觸的工作中的數(shù)據(jù)可視化是非常接近。

到了 90 年代初人們發(fā)起了一個稱為“信息可視化”的研究領(lǐng)域旨在為許多應(yīng)用領(lǐng)域（科學(xué)、商業(yè)、行政、財務(wù)、數(shù)字媒體）之中對于抽象的異質(zhì)性數(shù)據(jù)集的分析工作提供支持，與前面提到的“科學(xué)可視化”交叉形成了現(xiàn)在耳熟能詳?shù)摹皵?shù)據(jù)可視化”，此時這個詞匯才慢慢的被更多的專業(yè)領(lǐng)域的人所接受，并在之后互聯(lián)網(wǎng)的不斷發(fā)展中擴(kuò)充著自己的分支。

3. 為什么會使用數(shù)據(jù)可視化

目前大量開始使用視覺可視化的原因其實(shí)非常簡單大致的原因可以分為需要處理的數(shù)據(jù)量太大了和人腦不夠用了。

據(jù)不完全統(tǒng)計 IBM 公司每天有 2.5 億字節(jié)數(shù)據(jù)的吞吐量，麻省理工學(xué)院的研究科學(xué)家 Andrew McAfee 和 Erik Brynjolfsson 教授指出，如今在互聯(lián)網(wǎng)上傳遞的數(shù)據(jù)量比過去 20 年的總和還多，而且根據(jù) IDC 預(yù)測，到 2025 年將有 163 萬億 GB 的數(shù)據(jù)。

這是非常驚人的，而這么多需求的數(shù)據(jù)量單憑人腦的計算能力和處理能力來說是完全無法與之匹配的，研究表明人腦很難同時處理 5 組以上的抽象數(shù)據(jù)，所以這種單線程的處理方式就決定了需要借助外力。

而對于用戶尤其是決策層的用戶來說在現(xiàn)實(shí)的工作場景中經(jīng)常需要同時處理超過 5 組以上的數(shù)據(jù)并需要對其建立精準(zhǔn)的分析模型以便于做出最準(zhǔn)確的決策所以基于這樣的需求，數(shù)據(jù)可視化設(shè)計氤氳而生。

4. 數(shù)據(jù)可視化的優(yōu)勢

基于數(shù)據(jù)可視化的需求來看，數(shù)據(jù)可視化的優(yōu)勢是顯而易見的，可以概括為兩點(diǎn)：認(rèn)知減負(fù)和傳遞賦能。

認(rèn)知減負(fù)是使用者在使用數(shù)據(jù)可視化工具時候的最直觀感受，當(dāng)所面對的龐大的、復(fù)雜的枯燥海量數(shù)據(jù)集變成了圖像化、通俗化、形象化的視覺符號時，我們會本能的放下對于面對冰冷數(shù)據(jù)時候的抗拒和戒備，這是因?yàn)槿藢τ谝荒苛巳桓咏咏约菏煜さ挠腥な挛锏臅r候，會更為親切和愿意去主動理解。而且被處理過、規(guī)劃過的簡潔直觀表現(xiàn)形式，能更為直接的讓使用者看到數(shù)據(jù)與數(shù)據(jù)之間的關(guān)聯(lián)，進(jìn)而分析出其潛在關(guān)系，在人對數(shù)據(jù)的認(rèn)知這個環(huán)節(jié)上降低了識別成本和分析成本。

傳遞賦能上圖像傳遞更接近人類最本能的獲取信息的方式，比起文字來說圖像更像是一個解密的步驟，通過解開文字描述這重“密碼”將最本質(zhì)的信息進(jìn)行呈現(xiàn)，而且對比文字，圖像所能夠承載的信息其實(shí)更為廣泛，而且人類讀圖的效率要遠(yuǎn)遠(yuǎn)高于閱讀文字。

無論是一個約定俗成的語義符號形象還是符合語境的配色都能夠起到比文字直白表述更為強(qiáng)烈的深入人心效果，并且圖解的形式并不受限于語言的障礙，極大的降低了溝通成本。

5. 使用目標(biāo)

基于用戶的使用目標(biāo)來說，使用數(shù)據(jù)可視化其實(shí)就像是一個偵探用“蛛網(wǎng)圖”輔助自己梳理思緒進(jìn)行破案的過程：將一些有關(guān)的，但是較為零散信息數(shù)據(jù)用一根根線索穿插起來，形成體系化的聯(lián)系，方便使用者迅速把握各個節(jié)點(diǎn)之間的關(guān)系進(jìn)行推導(dǎo)。

所以說我們在設(shè)計數(shù)據(jù)可視化的時候并不是對我們拿到的數(shù)據(jù)的無腦映射，而是要基于用戶的目標(biāo)經(jīng)過一定的處理和優(yōu)化后才能進(jìn)行呈現(xiàn)，隨時記住我們是給用戶在打輔助，所以我們每一步的設(shè)計一定要基于用戶的思考。

用戶的期望是能夠高效、清晰、簡潔地完成數(shù)據(jù)的對比、關(guān)鍵節(jié)點(diǎn)的查詢、每組數(shù)據(jù)之間的分析等一系列交互，提升自己的工作效率，降低自己的學(xué)習(xí)和使用成本。

6. 應(yīng)用場景

數(shù)據(jù)可視化的應(yīng)用領(lǐng)域較為廣泛涉及醫(yī)療、統(tǒng)計、管理、金融、娛樂、人工智能等一系列領(lǐng)域，在 UI 的設(shè)計中我們最常接觸到的包括：PC 后臺的數(shù)據(jù)概覽、數(shù)據(jù)可視化大屏、游戲 UI、后臺實(shí)時監(jiān)控等。

設(shè)計師們的任務(wù)

當(dāng)我們大致了解了數(shù)據(jù)可視化的歷史、使用原因、優(yōu)勢、用戶目標(biāo)、應(yīng)用領(lǐng)域后下面就要切入我們設(shè)計師最為關(guān)心的話題：我們在設(shè)計中的任務(wù)。

1. 設(shè)計難點(diǎn)

數(shù)據(jù)可視化作為一門跨領(lǐng)域的學(xué)科，本身對于從業(yè)者而言就有著一定的綜合素質(zhì)要求，但由于國內(nèi)教育并沒有垂直教學(xué)學(xué)科，所以在現(xiàn)在的階段從業(yè)人員一部分由純視覺設(shè)計專業(yè)的同學(xué)組成，另一部分由純工科類型的專業(yè)的同學(xué)組成。

于是這就導(dǎo)致了非視覺設(shè)計師在進(jìn)行設(shè)計時，會將全副精力放在強(qiáng)數(shù)據(jù)的準(zhǔn)確性、合理性上，從而讓視覺的易讀性上有一定的損失，表現(xiàn)形式也較為單一枯燥，視覺感官較差，反觀視覺設(shè)計師通常會將數(shù)據(jù)可視化在視覺表現(xiàn)形式上過度用力，雖然營造了很好的視覺體驗(yàn)，但是從其實(shí)用度、可用性上來說會大打折扣。

于是設(shè)計的難點(diǎn)很多時候就會集中在平衡視覺與實(shí)用之間的關(guān)系。

2. 設(shè)計目標(biāo)

通過以上分析，不難看出設(shè)計的主要目標(biāo)，而面對這句較為抽象的“把握設(shè)計與實(shí)用之間的平衡”其實(shí)無外乎也就是拆解到功能和視覺這兩個方面。

從功能上來說，我的目標(biāo)是提升用戶的數(shù)據(jù)閱讀效率、讓用戶能夠迅速 Touch 到目標(biāo)信息，提升交互效率，一切都是以結(jié)果為導(dǎo)向，以解決用戶問題為導(dǎo)向，一定記住人們不愿意接受未處理過的數(shù)據(jù)。

而從視覺上來說，我們的目標(biāo)是處理好在視覺上各個模塊之間的統(tǒng)一、透氣關(guān)系，將數(shù)據(jù)進(jìn)行可視化的同時盡量提升感官上的審美體驗(yàn)與傳達(dá)上的有趣。

以上會作為后文中我們每一步設(shè)計的指導(dǎo)和檢驗(yàn)的方式，從實(shí)際操作的維度上來說二者也并不是五十比五十的分配，遵循的原則是：體驗(yàn)一定要讓位于功能，所以在視覺的層面發(fā)揮的空間其實(shí)需要比較克制。

案例制作

了解了數(shù)據(jù)可視化的設(shè)計難點(diǎn)，明確了數(shù)據(jù)可視化的設(shè)計目標(biāo)，那么我下面進(jìn)入我們最重點(diǎn)的環(huán)節(jié)：可視化頁面案例制作，由于數(shù)據(jù)可視化的形式較多，這次我們以工作中經(jīng)常接觸得到的 PC 頁面數(shù)據(jù)概覽頁為例。

1. 明確性質(zhì)

同樣的，細(xì)化到數(shù)據(jù)概覽這個分支項(xiàng)目，我們同樣需要明確了解其基礎(chǔ)定義和性質(zhì)，嚴(yán)格意義上來說數(shù)據(jù)概覽部分屬于 Dashboard design（儀表盤設(shè)計）的一種，其主要的目的和功能可分為分析和操作兩塊。

所以從綜合的角度來說數(shù)據(jù)概覽部分可以理解為：

其它模塊的摘要視圖，并顯示來自應(yīng)用程序各個部分的關(guān)鍵信息，從這點(diǎn)上來說建議此模塊可以在其余模塊設(shè)計完后再進(jìn)行設(shè)計，如此有利于設(shè)計師從一個全局的視角切入進(jìn)行設(shè)計，理解上也會更加透徹，否則很可能會陷入在你設(shè)計其他模塊的時候不斷地返回對其進(jìn)行修改的怪圈。

它也是核心功能、常用功能的快速操作助手和快捷頁面跳轉(zhuǎn)（有點(diǎn)類似于導(dǎo)航），交互功能的排布和關(guān)鍵信息的顯示，其共同的要求點(diǎn)是顯而易見的，即明確各個模塊之間的層級，做好順序、優(yōu)先級排布。這就需要你對業(yè)務(wù)目標(biāo)有一定的了解，記住，對業(yè)務(wù)目標(biāo)不了解，你的設(shè)計將毫無意義。

你可以通過查詢一些內(nèi)部資料、報告、也可以詢問產(chǎn)品經(jīng)理等相關(guān)負(fù)責(zé)人，還可以通過用戶調(diào)研得出，這里不展開說，在動手之前你需要搞清楚：各模塊之間優(yōu)先級如何、你需要在一張單獨(dú)的圖表內(nèi)展示多少變量、想展示一段時間內(nèi)的值是項(xiàng)目和項(xiàng)目之間還是組與組之間、每段變量中有多少關(guān)鍵數(shù)據(jù)需要展示等問題。

2. 定義模塊優(yōu)先級

如上圖所示，在工作中我們接到需求的時候是面對一堆冗雜的數(shù)據(jù)集，組成了若干個模塊，但是正如上文所說，我們并不能對其進(jìn)行無腦的可視化映射，所以首先要做的就是要對各個模塊進(jìn)行優(yōu)先級的梳理排序

明確了各個模塊的優(yōu)先級排布之后，我們開始對每一個單獨(dú)模塊進(jìn)行可視化轉(zhuǎn)化，即哪一個部分分別用什么類型的可視化形式表現(xiàn)，這一步非常類似于土地使用規(guī)劃，當(dāng)你在將土地劃分完后，為每一塊土地定義其使用類型。

3. 明確圖表選擇

想準(zhǔn)確的將圖表與所要表現(xiàn)的數(shù)據(jù)進(jìn)行對應(yīng)，需要了解圖表本身所包含的基本元素。

在這些元素中正常情況下一定在圖表中的有：標(biāo)題、時間范圍、圖形主體，經(jīng)常出現(xiàn)的有：坐標(biāo)系、圖例、提示信息，有時候會有的有：切換選項(xiàng)和值域。

知道了這些重要的基礎(chǔ)信息了，那么在面對這么多圖表的時候我們該如何正確的選擇來進(jìn)行使用呢？

其實(shí)和之前說的一樣：基于目的來進(jìn)行思考，所謂的基于目的來進(jìn)行思考也就是要明確你所確立的數(shù)據(jù)指標(biāo)需要分析的維度，而日常使用的數(shù)據(jù)需要分析的維度無外乎：比較、構(gòu)成、分布聯(lián)系。

比較類圖表

比較類圖表應(yīng)該是大家最為熟悉的范疇，第一時間能夠想到的就是柱狀圖，這也是運(yùn)用最為廣泛的圖表之一，經(jīng)常出現(xiàn)在 PC 端之中，用于描述分類數(shù)據(jù)之間的對比，描述的數(shù)據(jù)可以是地區(qū)、品類甚至一個時間周期，但由于其擴(kuò)展能力有限，所以一般不建議項(xiàng)目超過 12 條。

條形圖與柱狀圖類似，看上去只是交換了 X 軸與 Y 軸，功能和承載數(shù)據(jù)種類較為類似，但不同的是，條形所能承載的項(xiàng)目數(shù)量相對于柱狀圖而言更多，由于其優(yōu)良的縱向延展性一般用于手機(jī)端較多，而且從上到下的閱讀方式符合人眼閱讀習(xí)慣，所以也會經(jīng)常用于排行榜的設(shè)計中。

分組條形圖是條形圖的衍生之一用于比較多個變量在不同區(qū)域之間的數(shù)量關(guān)系，比如當(dāng)想比較同樣一款衣服和鞋子在四個門店中的一個季度的營業(yè)額時就可以使用分組條形圖。

雙向條形圖表適合比較兩組以上的分類數(shù)據(jù)比較，和分組條形圖較為類似，但是由于自身外觀特征更適合用于比較兩組意義相反的數(shù)據(jù)，也正是如此，雙向條形圖的組內(nèi)二級分類數(shù)量一般不要超過 3 條最好。

折線圖與前者最大的不同就在于在坐標(biāo)軸中加入了連續(xù)類別這個概念，數(shù)據(jù)基于時間等因素變得動態(tài)了起來，注重變化趨勢的展現(xiàn)。

面積圖是折線圖的延伸，除了表示變化趨勢之外還能比較所選范圍內(nèi)積累的值。

玫瑰圖應(yīng)該算是可視化圖表中的“網(wǎng)紅”，因?yàn)槲覀儚男W(xué)的課本中就知道它還有一個別稱叫“南丁格爾玫瑰圖”。它是一種圓形的直方圖，使用半徑長短表示數(shù)值大小，其特點(diǎn)就在于因?yàn)槠洫?dú)特的外觀可以將數(shù)值之間的差距在視覺層面進(jìn)行放大，和將坐標(biāo)軸范圍縮小來提升視覺上數(shù)值的碾壓是一個道理，發(fā)布會吹水最愛，但是要注意的是這不是一個表示占比構(gòu)成的圖，因?yàn)槊倒鍒D的每一份角度是一樣的，一定要和餅狀圖等圖區(qū)分開來，它用來表示的還是數(shù)值與數(shù)值之間的大小

雷達(dá)圖經(jīng)常用于分析一些多維的性能數(shù)據(jù)、評分?jǐn)?shù)據(jù)，經(jīng)常打游戲的朋友應(yīng)該不陌生，有多少五邊形選手可以扣個 1，每一項(xiàng)指標(biāo)越接近圓心說明狀態(tài)越差，越向外說明越佳。

子彈圖用于比較當(dāng)前數(shù)值與目標(biāo)之間的關(guān)系，比如看當(dāng)前業(yè)績是否達(dá)標(biāo)，也可以通過標(biāo)記劃分區(qū)域來進(jìn)行更好的評估。

漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的單流程單項(xiàng)分析，一定要有清晰的環(huán)節(jié)，比如監(jiān)控買家從瀏覽到最后下單的數(shù)量統(tǒng)計以求得轉(zhuǎn)化率，不適合無邏輯、無流程的分類對比。

構(gòu)成類圖表

構(gòu)成類圖表整體上來說主要用于觀察部分和整體的占比關(guān)系，最經(jīng)典的莫過于餅狀圖，這個不用多說，通過每一份半圓角度所占整個圓的大小來表示部分和整體的關(guān)系，但是由于其所占面積較大，經(jīng)常會讓視覺過于集中，影響注意力。

相對于餅狀圖而言，環(huán)狀圖十分有效的避免的干擾視覺的問題，其本質(zhì)是將餅圖中間掏空，功能與餅圖基本一致，但是視覺上做到了輕量化，目前在日常設(shè)計中較為常用。

旭日圖相當(dāng)于前面二者的結(jié)合，適用于展示多層級數(shù)據(jù)的占比關(guān)系，距離圓心越近代表層級越高，下一層級的總和構(gòu)成上一層級，存在一定的父子層級關(guān)系。

堆疊面積圖出了可以表達(dá)趨勢外，其優(yōu)勢在于能夠表達(dá)總量和分量的構(gòu)成關(guān)系，堆疊面積圖上的最大的面積代表了所有的數(shù)據(jù)量的總和，是一個整體。各個疊起來的面積表示各個數(shù)據(jù)量的大小。

堆疊柱狀圖的優(yōu)勢在于它既可以表達(dá)一級分類的比較，同時還能看出二級分類在其一級分類中的占比，但是缺點(diǎn)在于二級分類并不是按照同一基準(zhǔn)線對齊的，相比于堆疊面積圖更為常用。

瀑布圖用表達(dá)兩個數(shù)值之間的變化過程，過程值為正的時候，向上加，過程值為負(fù)的時候向下減。

分布聯(lián)系類圖表

分布聯(lián)系類地圖在這兩年在國人的心中其實(shí)已經(jīng)非常熟悉了，因?yàn)橐咔榻衲甑牡貓D可視化的應(yīng)用經(jīng)常出現(xiàn)在我們的生活中，地圖可以結(jié)合不同的表達(dá)方式：

可以結(jié)合散點(diǎn)、可以結(jié)合動畫、還可以結(jié)合引導(dǎo)線以及熱力圖的方式，圖的形式使用視具體的業(yè)務(wù)需求來定

最后就是氣泡圖，這是在查看分布關(guān)系中最為經(jīng)典的視覺模型，用氣泡的面積大小表示數(shù)量，結(jié)合輔助線可以更好地觀察分布情況

4. 匹配圖表 重構(gòu)布局

當(dāng)我們對每種圖表的功能和使用范圍有了一個較為明確的認(rèn)知之后，下面我們就可以對我們之前所規(guī)劃好的優(yōu)先級的模塊進(jìn)行可視化形式（圖表）的匹配了。

進(jìn)行匹配過后，我們將對布局進(jìn)行重構(gòu)，整體重構(gòu)需要遵循的原則是

• 布局層級明確，首屏盡量曝光更多內(nèi)容
• 統(tǒng)一透氣，具有呼吸感

布局層級明確，首屏盡量曝光更多內(nèi)容

從首屏曝光更多內(nèi)容來說，主要是因?yàn)榛诜治鲱惖臄?shù)據(jù)概覽工作場景和 Analytical dashboard 自身特征決定的，用戶希望能夠通過僅僅一屏的的大小進(jìn)行對各類信息的情況有基本的把控，達(dá)到一眼全局的目的，其主要注意力都會放在首屏，所以我們需要盡可能的在首屏安排更多的信息。

當(dāng)然首屏內(nèi)容也并不是越多越好，一般建議也盡量不要超過 7 組模塊，而在層級明確這塊兒主要是根據(jù)人眼閱讀習(xí)慣所產(chǎn)生的優(yōu)先級排布：正常情況下都是左上為優(yōu)先級最高，而右下優(yōu)先級較低，這是無數(shù)經(jīng)典的眼動測試和設(shè)計總結(jié)產(chǎn)生的最常用結(jié)論，就不展開敘述了，所以當(dāng)我們按照優(yōu)先級、首屏曝光更多內(nèi)容的原則進(jìn)行處理后會得到如上圖的布局。

統(tǒng)一透氣 具有呼吸感

這主要是視覺層面的問題，統(tǒng)一透氣的要求在首頁概覽中可以依靠柵格系統(tǒng)來解決，它可以有效的保持頁面布局一致性，為頁面建立基礎(chǔ)布局框架，將頁面中的所有元素都捆綁在一個體系之中，同時還能有效解決適配問題。

5. 模塊拆解

完成了大規(guī)劃之后，下面我們開始對一個一個的模塊進(jìn)行拆解，同樣的以目標(biāo)指導(dǎo)設(shè)計，邊設(shè)計邊驗(yàn)證

層級明確 突出重點(diǎn)

和大規(guī)劃一樣，單獨(dú)到每一個圖表同樣要時刻注意層級的梳理，銷售渠道部分很明確應(yīng)該是運(yùn)用一個折線圖的形式，由于業(yè)務(wù)目標(biāo)上來說更關(guān)注銷售額而不是銷售額和訂單數(shù)的比較，所以我們選用了一個帶有切換選項(xiàng)的折線圖形式。

但是我們會很容易發(fā)現(xiàn)在讀圖時會出現(xiàn)較大的視覺干擾，并沒有能夠很好地突出重點(diǎn)信息，視覺層級不清晰、混亂。

于是我們對沒有重點(diǎn)的視覺層級進(jìn)行梳理，像之前劃分模塊那樣，對視覺元素進(jìn)行高、中、低的 P0、P1、P2 的設(shè)定，提升易讀性

P0：層級最高的自然是重點(diǎn)信息突出部分，所以我們需要在其之上做加法，給予內(nèi)容異形懸停樣式進(jìn)行具體強(qiáng)調(diào)，配合投影加強(qiáng)視覺效果，有效傳遞用戶，拉開與別的元素的層級，同時數(shù)據(jù)部分用特殊字體并適當(dāng)加大字號進(jìn)行設(shè)計，方便用戶第一時間能夠看到所要強(qiáng)調(diào)的數(shù)據(jù)具體值。

P1: 其次就是主體圖形部分，這是用戶需要看到的重要部分，在使用場景中會長時間盯視，所以采用更低的明度與更高的飽和色顏色確保易讀性，但是也不致于會讓用戶太晃眼產(chǎn)生視覺疲勞，最后考慮到該模塊所處位置屬于頁面中較為核心的地帶，給予一定的顏色透明度漸變裝飾，在強(qiáng)化主體圖形的同時不致于太顯單薄。

P2：前兩者都是一定程度的做加法，那么層級最低的元素需要開始做減法，此時軸線、刻度、切換選項(xiàng)等元素需要弱化視覺層級，降低透明度，尤其是背后的刻度線與背景的明度對比大概控制在 1.6:1 上較為合適。

銷售總額、訂單數(shù)、渠道數(shù)同屬于一個數(shù)據(jù)統(tǒng)計的范疇，最忌諱的就是把以上提供的三個信息給做平，讓用戶抓不住重點(diǎn)，面對這樣的情況還是一樣，確立需要突出的重點(diǎn)信息給予特殊文字和大小的設(shè)計，選擇合適的主體圖形。

但在這里需要注意的是由于在這個模塊中 P0 是金額數(shù)、訂單數(shù)、渠道數(shù)這些重要值，所以可視化圖形需要適當(dāng)為其讓步，不要放在閱讀中心位置，按照 P1 來進(jìn)行處理，而訂單數(shù)、轉(zhuǎn)換率這樣的標(biāo)題就成了 P2 需要適當(dāng)降低透明度和文字大小，不干擾主要信息的表達(dá)。

統(tǒng)一營造

說到統(tǒng)一，最先想到的一定是色彩，無非也就是需要處理好對立統(tǒng)一關(guān)系，而這其中統(tǒng)一的比例又要大于對立，配色上盡量選用同類色系，不宜太過花哨，尤其是對于 B 端而言，建議在可能的情況下不要超過 5 種，而且主色、輔助色，對比色的比例建議控制在 6:3:1 的比例（但不絕對），既能做到有所區(qū)別又不致于過于絢麗干擾視覺。

你的主色不一定要遷就你的品牌色，但是一定要是如上文說的盡量低明度高飽和，以適應(yīng)于長時間的注視。

顏色過后就是字體，字體的使用需要極為謹(jǐn)慎，如果可以盡量只出現(xiàn)一種字體（但不要超過三種），并且只采用基礎(chǔ)字體，正常情況下都是將其作為一個需要被降噪了的視覺元素來對待（比如降低透明度），在 PC 端中盡量也不要出現(xiàn)較多不同的字號、字重，造成沒有必要的視覺干擾。

除了字體之外，在統(tǒng)一感的營造上卡片的布局結(jié)構(gòu)也需要盡量保持一致，這是為了提升易用性，同一個產(chǎn)品內(nèi)，相同布局會給予用戶相同交互、相同功能的暗示，也更容易培養(yǎng)用戶習(xí)慣，提升操作效率。

呼吸適中

呼吸感是留白的藝術(shù)，很考驗(yàn)設(shè)計師的排版能力，在單獨(dú)的模塊內(nèi)，元素與元素之間盡量不要用實(shí)線進(jìn)行間隔，可以的話利用親密性原則通過元素間距的遠(yuǎn)近進(jìn)行布局。

而柱狀圖的設(shè)計上，柱與柱之間的間距最好大于柱寬的 1.5 倍，這樣才顯得視覺上較為透氣，不致于太臃腫。

最后就是模塊中的邊距留白部分，這點(diǎn)一定要重視，不然不僅你的版心會變散，還會嚴(yán)重影響你的頁面呼吸感。

細(xì)節(jié)處理

細(xì)節(jié)上首先要說的就是橫縱坐標(biāo)軸上的文字，上面的文字一定不要過長，最好的方式是將文字進(jìn)行精簡。然后橫、豎排對齊處理，如果實(shí)在不能精簡那么再進(jìn)行斜排的方式。

第二點(diǎn)就是橫縱坐標(biāo)軸有的時候會因?yàn)樾枰故镜臄?shù)據(jù)過多而過于密集影響閱讀，這個時候可以采用適當(dāng)增加一個值域的劃定的方式來進(jìn)行坐標(biāo)間距的縮放。

第三點(diǎn)就是，在排行榜等模塊可以適當(dāng)增加一些小設(shè)計，比如金、銀、銅的設(shè)計，提升情感化元素的融入。

第四點(diǎn)就是，盡量不要選用一些 3D 的酷炫效果來做可視化，因?yàn)檫@種效果很容易對數(shù)據(jù)進(jìn)行遮擋和扭曲，不是非常適用于高效閱讀，也不適合 PC 頁面上的交互，而且也不利于開發(fā)，比較得不償失。

6. 組裝自檢

當(dāng)所有的模塊設(shè)計完成后，像拼高達(dá)一樣進(jìn)行組裝，組裝完成后適當(dāng)調(diào)整其過于干擾視覺的地方，然后進(jìn)行自檢。

自檢不只是從檢查你的視覺、你的模塊間的布局，更重要的是帶入使用角色來進(jìn)行檢查，你可以模仿用戶使用中的各種需求場景，對已經(jīng)制作好的頁面進(jìn)行交互和閱讀，看是否能夠快速高效地完成使用目標(biāo)。

當(dāng)然除了自己之外，你還能在有條件的情況下找專家用戶進(jìn)行使用，即使記錄使用中存在的問題并及時進(jìn)行調(diào)整，當(dāng)初步使用大致無問題后便可以交付。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：優(yōu)設(shè)    作者：肅靜、

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

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

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

表格是B端產(chǎn)品中出現(xiàn)最高頻的模塊之一，我們認(rèn)為良好呈現(xiàn)信息的表格應(yīng)當(dāng)做到疏密適度、高效掃視、精簡克制。

前言

表格作為組織整理數(shù)據(jù)的手段，可以有效的向用戶展示數(shù)據(jù)信息，是B端產(chǎn)品中出現(xiàn)最高頻的模塊之一。

下圖為典型的B端表格示例：

1、定義合理的表格行高

a、行高模數(shù)設(shè)定

在具體設(shè)定表格行高時，由于表格中以文字信息為主，我認(rèn)為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。文字行高可以設(shè)定為字號的1.2~1.8倍，文字與分割線間距離可以設(shè)定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發(fā)同學(xué)寫代碼時的習(xí)慣（多行行高同理去設(shè)定）。

b、橫向『偷取』屏幕外空間、行高模數(shù)設(shè)定

當(dāng)壓縮列寬也無法在有限空間內(nèi)展示大量的數(shù)據(jù)指標(biāo)列時，我們可以借助橫向滾動來『偷取』屏幕外更多空間。橫向滾動需用戶拖動滾動條進(jìn)行瀏覽，有一定操作成本，所以要結(jié)合業(yè)務(wù)實(shí)際情況選用是否利用屏幕外橫向空間。

隨著行和列的增加，用戶的瞬時記憶會達(dá)到極限，超過“7±2原則”的范圍，用戶需要依靠輔助信息去閱讀表格內(nèi)的數(shù)據(jù)，防止遺忘某列數(shù)據(jù)的意義。因而當(dāng)表格數(shù)據(jù)列較多橫向滾動時，建議為用戶固定重要信息列，如標(biāo)題列、操作列。同時用戶瀏覽表格時是符合F型掃視原則的，建議固定列顯示在表格左側(cè)，方便用戶從左至右瀏覽數(shù)據(jù)、從上至下對比數(shù)據(jù)時能夠清晰定位當(dāng)前所瀏覽數(shù)據(jù)的主體是什么，同時可根據(jù)需要快速發(fā)起操作。

同理，用戶拖拽縱向滾動條來閱讀數(shù)據(jù)時，可固定表格的表頭，幫助用戶在閱讀過程中清晰知曉單元格數(shù)據(jù)的意義。

c、用戶自定義展示信息

針對需展示大量數(shù)據(jù)的情景，我們除了【偷取】屏幕外空間外，可以根據(jù)B端產(chǎn)品提供的數(shù)據(jù)表格是覆蓋全部用戶角色的全量數(shù)據(jù)的特點(diǎn)，讓不同用戶角色來自定義想要瀏覽的信息，從而提升表格的可讀性。下圖為百度信息流推廣平臺的自定義列功能，用戶可根據(jù)需要選擇展示的數(shù)據(jù)列，系統(tǒng)將在用戶完成選擇后，主動幫用戶保存自定義內(nèi)容，下次登錄后，表格依然按照用戶定義的數(shù)據(jù)來展示。

2、去除視覺雜音，強(qiáng)調(diào)對比關(guān)系

a、正確使用分割線，實(shí)現(xiàn)對表格行與列的強(qiáng)調(diào)

橫向分割線可強(qiáng)調(diào)行內(nèi)信息的連續(xù)性。垂直分割線在縮減元素之間的距離后也能區(qū)分不同元素，更好的強(qiáng)調(diào)縱向數(shù)據(jù)對比。但只要遵循良好的對齊方式，通常不展示縱向分割線，避免信息干擾。因而表格中通常僅使用橫向分割線和底色分割，提升表格閱讀效率。

b、斑馬線作用有限

斑馬線即隔行（列）變色。它能讓行（列）間界限更為明顯，但由于與分割線的作用類似，起到的作用有限，可針對不同場景酌情考慮是否使用。比如針對不同類型的數(shù)據(jù)（如總和、平均值）使用不同底色來區(qū)分，可以更突出強(qiáng)調(diào)該數(shù)據(jù)。要注意的是，隔行（列）換色的兩種顏色不能反差過大，否則看來太“跳躍”。

對同一類數(shù)據(jù)而言，分割線就已經(jīng)能夠明顯區(qū)隔，所以可不使用斑馬線，但需要給出單行的懸浮狀態(tài)，強(qiáng)化橫向?qū)б?，避免出現(xiàn)列數(shù)過多引起數(shù)據(jù)錯行的問題。

3、突顯重要內(nèi)容的視覺重量

前面我們提到表格呈現(xiàn)的數(shù)據(jù)信息除文本外，還有其它一些可視化數(shù)據(jù)?？梢暬环矫嫣嵘肆斜硪曈X表現(xiàn)力，增加差異化，另一方面讓內(nèi)容更加突出，提升閱讀效率。例如：數(shù)據(jù)列中數(shù)據(jù)異常時，最好可以醒目的形式突顯，讓用戶一進(jìn)入頁面就能快速注意到異常狀況。

對于表格行內(nèi)的操作我們也應(yīng)當(dāng)進(jìn)行優(yōu)先級排序，為用戶專門設(shè)置操作列展示高頻核心的操作，其它相對低頻的次要操作可隱藏在相關(guān)數(shù)據(jù)單元格中，用戶有訴求時hover對應(yīng)單元格即可快速發(fā)起操作。

b、隱藏輔助信息

表格中的有些數(shù)據(jù)指標(biāo)是綜合緯度的，當(dāng)用戶關(guān)注點(diǎn)定位于該指標(biāo)時，需要通過細(xì)分?jǐn)?shù)據(jù)來理解、分析。指標(biāo)的細(xì)分緯度信息雖能起到輔助用戶更好理解數(shù)據(jù)指標(biāo)的作用，但如果全部拿出來在表格列展示，會讓表格變得臃腫不易讀，此時可以考慮采取一定設(shè)計手段去隱藏這些信息，把觸發(fā)展示的自由度交給用戶，也更符合用戶逐級查看的場景。例如，百度搜索推廣平臺中關(guān)鍵詞列表中，質(zhì)量度指標(biāo)是由多條數(shù)據(jù)共同決定的，我們采用了將細(xì)分指標(biāo)聚合在氣泡卡片中，當(dāng)用戶HOVER質(zhì)量度得分?jǐn)?shù)據(jù)時展示出來。

再比如，有父子層級關(guān)系的數(shù)據(jù)，可以通過父子折疊表格將子信息默認(rèn)隱藏，用戶根據(jù)需要，去展開查看詳細(xì)的子信息。

2、設(shè)定折行與截斷規(guī)則

B 端業(yè)務(wù)的數(shù)據(jù)信息復(fù)雜多樣，信息內(nèi)容的長度高度是多樣不可控的，很多內(nèi)容會超出我們限定的最大列寬，最大列高，我們應(yīng)當(dāng)給出折行與截斷原則去約束內(nèi)容的展示，而非總是為具體情況而做特殊設(shè)計，破壞體驗(yàn)的一致性。

截斷折行原則設(shè)定時要細(xì)分，不能簡單粗暴的一刀切，比如一行截斷這種，如日期、時間等固定格式內(nèi)容，拖動列寬后文字應(yīng)折行而非截斷展示，避免影響用戶誤讀。再比如很多業(yè)務(wù)實(shí)體標(biāo)題字段是格式化的，即標(biāo)題前面部分可能都是一致的，這時候如果簡單的截斷，用戶就需要逐一Hover才能找到定位到要找的數(shù)據(jù)。因而折行與截斷原則，我們建議是給出三種：單行截斷、雙行截斷以及自適應(yīng)截斷，根據(jù)具體業(yè)務(wù)情景選擇。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

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

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

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

What 是什么

簡介：「輸入線索」是指用示例輸入或說明文本以占位符（Placeholder）的形式顯示在輸入框中，以幫助用戶理解需要輸入的內(nèi)容，或給出相關(guān)線索的一種設(shè)計方式。

例子：  在 Ant Design 輸入框組件 的示例中（如下圖），我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內(nèi)容或解釋輸入字段的功能。

Why 為什么

「輸入線索」這種設(shè)計模式可以讓界面不言自明。由于輸入線索的內(nèi)容位于用戶輸入的位置，因此用戶往往不會忽略這個信息。

對比：「輸入線索」VS「輸入說明」

「輸入說明」與「輸入線索」都是輔助用戶輸入的設(shè)計模式，這些模式可以幫助用戶明確輸入信息的內(nèi)容形式。

那么這兩種模式有什么差異性呢？

使用「輸入說明」這種模式時，快速瀏覽用戶界面的用戶可能會輕易地忽略說明信息，因?yàn)橛脩舻哪繕?biāo)是盡可能快地完成表單，然后進(jìn)入下一步操作（雖然有的場景下這也是其中一個設(shè)計目標(biāo)，但在這里不討論）。因此，過多的文本說明也會給用戶帶來較大的心智負(fù)擔(dān)。

Google 注冊賬號頁是結(jié)合使用「輸入說明」與「輸入線索」的一個典型案例。通過使用「輸入線索」告訴用戶需要填寫的內(nèi)容，通過「輸入說明」來補(bǔ)充填寫信息的相應(yīng)意圖，進(jìn)而使得用戶可以清晰地意識到需要填寫什么，并輸入相應(yīng)信息。

When 什么時候使用

用戶可能不一定清楚需要在輸入框中輸入的內(nèi)容。在設(shè)計上，你可能不希望在輸入框附近上添加更多的字，造成視覺壓迫。還有一種情況，如果界面空間有限，無法使用「輸入說明」時，也可以考慮使用「輸入線索」。當(dāng)出現(xiàn)下拉菜單或者組合輸入框時，往往需要配合該模式進(jìn)行使用。

使用條件

· 輸入框要求輸入的內(nèi)容可能不容易讓人馬上理解；

· 設(shè)計上不希望在其他地方補(bǔ)充新的內(nèi)容；

· 可以承載文本的輸入空間可能沒有太多；

· 配合下拉菜單或者組合輸入框使用；

How 如何使用

1. 選擇適當(dāng)?shù)奶崾疚谋?

· 對于下拉列表，使用 “選擇”、“選取”等單詞，英文使用 Select Choose 或者 Pick 等；

· 對于文本輸入框，使用“輸入”等單詞，英文使用 Type 或 Enter；

· 盡量使用祈使句，以動詞短語開頭；

· 以描述輸入內(nèi)容的名詞結(jié)尾，例如“選擇狀態(tài)”，“在此處輸入消息”或“輸入患者姓名”等；

2. 提示文本的位置

有關(guān)文本提示的位置應(yīng)該和輸入值的位置一致。 比如，提示本身不應(yīng)該是下拉菜單中的可選值。

Example 案例

案例一：Ant Design Pro 登錄功能預(yù)覽

用戶需求：用戶登錄功能的預(yù)覽與體驗(yàn)

Ant Design Pro 是一個中后臺開發(fā)的模板腳手架，其并不提供真實(shí)賬號登錄服務(wù)。因此 Ant Design Pro 的開發(fā)者為了模擬真實(shí)使用環(huán)境，提供了一個可正常登錄的賬號，賬號密碼分別 user 和 ant.design ，其余情況下用戶輸入的賬號密碼均會提示不正確。

在這個場景下，通過將正確的賬號密碼以輸入線索的方式顯示在占位符中，巧妙地告訴體驗(yàn) Ant Design Pro 的用戶正確的賬號密碼。

案例二：163郵箱登錄頁面

用戶需求：登錄賬號

163郵箱登錄頁面的賬號輸入框中的輸入線索非常有用。正常用戶在看到后綴有 @163.com 時可能并不一定能意識到可以輸入手機(jī)號碼。而通過在占位符中 顯示「郵箱賬號或手機(jī)密碼」，高效便捷地提示了用戶可以直接輸入手機(jī)號碼進(jìn)行登錄。

案例三：小米賬號登錄頁面

用戶需求：輸入賬號密碼

「輸入線索」有一種設(shè)計上的變體，稱為「浮動標(biāo)簽」。因?yàn)橐话銇碚f，當(dāng)用戶激活輸入框時，占位符文本會消失。而「浮動標(biāo)簽」不會消失，通過移動位置和更改大小駐留在界面中。這種設(shè)計方式可以使得界面變得簡潔、優(yōu)雅。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

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

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

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

隨著產(chǎn)品生態(tài)的多端化進(jìn)程，越來越多的跨設(shè)備和不同屏幕尺寸導(dǎo)致的問題也逐漸暴露，例如：

XX 能力要在手機(jī)上使用，不得不單獨(dú)為移動端開發(fā)幾個頁面甚至一個產(chǎn)品（反之亦然）；產(chǎn)品數(shù)據(jù)量很大，Ant Design 默認(rèn)字體 / 間距太大了，不夠緊湊；版式不夠優(yōu)化，造成空間浪費(fèi)；

Ant Design 基于如何在小屏幕中解決信息展示問題這樣的出發(fā)點(diǎn)也在很多組件中提供了響應(yīng)式設(shè)計，但擁有更加完備的環(huán)境適應(yīng)性應(yīng)該是一個設(shè)計體系長期的目標(biāo)之一，因此在全局性地考慮跨端、跨多屏幕尺寸、信息密度等響應(yīng)式設(shè)計方面還值得我們繼續(xù)深入研究。

本篇文章橫向調(diào)研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企業(yè)級產(chǎn)品設(shè)計體系的響應(yīng)式設(shè)計部分，從設(shè)計策略、設(shè)計模式、實(shí)施模式、設(shè)計方案四個層面大致歸納了一些信息，旨在對響應(yīng)式設(shè)計有一個籠統(tǒng)的了解。

關(guān)于 Adaptive Design 與 Responsive Design先厘清兩個概念，關(guān)于響應(yīng)式設(shè)計通常會有兩個普遍認(rèn)識，即 Aaron Gustafson 與 Ethan Marcotte 分別在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 與 Responsive Web Design (RWD) 概念，它們的核心區(qū)別在于 AWD 針對不同的設(shè)備或屏幕尺寸定制化設(shè)計多個固定布局的尺寸，而 RWD 是同一套代碼做彈性的適應(yīng)，本質(zhì)上它們都在解決產(chǎn)品設(shè)計如何適應(yīng)于不同設(shè)備以及不同屏幕規(guī)格的問題，本篇所指的「響應(yīng)式設(shè)計」 概念包含了兩者，不做明顯區(qū)分，關(guān)于 Adaptive 與 Responsive 設(shè)計怎么界定以及具體的規(guī)則本篇也不進(jìn)行展開。

移動優(yōu)先設(shè)計策略

提響應(yīng)式設(shè)計不得不提「移動優(yōu)先」設(shè)計策略，移動優(yōu)先的概念最早是 Google 在 2010 年世界移動大會上提出來的一種產(chǎn)品策略，基于 Google 對未來趨勢中移動設(shè)備將會逐漸擁有核心地位的判斷。后來「移動優(yōu)先」更多被提及是作為一種在響應(yīng)式設(shè)計中應(yīng)用的設(shè)計策略，它認(rèn)為在響應(yīng)式設(shè)計中優(yōu)先為屏幕限制更大的移動設(shè)備設(shè)計，再擴(kuò)展到大屏幕的 PC 端是一種更有效的設(shè)計方法。

例如 Alta、Lightning、Fiori 均在設(shè)計體系中明確采用「移動優(yōu)先」的設(shè)計方法，F(xiàn)iori 尤其指出「移動優(yōu)先」專注核心功能，專注增強(qiáng)而非降級，提前考慮移動端更多的獨(dú)特特性以及異常情況，能提供更好的體驗(yàn)。Material Design 可能算是移動優(yōu)先的最佳實(shí)踐，它本身就誕生于 Android 平臺，而后再通過大量響應(yīng)式規(guī)則擴(kuò)展到桌面及 Web 端，使得 Material 在多端都擁有一致貫穿的良好體驗(yàn)。

「移動優(yōu)先」本質(zhì)上是基于一種「增強(qiáng)」的設(shè)計思想，一個產(chǎn)品如果要同時適應(yīng)于不同的設(shè)備，一直以來有兩種策略：優(yōu)雅降級 vs. 漸進(jìn)增強(qiáng)，后者認(rèn)為先從最小和最受限制的低級設(shè)備（移動設(shè)備）入手，再為更高級的設(shè)備（桌面設(shè)備）增強(qiáng)信息和交互，這意味著在更多限制下，迫使設(shè)計考慮如何減少、匯總，分組信息，有利于聚焦核心信息以及為更多限制考慮。

然而移動設(shè)備已不再是「低級設(shè)備」，F(xiàn)iori 盡管強(qiáng)調(diào)「專注增強(qiáng)而非降級」，但它同時提出的「提前考慮移動端更多的獨(dú)特特性」卻與漸進(jìn)增強(qiáng)的設(shè)計思想相悖，讓「移動優(yōu)先」淪為了某種形式化的概念而難以執(zhí)行。

例如下面這個報告界面的場景里，移動端僅展示匯總的報告圖表信息，但匯總圖表并沒有「擴(kuò)展」到 Tablet 里而是用明細(xì)數(shù)據(jù)替換圖表，而在桌面端同時包含了明細(xì)數(shù)據(jù)與圖表兩部分信息，這看上去并不像是一個「增強(qiáng)」的設(shè)計思路，更像是在全量需求下基于設(shè)備限制所采用的「降級」策略。

因此「移動優(yōu)先」并不一定是形式上優(yōu)先設(shè)計移動端，它被廣泛接受和應(yīng)用的是背后的漸進(jìn)增強(qiáng)的核心思想。我認(rèn)為在移動設(shè)備高度發(fā)展的當(dāng)下，「移動優(yōu)先」不再適合作為單獨(dú)概念提出來，而漸進(jìn)增強(qiáng)的設(shè)計思想應(yīng)該體現(xiàn)在更細(xì)分的場景中，例如在布局、信息排版以及交互反饋中，我們應(yīng)該優(yōu)先考慮限制更大的移動端；在一些交互方式上，優(yōu)先考慮限制更大的鼠標(biāo)操作。甚至在復(fù)雜業(yè)務(wù)場景里，優(yōu)先滿足核心業(yè)務(wù)流程順暢也屬于漸進(jìn)增強(qiáng)的策略范疇。

設(shè)計模式

這里講的設(shè)計模式是指設(shè)計師在具體業(yè)務(wù)中針對不同的情況可以采用的通用性設(shè)計方案，這些設(shè)計模式除了單獨(dú)應(yīng)用外，有時候也可以多種模式結(jié)合應(yīng)用。Fluent 歸納了 6 種對應(yīng)不同情況的響應(yīng)式設(shè)計模式，非常全面地涵蓋了其它設(shè)計體系中的絕大部分方案，分別是：調(diào)整大小、重新定位、重新排列、顯示/隱藏、替換、重新構(gòu)建。

Resize – 調(diào)整大小

調(diào)整大小是最基礎(chǔ)的設(shè)計模式，是一個容器默認(rèn)的響應(yīng)式模式，通常有等比縮放、固定高度、或是在不同尺寸下按不同比例規(guī)格縮放三種形式，即便在無響應(yīng)式設(shè)計的體系里，容器跟隨屏幕尺寸而變化也是一個常見的應(yīng)用方式。

Reposition – 重新定位

改變 UI 元素的相對位置，以充分利用不同尺寸的空間。重新定位在響應(yīng)式應(yīng)用里多見在框架上，或是在組件里對一些特定元素的處理，例如 Material 的全局浮動按鈕與浮動的下拉菜單以 Reposition 的形式分別在桌面端與移動端處于不同的位置。

Reflow – 重新排列

改變 UI 元素的排列方式，這在內(nèi)容彈性布局里較常見，通常是基于某種排列規(guī)則自動向下折行，并結(jié)合調(diào)整大小與柵格系統(tǒng)應(yīng)用在響應(yīng)式布局方面，例如 Carbon 的 Fluid Grid。

（Reflow）

Show / Hide – 顯示 / 隱藏

基于屏幕空間、設(shè)備不同特性、特定情況等顯示或隱藏 UI 元素，例如大多數(shù)設(shè)計體系的框架設(shè)計應(yīng)用在小屏幕上會隱藏側(cè)邊菜單。Material 在組件響應(yīng)式行為里提到的 Expand 也屬于 Show / Hide 的延伸。

（Show / Hide）

Replace – 替換

針對不同尺寸的屏幕采用不同形態(tài)的組件，通常應(yīng)用在對具體的組件做針對性響應(yīng)式設(shè)計中，但需要注意用戶面對變化時的認(rèn)知成本。

（Replace）

Re-architect – 重新構(gòu)建

折疊或拆分信息架構(gòu)，這種模式在 Web 端較難實(shí)現(xiàn)，通常出現(xiàn)在一些 Native App 的場景。

（Re-architect）

Density – 內(nèi)容密度

除了上述 6 種模式以外，我把內(nèi)容密度也歸納為一種設(shè)計模式，F(xiàn)iori、Material Design、 以及 Atlassian 都提出了內(nèi)容密度的概念。Fiori 基于移動優(yōu)先在移動端采用默認(rèn)密度，而針對大屏幕的 Web 端則提供緊湊密度的方案，他們認(rèn)為移動端手指交互所需的空間要求更高；Material 則是針對很多組件都定制了 Default、Comfortable、Compact 三種密度的視覺表現(xiàn)。通過被動響應(yīng)式或主動控制內(nèi)容密度很好的解決了不同尺寸屏幕的信息獲取效率問題。

（Material Design 的內(nèi)容密度示例）

值得一提的是 Atlassian 通過柵格系統(tǒng)的間距來控制密度而非對內(nèi)容密度本身進(jìn)行設(shè)計，越緊湊的布局柵格間距越小，這看上去很合理，卻很容易造成內(nèi)容密度增加的同時整體信息獲取效率反而降低的問題。Material 也有關(guān)于柵格空間的定義，但在內(nèi)容密度的處理上和 Atlassian 恰恰相反，它認(rèn)為高密度內(nèi)容適用更寬松的柵格空間，相對是一個更合理的設(shè)計。在信息密度的問題上，我們的核心目的其實(shí)是提升信息效率而非單純提高視覺密度，因此解法上需要更完善的考慮。

實(shí)施模式

實(shí)施模式是指設(shè)計體系為實(shí)現(xiàn)具體設(shè)計方案而定義的一系列基礎(chǔ)規(guī)則、解決方案或技術(shù)手段，經(jīng)過整理總結(jié)為相對尺寸單位、屏幕斷點(diǎn)、彈性布局、柵格系統(tǒng) 4 個方面。

Rem – 相對尺寸單位

幾乎所有應(yīng)用于 Web 的設(shè)計體系的技術(shù)方案中都采用 rem 相對單位，Material、Fiori、Carbon 和 Lightning 均沿用了瀏覽器默認(rèn)的 root 尺寸，即 1rem = 16px，Alta 默認(rèn)采用是 14px 的規(guī)格，并允許基于不同應(yīng)用選擇 12px 或 16px 的規(guī)格，默認(rèn)情況 Alta 采用更小規(guī)格的單位會在小屏幕電腦上有更好的表現(xiàn)，這也許和他們的產(chǎn)品特性相關(guān)。

相對尺寸單位是非常具有實(shí)施價值的，它使產(chǎn)品能在保持信息節(jié)奏的情況下根據(jù)不同的情況等比例縮放內(nèi)容，這使得設(shè)計能更方便地調(diào)整內(nèi)容密度，或許還可以配合 Media Queries 解決部分跨端的尺寸適配問題，且?guī)缀鯖]有前端成本。

國內(nèi)的前端業(yè)界包括我們自己的前端同學(xué)更多將 Rem 運(yùn)用在移動端，主要為了兩個目的：方便計算尺寸、在不同寬度的設(shè)備上等比縮放內(nèi)容，這樣的用法是出于前端工程師解決屏幕兼容性的一種技術(shù)手段，在使用上本身也存在一定爭議，而在響應(yīng)式設(shè)計領(lǐng)域我們還沒有發(fā)揮出 Rem 應(yīng)該發(fā)揮的作用，甚至很多設(shè)計師還并不了解相對尺寸單位的使用方法，廣泛應(yīng)用 Rem 能為我們帶來哪些實(shí)際價值是接下來需要繼續(xù)研究的。

Breakpoints – 屏幕斷點(diǎn)

屏幕斷點(diǎn)是響應(yīng)式設(shè)計的基礎(chǔ)依據(jù)，它決定了我們要適配到什么樣的設(shè)備或屏幕規(guī)格，并通過 Media Queries 這樣的技術(shù)實(shí)現(xiàn)不同 Breakpoint 條件下的不同 UI 表現(xiàn)。一般情況 Breakpoints 都是基于 Phone、Tablet、Desktop 的維度來設(shè)計的，包括考慮了移動設(shè)備的橫評豎屏情況，關(guān)于詳細(xì)的規(guī)格設(shè)置其實(shí)并沒有太大參考價值，設(shè)計體系都是根據(jù)自身定位以及設(shè)備覆蓋的情況來制訂的，例如 Material 的斷點(diǎn)在低分辨率范圍分得非常細(xì)，是因?yàn)?Material 主要服務(wù)的 Android 平臺有著數(shù)量繁多的設(shè)備分辨率。在滿足自己需求的前提下，屏幕端點(diǎn)不需要太多，無論怎樣基于數(shù)據(jù)驅(qū)動的屏幕斷點(diǎn)設(shè)置將會是一個更科學(xué)的方法。

（屏幕斷點(diǎn)分布）

Fiori 的斷點(diǎn)設(shè)計比較有意思，在設(shè)計文檔中僅有基本的布局規(guī)則，沒有明確的 Breakpoints 規(guī)則，F(xiàn)iori 對于不同的組件會設(shè)計不同的 Breakpoints，例如在 Table 這個組件中定義了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的規(guī)格，而在 Form 的組件中，Breakpoints 變成了 0 < 600 < 1024 < 1440 < ∞，從這點(diǎn)上看出 Fiori 認(rèn)為不同的組件有不同的表達(dá)模式，因此應(yīng)該針對性對組件進(jìn)行優(yōu)化。

（Fiori 的 Table 組件適配情況）

Flex Layout – 彈性布局

Flex 布局是 CSS3 提供的強(qiáng)大布局能力，從更自然更具語義化的角度實(shí)現(xiàn)界面元素的自適應(yīng)。應(yīng)用于 Web 的設(shè)計體系基本上都在組件代碼里廣泛采用了 Flex 布局，Lightning 還將柵格與 Flex 布局結(jié)合定義了自己更完善的布局方法。在響應(yīng)式設(shè)計中，F(xiàn)lex 布局通常結(jié)合 Breakpoints 使用，在兩個 Breakpoints 之間讓界面做更平滑的過度。除此之外其它平臺也都有類似的彈性布局能力，例如 Fluent 在 windows 采用 XAML 構(gòu)建布局系統(tǒng)。

無論是 Flex 還是最近興起的 Grid 布局都是 CSS3 的基本布局能力，響應(yīng)式設(shè)計要解決布局的問題將會深度依賴這些基礎(chǔ)技術(shù)手段，本篇不進(jìn)一步展開。

Grid System – 柵格系統(tǒng)

柵格系統(tǒng)是所有設(shè)計體系必備的，我們通常將頁面橫向分為 N 列，定義每一列的尺寸與間距，這為界面布局提供了一致性和成本便利。傳統(tǒng)的柵格系統(tǒng)在響應(yīng)式方面的應(yīng)用主要是結(jié)合 Breakpoints 與一些 Responsive Token 來實(shí)現(xiàn)的，通過給 UI 元素指定不同的柵格數(shù)來決定他們分別在不同屏幕下占多少列，同時一些設(shè)計體系還提供了可見性相關(guān)的 token，來控制界面元素在不同屏幕的顯示與隱藏。

Fluent、Fiori、Lightning、Material 以及大多數(shù)設(shè)計體系都采用了 12 柵格系統(tǒng)，因?yàn)?12 的因數(shù)夠多，能滿足足夠多的布局細(xì)分同時又不至于太復(fù)雜，Carbon 的做法更加 geek 一些，他們的「2x grid」采用了 16 柵格系統(tǒng)，布局粒度更細(xì)但放棄了 3，6 這樣的因數(shù)。 Ant Design 為了滿足復(fù)雜的業(yè)務(wù)情況，采用了 24 柵格系統(tǒng)，24 柵格提供了更高的靈活性的同時，也大大增加了復(fù)雜度，面臨柵格系統(tǒng)的響應(yīng)式設(shè)計 24 柵格是否適用還有待商榷。

另外 Material、Carbon 還明確提出了「Fluid Grid – 流體柵格」的概念，核心思想是在較小的屏幕上降低柵格數(shù)量，將多余的柵格自動折行彈性布局。

（Carbon 的柵格定義）

在屏幕尺寸變化時，柵格主要有兩種響應(yīng)模式：Fluid、Fixed

（Fluid）

這種將柵格系統(tǒng)與彈性布局相結(jié)合的方式基于一些簡單的規(guī)則設(shè)置，在不需要特定響應(yīng)式的場景中不再需要指定繁瑣的 token，且能滿足大部分高頻且通用的情況，在一定程度上降低了成本。

組件應(yīng)用

除了通用的響應(yīng)式規(guī)則以外，設(shè)計體系在具體組件中的響應(yīng)式方案還有許多值得挖掘，能為我們的組件設(shè)計提供參考價值，本篇不再一一展開，僅提兩個典型的應(yīng)用情況：

框架

框架算是一個特殊的組件，在不同的設(shè)備中界面框架的適用有非常大的差異，幾乎提到響應(yīng)式的所有設(shè)計體系都給出了框架響應(yīng)式方案，例如 Alta 將界面框架分為四塊，以 Off-Canvas 和 Reposition 兩種方式在不同尺寸的屏幕中顯示或隱藏以及通過特定的方式展開或呼出。

通常情況下設(shè)計體系的框架組成按形式可以分為：

• Header – 通常情況下常駐

• Sidenav – 分為左側(cè)右側(cè)兩種情況，一般用于放置導(dǎo)航，在不同設(shè)備會有展開，收縮，隱藏三種狀態(tài)

• Content – 內(nèi)容區(qū)，通常由 Grid 控制布局

• Footer – 如有，固定在頁面底部

• Float – 浮動框架，用于臨時狀態(tài)，通知或彈窗等

設(shè)計體系通過對框架的定義，以及控制不同部分基于什么樣的模式響應(yīng)屏幕尺寸來實(shí)施對框架的響應(yīng)式設(shè)計。

組件

Fluent 或 Material 在設(shè)計文檔中更多基于基礎(chǔ)的網(wǎng)格，布局，設(shè)計模式來闡述通用性的響應(yīng)式規(guī)則，因此他們的響應(yīng)式設(shè)計有非常好的延續(xù)性，組件的響應(yīng)式方案基本上都遵循這些規(guī)則。

而 Fiori 以及 Lightning 在通用性響應(yīng)式設(shè)計模式上的定義上沒有那么全面，他們側(cè)重于在組件層面對所有組件都考慮了針對性的 Responsive 或 Adaptive 的方案。例如 Fiori 在響應(yīng)式表格的組件里，在桌面端與移動端分別是 table 和 list 的模式，這個方案并不是通過全局抽象規(guī)則得出來的，而是基于對組件的針對性設(shè)計，正如他們?yōu)椴煌慕M件設(shè)計了不同的 Breakpoints，這種針對性也適用于特定的 UI 解決方案。

（Fiori 針對 Table 的響應(yīng)式設(shè)計）

在一定程度上抽象規(guī)則的同時，如果我們能夠?yàn)槊恳粋€組件都考慮到不同場景的響應(yīng)式，當(dāng)然就會提供更精細(xì)化的體驗(yàn)。在一個完備的設(shè)計體系里，在設(shè)計每一個組件資產(chǎn)時都以漸進(jìn)增強(qiáng)的設(shè)計策略，考慮到不同的設(shè)備及屏幕適配是非常有必要的。

響應(yīng)式設(shè)計的世界煙波浩渺，書不盡言，言不盡意。Ant Design 目前計劃從布局基礎(chǔ)規(guī)則以及內(nèi)容密度的解決方案切入，逐步完善響應(yīng)式設(shè)計的體系，這是一個重要且漫長的過程，至于文中挖下的坑還需要深入研究逐一補(bǔ)充，本篇初探先到這里，歡迎大家留言指出問題也很希望大家能留下想法共同探討。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

在B端產(chǎn)品設(shè)計中，有效的設(shè)計規(guī)范有利于降低團(tuán)隊(duì)溝通成本，提高開發(fā)效率，并在一定程度上保證產(chǎn)品應(yīng)用的一致性，最終推動產(chǎn)品設(shè)計的優(yōu)化。本篇文章里，作者總結(jié)了從0開始搭建B端設(shè)計規(guī)范的注意事項(xiàng)與策略方法，一起來看一下。

前言

哈哈哈哈，最近事情太多了，已經(jīng)快三個月沒更新了，現(xiàn)在也忙的差不多了，咱們更新繼續(xù)~~

今天給大家分享的是關(guān)于如何從零開始搭建 B 端設(shè)計規(guī)范。

時間轉(zhuǎn)眼即逝，掐指一算，我接觸 B 端已有 4 年之久了，當(dāng)年剛接觸的時候，B 端的從業(yè)人員比例還是很少的。近兩年 B 端越來越火熱，無論從設(shè)計風(fēng)格還是產(chǎn)品數(shù)量上，都有了很大的提升。

隨著 B 端的產(chǎn)品越來越完善，要求設(shè)計師的專業(yè)性也要越來越強(qiáng)。設(shè)計規(guī)范作為基礎(chǔ)中的基礎(chǔ)，是大家都要熟練掌握的技能，我們不僅要會運(yùn)用各種規(guī)范，還要會撰寫適合產(chǎn)品的規(guī)范。

分享開始，敲黑板~~

一、設(shè)計規(guī)范的目標(biāo)

在搭建設(shè)計系統(tǒng)之前，我們要想清楚設(shè)計規(guī)范的目標(biāo)是什么？使用者是誰？

• 目標(biāo)：保持產(chǎn)品風(fēng)格統(tǒng)一性、提高設(shè)計輸出效率、減少無效溝通。
• 使用人群：UI、交互、前端、測試。

二、設(shè)計原則

設(shè)計規(guī)范要符合基本的設(shè)計原則，否則你的規(guī)范會雜亂無章。這里我總結(jié)了 6 條原則供大家參考。

1. Unity（統(tǒng)一性）：頁面風(fēng)格、色彩、布局等要保持全局統(tǒng)一，不可為了某一功能的美觀而去破壞整體性。
2. Accessibility（易用性）：易用是首要考慮的因素，能一步解決的事情絕不兩步。
3. Proximity（親密性）：如果信息的關(guān)聯(lián)性強(qiáng)，則他們的距離就要相應(yīng)的縮短，讓他們看起來是一個視覺單元；反之，則距離要加大。要讓用戶對信息的區(qū)域劃分一目了然。
4. Alignment（對齊原則）：在界面中，將元素進(jìn)行對齊，即符合用戶的認(rèn)知，也可以引導(dǎo)視覺流向，讓用戶更加流暢地閱讀信息。
5. Contrast（對比原則）：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。
6. Repetition（重復(fù)原則）：相同的元素在整個界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

三、框架布局

這里一般采用柵格布局。說到柵格，有好多小伙伴又要再回顧一下知識點(diǎn)了。我今天再把柵格知識幫大家復(fù)習(xí)一遍，如果之前不是很了解柵格的，拿個小本本記下來，要考~~

柵格布局能夠適應(yīng)各種屏幕尺寸及分辨率，確保整體布局的一致性。

柵格建議使用 1、2、3、4、6 切分布局，可以進(jìn)行多種布局組合，并在整個設(shè)計中保持布局的結(jié)構(gòu)的一致性。

頁面中一般采用 24 列自適應(yīng)網(wǎng)格，你可以使用它為各種屏幕尺寸創(chuàng)建靈活的布局。

邊距 Margins、列 Columns、間隔 Gutters 分別是什么？

邊距 Margins：邊距是內(nèi)容與左右邊緣之間的空間。

控制臺內(nèi)容區(qū)的邊距選用 8 的倍數(shù)為設(shè)定值，一般采用 16/24px 的居多。

需要注意的是：

• 減去 margin 后，列在頁面區(qū)域均分，保證每列的寬度是一致的；
• 在區(qū)域有 margin 的情況下，劃分列的區(qū)域不能包含 margin。

列 Columns：在電腦端列的數(shù)量是個常量（24列），每一列寬度的尺寸隨屏幕大小進(jìn)行自適應(yīng)調(diào)整。

間隔 Gutters：間隔是列與列之間的空隙，控制臺產(chǎn)品 gutter 使用固定值也要是 8 的倍數(shù)，一般采用 16/24px。

需要注意的是：

• 布局的左右兩邊的分界線 gutter 可以為 0；
• 必須保證 column 的寬度是一致的。

邊距 Padding：padding 指一個元素的內(nèi)容和其邊界之間的空間，padding 最小值是 4px，然后其余均為 8px 的倍數(shù)，建議值為 8/16/24px。

內(nèi)容區(qū)定寬：此場景常用于用戶歡迎頁、結(jié)果頁等需要將內(nèi)容區(qū)寬度設(shè)置為固定值的頁面。此時 column 和 gutter 保持不變，根據(jù)頁面寬度改變 margin 的值。

四、設(shè)計風(fēng)格

1. Color（顏色）

色彩內(nèi)容主要包含基礎(chǔ)色（如品牌色、黑色、白色）和功能色（如鏈接色、提醒色等）。圖表配色為單獨(dú)的配色體系。

在前期制定顏色規(guī)范的時候，精益求精的設(shè)定顏色，切忌顏色過多。

顏色的狀態(tài)色盡量用原色進(jìn)行轉(zhuǎn)換，設(shè)置一個合理的變色公式，讓所有顏色的狀態(tài)色都根據(jù)這個公式進(jìn)行轉(zhuǎn)換。例：

• Hover：H不變 S加10 B減5；
• Click：H不變 S加20 B減10；
• Disable：HSB均不變，不透明度 30%。

在設(shè)計規(guī)范中，盡量把顏色的色值和 rgba 值都寫出來（這里是強(qiáng)迫癥患者要標(biāo)的，因?yàn)橛袝r候色值完全一樣，但 rgba 數(shù)值略有不同，雖然效果一樣，但是對于強(qiáng)迫癥的你來說，舒服嗎）。

狀態(tài)色有 4 狀態(tài)色：Normal、Hover、Click、Disable。

在設(shè)定圖表顏色的時候，要考慮不同的使用樣式（柱狀圖、環(huán)形圖、餅圖等……），同時也要考慮它的延展性，比如你設(shè)定 12 個 chart 色值，在使用的時候按著順序來使用，當(dāng)超過 12 個后可以為同一個顏色。

2. Font（文字）

設(shè)定統(tǒng)一的字體規(guī)范，使用非襯線字體在各個操作系統(tǒng)下都有最佳展示效果。

首先，要設(shè)置一個字體家族，保證產(chǎn)品界面的最優(yōu)展示。

例如（僅作為展示，不是建議）：font-family： “Chinese Quote”， -apple-system，BlinkMacSystemFont，“Segoe UI”，“PingFang SC”，“Hiragino Sans GB”，“Microsoft YaHei”，“Helvetica Neue”，Helvetica，Arial，sans-serif，“Apple Color Emoji”，“Segoe UI Emoji”，“Segoe UI Symbol”。

1）字號

現(xiàn)在主流的產(chǎn)品中，主體字為 12px / 14px 的居多，可根據(jù)自身的產(chǎn)品定位以及用戶的習(xí)慣進(jìn)行設(shè)定。字號不要出現(xiàn)奇數(shù)，否則在一些顯示器上會有對不齊像素的狀況發(fā)生。

2）行高

行高常規(guī)的有兩種規(guī)范：

• 字號+8px；
• 1.5倍 / 2倍 * 字號。

我喜歡用第一種，就是字號大小 + 8px 作為行高的規(guī)范。行高是不可被忽略的重要細(xì)節(jié)之一，因?yàn)樵谒汩g距的時候，行高是要被算進(jìn)去的。

3）字重

字重有很多，但是在真正的產(chǎn)品使用中，字重盡量不要太多種，2~3 種即可。

4）字體顏色

字體顏色數(shù)量建議在 3~4 個，不宜過多，但是每個層級之間區(qū)分要大一些。

文本應(yīng)該保持至少 4.5：1 （基于亮度值計算）的對比度以保持文本清晰；最佳對比度為 7：1。

測試對比度的網(wǎng)站：https://contrast-ratio.com

WCAG 2.0 中將顏色對比等級分為 3 種，A級、AA級、AAA級，等級越高意味著顏色的對比度越高，呈現(xiàn)出來的視覺壓力越大。

• A級：對比度 3：1，是普通觀察者可接受的最低對比；
• AA級：對比度 4.5：1，是普通視力損失的人可接受的最低對比度；
• AAA級：對比度 7：1，是嚴(yán)重視力損失的人可接受的最低對比度。

3. icon（圖標(biāo)）

設(shè)定統(tǒng)一的圖標(biāo)使用規(guī)范，讓視覺效果更和諧。

1）icon 大小

icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相鄰的兩個尺寸至少相差 4px，否則你會在后期用的時候會有選擇困難癥。

同時功能 icon 盡量貼邊或盡量貼邊繪制，保證展現(xiàn)的視覺統(tǒng)一性（操作 icon 除外）。

單獨(dú) icon 使用的時候，盡量不要太小，最小值建議為 12px。

2）icon 熱區(qū)

icon 的熱區(qū)經(jīng)常被設(shè)計師和開發(fā)所忽略，本身 icon 的尺寸一般就很小，再加上如果沒有設(shè)置熱區(qū)的話，操作體驗(yàn)極差。

所以一定一定要設(shè)置 icon 的熱區(qū)，設(shè)置的值我建議為 icon 大小的 2倍。例：icon 大小為 14 * 14px，則熱區(qū)大小為 28 * 28px。

4. size（尺寸）

頁面內(nèi)布局間、模塊間、模塊內(nèi)的各部件距離。

尺寸大部分規(guī)范中都用的是 8 的倍數(shù)，不用糾結(jié)，直接用就行。我這里有個公式：Sn = 8px * n，n為正整數(shù)。

特殊：最小支持4px。

五、交互

交互我分為兩個方面：交互方式和交互狀態(tài)。

1. 交互方式

交互方式指的是對某一個操作所進(jìn)行的具體行為，比如刷新方式有下拉、上滑、按壓點(diǎn)擊等方式，這就是所謂的交互方式。交互方式有很多種，沒有最優(yōu)，只有最適合。

交互方式要保持產(chǎn)品的統(tǒng)一性，同類別的交互不可有不同的操作感受。同時交互方式要符合大眾的認(rèn)知習(xí)慣，可創(chuàng)新但不可違背潛意識。

隨著時代的發(fā)展，交互方式也在不斷的更新。比如最開始的手機(jī)是按鍵式的，隨著大眾對屏幕大小的需求不斷提升，到了現(xiàn)在的全面屏手機(jī)，如果這個時候你再去做當(dāng)年火爆的按鍵手機(jī)，那你就只能跟市場說拜拜。

總結(jié)交互方式的幾個關(guān)鍵點(diǎn)：創(chuàng)新、統(tǒng)一、緊跟趨勢。

2. 交互狀態(tài)

一個完整的產(chǎn)品生態(tài)是不會遺漏每一個交互狀態(tài)的。

同樣是做售票的軟件，為什么高鐵管家就比 12306 做的好呢？是因?yàn)楦哞F管家把很多交互狀態(tài)友好地做了展現(xiàn)反饋，而不是冰冷的數(shù)據(jù)吞吐。

同類產(chǎn)品中，每個都有自己獨(dú)特的交互狀態(tài)，可能你一直用某個軟件的原因只是有個功能的交互狀態(tài)打動了你，從此你就深深愛上了它。

現(xiàn)在工作中，我們都在講人效，拼命地去更新迭代，去研發(fā)新功能，開拓新產(chǎn)品，往往會忽略交互狀態(tài)這個點(diǎn)，因?yàn)楹芏鄷r候付出收獲比是很低的，但是真正好的產(chǎn)品，這部分是不可或缺的。

交互真的太大了，單獨(dú)寫一篇文章都寫不完，這篇我只能拋磚引玉，勾起你的思維，如果有任何要探討的，歡迎來叨擾。

六、引導(dǎo)

引導(dǎo)分為 5 種：Newbie guide（新手引導(dǎo)）、Steps guide（步驟引導(dǎo)）、Help / Operation guide（幫助/操作引導(dǎo)）、New function guide（新功能引導(dǎo)）、Blank guide（空白頁引導(dǎo)）。

1. Newbie guide（新手引導(dǎo)）

新手引導(dǎo)是針對新用戶的，首次進(jìn)入產(chǎn)品的時候，我們要著重地把自己產(chǎn)品的亮點(diǎn)以及操作快速的介紹給新用戶，讓他用最短的時候上手我們的產(chǎn)品。

新手引導(dǎo)要言簡意賅，并且如果非必要的話，盡量給用戶一個可以直接關(guān)閉的按鈕，讓用戶有選擇權(quán)。我就非常討厭有一些產(chǎn)品的新手引導(dǎo)，必須走完全部流程后才能關(guān)閉，惡心得不行。

2. Steps guide（步驟引導(dǎo)）

步驟引導(dǎo)一般用在有固定操作步驟的場景下，指引用戶一步一步地完成想要的結(jié)果。常規(guī)的步驟引導(dǎo)建議在 3~5 步之間為合理。

3. Help/Operation guide（幫助/操作引導(dǎo)）

幫助/操作引導(dǎo)的展現(xiàn)方式是比較豐富多彩的，可以是提示語、輔助性文本、tooltips 等等，它的作用就是輔助用戶去了解并且知道如何操作這個功能。

這個也是在產(chǎn)品中使用頻率最高的，運(yùn)用好它，可以讓你的產(chǎn)品事半功倍。

4. New function guide（新功能引導(dǎo)）

它就是常用在新功能上線后，用戶第一次登陸相關(guān)頁面后做的一些引導(dǎo)，目的是為了告訴用戶我們做了新東西，你快來試試吧。

5. Blank guide（空白頁引導(dǎo)）

空白頁引導(dǎo)一般用在在缺省頁，對用戶進(jìn)行一些操作指引，讓無信息的頁面變得更有價值。

比如百度在一些缺省頁上就放了一些關(guān)于失蹤兒童的信息，就因?yàn)樽隽诉@個引導(dǎo)，幫助了千萬個家庭找到了失散的孩子。

七、組件

組件是設(shè)計系統(tǒng)里面最為龐大的東西。組件可以分為了 5 類：

1. Navigation（導(dǎo)航）；
2. Data Entry（數(shù)據(jù)錄入）；
3. Data Display（數(shù)據(jù)顯示）；
4. Feedback（反饋）；
5. Other（其它）。

基本上這幾類已經(jīng)覆蓋了多數(shù)的組件，下面我把我自己整理的這幾類分別都包含哪些組件、以及組件的簡單介紹給列出來，快來保存吧。

1. Navigation（導(dǎo)航）

• Affix（固釘）：將頁面元素釘在可視范圍。
• Breadcrumb（面包屑）：顯示當(dāng)前頁面在系統(tǒng)層級結(jié)構(gòu)中的位置，并能向上返回。
• Menu（導(dǎo)航菜單）：為頁面和功能提供導(dǎo)航的菜單列表。
• Pagination（分頁）：采用分頁的形式分隔長列表，每次只加載一個頁面。
• Steps（步驟條）：引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條。

2. Data Entry（數(shù)據(jù)錄入）

• Checkbox（多選框）：可選擇多個。
• Radio（單選框）：只可選擇一個。
• Switch（開關(guān)）：開關(guān)選擇器。
• Form（表單）：具有數(shù)據(jù)收集、校驗(yàn)和提交功能的表單，包含復(fù)選框、單選框、輸入框、下拉選擇框等元素。
• Input（輸入框）：通過鼠標(biāo)或鍵盤輸入內(nèi)容，是最基礎(chǔ)的表單域的包裝。
• Select（選擇器）：下拉選擇器。
• Skeleton（加載占位圖）：在需要等待加載內(nèi)容的位置提供一個占位圖。
• Time selectors and sliders（日期時間選擇過濾器）：當(dāng)用戶需要輸入一個時間或日期，可以點(diǎn)擊標(biāo)準(zhǔn)輸入框，彈出時間面板進(jìn)行選擇。
• Transfer（穿梭框）：雙欄穿梭選擇框。
• Upload（上傳）：文件選擇上傳和拖拽上傳控件。

3. Data Display（數(shù)據(jù)顯示）

• Badge（微標(biāo)）：圖標(biāo)右上角的圓形徽標(biāo)數(shù)字。
• Card（卡片）：通用卡片容器。
• Collapse（折疊面板）：可以折疊/展開的內(nèi)容區(qū)域。
• Popover（氣泡卡片）：點(diǎn)擊/鼠標(biāo)移入元素，彈出氣泡式的卡片浮層（可操作）。
• Tabs（標(biāo)簽頁）：選項(xiàng)卡切換組件。
• Table（表格）：展示行列數(shù)據(jù)。
• Tag（標(biāo)簽）：進(jìn)行標(biāo)記和分類的小標(biāo)簽。
• Timeline（時間軸）：垂直展示的時間流信息。
• Tooltip（文字提示）：簡單的文字提示氣泡框。
• Tree（樹形控件）：文件夾、組織架構(gòu)、生物分類、國家地區(qū)等等，世間萬物的大多數(shù)結(jié)構(gòu)都是樹形結(jié)構(gòu)。使用樹控件可以完整展現(xiàn)其中的層級關(guān)系，并具有展開收起選擇等交互功能。

4. Feedback（反饋）

• Alert（警告提示）：警告提示，展現(xiàn)需要關(guān)注的信息。
• Notification（通知提示框）：全局展示通知提醒信息。
• Drawer（抽屜）：抽屜從父窗體邊緣滑入，覆蓋住部分父窗體內(nèi)容。用戶在抽屜內(nèi)操作時不必離開當(dāng)前任務(wù)，操作完成后，可以平滑地回到到原任務(wù)。
• Modal（對話框）：模態(tài)對話框和非模態(tài)對話框。
• Progress（進(jìn)度）：展示操作的當(dāng)前進(jìn)度。
• Spin（加載）：用于頁面和區(qū)塊的加載中狀態(tài)。

5. Other（其它）

• Button（按鈕）：按鈕用于開始一個即時操作。
• chart（圖表）：圖標(biāo)數(shù)據(jù)顯示。
• Copyright（版權(quán)）：版權(quán)信息。
• Divider（分割線）：區(qū)隔內(nèi)容的分割線。
• logo（標(biāo)志）：logo 的使用。
• LocaleProvider（國際化）：為組件內(nèi)建文案提供統(tǒng)一的國際化支持。
• Text link（文字鏈）：點(diǎn)擊有鏈接跳轉(zhuǎn)的文字。
• Scrollbar（滾動條）：在特定界面區(qū)域內(nèi)進(jìn)行內(nèi)容的更多展示。

以上組件可根據(jù)自己的產(chǎn)品進(jìn)行增刪，把組件規(guī)范設(shè)計完成后，整個設(shè)計規(guī)范就完成了 90% 以上，可以算一個比較完整的設(shè)計規(guī)范了。

八、總結(jié)

每一個設(shè)計規(guī)范都是有靈魂的，規(guī)范是為了更好地做設(shè)計，而不是限制設(shè)計師雙手的枷鎖。

設(shè)計規(guī)范也不是一成不變的，它在落地使用的時候多少都會有問題，需要慢慢地去反復(fù)檢驗(yàn)規(guī)范的合理性，發(fā)現(xiàn)不合理的及時更正。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

『 Ant Design是什么 』

眾所周知螞蟻集團(tuán)的B端產(chǎn)品是一個龐大的系統(tǒng)，數(shù)量多且功能復(fù)雜，而且變動頻繁，常常需要設(shè)計師和開發(fā)人員能快速做出工作上的配合。同時這類產(chǎn)品中有存在很多類似的頁面以及組件，根據(jù)原子設(shè)計理論可以得到一些穩(wěn)定且高復(fù)用性的內(nèi)容。

隨著這兩年B端產(chǎn)品的逐漸白熱化，越來越多的用戶對更好的用戶體驗(yàn)有了進(jìn)一步的要求。帶著這樣的一個終極目標(biāo)，螞蟻集團(tuán)體經(jīng)過大量項(xiàng)目實(shí)踐和總結(jié)，逐步打磨出一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系 —— Ant Design。通過組件化設(shè)計規(guī)范，降低冗余的生產(chǎn)成本，讓設(shè)計者專注于更好的用戶體驗(yàn)。

『 Ant Design設(shè)計原則是什么 』

針對B端產(chǎn)品反復(fù)出現(xiàn)的一些設(shè)計體驗(yàn)等問題， Ant Design 給出標(biāo)準(zhǔn)的設(shè)計原則，實(shí)現(xiàn)跨應(yīng)用交互一致性的有效融合。依照這些原則使用 Ant Design 組件設(shè)計界面，既減少了不必要的認(rèn)知成本，又能夠提升設(shè)計的效率?？紤]到需要適應(yīng)各種定制化的業(yè)務(wù)場景，設(shè)計原則具有一定的靈活性，萬變不離其宗，通過了解設(shè)計原則的構(gòu)建邏輯，高效組織信息、幫助建立用戶與界面的互動等原則性要求，可以衍生出更具場景特性的設(shè)計方案。

① Ant Design設(shè)計原則的由來

可以說 Ant design的設(shè)計規(guī)范攝取了《web界面設(shè)計》和《寫給大家看的設(shè)計書》兩本書中的精華原則，并做了理論之外最佳的設(shè)計實(shí)踐。其十大設(shè)計原則反過來是對書本理論的補(bǔ)充，我在看書的過程結(jié)合『Ant Design 』能更好地理解那些原則的釋義。每一個原則都用了大量通俗易懂的案例來補(bǔ)充說明，這也是為什么國內(nèi)的企業(yè)一直以來都很喜歡使用這套組件的原因。

② Ant Design設(shè)計原則的適用范圍

1. 我們先說說『Ant Design 』的適用范圍：

稍微了解 Ant Design 的小伙伴都知道，本系統(tǒng)是針對B端后臺系統(tǒng)，承載媒介是PC端的瀏覽器。使用的人員主要包括：用戶體驗(yàn)設(shè)計師、交互設(shè)計師、UI設(shè)計師、前端程序員等。

2. 再說說 『 Ant Design 設(shè)計原則 』的適用范圍：

顧名思義『 設(shè)計原則 』主要是針對設(shè)計師在創(chuàng)作頁面時依照的標(biāo)準(zhǔn)。雖然『 Ant Design的設(shè)計原則 』是 Ant Design 系統(tǒng)的一部分，但是前文已經(jīng)提到，此原則是攝取了《web界面設(shè)計》和《寫給大家看的設(shè)計書》兩本書中的精華，所以設(shè)計師可以把這些原則運(yùn)用到任何的設(shè)計領(lǐng)域，并不要局限于企業(yè)后臺系統(tǒng)的PC端產(chǎn)品。

為了方便大家理解，講一個小故事。故事來自于《寫給大家看的設(shè)計書》，作者有一年圣誕節(jié)收到一份禮物——一本關(guān)于植物的百科全書。作者翻閱之后，發(fā)現(xiàn)其中有一顆叫約書亞樹的樹，造型奇特，自己從未見過。于是決定出門轉(zhuǎn)轉(zhuǎn)，然而發(fā)現(xiàn)外面到處都是這種樹。故事到這里就完了。

可能大家會想，這個故事要講一個什么道理呢？簡單來說就是，當(dāng)你手中有個錘子，滿世界都是釘子。當(dāng)你了解到下面要講的十個設(shè)計原則后，你會發(fā)現(xiàn)它們處處都適用。

③ Ant Design設(shè)計原則的內(nèi)容

十大原則如下：

• 親密原則（Proximity）

• 對齊原則 (Alignment)

• 對比原則 (Contrast)

• 重復(fù)原則 (Repetition)

• 直截了當(dāng) (Make it Direct)

• 簡化交互 (Keep it Lightweight)

• 足不出戶 (Stay on the Page)

• 提供邀請 (Provide Invitation)

• 即時反應(yīng) (React Immediately)

• 巧用過渡 (Use Transition)

『 如何運(yùn)用Ant Design的設(shè)計原則 』

對于一個初級設(shè)計師而言，想要了解UI用戶體驗(yàn)等知識，學(xué)習(xí) Ant Design 的設(shè)計原則算是比較快能上道的，因?yàn)?Ant Design 是吸取了很多前輩的精華，提煉而成的系統(tǒng)。打個簡單的比喻，對于設(shè)計師而言 Ant Design 就是設(shè)計師學(xué)習(xí)『 視覺規(guī)范 』，掌握『 設(shè)計原則 』最好的字典。

接下來我就給大家說說我是如何快速理解 Ant Design 的這10條設(shè)計原則并運(yùn)用到工作當(dāng)中。

Ant Design 定義了10條設(shè)計原則，根據(jù)『 席克定律 』選項(xiàng)太多不易記憶，于是我找到了這些設(shè)計原則的共通性，將其歸為4類，也就是大家只需記住四類設(shè)計原則，在工作中適當(dāng)延展即可。

① 視覺層級清晰

包含 Ant Design 的設(shè)計原則有：『 親密原則 』『 對齊原則 』『 重復(fù)原則 』『 對比原則 』。

「視覺層級清晰」的重要性體現(xiàn)在 交互前 用戶看到的內(nèi)容結(jié)構(gòu)是清晰明確的 。一個層級混亂的界面，任何信息的傳達(dá)都是無效的。所以保證清晰的排版布局是人機(jī)交互前的基礎(chǔ)。

1. 親密

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個視覺單元；反之，它們的距離就應(yīng)該越遠(yuǎn)，也越像多個視覺單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。

1.1 縱向間距關(guān)系

• 縱向間距：在 Ant Design 中，通過「小號間距」「中號間距」「大號間距」這三種規(guī)格來劃分信息層次結(jié)構(gòu)。這三種規(guī)格分別為：8px（小號間距）、16px（中號間距）、24px（大號間距）。

• 增加元素：通過增加「分割線」來拉開層次。在這三種規(guī)格不適用的情況下，可以通過加減「基礎(chǔ)間距」的倍數(shù)，或者增加元素來拉開信息層次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是縱向間距，8 是「基礎(chǔ)間距」。

1.2 橫向間距關(guān)系

• 組合排布：為了適用不同尺寸的屏幕，在橫向采用柵格布局來排布組件，從而保證布局的靈活性。（注：柵格是另外一個模塊的內(nèi)容，這里不贅述。）

• 復(fù)選框內(nèi)：在一個組件內(nèi)部，元素的橫向間距也應(yīng)該有所不同。

2. 對齊

正如「格式塔學(xué)派」中的連續(xù)律（Law of Continuity）所描述的，人類的視覺系統(tǒng)往往傾向于將看到對象的直線繼續(xù)成為直線，曲線繼續(xù)成為曲線。在界面設(shè)計中，將元素進(jìn)行對齊，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。

格式塔學(xué)派（德語：Gestalttheorie）：是心理學(xué)重要流派之一，興起于 20 世紀(jì)初的德國，又稱為完形心理學(xué)；主張人腦的運(yùn)作原理是整體的，「整體不同于其部件的總和」?！浴妇S基百科」

2.1 文案類對齊

如果頁面的字段或段落較短、較散時，需要確定一個統(tǒng)一的視覺起點(diǎn)。

• 推薦使用：標(biāo)題和正文左對齊，使用了一個視覺起點(diǎn)。

• 不推薦使用：標(biāo)題和正文使用了兩個視覺起點(diǎn)，不推薦該種對齊方式，除非刻意強(qiáng)調(diào)兩者區(qū)別。

2.2 表單類對齊

• 冒號對齊：冒號對齊（右對齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項(xiàng)，從而提高填寫效率。

2.3 數(shù)字類對齊

為了快速對比數(shù)值大小，建議所有數(shù)值取相同有效位數(shù)，并且右對齊。

3. 對比

對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。

注：要實(shí)現(xiàn)有效的對比，對比就必須強(qiáng)烈，切不可畏畏縮縮。

3.1 主次關(guān)系對比

為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷， 來突出其中一項(xiàng)相對更重要或者更高頻的操作。

注意：突出的方法，不局限于強(qiáng)化重點(diǎn)項(xiàng)，也可以是弱化其他項(xiàng)。

• 需要區(qū)分主次場景：

• 不需要區(qū)分主次的場景：「通過」和「駁回」都使用次按鈕，系統(tǒng)保持中立。在一些需要用戶慎重決策的場景中，系統(tǒng)應(yīng)該保持中立，不能替用戶或者誘導(dǎo)用戶做出判斷。

3.2 總分關(guān)系對比

• 總分關(guān)系：通過調(diào)整排版、字體、大小等方式來突出層次感，區(qū)分總分關(guān)系，使得頁面更具張力和節(jié)奏感。

3.3 狀態(tài)關(guān)系對比

常見類型有「靜態(tài)對比」、「動態(tài)對比」。

• 靜態(tài)對比示例：用不同顏色的點(diǎn)，來表明不同狀態(tài)。

• 動態(tài)對比：鼠標(biāo)懸停時，該項(xiàng)和其他項(xiàng)呈現(xiàn)出明顯不同的視覺效果，響應(yīng)用戶操作。通過改變顏色、增加輔助形狀等方法來實(shí)現(xiàn)狀態(tài)關(guān)系的對比，以便用戶更好的區(qū)分信息。

4.重復(fù)

相同的元素在整個界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

4.1 重復(fù)元素

重復(fù)元素可以是一條粗線、一種線框，某種相同的顏色、設(shè)計要素、設(shè)計風(fēng)格，某種格式、空間關(guān)系等。

• 線框重復(fù)：

• 設(shè)計要素重復(fù)：

• 文案格式重復(fù)：

② 交互操作高效

包含 Ant Design 的設(shè)計原則有：『 直截了當(dāng) 』『 足不出戶 』『 簡化交互 』『 即時反應(yīng) 』。

「交互操作高效」的重要性體現(xiàn)在 交互時 用戶操作流暢、簡單、用時短。如果僅僅只是解決高效的問題，卻忽略用戶能否理解流程如何操作，那這樣的解決方案也是徒然。有的時候并不是解決實(shí)際時間的長短，而是用戶的心理時間是否太長的問題，就像我們打游戲往往會覺得時間過的很快，但是在等待頁面加載時卻不耐煩。

1. 減少打斷

能在這個頁面解決的問題，就不要去其它頁面解決，因?yàn)槿魏雾撁嫠⑿潞吞D(zhuǎn)都會引起變化盲視（Change Blindness），導(dǎo)致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉(zhuǎn)，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。

變化盲視（Change Blindness）：指視覺場景中的某些變化并未被觀察者注意到的心理現(xiàn)象。產(chǎn)生這種現(xiàn)象的原因包括場景中的障礙物，眼球運(yùn)動、地點(diǎn)的變化，或者是缺乏注意力等?！浴毒S基百科》

心流（Flow）：也有別名以化境 (Zone) 表示，亦有人翻譯為神馳狀態(tài)，定義是一種將個人精神力完全投注在某種活動上的感覺；心流產(chǎn)生時同時會有高度的興奮及充實(shí)感?！浴毒S基百科》

• 氣泡提示：對于操作的反饋是必要的，下文會提到，但是為了減少打斷用戶，輕量級的反饋氣泡提示即可。

• 輸入覆蓋層：鼠標(biāo)「點(diǎn)擊」圖標(biāo)觸發(fā)；鼠標(biāo)「點(diǎn)擊」懸浮層以外的其他區(qū)塊后，直接保存輸入結(jié)果并退出。不用彈窗或跳轉(zhuǎn)的形式編輯，只需要在觸發(fā)圖標(biāo)附近彈出浮層即可，這樣避免用戶視動線的混亂，減少打斷用戶操作的心流。

2.縮短步驟

正如 Alan Cooper 所言：「需要在哪里輸出，就要允許在哪里輸入」。這就是直接操作的原理。eg：不要為了編輯內(nèi)容而打開另一個頁面，應(yīng)該直接在上下文中實(shí)現(xiàn)編輯。

常規(guī)的編輯模式，界面都會跳出一個彈窗或者是一個頁面跳轉(zhuǎn)，無形之中用戶走了更多的流程路徑，如果能在當(dāng)前頁面就把編輯問題解決掉那就符合了 Ant Design 『 足不出戶 』的設(shè)計原則。

• 文字鏈/圖標(biāo)編輯：

狀態(tài)一：在可編輯行附近出現(xiàn)文字鏈/圖標(biāo)；

狀態(tài)二：鼠標(biāo)點(diǎn)擊「編輯」后，出現(xiàn)「輸入框」、「確定」、「取消」表單元素，同時光標(biāo)定位在「輸入框」中。

• 多字段行內(nèi)編輯：編輯模式在不破壞整體性的前提下，可擴(kuò)大空間，以便放下「輸入框」等表單元素；其中，在 Table 中進(jìn)行編輯模式切換時，需要保證每列的不跳動。

• 拖放圖片/文件：在早前很多產(chǎn)品在上傳功能上，都是跳出彈窗再選擇文件上傳，現(xiàn)在基本都可以實(shí)現(xiàn)拖拽上傳了。這樣的設(shè)計大大提高了用戶使用上傳功能的效率。

• 模糊搜索：系統(tǒng)根據(jù)用戶所查詢的關(guān)鍵詞，智能匹配可能的結(jié)果。

• 定時自動更新：新增的列表項(xiàng)「高亮」，持續(xù)幾秒后恢復(fù)正常。不需要用戶手動刷新，減少不冗余的操作。

3.避免回憶

人們在思考的時候，是需要依靠大腦神經(jīng)元之間相互傳遞信號，而回憶是需要調(diào)用更多的的神經(jīng)元傳遞信號，簡單地說就是非常費(fèi)腦子。

• 搜索歷史：搜索歷史的功能，可以減少用戶的回憶，使得整個體驗(yàn)更加輕松愉悅。

4.信息降噪

根據(jù)費(fèi)茨法則（Fitts's Law）所描述的，如果用戶鼠標(biāo)移動距離越少、對象相對目標(biāo)越大，那么用戶越容易操作。通過運(yùn)用上下文工具（即：放在內(nèi)容中的操作工具），使內(nèi)容和操作融合，從而簡化交互，起到信息降噪的作用。

費(fèi)茨法則 ：到達(dá)目標(biāo)的時間是到達(dá)目標(biāo)的距離與目標(biāo)大小的函數(shù)，具體：。其中：1.設(shè)備當(dāng)前位置和目標(biāo)位置的距離（D）；2.目標(biāo)的大?。╓）。距離越長，所用時間越長；目標(biāo)越大，所用時間越短。

• 列表嵌入層：將列表為多層級時，隱藏弱層級列表內(nèi)容，可以讓用戶更加直觀地看到重要信息。當(dāng)我在聚焦某一個列表模塊的內(nèi)容，鼠標(biāo)懸浮即可展開。

• 標(biāo)簽頁：標(biāo)簽也換可以將信息內(nèi)容進(jìn)行分類，讓用戶更易理解。

• 漸進(jìn)式展現(xiàn)：用戶在填寫表單時，會根據(jù)當(dāng)前錄入的數(shù)據(jù)，展現(xiàn)下一項(xiàng)需要填寫的內(nèi)容，這樣的展現(xiàn)方式可以屏蔽掉無關(guān)緊要的內(nèi)容。

• 懸停即現(xiàn)工具：鼠標(biāo)懸停時，出現(xiàn)操作項(xiàng)。這樣將不重要信息或者操作隱藏起來，不會干擾到用戶瀏覽其他重要內(nèi)容。

③ 系統(tǒng)反饋即時

包含 Ant Design 的設(shè)計原則有：『 簡化交互 』『 巧用過渡 』『 即時反應(yīng) 』。

「系統(tǒng)反饋及時」的重要性體現(xiàn)在 交互之后 立即給出反饋。就像「牛頓第三定律」所描述作用力和反作用一樣，用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個對應(yīng)的反饋，同時輸入量級越大、重要性越高，那么反饋量級越大、重要性越高。

1.實(shí)時反饋

雖然反饋太多（準(zhǔn)確的說，錯誤的反饋太多）是一個問題，但是反饋太少甚至沒有反饋的系統(tǒng)，則讓人感覺遲鈍和笨拙，用戶體驗(yàn)更差。

牛頓第三定律 ：當(dāng)兩個物體互相作用時，彼此施加于對方的力，其大小相等、方向相反?！浴毒S基百科》

• 實(shí)時預(yù)覽：根據(jù)用戶的輸入，提供關(guān)于密碼強(qiáng)度和有效性的實(shí)時反饋提示。

• 文字鏈熱區(qū)：當(dāng)懸浮在 ID 所在的文字鏈單元格時，鼠標(biāo)「指針」隨即變?yōu)椤甘中汀梗瑔螕艏纯商D(zhuǎn)。

2.過渡反饋

人腦灰質(zhì)（Gray Matter）會對動態(tài)的事物（eg：移動、形變、色變等）保持敏感。在界面中，適當(dāng)?shù)募尤胍恍┻^渡效果，能讓界面保持生動，同時也能增強(qiáng)用戶和界面的溝通。

Adding: 新加入的信息元素應(yīng)被告知如何使用，從頁面轉(zhuǎn)變的信息元素需被重新識別。

Receding:  與當(dāng)前頁無關(guān)的信息元素應(yīng)采用適當(dāng)方式移除。

Normal: 指那些從轉(zhuǎn)場開始到結(jié)束都沒有發(fā)生變化的信息元素。

• 表格加載：網(wǎng)絡(luò)不好或者表格數(shù)據(jù)過多，都有可能導(dǎo)致加載緩慢，這時有一個小動畫可以緩解用戶的焦慮感。

• 富列表加載：用戶在打開列表時，頁面無法做到一次性加載所有的數(shù)據(jù)，同時有為了減少翻頁的繁瑣操作，就有了下拉自動加載的。

• 頁面加載：當(dāng)用戶訪問的頁面體量過大時，系統(tǒng)會通過給出倒計時或完成百分比，來緩解用戶焦慮，并且給用戶友好可控的感覺。

• 滑入與滑出：可以有效構(gòu)建虛擬空間。  

• 折疊窗口：在視圖切換時，有助于保持上下文，同時也能拓展虛擬空間。

• 對象增加：在列表/表格中，新增了一個對象。

• 對象刪除：在列表/表格中，刪除了一個對象。

• 對象更改：在列表/表格中，更改了一個對象。

• 狀態(tài)一：用戶更改了「詳情」中的值；

• 狀態(tài)二：用戶點(diǎn)擊「保存」后，詳情所在的網(wǎng)格出現(xiàn)「黃底」，表明該對象發(fā)生了更改；

• 狀態(tài)三：底色持續(xù)幾秒后，恢復(fù)正常。

• 對象呼出：點(diǎn)擊頁面中元素，呼出一個新對象。

3.結(jié)果反饋

用戶常常會疑惑自己的操作是否成功了，哪怕是失敗了也是需要系統(tǒng)反饋，這樣才能安心進(jìn)行下一步的操作。

• 頁面反饋結(jié)果：

• 氣泡反饋結(jié)果：

④ 用戶自由可控

包含 Ant Design 的設(shè)計原則有：『 提供邀請 』『 足不出戶 』『 即時反應(yīng) 』。

「用戶自由可控」的重要性體現(xiàn)在 交互前對下一步操作的預(yù)判；交互時 不論操作后的結(jié)果多嚴(yán)重都要允許用戶自主決策；以及交互后 能否對自己的操作結(jié)果反悔。

1.未來預(yù)判

很多富交互模式（eg：「拖放」、「行內(nèi)編輯」、「上下文工具」）都有一個共同問題，就是缺少易發(fā)現(xiàn)性。如果用戶在操作前就能得到下一個交互層次的提醒和暗示，以表明在下一個界面可以做什么。  這樣人機(jī)交互的過程往往更加自然、順暢。

• 點(diǎn)擊刷新：對于設(shè)計師而言，最常見的例子要屬花瓣了，我們時長會沉浸在我們?yōu)g覽的瀑布流卡片中，如果系統(tǒng)強(qiáng)行刷新當(dāng)前頁面，用戶很有可能迷失。邀請用戶主動更新，既不會錯過新的消息，又不會導(dǎo)致我們的心流被打斷。

• 未完成邀請：用戶在當(dāng)前頁面無法完成登錄操作，為了減少用戶迷茫的焦慮感，系統(tǒng)告知用戶點(diǎn)擊“更改”鏈接，可以去向何處。

• 懸停邀請：鼠標(biāo)「懸?！箷r，出現(xiàn)「選擇此模板」的按鈕。

2.自主決策

雖然系統(tǒng)中缺少不了一些危險操作或者不可逆操作(eg：刪除、重置、重裝系統(tǒng)等)，但是仍然要用戶自主決定是否繼續(xù)，我們能做的就是讓用戶再三確認(rèn)。

• 彈窗提示：雖然彈窗打斷用戶心流，但是對于重要的操作，這樣是最保險的方式。

• 刪除知識庫提示：是釘釘中，刪除「知識庫」這一重要內(nèi)容，是不可逆的，系統(tǒng)需要用戶謹(jǐn)慎操作。

3.準(zhǔn)許反悔

如果說「自主決策」中提到的案例都是不可逆的，那「準(zhǔn)許反悔」的后果嚴(yán)重性會弱一些，系統(tǒng)對用戶的操作沒有那么強(qiáng)的阻斷性，所以要準(zhǔn)許用戶反悔的，

• 刪除撤銷：用戶點(diǎn)擊「刪除」后，直接操作；出現(xiàn) Message 告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進(jìn)行下一個操作或者 1 分鐘內(nèi)不進(jìn)行任何操作， Message 消失，用戶無法再「撤銷」。

『 Ant Design的優(yōu)點(diǎn)與缺點(diǎn) 』

① 優(yōu)點(diǎn)

1.助初創(chuàng)團(tuán)隊(duì)快速產(chǎn)品快速上線

Ant Design在"幸福者示例中"寫到“Ant Design 無法保證業(yè)務(wù)產(chǎn)品能否成功，但是能幫助業(yè)務(wù)產(chǎn)品『正確的成功』或者『正確的失敗』?！?

如果團(tuán)隊(duì)有一個產(chǎn)品idea，我們需要通過最少的資源開發(fā)此產(chǎn)品并投入到市場中，通過聽取用戶反饋，驗(yàn)證idea是否可行，快速迭代最終做出更完善的產(chǎn)品。但理想是美好的，但現(xiàn)實(shí)是骨感的，在前期研發(fā)的過程中通常會出現(xiàn)兩個情況。創(chuàng)業(yè)團(tuán)隊(duì)沒有足夠的設(shè)計資源和時間，前幾個版本的產(chǎn)品通常用戶體驗(yàn)非常差，這種情況體驗(yàn)差有可能讓用戶放棄這款產(chǎn)品。創(chuàng)業(yè)團(tuán)隊(duì)沒有好的方法論和協(xié)作模式，需要磨合，設(shè)計和開發(fā)進(jìn)度一延再延，結(jié)果錯過了風(fēng)口，市場被競品搶占，還沒上線就倒閉了。

Ant Design提供了一套完整的界面實(shí)現(xiàn)方案，即有代碼框架能直接拿來提高開發(fā)效率，每個界面組件都經(jīng)過螞蟻金服多個項(xiàng)目的考驗(yàn)，具備優(yōu)秀的用戶體驗(yàn)。用Ant Design來做0-1，能快速發(fā)布用戶體驗(yàn)優(yōu)秀的產(chǎn)品，聽取用戶反饋，快速迭代。

當(dāng)然，創(chuàng)業(yè)是九死一生，市場和用戶口味都充滿了不確定性，誰也沒有能力保證產(chǎn)品是否成功，但是只要你能高效的產(chǎn)出質(zhì)量優(yōu)秀的產(chǎn)品，不斷試錯，說不定以后就能成功。

2.減少設(shè)計和開發(fā)的不確定性。

用 Ant Design 就能高效的產(chǎn)出高質(zhì)量的產(chǎn)品，減少設(shè)計和開發(fā)的不確定性。

因?yàn)槲覀児揪褪褂昧?Ant Design 的系統(tǒng)，所以時常會與前端小伙伴溝通，以下都是他們在使用過程的感想。

Ant Design 提供的大量功能比較全面且UI風(fēng)格統(tǒng)一的組件，能幫助開發(fā)者快速搭建通用場景下的應(yīng)用界面。這大概是得益于螞蟻金服業(yè)務(wù)線上極為廣泛的應(yīng)用場景，驅(qū)動了 Ant Design 團(tuán)隊(duì)通過對使用情況的觀察匯總，整理出來了這么一個組件庫。他們的經(jīng)驗(yàn)積累如此之豐富，足以讓這個庫支持大部分其他前端開發(fā)者的需要。

其設(shè)計團(tuán)隊(duì)給出的設(shè)計規(guī)范相當(dāng)詳細(xì)且經(jīng)得起推敲，令許多其他團(tuán)隊(duì)獲益匪淺。

3.節(jié)省設(shè)計與開發(fā)的人力成本

我見過太多宣稱自己在乎用戶體驗(yàn)的公司，給用戶的產(chǎn)品質(zhì)量確實(shí)比較高，但是自己員工內(nèi)部使用的系統(tǒng)和管理一團(tuán)糟。種種不便讓員工經(jīng)常加班，情緒消極，這樣的團(tuán)隊(duì)抄抄競品達(dá)到行業(yè)標(biāo)準(zhǔn)體驗(yàn)還行。要想突破是不可能了，因?yàn)閯?chuàng)新需要員工有充沛的精力和主動性，天天加班誰還有這精神。

用 Ant Design 系統(tǒng)提供的設(shè)計工具和組件框架能給設(shè)計師和開發(fā)者減少負(fù)擔(dān)，能用更少的時間呈現(xiàn)給用戶體驗(yàn)好的產(chǎn)品。這樣帶來的好處不僅僅是設(shè)計師和開發(fā)者覺得少加班成就感高而幸福，他們重新恢復(fù)活力和激情能做出更有創(chuàng)意和競爭力的產(chǎn)品，給公司帶來更大的收益，這是一個三贏的結(jié)局。

② 缺點(diǎn)

1.無法根據(jù)業(yè)務(wù)場景定制組件，靈活度不夠

一定有小伙伴會有這樣的疑問，目前市面上有這么多的第三方設(shè)計規(guī)范，例如 Ant Design ，Element UI，有必要自己造輪子做一遍嗎？

這里要視情況而定，如果公司產(chǎn)品是初創(chuàng)期，而且研發(fā)人手不足，那確實(shí)沒有必要自己造輪子。反之在資源足夠的情況下，是有必要設(shè)計團(tuán)隊(duì)重新做一套屬于自己產(chǎn)品的規(guī)范組件庫的，因?yàn)锽端自身的業(yè)務(wù)性決定了市場上沒有萬能的設(shè)計規(guī)范，那些設(shè)計規(guī)范的組件并不能100%滿足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設(shè)計規(guī)范，在此基礎(chǔ)上進(jìn)行修改，效率很低，適配的復(fù)雜度和重新開發(fā)相差無幾。

2.組件細(xì)節(jié)深入度不夠，只能“將就”使用

對于比較普通的設(shè)計解決方案是可以的，但是 Ant Design 包含的組件細(xì)節(jié)仍有不足，畢竟 Ant Design 沒必要投入過多的精力在組件細(xì)節(jié)深入度上，規(guī)范定義的越是精細(xì)，對于產(chǎn)品組件而言可延展性就越差，限制也會越多。而 Ant Design 只需要解決80%企業(yè)，80%的通用問題即可。

3.競品同質(zhì)化嚴(yán)重，視覺上無法脫穎而出

當(dāng)市場大部分產(chǎn)品都在使用 Ant Design 設(shè)計系統(tǒng)時，產(chǎn)品的同質(zhì)化就會很嚴(yán)重。為了避免這種情況發(fā)生，我們就有必要從設(shè)計語言、設(shè)計原則、設(shè)計組件三個部分開始，設(shè)計自己的規(guī)范。那些大廠的成熟的組件庫該如何用呢？我認(rèn)為應(yīng)該把它當(dāng)成一個字典，有不會的地方，可以去參考人家的成熟的解決方案。

『 總結(jié) 』

這篇文章簡單的介紹了一下 Ant Design 是什么、 Ant Design 的設(shè)計原則是什么以及 Ant Design 的優(yōu)缺點(diǎn)。當(dāng)然也重點(diǎn)總結(jié)了一下，設(shè)計師如何運(yùn)用 Ant Design 的設(shè)計原則，可以將這些原則分為四類：視覺層級清晰、交互操作高效、系統(tǒng)反饋及時、用戶自由可控。希望大家通過這篇文章能夠更深一步了解 Ant Design 的設(shè)計原則，并將其靈活運(yùn)用到設(shè)計工作中。

參考文獻(xiàn)：

《Ant Design 官網(wǎng)》

《設(shè)計心理學(xué) 1 》 [美] 唐納德·A·諾曼 

《寫給大家看的設(shè)計書》 美國羅賓·威廉姆斯(RobinWilliams)

《web界面設(shè)計》 Bill Scott    Theresa Neil

《維基百科》

《如何評價 Ant Design 這個項(xiàng)目（一個設(shè)計語言）？》 龍爪槐守望者

文章來源：站酷   作者：菜菜不甜 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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