Ant Design 設計

設計元素規(guī)范

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

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

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

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

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

少即是多：在視覺展現(xiàn)上能夠用盡量少的樣式去實現(xiàn)設計目的。避免毫無意義的使用大量字階、顏色、字重強調(diào)視覺重點或?qū)Ρ汝P(guān)系

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頁面異常設計

異常頁面

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

404頁面

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

403頁面

無權(quán)限，可能包括無應用權(quán)限或無數(shù)據(jù)權(quán)限，根據(jù)實際情況向用戶反饋。

500頁面

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

瀏覽器不兼容

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

設計模式

標題構(gòu)成建議為「對象+動作+結(jié)果/狀態(tài)」或「動作+結(jié)果/狀態(tài)」。

文案

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

標點

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

按鈕

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

數(shù)據(jù)可視化

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。