后臺管理系統UI風格規則
Ant Design “設計” 中的一些實用點
1.色值
主色調色板 Daybreak Blue / 拂曉藍
中性色板
色彩應用
- 品牌色：建議選擇色板從淺至深的第六個顏色作為主色 我們常用默認主色：
#1890FF，應用場景：關鍵行動點，操作狀態、重要信息高亮，圖形化等場景。 -
功能色：應用場景：成功、出錯、失敗、提醒、鏈接等
image -
中性色：應用場景：文字、背景、邊框、分割線等。Ant Design 的中性色是按照透明度的方式實現的，具體色板如
圖：
image
更多：https://ant-design.gitee.io/docs/spec/colors-cn
2.暗黑模式
何時使用
- 當需要長時間在暗光環境下工作時，建議使用暗黑模式，減小亮度對比帶來的視覺壓力，保證使用者的體驗舒適。
- 當需要沉浸式的專注工作內容時，建議使用暗黑模式，可以幫助使用者更關注凸顯出來的內容和操作。
3.布局
- 適配：動態縮放
- 柵格：24 柵格體系，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。
- 常用模度：8 倍數的雙數組
4.間距
通過「小號間距」（8px）、「中號間距」（16px）、「大號間距」（24px）三種規格來劃分信息層次
y = 8 + 8 * n。其中，n >= 0，y 是縱向間距，8 是「基礎間距」
在這三種規格不適用的情況下，可以通過加減「基礎間距」的倍數，或者增加元素（e.g. 分割線）來拉開信息層次。
5.表格
- 表格中的時間、狀態、操作欄需保持詞語完整不過行
- 當單元格數據為空時，可使用 - 來表示暫無數據
- 數值默認使用千分位幫助用戶閱讀 123,220
- 計量單位默認用小寫字母 123,220kg
- 金額、數量等數值通常采用“右對齊”方式，快捷讀取,又邊于縱向對比
- 計量單位默認放在表頭，右對齊，小寫字母
—————————————————————————————————————————————
6.文案
- 從用戶角度出發
- 表述一致（描述同一個事物的詞匯、語法、語種、語序、操作的名稱和目標頁面標題的名稱保持一致）
- 重要的信息放在顯著位置
- 專業、精準、完整
- 精簡、友好、正面（不應過于極端）
7.按鈕
按鈕類型
1）次按鈕
常規按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。
2） 主按鈕
突出“完成”、“推薦”類操作；一個按鈕區最多使用一個主按鈕。
3） 文字按鈕
弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場景，例如表格組件中的操作列。
4）圖標按鈕
圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面。
- 需要在較小的空間內展示盡量多的按鈕。
- 使用純圖標按鈕必須有 Tooltip 提示按鈕含義。
5）在按鈕中添加圖標
用于對按鈕含義補充解釋，提高按鈕識別效率。
6 ）特殊按鈕
虛線按鈕、危險按鈕、幽靈按鈕等
按鈕位置
將按鈕區放置于用戶瀏覽路徑中，便于被用戶發現，如 “F 瀏覽模式” 和 “Z 瀏覽模式” 。
什么時候需要在 Footer 中放置按鈕區？（為了要和 Body 區區分開來）
- Body 區部分內容被折疊或隱藏，例如單屏無法展示完整內容；
- Body 區的內容復雜度高，例如有多個分組，分組中又有獨立的按鈕區，這時候需要將該主題的“完成”操作從 body 區區分出來，避免混淆按鈕所能影響的內容范圍。
按鈕順序
推薦操作是閱讀的起點，折疊內容始終在最右側。
按鈕分組
布局相關：
8.導航
驗證導航系統的設計好壞可對其進行壓力測試：像跳傘一樣跳進網站里，驗證導航系統的極限。
1）忽略首頁，隨機直達網站某一頁面；
2）看用戶是否能知道當前位置以及與網站其他部分的關系。在哪個網站的哪個部分？上層網頁是什么？
3）是否知道這個網頁會帶你到哪里去？鏈接文字是否能說明去向?
9.列表頁
基礎布局
頁級的批量操作影響整個頁面，可布置于頁底。
模版
-
查詢表格
每條條目需要都需要露出很多字段；用戶在搜尋條目時有準確的查詢范圍時使用。
image -
標準列表
提供每條條目的概覽信息，點擊列表可導航至條目詳情。頁面內常提供統計功能，供用戶了解總體進展?？勺鳛楹喴装娴墓ぷ髋_使用。
image -
成員管理
image
10.詳情頁
選擇模版
- 基礎詳情：需要展示內容量少，復雜度低的信息。
將主體內容呈現于一整張卡片中，使用不通欄分割線將相關內容分組。 -
復雜布局：復雜度較高的詳情內容
將信息復雜度較高、相關性較弱的信息拆分為多個部分，并通過 頁簽 、分步、卡片分區、卡片內分組等形式按照相關性分組。
頁簽布局示例
區隔方式
根據各個信息之間的相關性，判斷各個信息模塊之間的親密度，通常情況下，相關性強的內容盡量靠近，相關性弱的的內容盡量拉開層次。
- 不通欄分割線：將相關內容分開；
- 通欄分割線：將內容分成多個部分；
- 卡片：放置一個主題；
- 頁簽：對象描述信息最頂層組織方式，如按版本組織、按意圖組織、按階段組織；
總結
簡單總結一下最主要思路和中心思想
1、首選light模式，特定情況（需要沉浸式/暗光）下選擇dark暗黑模式
2、導航 按需，目的是幫助用戶了解網站可用功能、當前位置、關系、去向
3、給內容區域最大的空間
4、根據內容選用合適模版、組件
5、注意布局與間距
6、注意排序、對齊、按鈕、文案等
