中後台產品的表單設計，看這一篇就夠了（附原型規範）

專為互聯網人打造的365天成長計劃，500門視頻課程隨便看，構建你的產品、運營知識體系。查看詳情

關於中後台產品的表單設計，相信這篇文章一定可以給你帶來幫助。

前言

表單是數據錄入和信息提交的通用形式，web端和移動端都很常見，通常由標籤、輸入項、提交按鈕等多種元素構成。

中後台產品是服務於業務的。由於業務的複雜性，表單往往呈現出字段多、類型雜、專業性強的特點，設計上需要考慮更多的內容。

本文通過自己的項目經驗，參考了antd的內容，提煉出了一套適用於中後台產品的表單設計規範。在此共享出來，希望能夠給大家一些幫助。

以用戶的視角來看看表單

從開始填寫到提交完成，用戶的行為和思考的邏輯是怎樣的呢？

1、表單整體查看

用戶在看到一個表單時，需要迅速地知道一些大概情況。例如：表單是做什麼用的？需要填寫多少東西？花多長時間？當對錶單有一定了解後，開始進行下一步。

2、單項查看、填寫、檢查

用戶開始一項項填寫時，會經歷一個查看、填寫、檢查的過程。

查看：這個單項要輸入什麼？怎麼操作？要沒有什麼要求？
填寫：明白了要寫什麼後，盡可能方便地填寫自己想輸入的值。
檢查：填寫完成後，需要核對下是否填的正確。

3、整體檢查

每個單項都填寫完成後，整體檢查一遍。有沒有漏填的？有沒有填錯的？整體檢查確認無誤後，再來提交。

4、提交，再修改，提交成功

由於一些輸入項需要做後端判斷，在首次提交後，可能會有部分輸入項不符合條件。此時需要再次修改，提交，直至提交成功。

為用戶設計表單

知道了用戶的需求，我們需要對錶格對用戶需求做針對性的設計和優化。

一、為了方便用戶整體查看

1、分步驟

字段較多的表單，需要分解成幾個步驟。用戶可直觀地看到步驟的數量、名稱、說明。

2、分組

同一步驟內的具有共性的字段，可歸納到一個組裡。組與組之間通過分隔線區分，組標題能體現該組的內容。

3、排版

用戶的視線路徑是從上到下的。為了易讀和美觀，需要標籤右對齊、輸入區寬度統一。

二、為了方便用戶單項查看、填寫、檢查

1、文本標籤

文本標籤承擔著對輸入項的解釋的作用。文本標籤需要合理設置，幫助用戶理解輸入項。

2、輸入提醒

文本標籤不足以對輸入項準確說明時，需要使用輸入提醒。輸入提醒能承擔更多的文字。

常用的輸入提醒方式

上圖中的輸入建議、輸入提示、輸入幫助的提醒程度是由弱到強的，通常弱程度的提醒足夠表達提醒時，無需再使用強程度的提醒。

3、良好的默認值

在一些輸入項的值大概率能推測出來時，建議為其設置默認值。良好的默認值會節省用戶的填寫時間。注意，默認值的不恰當使用，也容易對用戶造成乾擾。

4、結構化格式

一些具有固定格式的輸入值，需要以格式化的形式展示，如銀行卡號、身份證號、手機號、貨幣、百分數等等。結構化的格式能極大地避免用戶犯錯，也能使頁面更加美觀易讀。

5、選填/必填

表單的輸入項通常既有必填字段，也有選填字段。必填還是選填，需要明確地告知用戶。通常採用加*號的方式表示必填，標籤後加可選的方式表示選填。

6、暗提示

使用通用的認知，以較弱的方式給用戶以提示。如需要限製文字數量的文本輸入區，可使用下列的方式：通過已輸入字符數量和數量上限的對比來提示用戶。

7、校驗反饋

對用戶輸入值進行校驗，並給出反饋。

校驗內容：是否為空、類型格式是否正確、是否符合業務邏輯
校驗方法：前端校驗一般使用正則表達式，後端校驗需要考慮業務邏輯
校驗的觸發：前端校驗一般使用即時校驗和焦點離開時校驗，後端校驗一般在提交後。
反饋類型：正確、錯誤、警告（有風險點但可通過校驗）

反饋方式：

輸入項附近文字

圖標上的浮層

全局反饋

三、為了方便用戶整體檢查和提交

提交後進行後端校驗，不符合業務邏輯的內容需要有反饋內容，便於用戶定位修改。

表單常用組件

常用組件的內容不是本文的重點，不做展開詳解。有興趣的用戶請移步antd了解。

結語

之前做過一版《表格規範》，發出來後得到了很多反饋，也對其做了一些完善。希望本次的表單規範能夠對大家有所啟發，歡迎大家反饋。

下一次計劃寫關於圖表規範的內容，主要涉及到數據可視化方面的內容。

原型下載鏈接： https://pan.baidu.com/s/1g70dMVlZuDjBHIjq9YjbCA