『 Ant Design是什么 』

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

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

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

針對B端產(chǎn)品反復(fù)出現(xiàn)的一些設(shè)計體驗等問題， Ant Design 給出標(biāo)準(zhǔn)的設(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è)計原則反過來是對書本理論的補充，我在看書的過程結(jié)合『Ant Design 』能更好地理解那些原則的釋義。每一個原則都用了大量通俗易懂的案例來補充說明，這也是為什么國內(nèi)的企業(yè)一直以來都很喜歡使用這套組件的原因。

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

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

稍微了解 Ant Design 的小伙伴都知道，本系統(tǒng)是針對B端后臺系統(tǒng)，承載媒介是PC端的瀏覽器。使用的人員主要包括：用戶體驗設(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è)計師可以把這些原則運用到任何的設(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)

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

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

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

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

① 視覺層級清晰

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

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

1. 親密

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個視覺單元；反之，它們的距離就應(yīng)該越遠，也越像多個視覺單元。親密性的根本目的是實現(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è)計中，將元素進行對齊，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。

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

2.1 文案類對齊

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

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

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

2.2 表單類對齊

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

2.3 數(shù)字類對齊

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

3. 對比

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

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

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

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

注意：突出的方法，不局限于強化重點項，也可以是弱化其他項。

• 需要區(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)對比示例：用不同顏色的點，來表明不同狀態(tài)。

• 動態(tài)對比：鼠標(biāo)懸停時，該項和其他項呈現(xiàn)出明顯不同的視覺效果，響應(yīng)用戶操作。通過改變顏色、增加輔助形狀等方法來實現(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)在 交互時 用戶操作流暢、簡單、用時短。如果僅僅只是解決高效的問題，卻忽略用戶能否理解流程如何操作，那這樣的解決方案也是徒然。有的時候并不是解決實際時間的長短，而是用戶的心理時間是否太長的問題，就像我們打游戲往往會覺得時間過的很快，但是在等待頁面加載時卻不耐煩。

1. 減少打斷

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

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

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

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

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

2.縮短步驟

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

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

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

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

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

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

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

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

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

3.避免回憶

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

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

4.信息降噪

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

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

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

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

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

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

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

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

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

1.實時反饋

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

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

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

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

2.過渡反饋

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

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)二：用戶點擊「保存」后，詳情所在的網(wǎng)格出現(xiàn)「黃底」，表明該對象發(fā)生了更改；

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

• 對象呼出：點擊頁面中元素，呼出一個新對象。

3.結(jié)果反饋

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

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

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

④ 用戶自由可控

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

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

1.未來預(yù)判

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

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

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

• 懸停邀請：鼠標(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)對用戶的操作沒有那么強的阻斷性，所以要準(zhǔn)許用戶反悔的，

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

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

① 優(yōu)點

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

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

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

Ant Design提供了一套完整的界面實現(xiàn)方案，即有代碼框架能直接拿來提高開發(fā)效率，每個界面組件都經(jīng)過螞蟻金服多個項目的考驗，具備優(yōu)秀的用戶體驗。用Ant Design來做0-1，能快速發(fā)布用戶體驗優(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ā)的不確定性。

因為我們公司就使用了 Ant Design 的系統(tǒng)，所以時常會與前端小伙伴溝通，以下都是他們在使用過程的感想。

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

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

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

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

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

② 缺點

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

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

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

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

對于比較普通的設(shè)計解決方案是可以的，但是 Ant Design 包含的組件細節(jié)仍有不足，畢竟 Ant Design 沒必要投入過多的精力在組件細節(jié)深入度上，規(guī)范定義的越是精細，對于產(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)缺點。當(dāng)然也重點總結(jié)了一下，設(shè)計師如何運用 Ant Design 的設(shè)計原則，可以將這些原則分為四類：視覺層級清晰、交互操作高效、系統(tǒng)反饋及時、用戶自由可控。希望大家通過這篇文章能夠更深一步了解 Ant Design 的設(shè)計原則，并將其靈活運用到設(shè)計工作中。

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

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

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

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

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