這兩天看了《web表單設(shè)計》光绕，根據(jù)自己以前對表單的理解女嘲，寫下總結(jié)。
表單的組織
先考慮人诞帐，再考慮像素欣尼。用戶真正關(guān)心的是問題內(nèi)容和為何要問這些問題。
好的交互能為表單錦上添花停蕉，但是內(nèi)容才是一份表單的核心愕鼓。選取表單問題時應(yīng)該謹(jǐn)慎，避免重復(fù)和多余的問題慧起，盡量保證表單簡潔精悍菇晃；標(biāo)簽表達(dá)意思應(yīng)該自然準(zhǔn)確，避免模糊的描述給用戶造成困擾蚓挤；當(dāng)表單涉及用戶隱私信息比如手機(jī)號碼時磺送，應(yīng)當(dāng)向用戶簡單解釋為何需要這一信息。
起始頁灿意。如果表單較長估灿，涉及問題較多或者較復(fù)雜，可以為表單設(shè)計一個起始頁缤剧。在起始頁面中馅袁，闡明填寫表單所需時間，羅列出表單中將要涉及的問題類型鞭执，給予用戶一定的心理預(yù)期司顿，防止用戶因為表單過長或者問題敏感復(fù)雜而感到失落。
進(jìn)程指示兄纺。當(dāng)表單篇幅較長大溜，分散在多個網(wǎng)頁中時，設(shè)置進(jìn)程指示是一個明智的決定估脆。進(jìn)程指示表明表單所涉范圍钦奋、用戶當(dāng)前所處位置、表單填寫進(jìn)度狀況。超長的表單如同無底洞付材，讓用戶越填越失落朦拖。合適的進(jìn)程指示能夠有效降低用戶的失落感。
表單篇幅厌衔。當(dāng)表單涉及大量問題璧帝，但是涉及主題單一時，可以只用一個較長的網(wǎng)頁組織表單富寿。當(dāng)表單涉及大量問題睬隶，同時涉及多個主題時，可以用多個網(wǎng)頁組織表單页徐。
提高表單可用性
第一苏潜、清晰的瀏覽線。
由始至終提供清晰的瀏覽線是一份好用表單的基本原則变勇。下面的眼動熱點圖能夠清楚的表明清晰瀏覽線的重要性恤左。圖中標(biāo)簽放置在輸入框上方，表單只有從上至下這一條垂直的搀绣、單一的完成路徑飞袋。能夠有效節(jié)約用戶時間，加快完成效率链患。當(dāng)然瀏覽線也需要考慮用戶不同的瀏覽習(xí)慣授嘀，比如中國用戶習(xí)慣從左至右，但是有的地區(qū)的用戶則習(xí)慣從右至左閱讀锣险。
這里可以引申出另外一個問題：提交（完成）按鈕的位置。提交按鈕的位置一般有三種：左側(cè)览闰、中間芯肤、右側(cè)。根據(jù)上面來看压鉴，提交按鈕放在左側(cè)是最合適的崖咨。
第二、標(biāo)簽位置油吭。
標(biāo)簽對齊方式有三種击蹲，垂直對齊、左對齊婉宰、右對齊歌豺。
垂直對齊。根據(jù)第一條“清晰地瀏覽線”來看心包，垂直對齊方式是最能節(jié)省用戶時間类咧、加快表單填寫效率的。標(biāo)簽位于輸入框上方，正好能夠提供最標(biāo)準(zhǔn)的垂直視覺基線痕惋。然后垂直對齊提供給標(biāo)簽的長度自由度是最大的区宇，不會因為標(biāo)簽過長而有損表單的美觀。當(dāng)表單版面有限值戳，比如移動端议谷，也可以采用垂直對齊方式。
左對齊堕虹。左對齊被認(rèn)為是三種方式中填寫速度最慢的卧晓。原因是用戶需要花一定的時間將標(biāo)簽與對應(yīng)的輸入框聯(lián)系起來。但是左對齊相對于右對齊視覺上更加清晰整齊鲫凶。當(dāng)你希望用戶謹(jǐn)慎填寫表單禀崖、花更多的時間閱讀表單時可以采用左對齊。
右對齊螟炫。右對齊的填寫速度僅次于垂直對齊波附。相較于左對齊，用戶更容易找到標(biāo)簽對應(yīng)的輸入框昼钻。但是與左對齊一樣掸屡，右對齊的標(biāo)簽長度擴(kuò)展性較差。
第三然评、輸入框仅财。
輸入框的長度最好與輸入內(nèi)容相匹配，能夠為用戶提供有意義的暗示碗淌。如果簡短的回答配了很長的輸入框盏求，給了用戶錯誤的暗示，用戶會懷疑自己答案的正確性亿眠。
必填項與可選項碎罚。當(dāng)表單必填項較多時，標(biāo)注可選項纳像。當(dāng)可選項較多時荆烈，標(biāo)注必填項。標(biāo)注可以用文字也可以用符號竟趾，需要對標(biāo)注符號（比如*）做出解釋憔购。
ps：一些研究結(jié)果表明并不是所有用戶知道*代表可選項，并且用戶很容易忽視*代表可選項岔帽。所以這里推薦使用文字標(biāo)注方式玫鸟。
彈性輸入框。對于某些問題來說犀勒，回答方式不止一種鞋邑，比如電話號碼诵次、銀行卡號、地址枚碗。對于電話號碼與銀行卡號這種需要特定格式輸入的問題，可以讓用戶按照自己的方式輸入答案肮雨，由系統(tǒng)負(fù)責(zé)為用戶輸入的文本編排格式遵堵。再比如地址怨规，地址可以支持用戶輸入，也可以提供入口讓用戶在地圖上選擇波丰。但是需要避免因為彈性輸入框?qū)⒑唵螁栴}復(fù)雜化壳坪。
輸入框內(nèi)的標(biāo)簽。當(dāng)屏幕空間有限時掰烟，將標(biāo)簽放入輸入框內(nèi)是常見做法爽蝴，可以節(jié)省空間。但是當(dāng)用戶進(jìn)行輸入時纫骑，標(biāo)簽便會消失蝎亚，輸入情景隨即消失，用戶無法再次查看標(biāo)簽除非刪除已經(jīng)輸入的內(nèi)容先馆。好在針對這個弊端已經(jīng)有了解決方案：當(dāng)用戶輸入時发框，標(biāo)簽字號變小、位置到輸入框上方煤墙。這樣既不會影響輸入梅惯，標(biāo)簽也不會消失。
第四仿野、主動作與次動作个唧。
完成表單上最重要行為（完成表單）的動作稱為主動作。與完成表單這一目標(biāo)相悖的動作稱為次動作设预，比如撤銷、返回犁河、重置鳖枕、刪除等。
表單中應(yīng)該盡量避免出現(xiàn)次動作桨螺。次動作很容易造成負(fù)面影響宾符，當(dāng)用戶無意中誤操作時很容易造成不可挽回的后果，比如重置灭翔、刪除魏烫，會導(dǎo)致數(shù)據(jù)的消失。
當(dāng)表單中不可避免出現(xiàn)次動作時，應(yīng)該盡量弱化次動作的視覺表現(xiàn)哄褒，將潛在出錯率降到最低稀蟋。當(dāng)用戶誤操作時應(yīng)該提供撤銷功能。
第五呐赡、即時反饋退客。
沒有反饋的表單讓用戶感到迷茫，良好的反饋系統(tǒng)能夠提高表單填寫效率链嘀。
失敗消息萌狂。當(dāng)用戶填寫表單出現(xiàn)錯誤時應(yīng)該及時提醒，而不是當(dāng)用戶填完表單點擊提交按鈕時出現(xiàn)一大堆錯誤怀泊。失敗消息阻礙“完成表單”這一首要目標(biāo)茫藏，因此錯誤是表單中最重要的元素，應(yīng)該以最清楚明顯的方式表達(dá)錯誤消息霹琼。比如當(dāng)輸入框出現(xiàn)錯誤時务傲，可以將輸入框變成紅色，錯誤提示字體顏色也采用紅色碧囊，確保用戶能夠第一時間發(fā)現(xiàn)树灶。
失敗消息不僅要表述準(zhǔn)確，還要明確告訴用戶解決方案糯而。當(dāng)出現(xiàn)多個錯誤或者系統(tǒng)錯誤時天通，可以在表頭標(biāo)明錯誤情況。
還有一種情況很少見但是有必要提出來講一下熄驼，任何情況下都不要輕易清空表單像寒，即使表單出現(xiàn)錯誤，特別是面對較長表單時瓜贾，這種情況讓人崩潰诺祸。
成功消息。成功消息與失敗消息不同祭芦，失敗消息不能被忽視或者置之不理——必須解決問題筷笨，成功消息不能阻礙用戶進(jìn)程，而是增強(qiáng)用戶信心龟劲，鼓勵用戶采取更多行動胃夏。比如當(dāng)一個問題填寫正確時，輸入框后面出現(xiàn)一個代表正確的小勾昌跌。當(dāng)表單填寫成功時仰禀，給予表單填寫成功的提示。
進(jìn)程中的動作蚕愤。對于正處于進(jìn)程中的動作也需要給出反饋答恶。比如將輸入框邊框換一個顏色表示正在進(jìn)行輸入饺蚊。用戶點擊提交按鈕后即時給出反饋，防止用戶二次誤操作悬嗓。如果提交表單需要較長時間污呼，展示提交進(jìn)度，避免用戶感到迷惑烫扼。
第六曙求、讓表單更加智能。
智能默認(rèn)映企。設(shè)置滿足多數(shù)人需要的默認(rèn)選擇悟狱，能夠幫助用戶節(jié)省時間，為用戶提供參考意見堰氓。某些時候挤渐，用戶可能會忽視默認(rèn)選擇，所以需要保證默認(rèn)選項符合大多數(shù)用戶利益双絮，比如默認(rèn)用戶同意條款浴麻。
個性化默認(rèn)。對于地址囤攀、發(fā)貨方式软免、電話號碼等與個人相關(guān)的信息多次填寫后會產(chǎn)生“粘性”，可以個性化默認(rèn)為用戶之前的選擇焚挠。但是某個選項填寫多少次后產(chǎn)生“粘性”需要根據(jù)具體情況來分析膏萧，有表單只需選擇一次就設(shè)置為個性默認(rèn)選項。
保存表單進(jìn)度蝌衔。當(dāng)一份表單過長時榛泛，用戶可能因為一些原因?qū)е卤韱侮P(guān)閉，比如網(wǎng)頁崩潰噩斟、用戶誤操作曹锨、沒有時間填寫√暝剩可以提供保存表單進(jìn)度功能沛简，若用戶沒有完成表單就離開，下一次再訪問表單時保留上一次的填寫進(jìn)度斥废。
智能補(bǔ)充椒楣。一些信息其實不需要用戶填寫，完全能夠根據(jù)已有信息得出答案营袜，比如根據(jù)地址得到郵編，根據(jù)身份證號碼推測出生日丑罪。
用戶填寫一些信息時荚板，比如地址凤壁、用戶名等，可以根據(jù)用戶已經(jīng)輸入的內(nèi)容智能補(bǔ)充出剩下的內(nèi)容跪另，為用戶提供參考拧抖。
