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