背景
表單作為基礎通用組件，也是在B端設計中出現頻率最高的元素之一。
使用/設計表單頁面時看似是按鈕、輸入框等表單組件進行組合搭配使用，看似簡單，但是在實際業務使用中卻有著無數可推敲的細節冒出來，常常給設計師造成較多的困擾。
例如：
表單標簽是頂部對齊、右對齊還是左對齊？
表單按鈕放在頁面哪個位置體驗會更好呢？
確定按鈕是放在左邊更好還是右邊更好？
表單寬度是整齊劃一還是與輸入預期一樣錯落一致？
必填項是否要顯示“*”？
占位符該怎么設計？
單列布局還是多列布局？
表單的校驗時機、校驗規則與校驗樣式有哪些？
本次復盤將針對以上問題進行整理。
關于表單
表單的概念
參考各大廠組件庫概念，基本都將表單概括為：具有數據收集、校驗和提交功能的表單，包含復選框、單選框、輸入框、下拉選擇框等元素。
首先，要明確一點，結合工作中實際運用，此次復盤以Ant Design 為基礎，是將表單作為一種組件進行的整理。
表單的構成
一個常規的較為完整的表單包含：
標簽：解釋表單項的含義或要錄入/選擇的內容等；
占位提示：容器(輸入框)中的次級提示文字，提供與輸入內容相關的提示或例子；
校驗規則：對輸入項進行驗證，并給出反饋提示，如：用戶未填寫，格式錯誤、內容錯誤等
基礎組件：包含了輸入框、下拉框、日期選擇器、時間選擇器、開關、上傳等多種類型，是形成表單的核心內容；
提示信息：幫助用戶理解操作表單，有引導信息（說明提示）和反饋信息用戶操作提示兩種；
按鈕：當用戶完成信息錄入時，按鈕能夠對表單內容進行校驗、提交或者進行下一步操作；
幫助信息：當表單標簽不足以對輸入項準確說明時，這時候需要使用文本提示用戶。它不僅能讓用戶提前感知輸入后的樣式，還能夠有效的告訴用戶該如何輸入以及表單提交后達到的目的。
1、表單標簽是頂部對齊、右對齊還是左對齊？
在設計表單時到底是左對齊、右對齊還是頂部對齊呢？這個問題也是在實際業務中設計師發問頻率較高的一個棘手問題。其實，不論是哪種方式都有相對的利弊，需要根據實際業務場景提供不同的解決方案。在Matteo Penzo《Label Placement in Forms》文章中有分享過關于表單標簽放置的研究，下圖是Matteo Penzo研究總結得到的瀏覽時間表：
經過項目中多次反復實驗，以及與產品經理、設計師多次討論后，我們定義了一個原則：表單內容較少時，使用彈窗，且為了減少豎向排版空間，采用右對齊方式；表單內容較多時，使用抽屜彈窗，采用頂部對齊方式。
2、表單按鈕放在頁面哪個位置體驗會更好呢？
按鈕的位置、順序、組織方式、視覺強調程度是用戶尋找按鈕的線索，通過警告色可引起注意，避免誤操作，準確的文案則能夠預告按鈕的執行結果。按鈕設計的目標是指導用戶采取我們希望用戶采取的行動，盡量幫助用戶快速找到需要操作的按鈕，并了解執行該操作的結果，同時盡可能避免誤操作。
設計策略：應將按鈕放置于用戶瀏覽路徑中，便于被用戶發現，并且應盡量靠近其所控制的對象。
設計指導原則：使用經典的“F”型或"Z"型視覺引導模型。
僅有表單時建議采用“F”模型，按鈕位置跟隨內容在左；當表單被包含在某個容器中，則建議使用“Z”模型，將“確認/提交”等行為放在右側視覺終點處。
3 、確認按鈕在左還是在右？
關于順序，最常見的疑問是確定按鈕應該在取消按鈕左邊還是右邊，這是一個爭論已久的話題。在彈窗中，確定按鈕和取消按鈕的順序在各設計體系中都不一樣，下圖是操作系統三巨頭：Apple、Google、Micrisoft 的方案。三巨頭證明了兩種主次順序都能被接受，只要在系統中統一即可。
此處依然基于Ant Design 的設計原則，將規范定為：左對齊從左往右閱讀，右對齊從右往左閱讀；
4、表單寬度是整齊劃一還是與輸入預期一樣錯落一致？
4.1 表單寬度
表單組件我們暫且稱為表單項，每個表單項都可以由三種方式去呈現寬度，即
1. 定寬；
2. 跟隨內容自適應；
3. 根據空間自適應。
其中 CheckBox、Radio 等組件我們很明確必須跟隨內容自適應處理。但涉及 input，我們就會陷入兩難境地：定寬 or 自適應？如果定寬，定多寬？
根據我在業務中設計稿案例的研究以及我自身的經驗，常見以下情形:
可以發現當我們進行想當然的等寬、或根據空間自適應時，很容易造成這些不盡如人意的情況，或造成頁面大量空間殘缺的錯覺，亦或是無腦自適應帶來的夸張可怕效果。
在大部分情形中，跟隨空間自適應易造成 input 極其附屬的元素展示非常不穩定，我們都不希望產品實際上線時呈現以下效果。
實際業務中，大部分 input 所需填寫內容都存在理想長度，input 的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。如下圖即一典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理的話，容易誤導用戶對所需輸入金額的判斷，造成極大不安全感。m
4.2 我們怎樣去考慮表單寬度
參考 Ant Design 的設計原則，將規則定為： 在實際業務場景中如果沒有明確自適應和特定自定義寬度的需求時。****倡導進行合理的定寬。
如下對比圖所示，右圖錯落有致的排版表現似乎比整齊劃一的左圖更舒適，因為在視覺上我們更容易將右圖的空間和內容視為一個和諧的整體，但左圖過度的對齊導致暗示隱性的截斷，我們會感覺表單列右側空間缺了一大塊。
4.3 設置字段寬度梯
我們可以站在AntDesign這個巨人的肩膀汲取一些相關經驗，其中4.0系列分享的文章中總結到其經過對十幾個業務線梳理，將組件寬度定義了5中高頻的空間尺寸，分別是： XS（80~160px）、S （160280）、M（280360px）、L （360px~480px）、XL （480~560px）。根據原理，我們可以假設原子寬度XS為100，那么通過尺寸的倍數+間距的方式來計算其他的四種尺寸（間距暫定8px情況下得到：S=208px、M=316px、L=424px、XL=532px），通過此計算方式也是用來解決視覺對齊規則，如下圖所示：
經過一定量的設計稿模擬測試，在各復雜度的組合input和單input混排場景下都可以看到實際效果得到顯著改善。
總的來說，表單設計把握好兩個核心點：
1. 暗示填寫內容長度；
2. 表單項布局排列效果；
5、必填項是否要顯示“*”
通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務。
例如，必填選項與非必填選項標示問題：
當全部為必填項時可是否以不用標示？
當必填項數量占比極大，“*”號較多是否會會給用戶造成視覺干擾？
當必填項比重不大是否還需要“*”？
這里給出的建議是根據業務場景和用戶習慣具體分析，不少設計系統在必填項較多時會建議去掉“”，但是我在業務中跟產品經理溝通過后，決定尊重用戶已有習慣，用“”區分必填項和非必填項，否則用戶在填寫完成后，無法快速判斷哪些是必填項哪些是非必填項。
5.1 特殊情況
當然了，不同情況下的運用當然也有所不同，例如：用戶在登陸時的認知，通常用戶在登陸時輸入項如用戶名，密碼等信息，而且此些項也基本是必填項，在這種認知的基礎上，即使不出現也不會造成任何理解性問題，那么作為精簡原則來說，通常可以去掉。
6 占位符提示怎么設計
占位符有示例型占位符和通用型占位符兩種。也可以算是一種輕量化的提示信息，與其他提示信息相比，視覺負擔較小，占用空間更小，與輸入內容的關聯性更強；對于復雜的表單輸入，可以使用占位符對用戶做規則提示，減少用戶輸入錯誤的幾率。
7、單列布局還是多列布局？
【單列布局】
優：視覺路徑清晰，填寫效率高，體驗好；
劣：占用縱向空間。
【多列布局】
優：省空間，能夠放置更多的控件顆粒；
劣：視覺路徑模糊，填寫成本高，填寫易出錯。
單列還是多列會收到表單內容、框架大小等影響，此項設計師可根據實際情況自行判斷。
8、表單的校驗時機、校驗規則與校驗樣式有哪些？
8.1校驗時機
輸入的時候實時校驗，一般 onChange 觸發
離開焦點的時候校驗，一般 onBlur 觸發
輸入完成、繼續操作（保存/提交/下一步）時進行校驗；
8.2 校驗規則（rules）
校驗規則大致可分為參數、說明、類型、默認值等，校驗規則可使用組件默認規則，也可以進行自定義；
- 默認規則
- 通過自定義的操作來觸發校驗，自己調用 api 觸發
名稱是該規則名稱，說明則是對該規則要校驗的具體內容，可以通過參數類型得到具體的值“值”，再對具體的“值”進行規則約束，例如"min",規定"numebe≥10"，則表示最小值為10；一個表單通常會有多個規則約束，具體需要根據業務情況進行分析。
設計參考
1、整齊劃一？不如錯落有致。| Ant Design 4.0 系列分享 https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html
2、我的按鈕究竟該放哪兒！？| Ant Design 4.0 系列分享 https://zhuanlan.zhihu.com/p/109644406
3、大廠高手出品！中臺系統設計指南：表單體驗篇 https://www.uisdc.com/middle-form#
4、B端設計組件：表單 http://www.woshipm.com/pd/4910764.html
