關於中後台產品的表單設計，相信這篇文章一定可以給你帶來幫助。
前言
表單是數據錄入和信息提交的通用形式，web端和移動端都很常見，通常由標籤、輸入項、提交按鈕等多種元素構成。
中後台產品是服務於業務的。 由於業務的複雜性，表單往往呈現出字段多、類型雜、專業性強的特點，設計上需要考慮更多的內容。
本文通過自己的項目經驗，參考了antd的內容，提煉出了一套適用於中後台產品的表單設計規範。 在此共享出來，希望能夠給大家一些幫助。
以用戶的視角來看看表單
從開始填寫到提交完成，用戶的行為和思考的邏輯是怎樣的呢？
1、表單整體查看
用戶在看到一個表單時，需要迅速地知道一些大概情況。 例如：表單是做什麼用的？ 需要填寫多少東西？ 花多長時間？ 當對錶單有一定了解後，開始進行下一步。
2、單項查看、填寫、檢查
用戶開始一項項填寫時，會經歷一個查看、填寫、檢查的過程。
- 查看：這個單項要輸入什麼？ 怎麼操作？ 要沒有什麼要求？
- 填寫：明白了要寫什麼後，盡可能方便地填寫自己想輸入的值。
- 檢查：填寫完成後，需要核對下是否填的正確。
3、整體檢查
每個單項都填寫完成後，整體檢查一遍。 有沒有漏填的？ 有沒有填錯的？ 整體檢查確認無誤後，再來提交。
4、提交，再修改，提交成功
由於一些輸入項需要做後端判斷，在首次提交後，可能會有部分輸入項不符合條件。 此時需要再次修改，提交，直至提交成功。
為用戶設計表單
知道了用戶的需求，我們需要對錶格對用戶需求做針對性的設計和優化。
一、為了方便用戶整體查看
1、分步驟
字段較多的表單，需要分解成幾個步驟。 用戶可直觀地看到步驟的數量、名稱、說明。
2、分組
同一步驟內的具有共性的字段，可歸納到一個組裡。 組與組之間通過分隔線區分，組標題能體現該組的內容。
3、排版
用戶的視線路徑是從上到下的。 為了易讀和美觀，需要標籤右對齊、輸入區寬度統一。
二、為了方便用戶單項查看、填寫、檢查
1、文本標籤
文本標籤承擔著對輸入項的解釋的作用。 文本標籤需要合理設置，幫助用戶理解輸入項。
2、輸入提醒
文本標籤不足以對輸入項準確說明時，需要使用輸入提醒。 輸入提醒能承擔更多的文字。
常用的輸入提醒方式
上圖中的輸入建議、輸入提示、輸入幫助的提醒程度是由弱到強的，通常弱程度的提醒足夠表達提醒時，無需再使用強程度的提醒。
3、良好的默認值
在一些輸入項的值大概率能推測出來時，建議為其設置默認值。 良好的默認值會節省用戶的填寫時間。 注意，默認值的不恰當使用，也容易對用戶造成乾擾。
4、結構化格式
一些具有固定格式的輸入值，需要以格式化的形式展示，如銀行卡號、身份證號、手機號、貨幣、百分數等等。 結構化的格式能極大地避免用戶犯錯，也能使頁面更加美觀易讀。
5、選填/必填
表單的輸入項通常既有必填字段，也有選填字段。 必填還是選填，需要明確地告知用戶。 通常採用加*號的方式表示必填，標籤後加可選的方式表示選填。
6、暗提示
使用通用的認知，以較弱的方式給用戶以提示。 如需要限製文字數量的文本輸入區，可使用下列的方式：通過已輸入字符數量和數量上限的對比來提示用戶。
7、校驗反饋
對用戶輸入值進行校驗，並給出反饋。
- 校驗內容：是否為空、類型格式是否正確、是否符合業務邏輯
- 校驗方法：前端校驗一般使用正則表達式，後端校驗需要考慮業務邏輯
- 校驗的觸發：前端校驗一般使用即時校驗和焦點離開時校驗，後端校驗一般在提交後。
- 反饋類型：正確、錯誤、警告（有風險點但可通過校驗）
反饋方式：
輸入項附近文字
圖標上的浮層
全局反饋
三、為了方便用戶整體檢查和提交
提交後進行後端校驗，不符合業務邏輯的內容需要有反饋內容，便於用戶定位修改。
表單常用組件
常用組件的內容不是本文的重點，不做展開詳解。 有興趣的用戶請移步antd了解。
結語
之前做過一版《 表格規範 》，發出來後得到了很多反饋，也對其做了一些完善。 希望本次的表單規範能夠對大家有所啟發，歡迎大家反饋。
下一次計劃寫關於圖表規範的內容，主要涉及到數據可視化方面的內容。
原型下載鏈接： https://pan.baidu.com/s/1g70dMVlZuDjBHIjq9YjbCA
相關閱讀
本文由 @流風 原創發佈於人人都是產品經理。 未經許可，禁止轉載。
題圖來自 PEXELS，基於 CC0 協議
http://www.kubonews.com/201803219771.html
生活苦悶?快上酷播亮新聞：http://www.kubonews.com
沒有留言:
張貼留言