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