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

設(shè)計師常犯的錯誤，以及正確做法

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

表單應(yīng)該只有一列

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

頂部標簽

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

把標簽與輸入框成組排列

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

避免全大寫標簽

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

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

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

不要把默認提示當做標簽

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

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

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

行動指令要具有描述性

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

逐行說明錯誤

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

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

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

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

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

區(qū)分主次操作項

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

用輸入框長度來反映內(nèi)容

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

拋棄星號*，標出選填項

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

把相關(guān)信息編組

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

真的需要問嗎？

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

讓表單變得有趣

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

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

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

#專欄作家#

可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專欄作家，UI/UX設(shè)計師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技?，F(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中?；蛟S不是一名優(yōu)秀的設(shè)計師，至少是個快樂的設(shè)計師。

本文翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。