『 Ant Design是什么 』

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

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

『 Ant Design設計原則是什么 』

針對B端產品反復出現的一些設計體驗等問題， Ant Design 給出標準的設計原則，實現跨應用交互一致性的有效融合。依照這些原則使用 Ant Design 組件設計界面，既減少了不必要的認知成本，又能夠提升設計的效率。考慮到需要適應各種定制化的業務場景，設計原則具有一定的靈活性，萬變不離其宗，通過了解設計原則的構建邏輯，高效組織信息、幫助建立用戶與界面的互動等原則性要求，可以衍生出更具場景特性的設計方案。

① Ant Design設計原則的由來

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

② Ant Design設計原則的適用范圍

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

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

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

顧名思義『 設計原則 』主要是針對設計師在創作頁面時依照的標準。雖然『 Ant Design的設計原則 』是 Ant Design 系統的一部分，但是前文已經提到，此原則是攝取了《web界面設計》和《寫給大家看的設計書》兩本書中的精華，所以設計師可以把這些原則運用到任何的設計領域，并不要局限于企業后臺系統的PC端產品。

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

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

③ Ant Design設計原則的內容

十大原則如下：

• 親密原則（Proximity）

• 對齊原則 (Alignment)

• 對比原則 (Contrast)

• 重復原則 (Repetition)

• 直截了當 (Make it Direct)

• 簡化交互 (Keep it Lightweight)

• 足不出戶 (Stay on the Page)

• 提供邀請 (Provide Invitation)

• 即時反應 (React Immediately)

• 巧用過渡 (Use Transition)

『 如何運用Ant Design的設計原則 』

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

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

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

① 視覺層級清晰

包含 Ant Design 的設計原則有：『 親密原則 』『 對齊原則 』『 重復原則 』『 對比原則 』。

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

1. 親密

如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。

1.1 縱向間距關系

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

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

1.2 橫向間距關系

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

• 復選框內：在一個組件內部，元素的橫向間距也應該有所不同。

2. 對齊

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

格式塔學派（德語：Gestalttheorie）：是心理學重要流派之一，興起于 20 世紀初的德國，又稱為完形心理學；主張人腦的運作原理是整體的，「整體不同于其部件的總和」。——摘自「維基百科」

2.1 文案類對齊

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

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

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

2.2 表單類對齊

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

2.3 數字類對齊

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

3. 對比

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

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

3.1 主次關系對比

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

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

• 需要區分主次場景：

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

3.2 總分關系對比

• 總分關系：通過調整排版、字體、大小等方式來突出層次感，區分總分關系，使得頁面更具張力和節奏感。

3.3 狀態關系對比

常見類型有「靜態對比」、「動態對比」。

• 靜態對比示例：用不同顏色的點，來表明不同狀態。

• 動態對比：鼠標懸停時，該項和其他項呈現出明顯不同的視覺效果，響應用戶操作。通過改變顏色、增加輔助形狀等方法來實現狀態關系的對比，以便用戶更好的區分信息。

4.重復

相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。

4.1 重復元素

重復元素可以是一條粗線、一種線框，某種相同的顏色、設計要素、設計風格，某種格式、空間關系等。

• 線框重復：

• 設計要素重復：

• 文案格式重復：

② 交互操作高效

包含 Ant Design 的設計原則有：『 直截了當 』『 足不出戶 』『 簡化交互 』『 即時反應 』。

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

1. 減少打斷

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

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

心流（Flow）：也有別名以化境 (Zone) 表示，亦有人翻譯為神馳狀態，定義是一種將個人精神力完全投注在某種活動上的感覺；心流產生時同時會有高度的興奮及充實感。——摘自《維基百科》

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

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

2.縮短步驟

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

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

• 文字鏈/圖標編輯：

狀態一：在可編輯行附近出現文字鏈/圖標；

狀態二：鼠標點擊「編輯」后，出現「輸入框」、「確定」、「取消」表單元素，同時光標定位在「輸入框」中。

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

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

• 模糊搜索：系統根據用戶所查詢的關鍵詞，智能匹配可能的結果。

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

3.避免回憶

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

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

4.信息降噪

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

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

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

• 標簽頁：標簽也換可以將信息內容進行分類，讓用戶更易理解。

• 漸進式展現：用戶在填寫表單時，會根據當前錄入的數據，展現下一項需要填寫的內容，這樣的展現方式可以屏蔽掉無關緊要的內容。

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

③ 系統反饋即時

包含 Ant Design 的設計原則有：『 簡化交互 』『 巧用過渡 』『 即時反應 』。

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

1.實時反饋

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

牛頓第三定律 ：當兩個物體互相作用時，彼此施加于對方的力，其大小相等、方向相反。——摘自《維基百科》

• 實時預覽：根據用戶的輸入，提供關于密碼強度和有效性的實時反饋提示。

• 文字鏈熱區：當懸浮在 ID 所在的文字鏈單元格時，鼠標「指針」隨即變為「手型」，單擊即可跳轉。

2.過渡反饋

人腦灰質（Gray Matter）會對動態的事物（eg：移動、形變、色變等）保持敏感。在界面中，適當的加入一些過渡效果，能讓界面保持生動，同時也能增強用戶和界面的溝通。

Adding: 新加入的信息元素應被告知如何使用，從頁面轉變的信息元素需被重新識別。

Receding:  與當前頁無關的信息元素應采用適當方式移除。

Normal: 指那些從轉場開始到結束都沒有發生變化的信息元素。

• 表格加載：網絡不好或者表格數據過多，都有可能導致加載緩慢，這時有一個小動畫可以緩解用戶的焦慮感。

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

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

• 滑入與滑出：可以有效構建虛擬空間。  

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

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

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

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

• 狀態一：用戶更改了「詳情」中的值；

• 狀態二：用戶點擊「保存」后，詳情所在的網格出現「黃底」，表明該對象發生了更改；

• 狀態三：底色持續幾秒后，恢復正常。

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

3.結果反饋

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

• 頁面反饋結果：

• 氣泡反饋結果：

④ 用戶自由可控

包含 Ant Design 的設計原則有：『 提供邀請 』『 足不出戶 』『 即時反應 』。

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

1.未來預判

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

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

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

• 懸停邀請：鼠標「懸停」時，出現「選擇此模板」的按鈕。

2.自主決策

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

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

• 刪除知識庫提示：是釘釘中，刪除「知識庫」這一重要內容，是不可逆的，系統需要用戶謹慎操作。

3.準許反悔

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

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

『 Ant Design的優點與缺點 』

① 優點

1.助初創團隊快速產品快速上線

Ant Design在"幸福者示例中"寫到“Ant Design 無法保證業務產品能否成功，但是能幫助業務產品『正確的成功』或者『正確的失敗』。”

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

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

當然，創業是九死一生，市場和用戶口味都充滿了不確定性，誰也沒有能力保證產品是否成功，但是只要你能高效的產出質量優秀的產品，不斷試錯，說不定以后就能成功。

2.減少設計和開發的不確定性。

用 Ant Design 就能高效的產出高質量的產品，減少設計和開發的不確定性。

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

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

其設計團隊給出的設計規范相當詳細且經得起推敲，令許多其他團隊獲益匪淺。

3.節省設計與開發的人力成本

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

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

② 缺點

1.無法根據業務場景定制組件，靈活度不夠

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

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

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

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

3.競品同質化嚴重，視覺上無法脫穎而出

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

『 總結 』

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

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

文章來源：人人都是產品經理    作者：菜菜不甜

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務