根據ant design梳理的UI規范，自己留用

UI設計規范

整體設計風格

提供幾種主題選擇

全局布局

布局整體：采用T子型設計風格布局，布局規范采用統一的設計元素和間距降低學習成本，並能夠適配不同的屏幕尺寸。根據業務的不同將頁面划分為背景層、全局控制層、二級控制層、內容層、內容彈層。根據T字型布局，整體上下布局，下面采用左右布局。頂部為全局控制層，主體左側為二級控制層，右側為內容層。

分辨率：1440x900（最低支持）設計使用的1920*1080

網頁柵格系統：24柵格體系，頁面柵格的gutter值隨着瀏覽器的擴大或者縮小保持不變，柵格Column寬度會隨之擴大和縮小。

模度：UI模度，保持着8倍數的原則，具備動態韻律感，所以的尺寸都保持在8的倍數（這里的尺寸是指塊的尺寸）

字體

開發默認全部使用系統默認字體，可提供備用字體供選擇，備用字體采用等線體

主字體：14px

字階和行高：

​ 主要字體：font-size：14px，line-height：22px

​ 系統使用的字階不超過五種，不低於三種

自重：字體加粗使用regular和medium兩種字體重量，英文字體采用semibold，三種字體分別對應代碼中的400，500，600。

字體顏色：參考了 WCAG 的標准，將正文文本、標題和背景色之間保持在了 7:1 以上的 AAA 級對比度。
主要文字：65%，85%

​ 次要文字：45%，65%

​ 禁用狀態：25%，45%

​ 邊框顏色：15%，25%

​ 分隔線：9%，15%

​ 背景：4%，9%

​ 表頭：2%，4%

圖標

暫時沒有使用到自制圖標，直接使用阿里圖標庫中現成的圖標。（后面需要自制圖標在添加具體的自制標准）

陰影

根據不同的高度層級，將陰影分為四個等級（離地面越遠，陰影越大，等級越高）

第0層：物體緊貼地面，投影與物體完全重疊，如：輸入框等

第1層：物體位於低層級，此時物體被操作(懸停、點擊等)觸發為懸浮狀態，當操作完成或取消時，懸停狀態反饋也跟隨消失，物體回歸到原有的層級中，如：卡片 hover ，不被操作的時候就是出於第0層，被操作之后變成第1層；

第2層：物體位於中層級，此時物體與基准面的關系是展開並跟隨，物體由地面上的元素展開產生，會跟隨元素所在層級的移動而移動，如：下拉面板等；

第3層：物體位於高層級，該物體的運動和其他層級沒有關聯，如：對話框等。

陰影向下：常規場景用法，組件內部、組件本身

陰影向上：底部導航、工具欄

陰影向左：右邊導航欄、抽屜組件、固定表格欄

陰影向右：右邊導航欄、抽屜組件、固定表格欄

常見陰影設計表：https://ant.design/docs/spec/shadow-cn#%E5%B8%B8%E7%94%A8%E9%98%B4%E5%BD%B1%E8%AE%BE%E8%AE%A1%E8%A1%A8

相關設計原則

間距

縱向間距：使用三種規格：8px（小號間距，基礎間距）、16px（中號間距）、24px（大號間距），在以上三種不滿足的情況下，可通過加減基礎間距的倍數或者增加分割線來拉開層次。

橫向間距：橫向采用柵格布局來排布組件，增加布局的靈活性

對齊

文案對齊：段落較短時，需要確定一個統一個視覺起點（正文和標題對齊）

表單類對齊：冒號對齊（右對齊）

數字類對齊：數值取相同的有效位數，並且右對齊

對比

主次對比：針對需要用戶做出決策的場景，保持中立，統一使用次按鈕，防止誘導用戶做出選擇

編輯

不要為了修改而打開新的頁面，需要在哪里輸入就要允許在哪里輸入。

單字段行內編輯

當「易讀性」遠比「易編輯性」重要時，可以使用「單擊編輯」

當「易讀性」為主，同時又要突出操作行的「易編輯性」時，可使用「文字鏈/圖標編輯」

多字段行內編輯

拖放

拖放列表：只能限制在一個維度（上/下或者左/右）進行拖放

拖放圖片/文件

覆蓋層

二次確認覆蓋層：簡單地確認操作不要濫用modal進行二次確認，提供以下兩種確認方式

詳細信息展示覆蓋層：當鼠標點擊或者懸停時展示詳細信息，鼠標移出后關閉覆蓋層

輸入覆蓋層：對於少量的字段輸入，直接在覆蓋層上修改

彈出框覆蓋層：雖然彈出框的出現會打斷用戶的心流，但是有時候在彈出框中使用「步驟條」來管理復雜流程

交互

實時可見：對於很重要的操作，應當放在界面中，並且實時可見

懸停即現：對於不是很重要的又必須要有的操作，使用「實時可見」影響閱讀，可以在鼠標懸停時顯示操作項

開關顯示：如果某些操作只需要在特定模式時顯示，可以通過開關來實現

可視區域和可操作區域：可視區域不能和可操作區域一樣給人一種可點擊的感覺，在某些情況下，可增加可點區域來增加響應范圍

過渡

在視圖變化時保持上下文

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

傳送帶：可極大的擴展虛擬空間

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

解釋剛剛發生了什么

對象增加：在表格或列表中，新增一個對象時，需要高亮新增項，並且高亮在幾秒之后消失

對象刪除：在表格或列表中，刪除一個對象的時候，需要將刪除的過程呈現出來（向左滑出，向右滑出）

對象更改：在表格或列表中，更改一個對象，能直接在表中修改最好不要以彈窗的形式來修改，修改完之后需要高亮顯示修改項以提示用戶修改內容

對象呼出：點擊頁面中的元素，呼出一個新的對象，以彈框的形式來呈現

反饋

查詢模式

自動完成：用戶輸入時，下拉列表會隨着輸入的關鍵詞顯示匹配項。根據查詢結果分類的多少，可以分為「確定類目」、「不確定類目」兩種類型

實時搜索：隨着用戶輸入，實時顯示搜索結果。「自動完成」、「實時建議」

反饋模式

實時預覽：在用戶提交輸入之前，讓他先行了解系統將如何處理他的輸入

漸進式展現：在必要的時候提供必要的提示，而不是一股腦兒顯示所有提示，導致界面混亂，增加認知負擔。有些不是很必須的內容可隱藏在界面之下，當用戶點擊或停留在某個按鈕上時在顯示

進度指示：當一個操作需要一定時間完成時，就需要即時告知進度，保持與用戶的溝通。常見的進度指示：「按鈕加載」、「表格加載」、「富列表加載」、「頁面加載」。可根據操作的量級和重要性，展示不同類型的進度指示

點擊刷新：告知用戶有新內容，並提供按鈕等工具幫助用戶查看新內容，新內容需要高亮顯示幾秒鍾

定時刷新：無需用戶介入，定時刷新內容，刷新內容需要高亮顯示幾秒鍾

實時刷新：在添加信息的時候需要實時刷新，添加的內容，之后需要高亮顯示幾秒鍾

數據輸入

文本輸入

文本框（Input）：輸入的字符數較少的時候使用單行輸入形式

文本域（Textarea）：長篇幅的單一文本的錄入使用多行的文本區域

輸入提示和幫助：為提升數據錄入效率，通常可以在輸入框內增加暗提示以幫助提醒用戶（注：輸入框通常與標簽（label）搭配使用，標簽（label）默認放於輸入區域的左側，當文案過長或英文環境下也可放於在上方，但同個系統中需保持統一）

• 在輸入框內增加暗提示以幫助提醒用戶

• 在輸入框末尾提供輸入提示的圖標供用戶點擊查看輸入提示信息

• 在輸入框下面顯示幫助信息提醒用戶

  注意：這里做一個規范：輸入提示文案較少的直接在輸入框中加暗提示用戶。提示文案較長統一放在輸入框末尾，借助一個圖標或者提示工具顯示提示文案。輸入錯誤提示統一放在輸入框的下方。

搜索（Search）

搜索可以讓用戶在巨大的信息池中縮小目標范圍，並快速獲取需要的信息。

選擇錄入

單選框（radio button）：所有選項默認可見，單選框應多余2個，少於5個

復選框（checkbox）：在表單提交，和狀態轉換情況下使用

開關（switch）：當用戶切換「開關」按鈕將直接觸發狀態改變

選擇列表（Dropdown）：允許用戶選擇一個或者多個選項，選項應該多余五個，選項按邏輯排序，內容顯示完整。

滑塊選擇（Slider）：設置諸如音量，亮度，色彩飽和度等需要反映強度等級的選項，當用戶需要精確數值的時候可以和數字輸入框配合使用

穿梭框（Transfer）：穿梭框用直觀的方式在兩欄中移動元素，完成選擇行為。穿梭框正常使用左右布局，如有需要可上下布局

日期選擇器（DatePicker）：日期選擇器為用戶提供了一種可視化的方式去瀏覽和選擇一個日期或者日期范圍。盡量比較主觀性的存在

文件上傳（Upload）：上傳是將本地的相應信息(包含本地和雲儲存)通過網頁或者上傳工具發布到遠程服務器上的過程

數據展示

數據展示需要注意：

• 依據信息的重要等級、操作頻率和關聯程度來編排展示的順序。
• 注意極端情況下的引導。如數據信息過長，內容為空的初始化狀態等

表格（Table）：表格中的時間、狀態、操作欄需保持詞語完整不過行；當數據為空時，可使用『- -』來表示暫無數據。

折疊面板（Collapse）：導航中使用，適合冗長的，無規則的內容管理。對於折疊內容批次之間關聯度較低時，使用手風琴模式，手風琴模式只允許單向內容區域展開。

卡片（Card）：根據柵欄進行排列，一行最多不超過四個。在有限的卡片空間內需注意信息之間的間距，若信息過長可做截斷處理。例如『Ant Design 適用於中台…』

走馬燈（Carousel）：適用於官網首頁和產品介紹頁等展示型區塊。輪播的數量控制在3-5個之間，設計上提供暗示，讓用戶對輪播的數量和方向保持清晰的認知。

樹形控件（Tree）：用戶可同時瀏覽與處理多個樹狀層級的內容。適用於任何需要通過層級組織的信息場景，如文件夾、組織架構、生物分類、國家地區等等。

時間軸（Timeline）：垂直展示的時間流信息，一般按照時間倒敘記錄事件，追蹤用戶當下以及過去做了什么。每一條信息以時間為主軸，內容可涵蓋主題、類型、相關的附加內容等等。適用於包括事件、任務、日歷標注以及其他相關的數據展示。

數據格式

設計目標

規范數據表達，保證直觀准確一致的理解數據

數值

數值用來表示計量大小，可單獨出現或搭配數字符號進行使用。

• 使用千分位幫助用戶閱讀（123133：123,133）
• 計量單位使用小寫字母（123133kg：123,133kg）
• 用分數的形式表示事項的進展（12/33）
• 表格中的數值分布排列時，統一采用右對齊方式，方便用戶快捷讀取比較數據
• 表格中的數值計量單位需要放在表頭中，默認右對齊

金額

貨幣單位的使用和表示

• 重要的結算憑證和各種交易票據需要使用大寫數字確保數據無法被修改，格式「貨幣名稱+金額數字」

• 小寫金額格式「貨幣符號+數字」

• 大額計量中，如果有萬億級別可以使用萬億作為單位(千不能作為單位)

日期和時間

絕對時間

針對時間進度較高的用戶，強調時間發布的精確時間點，有回顧過去內容並通過絕對時間檢索信息的訴求

日期格式：標准化如下：

• 年月日：默認使用「yyyy-mm-dd」格式，如：2020-04-09

• 專用名詞：含有月日的專用名詞，應采用間隔號「·」將月、日分開，並加引號，如：“6.1 兒童節”

• 日期范圍：兩個時間通過波浪號連接～，如：2020-04-09～2020-04-10

  時間格式：默認使用二十四小時制

• 二十四小時制：HH:mm:ss，如：14:28:00

• 十二小時制：h:mm:ss，如：2:28:00 PM | 2:28:00 AM

標准格式：日期和時間連在一起時，兩者之間用空格隔開，如：2020-04-09 14:28:00

相對時間

時間精度並不是很重要，重要的是信息的即時性

• 一分鍾以內，展示形式：剛剛
• 一個小時以內，展示形式：N分鍾前
• 24小時以內，展示形式：N小時前
• 24小時以外的時間，展示形式：用 mm-dd HH:mm 的形式表示，即「04-09 14:28」
• 超過一年的時間，展示形式：用 yyyy-mm-dd HH:mm 的形式表示，即「2020-04-09 14:28」

數據脫敏

數據脫敏是指對一些比較敏感的數據進行變形虛化等相關操作，實現對敏感數據的可靠保護。這里將按照通用的產品規范進行脫敏操作，可根據實際的業務場景進行調整。

全部脫敏：對於金額、時間等重要敏感信息，需要對所有的數字進行脫敏操作，數據用一個「***」代替。

部分脫敏：一般用於需要部分信息進行識別的狀況，只需要對部分信息進行脫敏處理，但數字真實位數保留。數據脫敏部分用「*」代替。

• 姓名，兩個字的顯示第一個字符，后面的隱藏，三個字的顯示第一個和最后一個，中間隱藏
• 手機號，保留手機號前3位與后4位
• 身份證號，保留前三位和后三位，僅能識別該人的省市與是男是女
• 聯系地址，保留省市區
• 郵箱，保留主機名和前三位字符
• 銀行卡號，保留前六位和后六位，僅能識別發卡行與小部份個人賬號標識

數據狀態

無數據

無數據使用「--」表述

數據加載

數據加載用「骨架屏」顯示，骨架屏是和loading一樣的功能，不過骨架屏可以提前讓用戶知道頁面的布局

文案

在界面中，我們需要通過對話的方式與用戶產生共鳴。精准、清晰的語言會更容易讓用戶理解，合適的語氣更容易讓用戶建立信任感。因此在界面設計時，文案也應當被重視。 在使用和書寫文案時有以下幾點需要注意：

• 從用戶角度出發
• 表述一致
• 重要的信息放在顯著位置
• 專業、精准、完整
• 精簡、友好、正面

按鈕

設計目標

• 指導用戶采取你希望他們采取的行動。
• 幫助用戶避免犯錯。

常規按鈕

次按鈕：用於非主要動作，如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇

主按鈕：突出“完成”、“推薦”類操作；一個按鈕區最多使用一個主按鈕

文字按鈕：弱化的按鈕，采用更輕量的按鈕樣式，可用於需大面積展示按鈕場景，例如表格組件中的操作列

圖標按鈕：圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面

• 需要在較小的空間內展示盡量多的按鈕
• 使用純圖標按鈕必須有 Tooltip 提示按鈕含義

按鈕中添加圖標：用於對按鈕含義補充解釋，提高按鈕識別效率，不要強行為了美觀給按鈕添加圖標

按鈕強調

常規按鈕類型呈現出不同的強調程度，使用者可以據此變化出合適的按鈕類型

Do&Don't

• 不要在一個按鈕區放置超過一個主按鈕
• 不要在按鈕中放置兩個圖標
• 操作無主次，次按鈕是最安全的選擇
• 按照主次展開全部操作，將次要操作收納至下拉按鈕中

特殊按鈕

危險按鈕：警示用戶該操作存在風險

幽靈按鈕：置於復雜或較深的背景中，避免按鈕突兀地破壞背景的整體性。該場景下可靈活定制樣式

行動號召按鈕：經常獨立出現，行動號召按鈕就像是電腦在對用戶大聲說“跟我來吧”，有點命令用戶點擊的意味，通常出現於 landing page 或者 一些引導性場景。最大可以將按鈕放寬到與父區域等寬。一個屏幕空間中，建議只有一個行動號召按鈕，例如：模板顯示界面的新建模板按鈕

按鈕位置

將按鈕區放置於用戶瀏覽路徑中，便於被用戶發現，如 “F 瀏覽模式” 和 “Z 瀏覽模式”

• 表單中的按鈕跟隨，頭部和尾部按鈕需要靠右放置
• Header：主題的標題和摘要信息內容區的導航等
• Body：具體內容
• Footer：主題的補充信息和工具欄等
• Body 區部分內容被折疊或隱藏，例如單屏無法展示完整內容；
• Body 區的內容復雜度高，例如有多個分組，分組中又有獨立的按鈕區，這時候需要將該主題的“完成”操作從 body 區區分出來，避免混淆按鈕所能影響的內容范圍。

按鈕順序

• 對話習慣：按鈕放置順序類似於電腦和用戶的對話，優先詢問用戶可能需要執行的操作，或你希望用戶執行的操作，最后向用戶提供存在風險的操作。

• 方向性含義：例如，具有返回意義的按鈕，應該放在左側，暗示其方向是回到之前，例如上一步。

• 多個按鈕形成一組時，將按鈕排列在一起即可。

• 當需要布置的按鈕數量過多，可以把相關的動作組成一組，並采用相似的視覺設計。

  

按鈕文案

文案需清楚傳達用戶按下按鈕時系統將執行的操作。

• 必須使用動詞。（下拉按鈕除外）

• 與語境緊密關聯，用語簡練。

• 描述任務結果：發布、登錄、注冊

  發布、登錄、注冊

• 主要操作也為否定含義時，強調后果：你確定要刪除它嗎？刪除 / 取消

  你確定要刪除它嗎？刪除 / 取消

數據展示模板

設計原則

• 組織性：有邏輯地定義布局，有組織地排布內容
• 突出重點：將視圖重要部分放在頁面的頂部和左上方
• 信息准確：使用正確的圖表類型和注釋保證數據的准確性、清晰度和完整性

注意：

• 數據高度概括時，通過指示卡+數值的方式展示
• 頁面中盡量突出核心指示
• 頁面總模塊需要控制在5-9個之間，防止信息過少過載
• 使用查詢功能，讓用戶在觀察全局的同時也能查看細節

典型模板

概覽

指標重要性平均時采用左圖布局，需要強調主題時采用右圖布局

模板-指標大盤：用來監控全局數據，並附帶圖表來輔助解讀。涉及核心數據；指標卡模塊；篩選器；圖表區；

模板-監控：用來監控全局數據，通常是圍繞着一個主題，展現多個維度的關鍵指標，並幫助用戶快速發現異常。涉及核心數據；指標卡模塊；圖表區；地圖；儀表盤；

分析

根據”總-分“結構將數據分析頁面拆解成多個部分，多維度展示數據全貌

模板-多維分析：針對同一主題的多維度分析，涉及核心數據；指標卡模塊；篩選器；圖表區

明細

數據明細用來展示單個指標總覽和明細。常用於數據報表細節信息的展示，根據業務訴求可配置文本、列表、可視化圖表等。

模板-數據明細：常用語數據報表細節信息展示，涉及篩選器；圖表區；數據明細表；

模板設計規范

頁面布局

根據使用者身份的不同選擇合適的頁面類型

卡片組合方式

• 一張卡片放置一個主題內容

  

• 也可將相關性高的數據組合呈現在一個卡片中，並使用通欄分割線區隔。

  

可視化組件選擇

當設計者對頁面的結構有初步的思路之后，可根據信息粒度的大小來選擇不同的可視化組件。信息粒度從大到小對應：指標卡和排行榜、圖表、文本明細。

詳情頁模板設計

設計原則

• 直截了當：信息盡量平鋪展示，如無必要，不要做大量隱藏、折疊等操作。
• 層次分明：按照接近原則，對信息分層分組展示，降低單個頁面內信息復雜度。
• 化繁為簡：減少復雜結構的使用，盡量使用相似結構和模塊，降低結構差異對用戶的干擾，讓用戶更聚焦於信息本身。

設計思路

基礎布局

基礎詳情單頁直接平鋪所有需要展示的的信息，推薦使用這種詳情展示方式。

模板-基礎詳情：將主體內容呈現於一整張卡片中，使用不通欄分割線將相關內容分組。需要展示內容量少，復雜度低的信息時使用。

模板-單據詳情：展示某個審批單據的詳細信息，將內容復雜度較高的各模塊使用卡片區割開來。適用於審批流程和審批明細展示，以及部分審批操作。涉及到通過、駁回、轉交、加簽、掛起、撤回等操作

復雜布局

將信息復雜度較高、相關性較弱的信息拆分為多個部分，並通過 頁簽 、分步、卡片分區、卡片內分組等形式按照相關性分組，用來處理復雜度較高的詳情內容。

模板-高級詳情：當詳情頁內容量大復雜度高時，不得不拆分為多個頁簽，作為輔助導航引導用戶瀏覽信息。

模板-發布流程：將內容分階段組織，了解不同階段的事項。適用於需要協同的流程。

設計建議

模板選擇：根據信息的復雜度和相關性模型，選用相應的信息呈現方式，選用合理的布局方案來承載詳情頁的內容。

區隔方式：根據各個信息之間的相關性，判斷各個信息模塊之間的親密度，通常情況下，相關性強的內容盡量靠近，相關性弱的的內容盡量拉開層次。

• 不通欄分割線：將相關內容分開；
• 通欄分割線：將內容分成多個部分；
• 卡片：放置一個主題；
• 頁簽：對象描述信息最頂層組織方式，如按版本組織、按意圖組織、按階段組織；

內容組件：根據不同的信息類型和復雜度選用對應的信息呈現方式。按復雜度由低至高，提供以下組件供選擇：

導航欄：200px，背景顏色：#2A333D

頂部控制層：65px，背景顏色：#2A333D

正文部分：左邊距：20px，上邊距為0px，背景顏色未定

所有圖標大小：width：30px；height：30px，圖標顏色未定

標簽欄：60px；，標簽顏色未定

標簽大小：width：78px；height：32px，上下邊距：14px

面包屑：50px，面包屑顏色未定

剩余部分：正文

色彩體系

顏色映射原則

色調（H）：通過顏色的不同色調來描述不同的分類數據，數據本身之間沒有高低之分，如：水果中的蘋果、桃子、獼猴桃，可以使用紅黃綠來分別表示，紅黃綠就是三種不同的色調。

飽和度（S）：對於有序的數據類型建議使用飽和度來區分

明度（B）：對於無序數值型建議使用明度來表示

飽和度和明度一般會混合使用，為了更好地區分。

色板類型

分類色板

常用於餅圖的不同分類、填充地圖中的不同國家、關系圖中的不同角色等

基礎10色：

擴展20色：

順序色板

用來表示同一事物中的數值大小或梯度變化，如排行榜等級變化、一個國家或地區的新增人口數對比、風險等級變化等

單色順序色板：

鄰近色順序色板：通過兩個或兩個以上的色相，可產生更多色彩分級，表達更多的連續數值，常用於熱力圖中的熱度變化

發散面板

一般是兩種互補色（也可以是對比色）去展現數據從一個負向值到 0 點再到正向值的連續變化，常用於氣溫的冷熱、海拔高低、股票漲跌等

疊加色板

將兩個順序色板通過圖層疊加產生一組新的色板，一個顏色表示兩種變量數據，一個色板表示兩種數據的變化。常用於觀察一個事物兩個維度變化的相關性，如胖瘦和高矮兩個維度的人數分布中，瘦且高的人群分布。

例如：下圖，越往右上角的顏色表示身高越高體重越重，越往左下角表示身高越低體重越輕，也間接的顯示了體重和身高的大致關系

強調色板

對比突出重點和特定數據，將重點關注的數據標以高飽和度的強調色，其他普通數據標以低飽和度、低透明度的基本色，以此突出重點關注的數據，常用在不同類型之間的對比。

推薦9色：

推薦19色：

語義色板

色彩規范

避免使用過多顏色：高亮數據不超過8個，多余的默認使用灰色，通過交互查看

數據映射規則從簡：同種數據映射規則只能使用一種

選擇准確的色板：選擇准確的色板類型，如下圖使用分類色板不適用連續色板

解釋使用到的顏色：當圖表中出現不同顏色時，需要向讀者解釋顏色代表的含義

保持顏色的一致性：對於統一度量，使用同樣的顏色方案，而且在整個頁面（通常是儀表盤）使用時，注意保持整體顏色方案的一致性

順序色板需均衡：均衡選色可在 PhotoShop 的拾色器中使用 Lab 模式下固定色相不變，調節 L 值進行等距取色

組件設計模式

導航

全局導航

側邊導航

• 很多菜單時使用，建議菜單多於 6 項時使用；

• 可以承載多個層級，但建議 1-3 個層級；

• 企業級產品推薦使用側欄導航，其可見性更好易於掃讀，各菜單重要性受菜單排列順序影響較小。

  

頂部導航

• 各菜單權重常常與排列順序呈正相關，即排列順序影響用戶使用頻次；

• 建議 2~7 項內容使用；

• 建議 1-2 個層級；超出 2 個層級時，建議采用彈出式導航。

  

彈出式導航

• 用於拓展導航承載層級，適用於大型網站。

• 站點地圖式導航可以讓用戶對整個網站的可用功能一目了然。

• 不要讓用戶延着狹窄的懸停路徑獲取導航菜單；

• 不要讓用戶逐層打開每層菜單去查找，低效又困難；

  真確使用：

  錯誤使用：

實用工具：通常放在網站的右上角。內容通常包括：全局搜索，通知中心，網站幫助，客服信息、購物車，收藏夾，登錄工具，語言切換。注意：不要將頁面內的操作放到實用工具中。

子站點導航

沉浸式導航：用於處理較為復雜或需要較大工作空間的任務。

多級站點導航

• 菜單數量較多的子站點使用；

• 子站點設計上，應明顯區別於全站導航，使得進入子站點需要成較大的過渡波動，提示用戶進入了新的空間。

  

頁內導航

頁頭：頁頭位於頁內容上方，主要作用是申明頁面主題、頁內信息導航、頁面級內容操作。

樹形控件：頁面內多層次結構展示

錨點：在各個頁面分區之間跳轉，當平鋪呈現的內容過長時使用。

回到頂部：快速回到頁面頂部

走馬燈：循環播放一系列內容

下鑽式導航

點擊進入信息架構下層內容，默認站內跳轉，站外新開標簽頁，典型場景為列表下鑽至詳情。

返回類導航

面包屑：反映當前頁面在網站結構中的位置，在少於三個層級是無需展示，此時的全局導航能直接呈現位置。用戶可通過面包屑返回上級頁面。

返回按鈕：一般標題會和面包屑一起出現，有面包屑時標題默認不推薦使用返回按鈕。頁頭中的返回按鈕相當於一個短面包屑，用於返回上一層級頁面。適用於子站點場景，該場景隱藏了全站導航，用戶需要通過返回按鈕回到上級頁面。

聯想類導航

步驟條：按照預先定義的順序引導用戶一步一步前后移動。在一系列頁面的每一頁上都展示步驟條，並標記當前頁面在這條線性路徑上的位置。適用於：

• 用戶訪問路徑是線性的；

• 步驟條將復雜的任務分解為易於處理的小任務，減少用戶出錯，更快完成任務。

上下篇：協助我們移動到其他關系緊密的網頁。

消息反饋

用於在必要時向用戶反饋操作結果或傳達消息。

設計目標

在不同事件下用戶都能感知與操作場景和緊急程度匹配的結果反饋或消息提示，做到合理有效的信息傳達。

反饋方式

在設計時需要考慮用戶試圖完成的任務以及需要引起注意的方式，采用何種反饋方式。反饋方式列舉如下圖：

使用方式

成功

對話框：在不跳轉頁面打斷用戶工作流程的前提下，告知用戶重要的成功結果。

全局提示Message：在不希望在用戶執行操作時中斷用戶前提下顯示一條簡短的提示消息。

跳轉：獨占式 Inline Text & Illustration

• 長流程步驟表單在最后告知用戶成功結果；

• 需要展示較復雜的補充信息（例如配置信息詳情）。

  

失敗

對話框：提醒用戶完成當前工作流之外的重要操作（例如警告信息不安全）。

警告提示alert：提醒用戶系統中需要立即引起注意的錯誤信息。

表達校驗提示

• 用戶輸入的內容不符合字段或表單的要求；

• 用戶跳過了必填字段；

• 系統檢測到表單數據中的錯誤。

  

通知提醒框 Notification

• 向用戶告知重要的問題或失敗狀態，希望用戶立馬做出決策；

• 反饋后台進程失敗&告警結果。

  

跳轉

獨占式 Inline Text & Illustration

• 長流程步驟表單最后出現第三方原因造成的失敗結果（例如應用引擎創建失敗）；

• 需要展示失敗詳情。

  

后台操作

通知提醒框 Notification

• 向用戶告知重要的問題或失敗狀態，希望用戶立馬做出決策；

• 反饋后台進程結果。

  

通知中心

向用戶通知相關活動信息（例如用戶需要審批的項目或者用戶申請的審批進程）。

空狀態

簡介

任何內容區域（頁面、區塊、組件、單數據）沒有內容/數據顯示給用戶時，就會出現空狀態。

• 空狀態應給予提示，幫助讓用戶了解空狀態原因，避免產生誤解與迷失；

• 給予用戶推薦操作提示，幫助用戶擺脫空狀態。

  

使用場景

新手引導：首次使用應用或功能場景的空狀態非常有用，因為它向用戶展示了該功能和流程，並且可以幫助用戶快速上手。為了幫助首次使用新用戶，空狀態可以使用功能引導、幫助文檔等方式填充原本為空的頁面。

完成或者清空：這種空狀態是用戶自願從功能上刪除數據的情況。例如，客戶完成了任務清單上的所有項目，閱讀了所有通知。一般此類場景不需要進行操作引導，只需要用圖形元素或提示信息進行空狀態說明。

無數據：內容區域無數據的場景使用，由圖形元素、提示信息、建議操作三類元素組合展示，根據使用場景決定是否提供建議操作。

表單頁

簡介

表單頁是一種用於信息添加、錄入的頁面類型。用來確保用戶按照要求錄入信息提交給系統使用或引導用戶進行應用設置。

設計目標：幫助用戶明確當前頁面任務，快速查找和定位修改目標，輕松准確地理解表單項含義及生效后果，同時簡化填寫流程，確保用戶准確、輕松、快速地完成任務。

設計原則

• 高效：通過合理地信息組織形式和表單組價應用，使用戶可以快速完成表單頁任務
• 明確：快速定位重要信息和目標選項；標題、選項、提示等內容准確傳達含義；讓用戶感知不同大小操作的前因后果，並及時響應相關反饋。
• 安全感：合理的操作后果保障機制，例如針對復雜表單提供分布或即時保存機制；針對不同場景任務提供返回、重置、取消、清空、撤銷等后悔葯和速效葯功能。

注意事項

• 一個表單頁中針對同一種內容類型的表單項不要使用不同的組件或表現形式，會增加用戶理解成本。

  

• 表單項的標題、提示不要使用不易理解的詞匯或過長，造成理解成本，如不可避免使用少見詞匯，可使用幫助說明等元素輔助設計。

  

• 預填提示避免正確的廢話，例如一個叫姓名的表單項輸入提示是“請輸入姓名”。

  

布局設計

表單類頁面模板聚焦於提交一次表單的過程體驗。按照任務的復雜度，提供四種解決問題的布局方式：

• 普通布局
• 任務拆解和編排
• 特定場景

普通布局

平鋪所有需要填寫的信息，適合內容項較少、內容項無法按照相關性分組的表單。

模板-基礎表單：平鋪所有需要填寫的信息，適合內容項較少、內容項無法按照相關性分組的表單。

任務拆解和編排

將大型、復雜任務拆解為多個部分，並按照相關性分組，減輕用戶輸入負擔。盡管每部分內容單獨處理，但最終一起完成提交。適用於大型、復雜表單。通過適當的任務分割，可以降低用戶出錯率。

模板-基礎分步表單：將用戶需要填寫和確認的信息按照線性流程組織，利用步驟條告知用戶完整流程和進度，常常在最后提交前讓用戶再次確認信息，並在流程結束給與明確的結果反饋。適用於具有明確的線性邏輯的任務。

模板-分組表單：單次任務的表單頁中需要填寫內容眾多，且不同內容之中存在一定可分類歸納性。

模板-可編輯列表

• 動態增減：建議條目表單數 ≤3 項，並且每個輸入框不需要單獨的標題使用。

  

• 可編輯表格：建議條目表單數 2 ~ 5 項 時使用，以使得每行內容可被完整呈現。

  

• 折疊面板編輯：建議條目表單數在 6 ~ 8 項 時使用。

  

• 抽屜編輯：建議條目表單表單數 >8 項 時使用。

  

• 規則樹：運用於規則編輯場景，適用於頁面中需要添加一個或多個對象，且每個對象都需要添加或編輯多組數據的情況。

  

特定場景模板

模板-設置

• 個人檔案、應用配置等設置類頁面，使用頻率較低，一般用戶操作后不會頻繁修改。

• 每個頁面選擇一種設計模式：即時生效模式和提交生效模式，設置項之間有關聯關系使用提交生效模式

• 根據設置項數量確定是否分組：小於7，不分組；7-15，建議分組；大於15建議使用頁簽分組

  

模板-登錄：Ant Design 標准登錄模板

模板-注冊：Ant Design 標准登錄模板

布局設計建議

在單個表單頁中需要根據內容量進行合理地布局，以兼顧頁面展示和用戶效率。表單頁布局可由簡到繁划分為 4 個梯度，每一級梯度都兼容前一種布局方式。

基礎布局：在一個區域內從上到下單列布局，引導用戶縱向閱讀。

弱分組：在空間有限時，較短寬度且具有相關性的表單項可多個組合在一行中，形成分組的暗示。

區域內分組：當一個區域中內容較多且可被分類歸納時，可通過區分標題來進行區域內分組。

卡片分組：當一個頁面中內容眾多（通常大於兩屏）且可被分類歸納時，可通過卡片分組來承載，每個卡片需要包含一個大標題。

布局方式判斷：從信息的復雜度和關聯性兩個維度去梳理。隨后可選擇相匹配的模板，進行頁面快速搭建。

工作台

工作台常被作為應用的主頁，是一個為用戶提供便利的交通樞紐。工作台提供常用信息入口，以中心輻射的方式導航至應用的各功能模塊；呈現用戶當前需要關注的信息，縮短獲取關鍵信息的路徑；同時允許用戶在工作台直接操作一些高頻任務。

• 可尋性：用戶是否能定位到他們想要的信息。
• 降低記憶負載：理解用戶再次訪問的核心目標，為可能的目的地提供最短導航路徑。

降低

模板-工作台

什么時候使用

• 為用戶再次訪問縮短導航路徑；
• 為用戶提供常用導航入口。

涉及哪些功能

使用幫助；核心數據；快捷入口；待辦清單；關注；運營模塊。

設計建議

• 展示與日常工作相關模塊，將總模塊數量控制在 5-9 個；
• 盡量在首屏呈現最常使用的內容；
• 提供基於角色的差異化視圖。

設計建議

選擇合適的導航方式

這類頁面一般會提供兩類導航形式。

① 用戶知道他想要使用的功能，需要利用導航獲取。例如：

② 發現類導航，用戶須完成某任務，但不知道使用哪個功能來完成。例如：

按照使用頻次布置內容

用戶在日常工作中最常使用的內容，按照使用頻次將內容布置以下各區域。

列表頁

列表頁可以查看和處理大量的條目，常有導航至詳情的作用。用戶可在列表頁對條目進行篩選、對比、新增、分析、下鑽至條目完整詳情頁等操作。幫助用戶更高效的查看、處理、查找條目。

• 易掃讀：采用格式一致外觀，突出有利於對象識別的關鍵信息。用富交互分層展示信息以減少認知負荷。
• 可尋性：列表以易於瀏覽的邏輯排序。提供合適的搜尋組件幫助用戶快速查找信息。

基礎布局

單列布局：從上往下堆疊，數據過濾模塊在最上方，過濾數據后，用戶再由總體到具體的的瀏覽邏輯理解和分析。

雙欄布局：將數據過濾模塊放置在側欄，當過濾條件過多，橫向空間充裕時使用。

模板-查詢表格：每條條目需要都需要露出很多字段；用戶在搜尋條目時有准確的查詢范圍時使用。

模板-標准列表：提供每條條目的概覽信息，點擊列表可導航至條目詳情。頁面內常提供統計功能，供用戶了解總體進展。可作為簡易版的工作台使用。

模板-卡片列表：用戶無需以特定順序瀏覽條目，將每個條目以富有吸引力的方式呈現。

模板-搜索列表：以搜索為主尋找特定條目信息，通過關鍵詞一次性在眾多主題下的條目中搜尋結果。可對大量不同種類的內容進行搜索和篩選，滿足對模糊目標的查找需求。

模板-成員管理：成員管理是用於展示和管理某對象中所包含的成員的基本信息和權限信息的頁面，管理操作通常包括添加成員、刪除成員、成員角色與權限賦予等。

設計建議

批量操作：頁級的批量操作影響整個頁面，建議置於頁底

結果頁

結果頁是用一個頁面反饋操作結果，是反饋模式中最強的一種。當完成一個流程操作后，需給與用戶明確的結果反饋時使用，例如分步表單的最后一步。當有大量的信息需要在結果頁展示時使用。向用戶傳達任務完成結果，引導用戶進行下一步操作，通過有效的反饋建立起用戶對系統的信任。

• 慎重使用：僅適用於吸引用戶注意程度強、信息量較大、頁面永久停留的場景中，其余場景不建議使用。
• 即時結束：當結果狀態為成功時，可以默認提供幾秒（建議 3-5秒）后自動跳轉。
• 精簡信息：結果頁信息需精簡，僅展示結果相關內容，特殊場景可以增加補充信息。

設計建議

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

  

• 操作引導建議不超過 2 項，過多操作會對用戶選擇造成困擾。

  

• 輕量的反饋不建議使用結果頁，可以使用全局提示、警告提示、通知提醒框等交互方式。

  

• 若結果狀態為成功時，可在主按鈕上告知用戶幾秒后自動跳轉。

  

設計模板

基礎布局

結果頁可提供以下內容：

1. 結果反饋：明確告知用戶提交結果；

2. 結果解釋（可選）：若需要對結果簡要解釋使用；

3. 建議操作：引導用戶繼續完成后續工作；

4. 補充信息（可選）：在通知結果的同時，有補充信息需要反饋給用戶；營銷模塊。

   

模板-基礎結果頁

顯示結果狀態並引導用戶進行下一步操作

模板-復雜結果頁

除結果狀態和引導操作等基礎信息外，同時展示相關推薦、流程進度、錯誤詳情等信息。

補充信息類型

圖表頁

標題

標題內容：言簡意賅，不可被截斷；
標題位置：正、副標題一般放置於卡片左上角，標題寬度不超過卡片寬度。

注意：如果標題長度真的需要超過卡片寬度，則將標題中間的文字省略，如：我是...標題

注釋

注釋內容：引用內容、數據來源等，保證正確性；
注釋位置：一般放置於卡片左下角

軸

連續軸、時間軸：自動抽樣 + 不旋轉

分類軸：自動旋轉 + 自動省略

元素顯示

折線圖面積圖

柱狀圖

條形圖

散點圖

數據標簽存在則省略軸標簽

圖例

圖例位置

圖例太多：使用翻頁功能實現

圖形設計指引

圖形比例：以柱形圖為例，柱子比例和兩邊間距的比例為 1：2：1，柱子寬度為總寬度的 60%

填充樣式：根據圖形元素在實際圖表中的面積占比，我們定義了相應的填充樣式。圖形占比越大的圖表，對應填充的透明度越高。如，在柱/條形圖中，圖形的填充比例為 95%；在面積圖中，圖形的填充比例為 25%。

異常頁

用於展示頁面異常狀態，解釋發生了什么異常，為用戶提供相應建議或操作，避免用戶感到迷失和困惑。

• 友好：使用友好、清晰的語言來表達，不要使用難懂的術語，讓用戶產生困惑。
• 提供邀請：引導用戶進入下一個交互層次的提醒和暗示，以表明在下一個界面可以做什么。

異常頁

當頁面出現異常時展示，其包含以下要素：

1.配圖：為沉重的異常增添一點樂趣，緩解用戶煩躁心理；

2.異常代碼/問題：當異常有具體的 HTTP 錯誤代碼時，可予以展示；

3.異常描述：簡明扼要地描述異常原因，方便用戶作對問題作反饋；

4.建議操作：協助用戶處理異常，或把用戶引導回正確的路徑上。

模板-404：用戶請求訪問的頁面、項目、資源等未找到。

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

模板-500：服務器出錯，無法向用戶提供服務。

模板-瀏覽器不兼容：當瀏覽器不兼容導致用戶無法打開網頁的時候使用。當瀏覽器不兼容，對操作影響程度不同，當並不嚴重影響使用時，可使用全局提示，允許用戶繼續使用。

空狀態：當沒有內容/數據顯示給用戶時，展示空狀態。空狀態也屬於一種特定的異常頁。

加載失敗

當頁面因為網絡等各種原因加載內容失敗時展示，一般結合重試操作。

設計建議

頁面的整體交互流程可能是由不同狀態構成的，設計者在設計頁面時不能只關注理想狀態，應完整考慮各類突發場景，防止用戶在使用時體驗中斷。

理想狀態：所有頁面模塊正常展示的狀態；

部分狀態：部分模塊不存在或部分內容為空狀態，設計參考空狀態

加載狀態：用 Spin 或 Skeleton 反饋加載中狀態；

錯誤狀態：系統錯誤、無權限等；

空狀態：內容完全為空的狀態，建議使用引導類的空狀態提示，如果是新用戶參考使用新人引導頁。