表單設計
1什么是表單？
表單設計是B端產品設計的基礎頁面，想要做好表單設計首先要搞清楚表單的應用場景。
表單是用戶采集數據信息的核心場景，同時又通過表單向用戶展示數據信息，簡而言之表單是用戶與數據庫之間的橋梁。它可以確保用戶按要求填寫信息并提交給后臺使用或引導用戶進行各種設置，好的表單可以幫助用戶提升效率增加用戶滿意度。
2為什么需要表單？
原始的系統或軟件是沒有用戶信息的，用戶通過表單來進行數據信息的錄入，錄入的信息越多，數據庫管理的信息就會越多，才能凸顯出該系統或軟件的數據管理優勢才能實現其價值，因此表單是實現產品管理價值的第一步。
例如我們常用的“飛書”、“teambition”、“語雀”等產品本身是沒有數據信息的，想要實現其產品價值就要通過用戶錄入表單信息到數據庫，錄入的數據信息越豐富越能體現產品讀取/管理數據信息的便捷，所以表單設計的質量高低也影響了整個產品的滿意度評價。
B端產品的本質是對數據信息的“增刪改查”在表單的應用場景里對應了“增”和“改”一般表現為表格中的“新增”與“編輯”（如下圖），針對不同的用戶數據要進行不同的表單設計，以便適用各個場景功能。
3表單設計原則與目標
3.1表單設計目標
幫助用戶高效、準確、一致、安全的完成數據錄入與數據編輯。
3.2表單設計原則
3.2.1高效性
通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務。
例如，必填選項與非必填選項標示問題：
當全部為必填項時可以不用標示；
當必填項數量占比極大，非必填項只占很少部分時可直接標注非必填項，降低用戶的視覺干擾；
當必填項比重不大則需要標注必填項表識，而非無腦全部加“*”
3.2.2準確性
表單的準確性表現有很多，主要指不要讓你傳達的信息產生歧義，讓所有的用戶看到這個信息后的用戶行為保持一致，規避用戶犯錯。
案例1：快速定位表單重要信息和當前填寫選項，例如，飛書文檔左側快速定位。
案例2:輸入框的長度根據用戶輸入信息的多少進行設置，不要讓輸入框為了整齊保持一致，太長的輸入框會給用戶帶來壓力。
3.2.3一致性
針對同一產品下的頁面風格/字號/組件使用都要保持一致，避免給用戶造成混淆增加理解成本。
3.2.4安全感
要有一定的危險操作保護措施，例如，返回不保存表單的危險提示或即時保存表單的安全操作防止數據丟失；同時針對不同的使用場景增加返回上一步、重置填寫、撤銷填寫等幫助用戶修改錯誤的后悔藥功能。
4表單構成
表單通常由標簽、輸入域、填寫提示、操作按鈕等幾部分構成。
4.1標簽
標簽是為了告訴用戶此項表單的輸入內容是什么，通常放在輸入內容之前，有時候是正前方，有時候是正上方根據具體的布局調整，特殊情況放在輸入內容里（后面會詳細講解哪種頁面適合哪種標簽形式這里就不展開說了）。
填寫內容過多容易引起用戶的恐慌，填寫內容較少又不足以支撐后續的管理維護，為了平衡用戶感受和后續管理維護，這里提出不影響后續操作的前提下最少填寫原則，就可以把表單標簽按需求分為必填/選填/不填三項；
必填項是指用戶必須要輸入有效的文本信息，否則，該表單就不能正常提交、保存等操作，同時也是后續管理維護的保障；
選填項是指該項信息用戶可填可不填，根據用戶的意愿和需求度來自愿選擇，該項的填寫不會影響后續的管理維護；
不填項是指該項不需要用戶填寫，由系統自動生成例如填寫身份證號就不需要再填寫生日，可由系統自動生成。
注意：為了保證頁面整體高效，表單填寫的內容盡量少的使用選填項，省略不填項。
4.2輸入域
輸入域是用來采集用戶數據信息的核心內容，每個輸入域字段包含一個類型的數據信息。對于用戶來說，表單的填寫體驗再好也是負擔，所以我們要盡可能的減少用戶思考、理解，降低用戶的焦躁情緒，同時提高表單的輸入效率，輸入域的選擇尤為重要。
4.2.1輸入域分類
輸入域主要有以下四個類型
輸入：輸入框
選擇內容：選擇器、級聯選擇器、樹選擇、單選框、多選框、穿梭框、開關
選擇時間：時間選擇、日期選擇、日期時間選擇
選擇數值范圍：步進器、滑動輸入條
上傳：文件上傳
4.2.2注意：
1）輸入框長度確定
表單輸入框的寬度要怎樣確定呢？實際業務中，大部分輸入框所需填寫內容都存在理想長度，輸入框的寬度暗示填寫內容的長度，合理的寬度幫助減少用戶的焦慮，給用戶帶來安全感。
在單項排布時也要盡量考慮用戶的觀感，通過設置合理的默認寬度尺寸，讓設計師快速搭建出觀感舒適又給用戶降低焦慮的頁面。
我們可以根據產品的具體業務，羅列出常用的輸入內容，根據這些輸入內容的長短來進行具體輸入框尺寸的制定，如果輸入內容很多，那么要定的尺寸很碎，針對每一個常用內容制定一個輸入框尺寸是不現實的，在頁面實際設計中就會顯得頁面很凌亂，如下圖。那么我們要解決的問題就是如何讓輸入框在單個狀態與組合狀態下都盡量保持較好的對齊狀態，同時輸入框的尺寸還有規律可循。
輸入框尺寸的確定，參考Ant design表單設計研究結論得到的5種高頻的寬度需求區間，以尺碼類比分別是： XS - 80~160px、S - 160~280、M - 280~360px、L - 360px~480px、XL - 480~560px。
我們可以參考這個XS尺碼的尺寸范圍（80-160px）來定制自己的輸入框尺寸x，對這個尺寸進行x*2+8px（1個輸入框間距為8px）、x*3+16px（2個輸入框間距為16px）、*4+24（3個輸入框間距為24px）、*5+32（4個輸入框間距為32px）得到相應的其他尺寸輸入框，這里把輸入框的長度計算加上了輸入框間距是為了更好的使輸入框在不同的場景中對齊。
例如我們產品業務中經常要填寫日期，我們就根據常用的日期“2020-12-30”最大字段來定制我們的最小輸入框尺寸為118px，那么我們就得到了118px*2+8px=244px、118px*3+16px=370px....五種尺寸（如下圖）
然后可以再反向驗證我們的常用信息內容，是不是都能找到對應的尺寸適配，如果不行的話就調整我們最小輸入框的尺寸，使大部分的填寫內容都能有合適的尺寸。經過我們設計稿適配，在各復雜度的組合輸入框和單輸入框組合排列，發現在場景中實際的應用效果都遠好于從前。
2）選擇框優于輸入框
輸入域的選擇要為用戶著想，因為用戶更愿意操作鼠標而不是鍵盤，任何密集的操作都會給用戶帶來壓力降低效率，所以能讓用戶進行選擇就不要讓用戶輸入。
選擇的操作難度低于輸入，效率高于輸入，用戶的填寫可以停留在一定的范圍之內進行選擇，不用在茫茫大海里進行撈針行動，也有可能撈錯針就是錯別字等輸入錯誤的風險，默認的幾個選項就可以解決這個問題。
3）平鋪單選優于下拉選擇框
平鋪單選也并非所有場景都優于下拉選擇，但頁面中需要快速響應優先建議選用平鋪單選，用戶直觀的看到展示選項，直接單機選中目標，提升操作效率。
平鋪單選適用場景：5個選項以內、選項較長、選項帶說明文案。
下拉選擇框適用場景：超過5個選項，有默認高頻選項、選項文案不長。
在下拉選擇框中如果選項過多的情況，可以把高頻選項置頂或采用模糊搜索匹配選項，幫助用戶快捷選擇選項。下拉選項的選擇后最好不要引起后續表單頁面的變化，后續表單變化建議采用平鋪單選，用戶感知變化產生不安可以隨時取消選擇或選擇其他選項返回原來頁面查看變化內容。
4） 智能聯想
智能聯想輸入域可以增加用戶對表單頁面的滿意度不至于用戶在復雜的表單頁面抓狂。
用戶通過標簽傳達的信息給予關鍵詞，根據提供的關鍵詞輸入框可以實現模糊搜索、智能聯想、自動匹配等選項，用戶就可以根據聯想出的選項進行單機選擇，讓數據庫跑在用戶的前面給用戶節省更多的時間，提高工作效率，常見的場景在谷歌瀏覽器里輸入網址，你輸入幾個字母后它總是能猜對你要找的網址，這里是記錄了用戶之前訪問過的網址根據高低頻呈現給用戶進行選擇。
還有郵箱后綴的聯想、注冊唯一用戶名聯想（網站注冊用戶要求每個人的用戶名都不重復時，在你輸入別人使用過的用戶名時，系統會為你推薦幾個類似用戶名供用戶選擇）都是從用戶出發的操作。
4.3提示信息
提示信息是為了幫助用戶更準確的理解輸入域的具體操作，根據輸入流程將用戶輸入過程分為輸入前、輸入中、輸入后三個階段，提示信息在輸入前發生的稱為引導提示，提示信息在輸入中/后發生的叫反饋提示。
4.4操作選項
操作選項指表單填寫完成后，要進入的操作動作例如提交、返回、保存草稿等結束當前頁面的操作流程。這里要注意雖然可能頁面的操作按鈕有很多但主按鈕只有一個。
主按鈕依據：常用按鈕或更想讓用戶點擊的按鈕
5表單形式
5.1標簽
前面講了不同的使用場景選擇不同的標簽布局，讓我們先來了解一下標簽布局，主要分成4種：左對齊標簽、右對齊標簽、頂標簽、行內標簽。每一種對齊方式都有一定的優點與局現性，因此在合適的場景下選擇合適的標簽樣式，可以提升用戶的輸入效率。
5.1.1左對齊標簽
左對齊標簽是最常用的一種標簽，但它由于它橫向占用空間較大所以不適用于橫向空間狹小的表單頁面，左對齊有利于用戶對標簽的整體查看，能夠清楚的看到表單也整體都要填寫那些信息，但有由于標簽長短不一，有些標簽距離輸入框較遠，使標簽與其輸入框親密性降低導致用戶填寫費力，用戶存留時間較長，所以左對齊標簽一般用于表單查看頁面或稱為詳情頁；
另一方面來講左標簽雖然讓用戶存留的時間更長同時也讓用戶瀏覽和思考的時間變長，這種場景下保證標簽與輸入域親密的前提下，在需要用戶謹慎填寫的表單頁面可以采用這種對齊方式，例如阿里云購買頁面讓用戶仔細看、謹慎選擇。
優點：用戶視覺動線左對齊，方便閱讀，節約垂直空間。
缺點：填寫速度慢，浪費橫向空間，標簽長度和輸入框彈性小。
5.1.2右對齊標簽
右對齊標簽與左對齊標簽一樣橫向占用空間較大，不利于狹長頁面的布局，右對齊由于標簽字段長短不一導致用戶的視覺動線不在同一垂直線所以右對齊標簽有利于用戶的填寫，但是不利于用戶對標簽信息的查看。
優點：節約垂直空間，有利于用戶高效填寫
缺點：可讀性較弱，標簽長度和輸入框彈性小。
5.1.3頂部標簽
頂部標簽是標簽在輸入域的上方，與輸入域進行左對齊，這樣可以節省橫向空間的使用、用戶在填寫時也比較方便，在移動端產品的設計中下拉的交互比左右滑動的交互更為便捷所以采用頂部標簽較為常見。
頂部對齊可以讓用戶快速填寫表單，完成任務的場景一般采用頂部標簽，Prowork創建任務時就用的頂對齊，讓用戶快速創建任務。
優點：對齊舒適、用戶瀏覽和填寫表單的速度較快，節省橫向空間。
缺點：占用垂直空間。
5.1.4行內標簽
行內標簽相當于提示信息，在行內顯示，雖然可以大大節省橫向和縱向的空間，但當提示信息消失時會使用戶感到迷茫，使用體驗較差，而且拓展性也較差，因為輸入域不止包括輸入框如果是平鋪單選或開關則無法沿用此種標簽。UI中國登陸頁表單用的就是這種行內對齊標簽，輸入內容少，用戶動線清晰。
優點：節省空間，多用于移動端和登陸頁面
缺點：輸入狀態消失，用戶產生困惑，拓展性差
5.2輸入域
5.2.1輸入域交互
表單頁面的交互方式分為以下4種：就地編輯、氣泡卡片、彈窗、抽屜、頁面跳轉。根據具體的使用場景選擇合適的頁面交互。
1）原位編輯
原位編輯是比較輕量化的表單形式，適用于表單內容較少，使用頻率較低的場景，操作編輯，雖取隨用，隨用隨變，表單操作后頁面隨即發生反饋改變，所見即所得，保證用戶對主要功能的高效操作。
原位編輯一般在列表、卡片、詳情中單擊或雙擊激活編輯態進行原位編輯，用戶操作更加流暢，不會打斷還可單擊空白處隨時退出。
2）氣泡卡片
氣泡卡片交互方式也是比較輕量化的，適用信息數據容量小于5個的場景，所產生的表單頁與當前的頁面親密性緊密相關，也可隨取隨用，隨時退出。
3）彈窗/抽屜
彈窗/抽屜交互的表單樣式是比較常見的交互樣式，它的拓展性更強，承載的信息更多，當前頁面的分支操作，體現兩頁面之間的層級關系。在原位編輯與氣泡卡片無法滿足交互時選擇彈窗/抽屜交互，用戶在不離開當前頁面的情況下進行插入性操作，用戶也可隨時退出操作。
彈窗/抽屜頁面也不會打斷當前頁面的流程，流暢性次于原位編輯與氣泡卡片交互但但優于頁面跳轉。
抽屜的承載能力大于彈窗，根據數據信息選擇彈窗或抽屜。
4）頁面跳轉
頁面跳轉也分為兩種：跳轉新頁面和跳轉當前頁面，新頁面為當前頁面的分支流程，不會干涉用戶對主頁面的操作，頁面功能是獨立的；跳轉頁面為當前頁面流程的關鍵步驟，提示用戶已經進入下一步的操作，更少的建立新頁面就會讓用戶對業務流程更加清晰，減少用戶對新頁面的注意力，讓用戶專注于當前表單的數據信息中。
頁面跳轉承載的表單的數據信息最多，但對數據的反饋不及時，體量較大，頁面更加穩定，當所需表單特別重要時采用頁面跳轉的交互。
5.2.2選擇輸入域交互
如何選用合適的交互方式，應從數據信息的容量和親密度兩方面梳理，親密性越高選擇就地編輯與氣泡卡片交互，容量越大選用頁面跳轉進行交互。
5.2.3輸入域布局
在表單頁設計中根據數據信息容量來選擇合理的布局方式，保證頁面展示屏效與用戶操作效率，表單頁面布局可分為4種分別為基礎布局、分組布局、標簽頁布局、
1）基礎布局
單例與多列布局
單列布局：為了用戶的高效填寫一般會采用單列布局，視覺動線垂直向下延伸，避免用戶遺漏填寫現象發生，但這樣布局容易造成頁面出現大量空白，多數是不被老板喜歡的。但在表單內從上到下單列布局，引導用戶縱向閱讀，這是能夠最高效完成任務的布局方式。
多列布局：多列布局在一定程度上可以提高空間利用率，卻犧牲了用戶的使用感受，還有可能造成用戶漏填信息，多列布局的分組分為兩種橫向分組和縱向分組，在實際頁面設計中一定要選擇多列布局時請選擇橫向分組而不是縱向分組。
橫向分組：頁面利用率高，視覺動線也盡量減少了用戶遺漏。
縱向分組：頁面整潔，但與用戶常規閱讀順序相悖十分容易遺漏填寫信息，不建議使用。
提示：對表單信息的分類可以有效的降低視覺噪音，幫助用戶關注重要的填寫內容，根據表單數據信息的優先級進行分類，將優先級高的放在表單前面，優先級低的放在表單后面，或進行折疊收起。在pro work中就很好的運用了這一點，在創建項目時用戶填寫成本極低，在密集的工作環境中可以快速完成項目的創建，但在空閑的時間里用戶就可以點擊更多選項來進行詳細填寫。
2）分組布局
標題分組
當表單的數據信息較多一般超過7個輸入域，同時關聯性沒有那么強且可以被分組時，我們可以幫助用分組的方式幫用戶設置幾個休息點，讓用戶把要填寫表單的大任務拆解成幾個小任務來完成，將相同信息表單數據進行分組，這樣即使有很多信息疊加在一起，用戶在輸入上的心理壓力與視覺疲勞都會得到緩解。
“銷售易”個人設置基礎表單頁面，設置基本信息、聯系方式等標題作為分組，層次清晰，用信息分組給用戶減壓。
卡片分組
當表單數據內容體量很大時以超過一屏為界，關聯性更弱且數據信息可被分類歸納時，可通過卡片分組的形式展示，在這里可對單獨的卡片進行命名。
“華為云”購買主機表單根據輸入信息將表單劃分為卡片模塊，使表單信息層級更加清晰。
3）標簽分組
當表單數據信息之間沒有特定的關聯性，可以單獨設置，且每個設置項都包含多個輸入域，且多個輸入域都使用了標題分組的情況下，布局就可以采用標簽頁布局進行展示操作。
“有贊微商城”配送管理標簽分組頁面
4）分步驟
分步驟的布局形式就與頁面的數據信息復雜度沒有太大關系了，主要是表單數據信息具有邏輯關系，這一步操作完成后才能進行下一步的操作，分步驟布局只展示當前步驟對應的輸入域，點擊下一步校驗后才可繼續填寫。讓用戶分步進行操作，明確當前用戶目標，減少用戶負擔。及時的反饋校驗，也避免填寫完成后才發現中間的表單填寫有誤，降低用戶的犯錯成本。
“有贊微商城”新建批量導入分步驟頁面。
5.2.4選擇輸入域布局
選擇輸入域布局根據表單信息數據的復雜性與親密度進行選擇
5.3提示信息
提示信息在不同的表單輸入階段分為不同的類型，主要分為以下2類；
輸入前：引導信息
輸入中后：反饋信息(此處有個前中后示意圖)
5.3.1引導信息
引導信息是在用戶填寫表單前對表單填寫內容進行解釋說明的提示信息，一般分為全局提示與單項提示。
1）全局提示
全局提示一般位于整個表單的最開始，是對整個表單的解釋說明，告知用戶填寫表單的用途、填寫表單的注意事項或告知用戶的信息安全性提示等，消除用戶的疑慮。
2）單項提示
單項提示對應單個輸入域，只對此項輸入域進行解釋說明，定位精準便于用戶理解。
單項提示也可以選用不同的布局，分別有輸入框內提示、提示圖標在鼠標haver時氣泡提示、輸入框下方文字提示、輸入框后方文字提示單機輸入框氣泡提示5種提示布局。
注意1:有效提示
讓用戶能在上下文中獲取信息，幫助他完成輸入。
用戶填寫表單時最容易出現的問題就是不知道填寫什么格式，例如民族填寫“漢族”還是“漢”；生日填寫“1997-06-11”還是“199年6月11日”這里可以提示具體的填寫示例幫助用戶理解；
5.3.2反饋信息
反饋信息提示是在用戶輸入時或輸入后對輸入內容進行的反饋，提示當前輸入域所填寫的內容是否符合填寫規則。反饋信息提示一般為文字提示表達較為準確同時可結合圖標進行反饋，讓用戶感受更加直觀。
注意：
這里的反饋信息要精準到用看到提示信息就能發現填寫出錯點，不要讓用戶產生歧義。例如“用戶名填寫錯誤”要提示用戶名具體錯誤的原因“用戶名不能添加符號”“用戶名重復”“用戶名不能超過8個字符”等具體原因，讓用戶明確修改意圖。
1）校驗方式
在產品設計中我們還需要了解反饋信息的校驗方式，校驗方式主要分為：前端校驗、后端校驗
前端校驗
可以校驗輸入的內容格式是否有誤例如郵箱格式、用戶名格式、手機號格式，與數據庫無關。
后端校驗
主要用來校驗內容信息是否有誤例如客戶名稱是否存在，密碼是否正確等與數據庫相關的校驗
2）觸發條件
觸發條件是說檢驗的提示信息在什么節點（填寫時、失焦時、點擊提交時）進行提示，這里分為單項觸發、提交觸發。
單項觸發
觸發提示的條件是每填寫完一項時，校驗用于輸入項較多，且某個輸入項有先決條件，會對接下來的輸入產生影響，這是可以避免完整輸入后才反饋信息，為用戶增加犯錯成本，一般登陸時就會采用單項觸發。
百度網站的注冊表單頁面，用戶名設置要求用戶輸入的用戶名必須獨立，根據用戶輸入的名稱失焦時作出相應反饋。
提交觸發
觸發條件是填寫完表單點擊“提交”時統一校驗，用于表單體量較小出錯率較低的表單頁面，已從給出所有不和規則的表單信息，根據具體的提示內容可以是單項提示也可以全局提示。百度網頁登錄賬號時，提交后校驗密碼并給出相應提示。
5.4操作按鈕
當頁面表單信息必填項未填寫完整時，提交或保存等主按鈕一般為灰色狀態，不可進行下一步操作，當表單信息填寫完成后按鈕變為高亮可進行下一步操作。
注意：當表單信息非常少時一般為3個或以下的情況這里主按鈕禁用原則生效，這里主按鈕禁用的狀態非常容易被用戶理解，用戶輸入內容就會得到反饋；但當頁面表單復雜超過5個時不建議使用主按鈕禁用原則，因為表單本身可能包含必填/非必填等多種選項，流程不清晰，主按鈕禁用用戶不易識別，會造成用戶疑問，可以提交時校驗進行并對表單進行單項提示。
6表單應用補充
6.1保護按鈕
保護按鈕的建立，一般用在密碼保護中，為了密碼的安全，可設置保護按鈕，在輸入框后設置隱藏秘密，給用戶帶來安全感。
6.2重置按鈕
重置按鈕，在表單輸入域非常多時可設置“重置”與“返回重置”按鈕，用戶填寫表單信息后，想重新填寫，因為表單輸入域眾多需要手動操作刪除，對用戶來說非常不友好，這里設置“重置”表單按鈕就可以解決問題，為了防止用戶操作失誤可以提示彈窗確認，為了防止用戶后悔可以在點擊“重置”后按鈕版更新為“返回重置”回到重置之前的頁面，給用戶帶來良好的體驗。
6.3數據持久化
數據持久化，用于解決在填寫表單途中用戶不小心退出或關閉表單，再次打開表單時之前的填寫內容丟失需要重新填寫的問題。數據持久化簡單來說就是前端對已填寫為保存的數據進行緩存，再次打開頁面時可接著上次的表單進行完善。
