先簡單說下表單的定義。在電腦不普及的時代，企業(yè)或者機構(gòu)在收集用戶信息時，通常采用紙質(zhì)單據(jù)讓用戶填寫，而這個單據(jù)，就是最原始的表單。我們常說B端產(chǎn)品其實就是把線下已經(jīng)存在的流程搬到線上，有利于擴(kuò)大市場和提高使用效率和管理效率。而B端表單，其實就是把原先需要線下手工填寫的表單映射到線上，并使其錄入符合線上設(shè)備（如手機、電腦）的使用習(xí)慣。
通過上面紙質(zhì)表單，其實我們很容易理解表單的主要任務(wù)場景，就是“錄入”，即用于用戶或產(chǎn)品的數(shù)據(jù)采集。比如常見的快遞單填寫、單位的OA請假流程、CMS后臺配置產(chǎn)品詳情等等。
既然表單的主要功能是“錄入”，那么在設(shè)計表單時，就需要考慮如何盡可能的減少用戶使用成本和理解負(fù)擔(dān)，提高表單的容錯率和操作效率，讓使用者更高效更準(zhǔn)確的完成錄入工作。
在不同類型的信息錄入時，需要選擇正確的組件，清晰準(zhǔn)確的傳達(dá)相應(yīng)含義，幫助用戶快速理解需要錄入的信息類型。如需要用戶錄入跟日期相關(guān)的信息，就需要使用DatePicker日期選擇框；如需用戶錄入數(shù)字相關(guān)的內(nèi)容，則需要使用InputNumber數(shù)字選擇框。
高效主要體現(xiàn)在用戶獲取信息的效率和錄入信息效率兩個方面的高效。簡潔則體現(xiàn)在不同的信息體量的情況下使用不同的排布方式和交互方式，使其視覺更加清爽簡潔。
操作前：需要做到盡可能的提示接下來用戶需要輸入的內(nèi)容；
操作中：則需要根據(jù)用戶輸入的內(nèi)容進(jìn)行實時反饋和糾錯，比如格式錯誤需要及時提醒；或者在數(shù)字輸入框輸入“.5”的時候要糾正為“0.5”；或者在僅允許輸入數(shù)字的輸入框內(nèi)輸入其他字符直接判斷為無效輸入等。
操作后：設(shè)計合理的保存機制，如草稿箱；進(jìn)行清空、取消、或未保存當(dāng)前頁面內(nèi)容就跳轉(zhuǎn)新頁面時，需二次確認(rèn)，減少誤操作帶來的損失。
基礎(chǔ)表單通常由表單標(biāo)簽、表單（數(shù)據(jù)）域、提示信息、操作按鈕四部分組成。高階表單由于數(shù)據(jù)類型比較復(fù)雜，會衍生出其他內(nèi)容，如校驗提示、幫助提示、占位信息、動態(tài)增減等內(nèi)容。
表單標(biāo)簽用于解釋標(biāo)明對應(yīng)表單項需要錄入、選擇、上傳的內(nèi)容，引導(dǎo)用戶進(jìn)行填寫/選擇等對應(yīng)操作。常見的標(biāo)簽布局有四種：左對齊標(biāo)簽、右對齊標(biāo)簽、頂對齊標(biāo)簽、內(nèi)部標(biāo)簽。
左對齊標(biāo)簽的特點是
閱讀效率高，填寫速度慢，節(jié)約垂直方向空間。
因為左對齊表單解析問題時眼球定位次數(shù)最多，用戶一般情況下都能將左對齊布局中的標(biāo)簽和輸入框聯(lián)系起來，只是花費時間較長。根據(jù)馬泰奧·彭佐的研究，典型掃視時間為500毫秒，用戶獲取信息時的視線會進(jìn)行反復(fù)跳動，說明用戶經(jīng)歷了沉重的認(rèn)知壓力。
適用場景：適用于表單中存在較多復(fù)雜或敏感信息，且希望用戶在填寫時能夠放慢速度仔細(xì)思考的場景。多見于注冊類表單。
右對齊標(biāo)簽的特點是
填寫效率高，閱讀效率慢，節(jié)約垂直方向空間。
馬泰奧·彭佐的眼動研究發(fā)現(xiàn)，專家用戶和新手用戶掃視（眼睛運動）右對齊標(biāo)簽表單的標(biāo)簽和輸入框的平均時間分別在170毫秒和240毫秒，而填寫完成時間比左對齊快2倍。
適用場景：右對齊標(biāo)簽適用于既要減少垂直空間，又要加快填寫速度的場景。
頂對齊標(biāo)簽的特點是
瀏覽速度和填寫速度都快，節(jié)約橫向空間，且視覺上更加工整但占用垂直空間多。
馬泰奧·彭佐的眼動研究發(fā)現(xiàn)，頂對齊標(biāo)簽從標(biāo)簽移動到輸入框只需50毫秒。比左對齊標(biāo)簽快了10倍；比右對齊標(biāo)簽方式快2倍。能迅速填完頂對齊標(biāo)簽表單的原因之一，是因為眼球只需要在標(biāo)簽和輸入框之間進(jìn)行上下單向運動。
適用場景：希望用戶快速填寫表單，完成任務(wù)；同時，當(dāng)輸入項存在主次之分時，對標(biāo)簽擴(kuò)展性要求高。
內(nèi)部標(biāo)簽的特點是
占用橫向空間少，不用考慮標(biāo)簽長短不一導(dǎo)致的對齊問題，但輸入時內(nèi)部標(biāo)簽消失會不太容易判斷信息。
內(nèi)部標(biāo)簽一般常見于移動端的表單，且表單結(jié)構(gòu)和內(nèi)容相對簡單，適用于極少數(shù)輸入項的表單，不適用于三個以上表單項的場景。
小結(jié)一下：綜上所述，從效率角度來講，頂對齊標(biāo)簽＞右對齊＞左對齊。但根據(jù)B端業(yè)務(wù)場景的不同，效率并不是我們衡量標(biāo)簽對齊方式的唯一指標(biāo)。
如果你考慮屏效，且希望用戶放慢速度，仔細(xì)思考表單中每個表單項，特別是含有大量可選輸入框或高級設(shè)置的陌生數(shù)據(jù)，并且希望視覺上保持對齊，犧牲效率，就選擇左對齊標(biāo)簽；
如果你不考慮屏效，且希望提高用戶的閱讀和填寫效率，并希望表單具有更好的延展性時，就選擇頂對齊標(biāo)簽。
如果你考慮屏效，且希望提高用戶填寫效率，犧牲視覺對齊，那就選擇右對齊標(biāo)簽。不過要考慮能否精簡標(biāo)簽內(nèi)容，確定好表單與界面的間距，標(biāo)簽長短差異過大謹(jǐn)慎使用右對齊。
在表單設(shè)計中，經(jīng)常會碰到三個問題：
1.當(dāng)表單里全是必填字段的時候，是否要標(biāo)記它？
2.當(dāng)表單里既有必填字段，又有選填字段，到底是標(biāo)記必填，還是標(biāo)記選填？
3.使用星號*標(biāo)記必填時，星號在標(biāo)簽左側(cè)還是右側(cè)？
理論上來說，一個表單里全部都是必填字段的話，就沒有標(biāo)記的必要，因為全部都重要的同義詞就是全部都沒那么重要。但是實際使用中，有相當(dāng)一部分用戶，會下意識的認(rèn)為沒有標(biāo)記必填，那就可以不填。
我們通常講設(shè)計要有全局觀和風(fēng)格的延續(xù)性，站在全局上講，如果其他表單都是遵循“必填的字段不標(biāo)記，選填的字段做標(biāo)記”，那么遇到全是必填的表單時，是可以不做標(biāo)記的。如果其他表單遵循的是“必填的字段做標(biāo)記，選填的字段不做標(biāo)記”，那么也要將這個規(guī)則貫徹到底。
用戶體驗設(shè)計是選擇題而非判斷題，
星號*是種視覺標(biāo)記，可以方便用戶掃描表單時了解輸入信息量的最低限度。必填加星號*肯定不會錯，選填做標(biāo)記也很對。重要的還是上面的一段表述，要注意全局觀和風(fēng)格的延續(xù)性。一旦選擇了某種標(biāo)記規(guī)則，就要貫徹到底。
都可以，放左還是放右不一定有實際影響，但建議將其放在標(biāo)簽左側(cè)的一個原因是，只需掃視標(biāo)簽的最左邊字符，就能輕松定位必填哪些字段。
表單域即表單的輸入?yún)^(qū)域，輸入域是用來采集用戶數(shù)據(jù)信息的核心內(nèi)容，每個輸入域字段都包含一個類型的數(shù)據(jù)信息。
表單域包含輸入框、內(nèi)容選擇器、時間選擇器、數(shù)值選擇器、上傳五種常見類型。
設(shè)計師在表單設(shè)計的時候要盡可能減少用戶的思考、理解成本，所以選擇合適的表單域類型，提升表單的輸入效率。如果亂用，就很容易出問題，比如讓用戶在輸入框輸入時間，輸入效率慢不說，還很容易出現(xiàn)格式不一致的問題，導(dǎo)致系統(tǒng)無法做出準(zhǔn)確的識別和統(tǒng)計。
絕大部分的開源組件都會提供一定的尺寸規(guī)范，一般情況下使用默認(rèn)的尺寸規(guī)范即可。比如像時間選擇器、數(shù)值選擇器這種，由于字段有明確的格式顯示，所以字段長度也是有預(yù)期的。
而像輸入框、內(nèi)容選擇器這種，就需要做到框長度與輸入預(yù)期成正比。唐納德·諾曼的著作《設(shè)計心理學(xué)》中詳細(xì)講解過心理暗示方面的內(nèi)容。而寬度的變化就是一種有效暗示。在真實場景中，大部分輸入框是存在理想長度的，那么就應(yīng)該向用戶暗示所需輸入內(nèi)容的長度來減輕判斷負(fù)擔(dān)。所以建議跟產(chǎn)品經(jīng)理進(jìn)行溝通，咨詢該字段的長度極限值是多少，然后制定該輸入項框的長度，通常建議是40的倍數(shù)，如80/120/160/240/400等。一個平臺的所有輸入框長度統(tǒng)一在5種以內(nèi)最佳，不要設(shè)定太多的寬度，反而會讓表單顯得凌亂；太少又會讓表單看起來都像四四方方的盒子。
美國著名心理學(xué)家巴里·施瓦茨在《選擇的悖論》一書中討論了生活中選擇過多的影響。并提出策略應(yīng)付無處不在的過多選擇。他特別敘述了智能默認(rèn)的作用，即在滿足多數(shù)人需要的地方放置默認(rèn)選項來幫助人們做出輕松的明智的選擇。
所以通過提供合理的默認(rèn)值，能有效節(jié)省用戶時間。填寫表單本身就是一個枯燥無趣的事情，如果這個模式能把表單填寫的時間減少一半，用戶會非常感激。
如上圖所示，左邊案例是站酷的表單，它提供幾個大家常用的選項做默認(rèn)項，減少用戶做決策時間；右邊案例是通過使用合理的控件根據(jù)前面用戶輸入的信息進(jìn)行動態(tài)識別解析。
設(shè)計師在進(jìn)行提示信息的文案設(shè)計時，要思考如何進(jìn)行有效提示，避免“正確但無用”的話。
按鈕常見位置：一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
按鈕閱讀順序：按鈕出現(xiàn)頁面右上角或右下角時，閱讀順序是從右往左，這符合 pc 端操作習(xí)慣以及人閱讀習(xí)慣。按鈕跟隨表單內(nèi)容或在表單內(nèi)容底部時，閱讀順序為從左往右，這符合人的填寫順序從上往下，從左往右。
底部按鈕居右對齊：一般用在彈窗頁面中，因為比較符合從左到右的閱讀習(xí)慣，閱讀完畢后視覺中心自然停留在右側(cè)，所以右對齊效率最高。
底部按鈕居中對齊：一般用在頁面中，因為WEB端頁面通常較大，右下角操作距離會有點遠(yuǎn)，所以表單用頁面承載的話按鈕建議居中。
表單頁面常見布局方式有四種。1.基礎(chǔ)表單；2.錨點(Anchor)定位表單；3.標(biāo)簽頁(Tab)表單；4.分步(Steps)表單
當(dāng)表單類目在7個以內(nèi)或7個左右，且字段構(gòu)成比較單一，這時候采用基礎(chǔ)表單即可。
當(dāng)表單類目在7個以上，字段構(gòu)成比較復(fù)雜，就需要根據(jù)表單字段的復(fù)雜度與邏輯性、關(guān)聯(lián)性進(jìn)行分組，從而對內(nèi)容進(jìn)行歸納，將強關(guān)聯(lián)的內(nèi)容劃為一組，降低表單填寫時的認(rèn)知負(fù)荷。
當(dāng)表單信息量比較龐大，在信息分組的前提下也會占用很大的垂直空間，查看不同組需要劃好幾屏，但是每個組之間的關(guān)聯(lián)性又比較強，不適合分開，這種情況下推薦使用錨點定位，點擊定位項可以快速定位到相應(yīng)的表單內(nèi)容。功能上有點像可跳轉(zhuǎn)目錄。
當(dāng)表單信息量比較龐大，但是每個信息組之間并沒有強關(guān)聯(lián)性，每個組屬于獨立表單，這時推薦使用標(biāo)簽頁分組方式。
如果每個信息組之間有邏輯先后順序，那么推薦使用分步表單，分步表單可以給用戶一定程度的填寫進(jìn)度預(yù)期。
表單常?的交互形式有??跳轉(zhuǎn)、抽屜、彈窗、?泡卡?、原位編輯。選擇什么樣的交互形式，通常會根據(jù)內(nèi)容的承載量以及關(guān)聯(lián)度來判斷，從少到多依次為：?泡卡? – 原位編輯 – 模態(tài)對話框 – 抽屜 – ??跳轉(zhuǎn)。
當(dāng)目標(biāo)元素有進(jìn)一步的描述和相關(guān)操作時，可以收納到氣泡卡片中，根據(jù)用戶的操作行為(如鼠標(biāo)移入/聚焦/點擊時)進(jìn)行展現(xiàn)。
它的特點是不會影響原有任務(wù)進(jìn)程，承載內(nèi)容少。把內(nèi)容的編輯修改操作及校驗放在氣泡卡片上完成，不會打斷原有任務(wù)進(jìn)程。
其編輯內(nèi)容也為展示內(nèi)容，默認(rèn)展示狀態(tài)操作，可切換為編輯狀態(tài)，屬于輕量型的信息采集表單。
很常見的交互方式之一，?戶在不離開當(dāng)前?的情況下繼續(xù)操作，是流程步驟中的分??為，只能承載簡單的表單內(nèi)容。
抽屜就是從屏幕邊緣滑入的浮層面板，覆蓋住部分主體內(nèi)容。它的特點是用戶在抽屜內(nèi)操作時不必離開當(dāng)前任務(wù)，操作完成后，可以平滑地回到原任務(wù)(一般默認(rèn)點擊蒙層部分就可以收起抽屜)。
通常用于在當(dāng)前任務(wù)流中插入的臨時任務(wù)，如創(chuàng)建、預(yù)覽等。抽屜大多情況一層就可以，如果遇到分支任務(wù)復(fù)雜的情況，也可以使用多層抽屜。
最常?的?式，適?于絕?部分的表單，?持構(gòu)建復(fù)雜的表單。特點是必定打斷當(dāng)前操作，返回上一級操作通常利用面包屑或瀏覽器的返回。
