人生苦短，沒有人喜歡填寫表單。要口語化、有趣，逐漸吸引用戶，讓人感覺出乎意料。本文會探討表單設計的注意事項。

設計師常犯的錯誤，以及正確做法

無論是注冊流程、多屏分步表單，或者是單調的數據列表界面，表單都是數字產品設計中的重要組成部分。本文會探討表單設計的注意事項。記住這些只是通用規范，每條準則總有例外。

表單應該只有一列

多列布局會擾亂用戶垂直方向的視線移動。

頂部標簽

頂部標簽的表單比左側標簽有更高的完成率。頂部標簽的表單也易于移植到移動端。但是，對于有多種選擇項的大量數據列表而言，請考慮使用左側標簽，因為它們在一起更易于瀏覽，能夠減少高度，比頂部標簽更貼心。

把標簽與輸入框成組排列

把標簽和輸入框貼近排列，確保項目之間留有足夠高度，防止用戶困惑。

避免全大寫標簽

全大寫標簽更難閱讀和瀏覽。

如果選項少于6個，全部展示出來

把選項放入下拉選單需要用戶進行兩次點擊，還會把選項隱藏起來。超過5項才使用下拉選框。如果超過25個選項，就要在下拉菜單中加入搜索。

不要把默認提示當做標簽

把默認提示文字當做標簽，意在節省空間。但這會導致許多可用性問題，Nielsen Norman Group的Katie Sherwin對此作過總結。

縱向排列勾選框（和單選框）以保證易讀性

縱向排列勾選框能加快瀏覽速度。

行動指令要具有描述性

行動指令要描述出具體行為。

逐行說明錯誤

告訴用戶哪里錯了，說明原因。

逐行驗證要在用戶填完一行之后進行（除非填寫中驗證更有幫助）

別在用戶打字的時候進行逐行驗證，除非這對他們有幫助——例如創建密碼、用戶名之類，或者字符數提示信息。

不要隱藏基本的幫助提示文案

盡可能直接展示基本的幫助提示文案。對于復雜的提示文案，可以考慮在輸入框激活時，展現在它旁邊。

區分主次操作項

對此還有一項更深刻的哲學爭論，真的需要次要操作項嗎？

用輸入框長度來反映內容

輸入框的長度暗示了答案的長度。對于字數固定的輸入框，例如電話號碼、郵政編碼等，可以使用這種方式。

拋棄星號*，標出選填項

用戶不一定都知道星號(*)表示必填項。相反，應該標出選填項。

把相關信息編組

用戶會分塊思考，太長的表單會讓人眼花繚亂。創建符合邏輯的分組，用戶會更容易理解表單。

真的需要問嗎？

省略掉選填項，考慮采用其他方式收集數據。時刻問自己，某個問題的答案是否能推測出來，問題能否往后放，或者完全去掉。
數據獲取正在變得越來越自動化。例如，手機和穿戴設備在用戶不知不覺間收集了大量數據。想想如何利用社交媒體、對話式界面、短信、郵件、聲音、光學字符識別、位置信息、指紋、生物識別技術等等。

讓表單變得有趣

人生苦短，沒有人喜歡填寫表單。要口語化、有趣，逐漸吸引用戶，讓人感覺出乎意料。設計師的職責就是傳遞公司品牌，激發情緒反應。處理得當，就能提升完成率。一定要遵循以上規則。

原文鏈接：https://uxdesign.cc/design-better-forms-96fadca0f49c#.pq9x0zsdm

作者信息：Andrew Coyle，Product Design Lead @Flexport | Find more of my work athttp://andrewcoyle.com/

#專欄作家#

可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產品經理專欄作家，UI/UX設計師，關注互聯網，關注科技?，F居杭州，與小伙伴們正在創業途中?；蛟S不是一名優秀的設計師，至少是個快樂的設計師。

本文翻譯發布于人人都是產品經理，未經許可，不得轉載。