譯文設計更好的表單

前言：無論是網站註冊流程、多視窗任務步驟、還是單單的數據輸入頁面，表單是數字產品設計最重要的組成部分之一。本文重點研究表單設計中常見的正確和錯誤用法。但是請記住這些都是一般狀況下的指導建議，每一個規則都會有例外。

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

1.表單縱向上應保持一列

多列會干擾用戶垂直縱向上的閱讀順序。

2.頂對齊標籤

用戶完成填寫頂對齊標籤表單的效率比左對齊標籤表單更高，而且頂對齊標籤也能很好地適用於移動端界面。

但是，在用於大數據集輸入和選擇項的表單時會考慮左對齊標籤，因為左對齊標籤表單的各項易於用戶一起瀏覽，減少頁面高度，且用戶在填寫過程中需考慮得更細緻。

3.組織好標籤和輸入框的位置

讓標籤更靠近所對應的輸入框，並且確保欄位之間有足夠的高度，這樣用戶就不會感到困惑。

4.避免英文全大寫

全大寫的英文欄位閱讀和瀏覽起來更加困難。

5.如果選項低於6個時就直接全部展示出來

在下拉菜單中設置選項需要用戶兩次點擊才能選擇，並且隱藏了選項。當超過5個選項時可以使用下拉菜單，而超過25個選項時應該加入文字搜索功能。

6.不要把輸入框內的佔位符文本作為標籤使用

使用輸入框內標籤能減少界面空間，但會導致許多可用性問題（已經被尼爾森諾曼總結過）。

7.將複選框和單選組的選項上下排列以便於瀏覽

將複選框和單選組的選項上下排列更易於瀏覽。

8.讓操作按鈕更有指向性

一個行動按鈕文案應呼應其背後的意圖。

9.在指定表單項上反饋錯誤

告知用戶哪裡發生了錯誤，並提供錯誤原因。

10.用戶填寫完某一項後進行在線驗證（必須確保這樣做在流程中能夠幫助用戶）

當用戶在輸入例如密碼、用戶名、消息等字元數內容時不要在線驗證，除非這樣做能夠幫助他們。

11.不要隱藏基本的幫助文本

應儘可能展示基本的幫助文本。對於較複雜內容的幫助文本，可考慮在滑鼠聚焦狀態時將其展示在輸入框的旁邊。

12.區分主要和次要操作

關於在這裡是否有必要存在輔助選項，應該辯證地看待。

13.輸入框長度的可視性

通過輸入框的長度來表示需輸入欄位的長度。使用這種方式來表示如電話號碼、郵編等輸入項的字元數。

14.不用＊表示必填項而是直接標示出可選項

用戶往往不知道通過用＊標記的是必填項，而明確標示出可選項會更加直觀易於理解。

15.組合有關聯的信息

當用戶面對大量長表單時會感到不知所措，通過這種具有邏輯性的信息組合，用戶能夠更高效地理解表單內容。

捫心自問

忽略傳統可選項的方式，想想用其他方式來收集你想要（但是用戶不願填）的數據。要多問自己這個問題能否推斷出結論、或推遲處理、或者完全排除不用處理。

數據輸入日益自動化，例如，手機和可穿戴設備能夠在用戶無意識中收集其大量的用戶數據。你可以利用社交工具、對話界面、簡訊、郵件、語音、光學識別、定位、指紋識別、生物識別等方法來收集數據。

讓表單設計的有趣

生命是短暫的，沒人願意花時間去填一個表單。應該讓表單呈對話形式、更加生動、循序漸進，並且超出用戶預期。通過引起用戶的情感共鳴來展現他們公司的品牌形象，這就是設計師的工作。如果表單設計的好，其完成率會大大增加。只要你確保不會違反以上提出的原則。

推薦閱讀：