編輯導語：本文作者在對一個電商系統進行系統重構的過程中，發現存在着一些問題，導緻各個後台系統的用戶體驗不統一，與業内優秀的電商系統差距較大。于是決定使用Ant Design Vue這套框架對現有系統再進行一次優化，本文講述了這之中表單的設計規範，一起來看一下吧。

2016年，我進入一家中型跨境電商公司，開始負責整體電商系統的系統重構産品工作，将原本一套開源的電商系統架構重構解耦成顆粒度更小、松耦合的分布式微服務系統架構，因為原本的系統架構在性能、效率、體驗上已經遠遠不能滿足公司的成長速度。

整體系統架構包含類目系統、商品系統、庫存系統、促銷系統、訂單系統、售後系統、會員系統、财務系統、CMS系統、CPS系統等等。

2019年，全部重構完成。整個過程，就像給一個高速行駛的汽車換輪胎。

重構過程中産生了一些遺留問題：

1. 更關注業務、架構、流程、功能、邏輯，對視覺、交互、體驗關注較少。重構中前端開發資源投入較少，所有後台系統均由後端開發直接渲染頁面。
2. 後台系統太多，不同産品經理工作習慣、交互能力、審美水平各不一樣，各自負責的後台系統用戶體驗不統一。
3. 所有後台系統雖然都是用Bootstrap這套前端框架，但是Bootsrap組件用法非常多，導緻不同産品經理在實踐時存在差别。
4. 所有模塊的重構産品方案，我雖然都有評審，但是評審時更關注流程、功能、邏輯，對視覺、交互沒有制定統一的規範。

以上四點，導緻各個後台系統用戶體驗不統一，與業内優秀的電商系統（如shopify、有贊）差距較大。

基于此，在調研了大量的前端框架情況下，我們決定使用Ant Design Vue這套框架對現有系統再進行一次優化，于是有了這篇設計規範。

前文“後台産品設計規範-Ant Design實踐到落地”中已經說明了“布局”、“适配”、“間距”、“常用組件”、“文案”等基礎規範，詳情可查看前文。此文專門講述表單的設計規範。

表單分區是基于布局、适配、間距規範之上，經過大量分析原有後台表單頁面，最後總結的一套表單分區規則，我把它總結為表單最核心的設計規範。

詳情可查看下圖：

圖例講解：

表單布局：畫布1440px，導航區200px，表單區兩側間距分别24px，表單區1192px。

表單分為兩欄表單和通欄表單。為了保持結構化的格式，防止兩欄表單與通欄表單信息交錯而出現的設計原則與視覺不統一問題，此處約定“一個信息分組隻能在兩欄表單和通欄表單中二選一，不能出現一個信息分組出現兩種表單布局”。

兩欄表單規範&樣例：

通欄表單規範&樣例：

1. 信息分組

表單頁中需要填寫内容衆多，且不同内容之中存在一定可分類歸納性，可使用信息分組将表單内容按分類整合。

一個信息分組隻能在兩欄表單和通欄表單中二選一，不能出現一個信息分組出現兩種表單布局。

2. 輸入提示

使用『良好的默認值』、『結構化的格式』、『輸入提示』、『輸入提醒』等方式，避免讓用戶在空白中完成輸入。

當說明文案較短時，可直接在輸入框内展示，如下圖所示：

說明文案較長時，可使用Tooltip提示。提示符号置于文字後，如下圖所示：

通過不同的『校驗』規則和形式進行反饋，避免用戶在點擊提交後才剛剛開始『校驗』，讓用戶提前糾正錯誤。

頁面關閉時，表單數據未保存，需要及時提示，避免誤操作導緻表單填寫内容全部丢失，如下圖所示：

3. 對齊

标題按分區輔助線右對齊，輸入框按分區輔助線左對齊。

4. 效果展示

關聯前端樣式的配置項需要直接在後台中直接展示配置效果。

“效果展示”的作用在于減少系統操作的新人培訓成本，同時為了防止“效果展示”過于突出影響正常表單操作，可将效果展示按分組歸納展示，置于模塊标題右側。如下圖所示：

效果展示樣例：

5. 折疊

上文信息分組中有提到，當表單内容非常多時，可使用信息分組。當同一個信息分組内内容非常多時，可根據使用頻率将低頻使用的内容折疊起來，提高高頻内容的操作效率。

折疊圖示：

展開圖示：

6. 禁用主按鈕

當輸入框非常少時（一般少于 3 個），如果用戶沒有在必填項中輸入内容，可禁用『提交』等主按鈕；當輸入框非常多時（超過 5 項以上），不建議禁用主按鈕。

當輸入框非常少時，用戶一輸入就會有反饋，因而主按鈕的禁用規則非常清晰，容易被用戶理解。

1）未達字符标準時，主按鈕禁用狀态：

2）達到字符标準時，主按鈕可用狀态：

當輸入框非常多時（尤其是輸入項中交叉了必填項和非必填項），不要使用此交互。

1. 輸入框

根據分區尺寸規範，我們定義了5種輸入框寬度，分别如下：

兩欄表單輸入框固定使用“常用标題”，尺寸固定為192px，如下圖所示：

通欄表單可根據情況将5種标題結合起來使用，如下圖所示：

關于超短标題輸入框的使用場景，着重說一句。超短标題用于通欄表單中，多種組件混合使用，表單區長度不夠時，可将金額、數字使用超短标題。慎用超短标題，大部分場景下常用标題可覆蓋超短标題的使用場景。如下圖所示：

2. Radio 單選框&Select選擇器

用于在多個備選項中選中單個狀态。

和 Select 的區别是，Radio 所有選項默認可見，方便用戶在比較中選擇。當選項≥5時，不能使用Radio單選框，需使用Select選擇器。

3. 圖片上傳

Ant Design組件庫中圖片上傳的樣式非常多，為了保持統一性，整體調研完所有圖片上傳組件，我們統一使用如下圖片上傳樣式。

1）單圖：

2）多圖：

1. 新建商品

1）選擇基礎分類：

2）填寫商品信息：

3）完成：

2. 新建滿減活動

1）填寫活動信息：

2）設置活動範圍：

3）完成：

以上是表單的産品設計規範，案例中隻列舉了最複雜的高級表單和分布表單，對于彈窗和簡單表單沒有做更多的闡述，大家可以運用自己的理解，結合公司的實際情況，制定自己團隊的設計規範。

文中的rp格式源文件，可關注公衆号後回複“表單”免費下載。

下一篇的主題是詳情頁的設計規範，詳情頁和表單有極大的差異，表單的目的是高效的數據錄入，詳情頁的目的是高效的數據展示和數據操作，所以詳情頁的規範與表單又有較大的差異。後續專門發文說明。

參考資料：

[1]Ant Design設計規範

[2]Ant Design 設計模式

[3]Ant Design of Vue組件

[4]Ant Design 設計基礎簡版

[5]Ant Design of Vue定制主題

作者：城雨塵，公衆号：城雨塵（ID：bymono）

本文由 @城雨塵 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!