由內(nèi)而外的表單基于業(yè)務，由外而內(nèi)的表單基于用戶
【寫在前邊】本文是閱讀《web表單設計：點石成金的藝術》的讀書筆記，內(nèi)容既包括原文的摘錄，也有自己的總結(jié)，內(nèi)容比較散亂，后期會不斷完善。
【轉(zhuǎn)載】請標注原文作者和出處?。?！
Part 1 表單設計原則
Part 2 表單的結(jié)構
2.1 表單的組織
選取問題
表單實際上就是Q&A模式，通過與用戶的一問一答獲得想要的信息。
考慮問題是否必須，時機是否合適
【保留，刪除，延遲，解釋】
先考慮人再考慮像素
創(chuàng)建對話
根據(jù)場景創(chuàng)建符合場景的對話，注意語氣、話術等
內(nèi)容組織
通過web慣例調(diào)查總結(jié)設計模式
2.2 如何完成表單
表單的命名
清晰地告訴用戶現(xiàn)在在哪里，在做什么
起始頁
當表單需要花費大量時間時，可以用起始頁營造一個氛圍，說明為什么填寫，填寫時間等信息
清晰的瀏覽線
盡量減少閱讀時間
注意力分散最少
進程指示
告訴人們當前位置，但是表單未必是嚴格的線性結(jié)構，可能導致三步變成六步
Part 3 表單元素
3.1 標簽
標簽如何對齊？
頂對齊
輸入框50%-75%的高度作為相鄰輸入框的間距
右對齊
左對齊
用戶不熟悉表單要收集的數(shù)據(jù)或問題無法分成易處理的內(nèi)容組時使用
有目的地讓用戶放慢填寫速度，仔細思考
框內(nèi)標簽
填寫時需要通過標簽確定內(nèi)容時不宜使用=>解決：把標簽縮小到頂對齊到交互
注意把標簽和輸入／選擇到內(nèi)容區(qū)分開
3.2 輸入框
輸入框類型
輸入框長短
通過輸入框長短暗示用戶回答字數(shù)的多少，但是當輸入框無法受益于暗示，就應該使用一致的長度
必填項
表單中可選項和必選項那個多不一定，一般表明少的內(nèi)容，用*總有人不確定是什么意思，不如直接用文字寫清楚。
輸入組
反映了不同輸入框之間的關聯(lián)
彈性輸入框
有時候過于復雜
3.3?動作
主動作次動作
旨在完成表單的動作是主動作，其他如撤銷、保存、預覽等為次動作，次動作可能和完成表單的目的相悖。
可以用顏色區(qū)分主次動作
進程中的動作
表單應該及時反饋當前狀態(tài)，比如提交中等
3.4?幫助文字
幫助的時機
自動即時幫助
自動及時出現(xiàn)的幫助文字可以顯示在輸入框內(nèi)或外，內(nèi)部的文字需要是概括回答方式的幫助且和輸入內(nèi)容區(qū)分開，內(nèi)外可以配合出現(xiàn)
用戶激活的即時幫助
可以是點擊觸發(fā)或是懸浮觸發(fā)(鼠標停留在熱區(qū)觸發(fā))
用戶激活的區(qū)域幫助
適用于多次使用的表格，尤其是復雜問題表單
安全交易
(金融常見)處理敏感信息，向用戶保障安全
3.5?錯誤與成功
錯誤
讓用戶發(fā)現(xiàn)錯誤才是關鍵
配上指導文字告訴用戶如何更正錯誤才能讓錯誤消失
用顏色區(qū)分時需要考慮色盲用戶
錯誤信息和其他信息要區(qū)分開
成功
消滅死胡同
為用戶提供下一步可能的操作，不要丟下用戶，這又可以促使用戶持續(xù)地使用產(chǎn)品而不是關閉
Part 4 表單交互
4.1 即時驗證
確認
即時驗證注意時機，在用戶輸入完成一個答案再提示錯誤，而不是一開始就提示，防止用戶受挫。
過多的即時驗證影響用戶注意力
建議
提供輸入建議，如輸入幾個字母就跳出下拉選框給幾個有效選項
特定格式的轉(zhuǎn)換發(fā)生在輸入結(jié)束后
限制
如字數(shù)限制
4.2 多余輸入
去除問題
去掉任何多余信息，讓用戶盡早開始使用產(chǎn)品，使用后用戶可能更愿意提供其他信息。
智能默認
保證默認選項符合大多數(shù)人的選擇
很多情況下人們不會改正默認選項，所以提供默認選項可能導致表單答案不準確
性別等提供默認選項可能導致用戶有壓力，這時可以用不想回答作為默認
個性化默認
將用戶過去的選擇作為默認選項
需要用戶使用過至少一次
4.3 額外輸入
即時增加
用戶不需要增加信息時不現(xiàn)實，需要增加時點擊展開輸入框
避免后續(xù)輸入內(nèi)容收到即時增加輸入框的影響兒大范圍下移，這樣可能擾亂用戶對所處頁面的感知
解決上述問題：內(nèi)容置于一側(cè)或折疊
折疊
將干擾用戶的額外選項信息隱藏，在需要的時候展現(xiàn)
用戶主動觸發(fā)(點擊)或是系統(tǒng)自主觸發(fā)
循序漸進
選項過多時可以采用循序漸進的方式讓用戶選擇，而不是一次性把所有選項呈現(xiàn)在用戶面前
4.4?基于選擇的輸入
基于最初選擇而出現(xiàn)的后續(xù)輸入
頁面級選項
后續(xù)表單填寫錯誤數(shù)量較少，眼動參數(shù)表現(xiàn)好但是填寫時間位于第二，且選項和后續(xù)輸入失去了情景關系
不適合初始選項較多的情況
水平選項卡
不適合初始選項較多的情況
垂直選項卡
垂直選項卡把選項放在了視線掃面線內(nèi)(水平選項卡不符合)，在測試中表現(xiàn)更好
不適合初始選項較多的情況
下拉列表
下拉列表節(jié)省屏幕空間，保證每個初始選項問題始終可見
單選按鈕下方顯示
保證初始選項問題可見，每個選項和用戶的選擇始終可見
需要用視覺等方法指示那些問題是基于選擇的輸入
頁面跳轉(zhuǎn)讓用戶迷失方向
單選按鈕內(nèi)顯示
當額外選項問題數(shù)量較少時可以使用
顯示非活動選項
顯示所有額外輸入，只有和初始選擇關聯(lián)的部分問題可以輸入，其他為不可用狀態(tài)
解決了單選按鈕下顯示導致的混亂狀態(tài)，但是呈現(xiàn)了過多問題讓用戶困惑
組的顯示
彌補了顯示非活動選項中初始選項和額外問題間關聯(lián)性弱的問題
額外問題減弱了初始選擇的視覺分量，測試效果是所有方案中最差的，錯誤最多
4.5 循序漸進
注冊表單會逐步消失，在使用的過程中加入注冊內(nèi)容，讓用戶參與其中
Part 5 表單的未來
消失與變化
