最為常見的資訊收集表單，卻最容易忽視它的體驗。
對於設計師而言，如何設計出乙個體驗優秀的表單？我總結了這 5 大策略：
填寫流程與問題設計
1. 足夠精簡的填寫流程
想讓使用者不設防、還不被打斷填寫完資訊，填寫流程就需要足夠精簡，才能讓使用者順暢地完成資訊採集，同時需要確保產品所有表單頁面操作的一致性。
你可能遇到過這樣的場景，用社交賬號登入乙個產品，登入後不是進入首頁，而是繼續讓你輸入手機號碼後才能使用，這就打斷了使用者填寫資訊的流程，失去了好的體驗，甚至可能造成使用者流失。
2. 多頁填寫要有程序提示
如果填寫資訊分為多頁，需要有程序提示，以便使用者知道自己填寫資訊的位置、剩餘步驟，使用 tab 鍵需要能跳轉到下乙個輸入框。
3. 問題設計的4個方法
每乙個問題該保留還是刪減，是乙個值得思考的事情。使用者希望填寫的資訊越少越好，可以快點使用產品。所以去掉那些可有可無的問題，保留有價值的問題。
延遲指的是一些特殊問題後置，讓使用者輸入資訊時、不會覺得突兀、門檻太高，比如要收集銀行卡這樣比較重要的資訊，不要讓使用者第乙個填寫，而是將問題後置。
對於解釋，依舊以收集銀行卡資訊為例，需要說明為何收集這條資訊，比如用於支付，或者是繫結後支付可以獲得優惠等。
4. 使用者不關心冒號
不要糾結冒號，使用者不關心冒號，他們只關心自己要填寫什麼資訊。
5. 主動作與次動作
表單中的主動作包括提交、儲存、繼續等，它們都帶有繼續操作下去或者完成操作的屬性，在表單中的視覺效果應更突出。
次動作主要有取消、重制、返回、預覽、匯出、匯入等，這類操作屬於次要層級，主要屬性是打斷當前流程或者對當前資訊的操作，視覺層級也處於次要。
選擇合適的輸入框
1. 輸入框的型別
輸入框是提供回答問題的方式，有輸入框和輸入框組之分。
輸入框主要有核取方塊、單選鈕、下拉列表、文字框、列表框（極少使用）；輸入框組型別有復合輸入框、關聯輸入框、父子輸入框等。
完整型別的輸入框可以參考ant design元件，它包含了幾乎會使用到的所有型別。
2. 標籤、輸入框的對齊
標籤對齊的方式有四種，左對齊、右對齊、頂對齊和輸入框內標籤。其中頂對齊方式會加快使用者處理速度，因為視線只需要在中間一塊兒移動，但會增加頁面的垂直空間。
慎用框內提示，當輸入內容過多時，可能會忘記這個提示，適用於簡單的輸入框，如註冊、登入介面的表單。
輸入框的長度會暗示填寫資訊的長度，預先需做好表單中輸入框長度歸類。如果不用暗示首席資訊官度，需要統一輸入框長度。
3. 選填與必填
經過無數產品長時間的教育，使用者已經知道帶星號*（或是紅點 · ）的必填項，當必填項多於選填項時，可以標記清楚選填項，而不是所有必填項加星號，這樣可以減輕視覺負擔。
1. 盡可能減少幫助提示
2. 幫助提示的5種樣式
常見的幫助提示有彈窗、toast（常見於移動端）、snackbar、氣泡和行內提示 5 種樣式，每一種提示的使用場景不同，對使用者當前操作影響也不同。
彈窗提示是直接打斷當前的操作；行內提示可清晰定位提示位置；氣泡提示多用於指示性、資訊提示等場景；snackbar 類似於 toast，都是在頂層出現短時間的操作提示，但 snackbar 可以附帶操作屬性，如帶有撤銷的按鈕。
3. 自動即時幫助
4. 成功提示
成功提示屬於整個輸入資訊的額外資訊，是對使用者完成資訊輸入的提示和感謝，所以如果要增加成功提示需要簡短打動人，能夠喚起使用者正向的情緒即可，否則寧可不要成功提示。
資訊驗證
1. 錯誤提示的驗證
錯誤提示適用於錯誤率較高，有特定格式要求的問題。
qq 和蝦公尺**的註冊頁面，手機號填寫位數不對時，跳轉到下乙個輸入框依舊能通過驗證，到使用者少輸入一位獲取不到驗證碼時，就很難發現錯誤所在。36kr 的註冊介面中，跳轉後會給出提示。
錯誤提示需要和輸入位置緊密相關，以便使用者可以清晰看到是什麼位置出現了什麼錯誤。
2. 即時驗證的時機
即使驗證要在輸入之後，而不是輸入過程中。
你可能遇到過，輸入郵箱時，剛開始輸入第乙個數字或者是字母，輸入框後面就提示錯誤，但當你輸入完整個郵箱位址後，錯誤提示變成正確提示，這種情況下，你會想是不是**出錯了，怎麼一直有錯誤提示，這就造成了不必要的困擾。
3. 輸入限制需實時提示
限制輸入常見於固定資訊輸入、或者是輸入較長的文字資訊，這樣的提示需要實時提醒使用者。
其他輸入
1. 預設狀態
如果可以，單選按鈕有必要給出缺省狀態，提示使用者作出選擇，例如性別的選擇，有的產品除了男、女選項外，會增加乙個不想透露（或者保密）作為預設選擇。
2. 層疊樣式
當需要顯示很多輸入資訊時，或者選項需要單獨考慮時，都可以考慮使用層疊樣式，最常見的層疊樣式就是下拉選擇框、時間日期選擇等。層疊不應遮擋住底部資訊（尤其選擇資訊比較複雜時可能會忘記底部資訊），這樣可能會造成選擇困擾。
總結以上內容主要來自 luke wroblewski 的《web表單設計》這本書，書雖然是 2010 年出版的，但其中的很多基礎的知識點到現在依舊通用，同時也適用於移動端產品設計。
Web 表單設計以及其它
填寫 是很多人都厭煩的事情，即使填寫網路上的 表單 也是如此，而設計表單則可能是網路工程師 設計師最煩最無法拿捏的事情。絕大多數使用者和乙個 互動的第一步就是面對表單 比如登入或是註冊 很可能也是最重要的一步互動。遺憾的是，現在很多中小 對於表單的設計仍然比較糟糕，或者是不夠重視，甚至那些大型 的表...
通達 表單設計器 子表單 表單設計的花絮
通達 表單設計器 子表單 讓我們看一下數字領域的能力，特別是我們如何運用這些原理並將其應用於我們建立的日常ui元素，例如按鈕，表單域，圖示，隱喻和其他可視元素。負擔是物體與個人之間可能發生的行為 例如，門把手產生扭轉運動。個人是否認識到該行動的可能性無關緊要 負擔仍然存在 另一方面，感知的承受能力 ...
網頁設計中的常用表單設計技巧
輸入框 input 應當符合邏輯地劃分為小組，這樣大腦就可以很好的處理大堆區域間的關係。html權威指南 web應用程式總是利用表單來處理資料錄入和配置，但並不是所有的表單都保持一致。輸入區域的對齊方式，各自的標籤 label 操作方式，以及周圍的視覺元素都會或多或少影響使用者的行為。表單布局 考慮...