實戰(zhàn)技巧 | 一張圖教你如何設計表單
▲點擊"三分設"關注，回復"社群"加入我們
表單設計老生常談，但又是使用頻繁且經(jīng)常遇到各種問題的一種組件，尤其在B端業(yè)務中，涉及到大量的云資源開通、配置升級等表單填寫與校驗，因此設計師經(jīng)常要面對復雜程度不等、信息多樣的表單場景，那設計師該遵循怎樣的原則、如何組織內容、在布局與頁面空間問題上如何取舍，以及如何確保不同屏幕尺寸下都能保證表單信息的功能清晰度與設計美觀度？本文就結合這些問題做重點介紹與比對。
一、構成
表單通過多種輸入組件組合完成信息編輯，用來確保用戶按照系統(tǒng)要求錄入信息或進行應用設置。表單的構成主要有以下元素，根據(jù)操作的內容項和提示重要程度進行組合使用：
二、布局
表單的布局形式一共有六種：頂對齊、左對齊、右對齊、內聯(lián)標簽、圖標標簽、浮動標簽；在 B 端混合云業(yè)務中經(jīng)常使用到的有其中 3 種：頂對齊、左對齊、右對齊。
相信在很多設計研究中，大家都了解過關于頂對齊、右對齊、左對齊的體驗實驗數(shù)據(jù)，其中「左對齊」瀏覽速度慢，眼動耗時最長，那耗時長就一定體驗不好嗎？是不是跟我們所倡導的高效原則沖突？在復雜表單中哪種布局方式更優(yōu)？下面我們就結合三種表單布局所適用的場景和優(yōu)缺點進行簡要對比：
（圖片源自網(wǎng)絡）
1.頂對齊
適用場景：不同長短標簽且 60&以上標簽字數(shù)很長，有國際化需求。
優(yōu)點：瀏覽和處理效率較高，標簽長度彈性大，多欄下不影響信息的清晰度。
缺點：占縱向空間。
2.左對齊
適用場景：50% 左右標簽字數(shù) 8 字以下；適用于平臺中即有復雜數(shù)據(jù)場景也有小容器的簡單數(shù)據(jù)場景的統(tǒng)一體驗。
優(yōu)點：文字按閱讀視線對齊，符合閱讀習慣，節(jié)約縱向空間。
缺點：填寫速度慢，標簽長度和輸入框長短彈性相對較小。
“這里要注意的是，B 端業(yè)務設計中，【緩慢完成率】并不總是一件壞事如果表單數(shù)據(jù)復雜且安全性高，可以故意減緩用戶的填寫速度，來確保填寫的準確性。”
3.右對齊
適用場景：僅適用于【標簽簡短】且內容較少的情況，如數(shù)據(jù)過濾區(qū)。
優(yōu)點：標簽和輸入框之間距離固定，有明確的關聯(lián)，節(jié)約縱向空間。
缺點：左邊緣參差不齊，整體可讀性低，標簽長度和輸入框彈性小。
三、布局的響應式
針對 B 端控制臺類表單布局的類型，為了保證在不同屏幕大小下用戶操作的體驗，我們對表單響應式規(guī)則同樣進行規(guī)范設定，以混合云設計中 1200 的視窗寬度為例，減去導航 248px ，再減去頁面兩側邊距 24px ，則段點寬度為 904px 。
多欄表單中，最多 4 欄，默認標簽與輸入域左右布局（在 label 字數(shù) 60% 以上多于 8 個字時，可采用上下布局）當斷點小于 904px，標簽與輸入域則自動改為上下布局，確保內容閱讀的舒適性，列數(shù)也會隨寬度響應同時改變。
單欄表單中，標簽與輸入域左右布局，當斷點小于 904px，標簽與輸入域則改為上下布局，同時固定輸入框最大寬度 600px，達到最大值時不隨頁面拉伸而拉伸，右側留白即可。
四、影響要素
我們進一步來看影響表單布局與構成元素選擇的幾個要素：
1、內容數(shù)量
內容的多少會影響設計所選擇的容器、內容布局；如果內容較多，除了布局還要考慮采用分組、分步等形式去有序組織信息。
2、復雜程度
表單邏輯也是伴隨內容的多少而同比增加的，內容少則關系相對簡單，內容多則關系復雜。
3、邏輯結構
常見的有串行結構（各表單內容之間是線性關系）、并列結構（有多組表單，各組是并列關系）、更復雜的甚至有串行與并行嵌套結合的結構。
4、所處容器
表單內容所處的容器有頁面、抽屜、彈窗、氣泡，容器所能承載內容的多少也在逐步減少。在設計中我們根據(jù)打斷感、與上一級關聯(lián)程度、內容復雜度進行容器選擇。
5、來源頁面關聯(lián)
如果與來源頁面關聯(lián)強，則建議使用彈窗、抽屜等容器，可以停留在之前操作頁面上，缺點則是用戶操作的沉浸感偏弱；如果與來源頁面關聯(lián)弱且信息量較大，則建議使用頁面，同時在頁面中填寫表單的沉浸感也會更強。
五、設計指南
為了更直觀的讓設計師明確面對不同復雜程度的表單如何設計，我們將影響要素、設計思路、設計示例、適用場景進行梳理，并以一張設計指南的形式歸納出來，方便設計師根據(jù)場景進行分析。
基于控制臺類 B 端復雜表單設計我們總結以下結論，有類似場景的業(yè)務設計可以參考：
1、推薦復雜業(yè)務中使用左對齊的通用方式，信息流清晰且相對比上下布局節(jié)省空間。
2、單列布局用戶的完成效率更高，開發(fā)效率更高，對復雜業(yè)務來說更適合擴展。
3、當標簽字數(shù)的長度顯示影響到體驗與設計美觀時或局部功能標簽下同時存在子標簽時，推薦使用上下布局。
4、多列適合于較單一的場景，字段之間有明顯的級聯(lián)關系，如數(shù)據(jù)過濾，除此之外，不建議使用多列。
需要注意的是：多列下標簽可采用右對齊，確保標簽與輸入框內容的緊密性。
5、內容很多時，除了有序組織，可以配合其他組件使用，提升用戶完成效率。
六、表單中的引導設計
最后，我們來簡單說下表單輸入中，可以通過哪些方式引導用戶正確輸入。荀子說“防為上、救次之、戒為下”，古代思想中未雨綢繆、防微杜漸的【預防思想】同樣適用于云計算時代下的體驗設計，那就是先預防、后糾錯，尤其是像表單區(qū)塊，涉及到大量的信息輸入、關系到云上操作的安全。
表單輸入的過程可分為：輸入前、輸入中、輸入后，下面就結合這三個結果分別介紹。
【輸入前】用戶可能會疑惑：這個表單項是什么意思？怎么填？格式如何？
此時設計主要是輔助用戶更好的進行操作，在輸入之前將提示信息明確的顯示出來，預先提示，減少出錯。但需要注意的是，不要堆疊多個提示信息，同時我們可以用輸入框的長度、格式暗示內容的長短及類型，如 IP 格式的輸入框，手機號、日期等長度較固定的輸入框。
【輸入中】用戶需要知道：填對了嗎？完成了嗎？
此時設計主要是對造成當前狀態(tài)的原因進行說明，為預防錯誤而在表單提交之前提早干預，常見的組件功能和設計手段如下示例。在輸入中，我們要切記，盡量不直接打斷用戶，不中斷用戶的輸入操作，而是對需要注意信息，及時標記出來，確保過程中一直溝通。
【輸入后】用戶想要明確：成功了嗎？如果失敗是什么原因？失敗后還能修正嗎？
此時設計關注在對輸入后的結果進行告知，必要時可限制下一步行動。如有異常表單項，提交按鈕不可點擊等，一些重要的選擇、刪除操作，可以通過局部二次確認的方式對用戶操作進行反饋。
以上，就是 B 端業(yè)務中表單設計的思考和引導方式，總結幾點設計原則：
1、預先提示，減少出錯；
2、不要堆疊多個提示；
3、通過長度、格式暗示輸入內容；
4、如果提示信息能夠更有效的幫助用戶輸入，最好直接展示出來；
5、盡量不中斷用戶的任務，在輸入過程中不要宣布他做錯了；
6、對需要即時呈現(xiàn)和立即注意信息，過程中實時反饋，確保一直溝通；
7、最好提供默認值或默認填入固定格式，降低用戶重復性工作。
最后，時刻謹記：防為上、救次之、戒為下，能夠有效提升用戶體驗與操作效率。
