這兩天看了《web表單設計》，根據自己以前對表單的理解，寫下總結。

表單的組織

先考慮人，再考慮像素。用戶真正關心的是問題內容和為何要問這些問題。

好的交互能為表單錦上添花，但是內容才是一份表單的核心。選取表單問題時應該謹慎，避免重復和多余的問題，盡量保證表單簡潔精悍；標簽表達意思應該自然準確，避免模糊的描述給用戶造成困擾；當表單涉及用戶隱私信息比如手機號碼時，應當向用戶簡單解釋為何需要這一信息。

起始頁。如果表單較長，涉及問題較多或者較復雜，可以為表單設計一個起始頁。在起始頁面中，闡明填寫表單所需時間，羅列出表單中將要涉及的問題類型，給予用戶一定的心理預期，防止用戶因為表單過長或者問題敏感復雜而感到失落。

進程指示。當表單篇幅較長，分散在多個網頁中時，設置進程指示是一個明智的決定。進程指示表明表單所涉范圍、用戶當前所處位置、表單填寫進度狀況。超長的表單如同無底洞，讓用戶越填越失落。合適的進程指示能夠有效降低用戶的失落感。

表單篇幅。當表單涉及大量問題，但是涉及主題單一時，可以只用一個較長的網頁組織表單。當表單涉及大量問題，同時涉及多個主題時，可以用多個網頁組織表單。

提高表單可用性

第一、清晰的瀏覽線。

由始至終提供清晰的瀏覽線是一份好用表單的基本原則。下面的眼動熱點圖能夠清楚的表明清晰瀏覽線的重要性。圖中標簽放置在輸入框上方，表單只有從上至下這一條垂直的、單一的完成路徑。能夠有效節約用戶時間，加快完成效率。當然瀏覽線也需要考慮用戶不同的瀏覽習慣，比如中國用戶習慣從左至右，但是有的地區的用戶則習慣從右至左閱讀。

這里可以引申出另外一個問題：提交（完成）按鈕的位置。提交按鈕的位置一般有三種：左側、中間、右側。根據上面來看，提交按鈕放在左側是最合適的。

第二、標簽位置。

標簽對齊方式有三種，垂直對齊、左對齊、右對齊。

垂直對齊。根據第一條“清晰地瀏覽線”來看，垂直對齊方式是最能節省用戶時間、加快表單填寫效率的。標簽位于輸入框上方，正好能夠提供最標準的垂直視覺基線。然后垂直對齊提供給標簽的長度自由度是最大的，不會因為標簽過長而有損表單的美觀。當表單版面有限，比如移動端，也可以采用垂直對齊方式。

左對齊。左對齊被認為是三種方式中填寫速度最慢的。原因是用戶需要花一定的時間將標簽與對應的輸入框聯系起來。但是左對齊相對于右對齊視覺上更加清晰整齊。當你希望用戶謹慎填寫表單、花更多的時間閱讀表單時可以采用左對齊。

右對齊。右對齊的填寫速度僅次于垂直對齊。相較于左對齊，用戶更容易找到標簽對應的輸入框。但是與左對齊一樣，右對齊的標簽長度擴展性較差。

第三、輸入框。

輸入框的長度最好與輸入內容相匹配，能夠為用戶提供有意義的暗示。如果簡短的回答配了很長的輸入框，給了用戶錯誤的暗示，用戶會懷疑自己答案的正確性。

必填項與可選項。當表單必填項較多時，標注可選項。當可選項較多時，標注必填項。標注可以用文字也可以用符號，需要對標注符號（比如*）做出解釋。

ps：一些研究結果表明并不是所有用戶知道*代表可選項，并且用戶很容易忽視*代表可選項。所以這里推薦使用文字標注方式。

彈性輸入框。對于某些問題來說，回答方式不止一種，比如電話號碼、銀行卡號、地址。對于電話號碼與銀行卡號這種需要特定格式輸入的問題，可以讓用戶按照自己的方式輸入答案，由系統負責為用戶輸入的文本編排格式。再比如地址，地址可以支持用戶輸入，也可以提供入口讓用戶在地圖上選擇。但是需要避免因為彈性輸入框將簡單問題復雜化。

輸入框內的標簽。當屏幕空間有限時，將標簽放入輸入框內是常見做法，可以節省空間。但是當用戶進行輸入時，標簽便會消失，輸入情景隨即消失，用戶無法再次查看標簽除非刪除已經輸入的內容。好在針對這個弊端已經有了解決方案：當用戶輸入時，標簽字號變小、位置到輸入框上方。這樣既不會影響輸入，標簽也不會消失。

第四、主動作與次動作。

完成表單上最重要行為（完成表單）的動作稱為主動作。與完成表單這一目標相悖的動作稱為次動作，比如撤銷、返回、重置、刪除等。

表單中應該盡量避免出現次動作。次動作很容易造成負面影響，當用戶無意中誤操作時很容易造成不可挽回的后果，比如重置、刪除，會導致數據的消失。

當表單中不可避免出現次動作時，應該盡量弱化次動作的視覺表現，將潛在出錯率降到最低。當用戶誤操作時應該提供撤銷功能。

第五、即時反饋。

沒有反饋的表單讓用戶感到迷茫，良好的反饋系統能夠提高表單填寫效率。

失敗消息。當用戶填寫表單出現錯誤時應該及時提醒，而不是當用戶填完表單點擊提交按鈕時出現一大堆錯誤。失敗消息阻礙“完成表單”這一首要目標，因此錯誤是表單中最重要的元素，應該以最清楚明顯的方式表達錯誤消息。比如當輸入框出現錯誤時，可以將輸入框變成紅色，錯誤提示字體顏色也采用紅色，確保用戶能夠第一時間發現。

失敗消息不僅要表述準確，還要明確告訴用戶解決方案。當出現多個錯誤或者系統錯誤時，可以在表頭標明錯誤情況。

還有一種情況很少見但是有必要提出來講一下，任何情況下都不要輕易清空表單，即使表單出現錯誤，特別是面對較長表單時，這種情況讓人崩潰。

成功消息。成功消息與失敗消息不同，失敗消息不能被忽視或者置之不理——必須解決問題，成功消息不能阻礙用戶進程，而是增強用戶信心，鼓勵用戶采取更多行動。比如當一個問題填寫正確時，輸入框后面出現一個代表正確的小勾。當表單填寫成功時，給予表單填寫成功的提示。

進程中的動作。對于正處于進程中的動作也需要給出反饋。比如將輸入框邊框換一個顏色表示正在進行輸入。用戶點擊提交按鈕后即時給出反饋，防止用戶二次誤操作。如果提交表單需要較長時間，展示提交進度，避免用戶感到迷惑。

第六、讓表單更加智能。

智能默認。設置滿足多數人需要的默認選擇，能夠幫助用戶節省時間，為用戶提供參考意見。某些時候，用戶可能會忽視默認選擇，所以需要保證默認選項符合大多數用戶利益，比如默認用戶同意條款。

個性化默認。對于地址、發貨方式、電話號碼等與個人相關的信息多次填寫后會產生“粘性”，可以個性化默認為用戶之前的選擇。但是某個選項填寫多少次后產生“粘性”需要根據具體情況來分析，有表單只需選擇一次就設置為個性默認選項。

保存表單進度。當一份表單過長時，用戶可能因為一些原因導致表單關閉，比如網頁崩潰、用戶誤操作、沒有時間填寫。可以提供保存表單進度功能，若用戶沒有完成表單就離開，下一次再訪問表單時保留上一次的填寫進度。

智能補充。一些信息其實不需要用戶填寫，完全能夠根據已有信息得出答案，比如根據地址得到郵編，根據身份證號碼推測出生日。

用戶填寫一些信息時，比如地址、用戶名等，可以根據用戶已經輸入的內容智能補充出剩下的內容，為用戶提供參考。