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