Ant Design 設計

設計元素規范

視覺要素應充分涉取自然界規律，降低用戶認知成本

主要字體為 14，與之對應的行高為 22

多數情況下，只出現 regular 以及 medium 的兩種字體重量，分別對應代碼中的 400 和 500。在英文字體加粗的情況下會采用 semibold 的字體重量，對應代碼中的 600。

參考了 WCAG 的標準，將正文文本、標題和背景色之間保持在了 7:1 以上的 AAA 級對比度。

建立體系化的設計思路：在同一個系統的 UI 設計中先建立體系化的設計思路，對主、次、輔助、標題、展示等類別的字體做統一的規劃，再落地到具體場景中進行微調。建立體系化的設計思路有助于強化橫向字體落地的一致性，提高字體應用的性價比，減少不必要的樣式浪費。

少即是多：在視覺展現上能夠用盡量少的樣式去實現設計目的。避免毫無意義的使用大量字階、顏色、字重強調視覺重點或對比關系

嘗試讓字體像音符一樣跳躍：在需要拉開差距的時候可以嘗試在字階表中跳躍地選擇字體大小，會令字階之間產生一種微妙的韻律感。

我們對于點的尺寸選擇上會保持 16 的倍數這一原則，新版的圖標最常用的是四種尺寸的點，分別為 80、96、112、128

新版圖標在線條之間的關系采用 8 倍數原則，從小到大以 8 的規律遞增。常用的規格也是 4 種，分別為 56、64、72、80。

圓角的規格采取的也是 8 倍數原則，最常用的是 3 種，分別是 8，16、32，它們之間是兩倍數的關系。而圖標內部空間的圓角則保持直角的處理方式。

新版圖標的角度受到美式戰斗機 F-14 tomcat 的啟發，將常用的角度定在約 76 度。在日常設計中，多數系統圖標的角度都可以從 76 度這個數值出發，根據實際情況進行靈活的應用。

Ant Design 為了更符合真實陰影，在 4.0 中采用了三層陰影的表達方式，讓陰影更柔和，更符合真實狀態

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

費茨法則 ：到達目標的時間是到達目標的距離與目標大小的函數，具體：

1.設備當前位置和目標位置的距離（D）
2.目標的大小（W）。距離越長，所用時間越長；目標越大，所用時間越短。

陰影由光照而產生。主要影響其值的是物體高度與光源位置：

在不同高度上時，投射出的陰影顏色、模糊度、面積都有所區分。離地面越遠的物體，產生的陰影顏色越淡、模糊度越高、面積越大；反之則顏色更深、模糊度越低、面積越小；
而投影的方向主要由光源與物體的相對位置決定。

在 Ant Design 中不同的陰影方向使用在不同的地方：陰影向下：主要應用于組件內部或組件本身，是比較常規場景的用法陰影向上：主要應用于底部導航或工具欄等陰影向左：主要應用于右邊導航欄、抽屜組件或固定表格欄陰影向右：主要應用于左邊導航欄、抽屜組件或固定表格欄

Ant Design 的圖標設計原則源自"確定"和"自然"，落實到圖標設計領域，一共有四個，他們分別為：

準確： 設計造型準確的圖標（保持偶數原則，去小數點）；選擇表意準確的圖標，不對用戶的認知造成困擾。
簡單： 在表意清晰準確的基礎上，盡量保持圖形的簡潔，不做多余的修飾。
節奏： 挖掘構圖中的秩序之美。
愉悅： 賦予適度的情感。

頁面異常設計

異常頁面

1.配圖：為沉重的異常增添一點樂趣，緩解用戶煩躁心理；
2.異常代碼/問題：當異常有具體的 HTTP 錯誤代碼時，可予以展示；
3.異常描述：簡明扼要地描述異常原因，方便用戶作對問題作反饋；
4.建議操作：協助用戶處理異常，或把用戶引導回正確的路徑上。

404頁面

當用戶請求訪問的頁面、項目、資源未找到時使用

403頁面

無權限，可能包括無應用權限或無數據權限，根據實際情況向用戶反饋。

500頁面

當服務器出錯，無法向用戶提供服務時。

瀏覽器不兼容

當瀏覽器不兼容導致用戶無法打開網頁的時候使用。

設計模式

標題構成建議為「對象+動作+結果/狀態」或「動作+結果/狀態」。

文案

1，表述內容時，關注點應該是用戶和他們能用你的產品做什么，文案應該以用戶為主體
2，省略無用詞匯，不重復用戶已知事實；在絕大多數交互場景下，都無需界面描述出全部的細節， 盡量提供簡短、易于快速獲取的內容。
3，使用簡單、直接、易于理解的詞匯，讓內容和指示更容易被用戶接受和理解。
4，重要的信息放在顯著位置
5，報錯是 UI 中常見的功能，它同樣是用戶體驗中不可小視的組成部分。當用戶填寫的內容出錯的時候，你的報錯信息應當符合用戶的認知，用易于理解的方式表述出來。
6，通用基本用詞要規范，不要寫錯字，詞語表達要完整。專業用語要精準，并是所屬行業認可通用用詞；時間的表述必須明確。
7，直接使用「你」、「我」來和用戶對話，與用戶建立親密感。避免使用「您」，讓用戶感覺太過疏遠。不要在同一個句式中混用「你」和「我」，交互中指代混亂會讓用戶相當糾結
8，多給用戶支持與鼓勵，不要命令和強迫用戶。
9，不要使用過于絕對的表述，這樣會讓用戶覺得不適。
10，產品名稱全稱，首字母大寫。產品名稱縮寫需要全部大寫，如：ESC、SLB 等；
11，全英文的標題，標簽，菜單項等等都要遵循英文句式中首字母大寫的規范。
12，統計數據使用阿拉伯數字

標點

為了幫助用戶更加高效得掃視文本內容，可以省略不必要的斷句點。
1、以下元素單獨出現時可以省略標點：
標簽
標題
輸入框下的提示
懸停文本中的提示
表格中的句子
2、以下元素單獨出現時需要加上標點：
多句或多段的文案和列表內容。
任何文字鏈前的句子。

按鈕

1，強調一個主要操作
2，操作無主次，次按鈕是最安全的選擇
3，按照主次展示全部操作
4，將次要操作收納至右側下拉按鈕中
5，虛線按鈕：用于引導用戶在一個區域中添加內容
6，危險按鈕：警示用戶該操作存在風險是的

數據可視化

1，在對數據進行高度概括時，展示指示卡+數值，比圖表更直接。
2，盡量在一屏中突出核心指示，將總模塊數量控制在 5-9 個，避免信息過載。
3，善于使用篩選、過濾功能，可以讓用戶在觀察全局的同時，還可以查看數據細節，用戶在有疑問時能夠快速得到方向。
4，將數據分析類型頁面拆解為多個部分，通常為“總 - 分”的結構，多維度地展示數據的全貌，幫助使用者發現當前問題。

總結

以上是生活随笔為你收集整理的Ant Design 前端页面设计汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。