本文從Ant Design佈局使用說明、Ant DesignVue常用組件使用說明、文案規範、實踐案例等方面進行了分析，分享了後臺產品設計規範的注意事項。
2016年，我進入一家中型跨境電商公司，開始負責整體電商系統的系統重構產品工作，將原本一套開源的電商系統架構重構解耦成顆粒度更小、松耦合的分佈式微服務系統架構，因為原本的系統架構在性能、效率、體驗上已經遠遠不能滿足公司的成長速度。
整體系統架構包含類目系統、商品系統、庫存系統、促銷系統、訂單系統、售後系統、會員系統、財務系統、CMS系統、CPS系統等等。
3年過去，全部重構完成。整個過程，就像給一個高速行駛的汽車換輪胎。
重構過程中產生了一些遺留問題：
- 更關注業務、架構、流程、功能、邏輯，對視覺、交互、體驗關注較少。重構中前端開發資源投入較少，所有後臺系統均由後端開發直接渲染頁面。
- 後臺系統太多，不同產品經理工作習慣、交互能力、審美水平各不一樣，各自負責的後臺系統用戶體驗不統一。
- 所有後臺系統雖然都是用Bootstrap這套前端框架，但是Bootsrap組件用法非常多，導致不同產品經理在實踐時存在差別。
- 所有模塊的重構產品方案，我雖然都有評審，但是評審時更關注流程、功能、邏輯，對視覺、交互沒有制定統一的規範。
以上四點，導致各個後臺系統用戶體驗不統一，與業內優秀的電商系統（如shopify、有贊）差距較大。
基於此，在調研了大量的前端框架情況下，我們決定使用Ant Design Vue這套框架對現有系統再進行一次優化，於是有了這篇設計規範。
一、Ant Design佈局使用說明
1. 尺寸
原型稿的頁面寬度統一使用1440px，側邊導航寬度的範圍計算公式：200+8n，我們統一使用200px。
2. 適配
統一採用自適應界面-撐滿式，右邊內容區寬度則隨瀏覽器寬度而改變。當內容區寬度不足 1024px 時，瀏覽器底部出現滾動條。
3. 間距
根據頁面信息結構和內容層級，利用大、中、小三種間距來實現信息之間的親密度區分；在 Ant Design 中，主要有以下三種間距：
二、Ant DesignVue常用組件使用說明
Ant Design Vue總共有57個組件，每個組件至少有5種用法。組件的用法在自己的系統中如何使用，需要定義清楚；如果不定義清楚，也會造成體驗的差異。這裡只挑選高頻使用的組件說明，沒有說明的組件可詳細閱讀Ant Design使用說明。
1. Menu 導航菜單
（1）使用內嵌菜單。
（2）左側導航欄的收放交互按手風琴樣式。
2. Icon 圖標
（1）統一使用線框風格圖標。
（2）統一使用SVG格式，確保在Retina屏幕上顯示清晰。
3. Button 按鈕
（1）按鈕有四種類型：主按鈕、次按鈕、虛線按鈕、危險按鈕和鏈接按鈕，主按鈕在同一個操作區域最多出現一次。虛線按鈕和危險按鈕無需使用。
（2）使用1個主操作 + n 個次操作，3個以上操作時把更多操作放到Dropdown.Button 中組合使用。
（3）添加 loading 屬性即可讓按鈕處於加載狀態。
（4）在一些需要用戶慎重決策的場景中，系統應該保持中立，不能替用戶或者誘導用戶做出判斷。『通過』和『駁回』都使用次按鈕，系統保持中立。
4. Dropdown 下拉菜單
（1）下拉菜單彈出位置：靠近屏幕左側的Dropdown按鈕統一使用bottomLeft，靠近屏幕右側的Dropdown按鈕統一使用bottomRight，靠近屏幕底部的可使用topLeft或topRight。
（2）同一組按鈕需要使用相同的彈出位置。
（3）統一使用移入觸發菜單交互。
5. Input 輸入框
（1）輸入框統一採用默認高度。
（2）當輸入內容有可能超出一行時，需採用“適應文本高度的文本域”。
（3）輸入手機號碼、身份證號碼、銀行卡號、金額時可結合Tooltip組件實現格式化展示。
6. Radio單選框
（1）用於在多個備選項中選中單個狀態。
（2）和 Select 的區別是，Radio 所有選項默認可見，方便用戶在比較中選擇。當選項≥5時，不能使用Radio單選框，需使用Select選擇器。
7. DatePicker 日期選擇框
（1）日期選擇組件包括以下四種形式：DatePicker、MonthPicker、RangePicker、WeekPicker。DatePicker、MonthPicker、WeekPicker均使用默認樣式即可。
（2）RangePicker可以預設常用的日期範圍以提高用戶體驗，統一使用今天、昨天、本週、上週、本月、上月。
8. Pagination 分頁
（1）詳情可查看下方的樣式，包含數據總數、翻頁、每頁可以顯示多少條、快速跳轉至某頁。
（2）每頁可以顯示多少條統一使用10、20、50、100。
9. Message 全局提示
（1）自動關閉的延時採用默認的3s。
（2）消息距離頂部的位置採用默認的24px。
10. Switch 開關
switch和 checkbox的區別是，切換 switch 會直接觸發狀態改變，而 checkbox 一般用於狀態標記，需要和提交操作配合，所以在表單中慎用switch開關。
三、文案規範
- 當數據為空時，可使用『- -』來表示暫無數據。
- 時間格式：年月日之間用半角短橫線『-』，時分秒之間使用半角冒號『:』 表示範圍之間使用半角波浪線『~』，並在其前後加上間隔以示區分。
- 金額格式：1,000,000.00 界面顯示2位小數。
- 數量格式：1,000,000.00 界面顯示2位小數。
- 百分比格式：90.0%。
- 使用『你』代替『您』，以拉近與用戶之間的距離。
- 使用『新建』而不用『新增』。
- 使用『編輯』代替『修改』。
- 使用『其他』代替『其它』。
- 使用『此』代替『該』。
- 使用『抱歉』而不用『對不起』，如果是我們系統造成的結果，可以使用『抱歉』，如果是用戶自己造成的結果，則不使用這類詞。
- 使用『登錄』而不用『登陸』，登錄是登記記錄用戶輸入信息的意思，切勿用成『著陸』的陸。
- 專有名詞需使用原有格式，如：iOS、iPhone、iPad。
- 全英文的標題、標籤、菜單項等需遵循英文句式中首字母大寫的規範。
四、實踐案例
1. 表格
（1）樣例
（2）善用縱向空間
儘量不要出現橫向滾動條，便捷的讓用戶一屏可以看到所有的信息，如下圖所示。
（3）查詢
查詢字段的順序需要和列表中字段順序保持一致。統一使用左對齊，這樣可以很好的兼容英語版以及查詢標題非常長的場景。
（4）按鈕組
使用1個主操作 + n 個次操作，3個以上操作時把更多操作放到Dropdown下拉菜單中組合使用。3個並非絕對數值，可根據實際場景酌情考慮。
（5）單行操作
3個以上操作按鈕時把更多操作放到Dropdown下拉菜單中組合使用。
（6）某一項內容過長
表格字段顯示不完不折行，可省略顯示不下的，用戶懸浮／點擊該項時，用『Tooltip／Popover』來顯示完整內容。
2. 表單
表單的規範更復雜一點，包含基礎表單、高級表單、分步表單等，對組件的組合運用也要求更高，後續專門發文說明。
[1]Ant Design設計規範
[2]Ant Design 設計模式
[3]Ant Design of Vue組件
[4]Ant Design 設計基礎簡版
[5]Ant Design of Vue定製主題
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
