『 Ant Design是什么 』

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

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

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

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

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

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

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

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

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

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

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

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

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

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

十大原則如下：

• 親密原則（Proximity）

• 對(duì)齊原則 (Alignment)

• 對(duì)比原則 (Contrast)

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

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

• 簡(jiǎn)化交互 (Keep it Lightweight)

• 足不出戶 (Stay on the Page)

• 提供邀請(qǐng) (Provide Invitation)

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

• 巧用過渡 (Use Transition)

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

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

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

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

① 視覺層級(jí)清晰

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

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

1. 親密

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

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

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

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

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

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

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

2. 對(duì)齊

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

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

2.1 文案類對(duì)齊

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

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

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

2.2 表單類對(duì)齊

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

2.3 數(shù)字類對(duì)齊

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

3. 對(duì)比

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

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

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

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

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

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

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

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

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

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

常見類型有「靜態(tài)對(duì)比」、「動(dòng)態(tài)對(duì)比」。

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

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

4.重復(fù)

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

4.1 重復(fù)元素

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

• 線框重復(fù)：

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

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

② 交互操作高效

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

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

1. 減少打斷

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

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

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

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

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

2.縮短步驟

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

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

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

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

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

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

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

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

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

3.避免回憶

人們?cè)谒伎嫉臅r(shí)候，是需要依靠大腦神經(jīng)元之間相互傳遞信號(hào)，而回憶是需要調(diào)用更多的的神經(jīng)元傳遞信號(hào)，簡(jiǎn)單地說就是非常費(fèi)腦子。

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

4.信息降噪

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

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

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

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

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

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

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

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

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

1.實(shí)時(shí)反饋

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

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

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

• 文字鏈熱區(qū)：當(dāng)懸浮在 ID 所在的文字鏈單元格時(shí)，鼠標(biāo)「指針」隨即變?yōu)椤甘中汀?，單擊即可跳轉(zhuǎn)。

2.過渡反饋

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

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

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

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

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

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

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

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

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

• 對(duì)象增加：在列表/表格中，新增了一個(gè)對(duì)象。

• 對(duì)象刪除：在列表/表格中，刪除了一個(gè)對(duì)象。

• 對(duì)象更改：在列表/表格中，更改了一個(gè)對(duì)象。

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

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

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

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

3.結(jié)果反饋

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

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

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

④ 用戶自由可控

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

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

1.未來預(yù)判

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

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

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

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

2.自主決策

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

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

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

3.準(zhǔn)許反悔

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

• 刪除撤銷：用戶點(diǎn)擊「刪除」后，直接操作；出現(xiàn) Message 告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進(jìn)行下一個(gè)操作或者 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ì)有一個(gè)產(chǎn)品idea，我們需要通過最少的資源開發(fā)此產(chǎn)品并投入到市場(chǎng)中，通過聽取用戶反饋，驗(yàn)證idea是否可行，快速迭代最終做出更完善的產(chǎn)品。但理想是美好的，但現(xiàn)實(shí)是骨感的，在前期研發(fā)的過程中通常會(huì)出現(xiàn)兩個(gè)情況。創(chuàng)業(yè)團(tuán)隊(duì)沒有足夠的設(shè)計(jì)資源和時(shí)間，前幾個(gè)版本的產(chǎn)品通常用戶體驗(yàn)非常差，這種情況體驗(yàn)差有可能讓用戶放棄這款產(chǎn)品。創(chuàng)業(yè)團(tuán)隊(duì)沒有好的方法論和協(xié)作模式，需要磨合，設(shè)計(jì)和開發(fā)進(jìn)度一延再延，結(jié)果錯(cuò)過了風(fēng)口，市場(chǎng)被競(jìng)品搶占，還沒上線就倒閉了。

Ant Design提供了一套完整的界面實(shí)現(xiàn)方案，即有代碼框架能直接拿來提高開發(fā)效率，每個(gè)界面組件都經(jīng)過螞蟻金服多個(gè)項(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ǎng)和用戶口味都充滿了不確定性，誰也沒有能力保證產(chǎn)品是否成功，但是只要你能高效的產(chǎn)出質(zhì)量?jī)?yōu)秀的產(chǎn)品，不斷試錯(cuò)，說不定以后就能成功。

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

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

因?yàn)槲覀児揪褪褂昧?Ant Design 的系統(tǒng)，所以時(shí)常會(huì)與前端小伙伴溝通，以下都是他們?cè)谑褂眠^程的感想。

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

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

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

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

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

② 缺點(diǎn)

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

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

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

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

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

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

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

『 總結(jié) 』

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

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

文章來源：人人都是產(chǎn)品經(jīng)理    作者：菜菜不甜

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

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

藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(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ù)