編輯導(dǎo)語(yǔ)：表單頁(yè)是一種用于信息添加、錄入的頁(yè)面類型，用來(lái)確保用戶按照要求錄入信息提交給系統(tǒng)使用或者引導(dǎo)用戶進(jìn)行應(yīng)用設(shè)置?；跇I(yè)務(wù)需求，有時(shí)候用戶在操作過(guò)程中，不可避免的需要填寫很多表單。針對(duì)B端表單，我們應(yīng)該如何去正確的設(shè)計(jì)呢？

“虛假的事物可以被隨意想象，唯有真實(shí)的事物才能被理解。”

我們?cè)谥v述自己設(shè)計(jì)作品的時(shí)候經(jīng)常會(huì)說(shuō)“我覺(jué)得”、“我感覺(jué)”這樣的詞，這些在旁人看來(lái)都是隨意想象出來(lái)的。而那些被分析、論證、測(cè)試過(guò)的，經(jīng)過(guò)時(shí)間沉淀的，可能就是牛頓說(shuō)的真實(shí)的事物。

設(shè)計(jì)中視覺(jué)、交互都存在一定的規(guī)律和邏輯。當(dāng)設(shè)計(jì)師能夠熟練掌握一些相關(guān)的設(shè)計(jì)規(guī)律之后，無(wú)論做什么設(shè)計(jì)創(chuàng)新都會(huì)更加準(zhǔn)確和有效率。 但總結(jié)這些規(guī)律需要大量的實(shí)際工作經(jīng)驗(yàn)或行業(yè)案例分析、論證，完善一個(gè)邏輯，需要付出極大的精力。如果已經(jīng)有人總結(jié)出了相關(guān)的設(shè)計(jì)規(guī)律和邏輯供我們學(xué)習(xí)，那我們就不要輕易錯(cuò)過(guò)?！兑?guī)律與邏輯-用戶體驗(yàn)設(shè)計(jì)法則》

文字有點(diǎn)多，建議大家不用一次看完，可以利用碎片化時(shí)間看。

一、即時(shí)驗(yàn)證

盡管我們保證表單問(wèn)題設(shè)置清晰，而且提供有意義的輸入暗示，但總有些問(wèn)題的答案不止一個(gè)。此時(shí)，直接反饋有助于再次確保用戶的回答有效。這種實(shí)時(shí)溝通方式即為即時(shí)校驗(yàn)。

1. 確認(rèn)

填寫表單就是一次系統(tǒng)與用戶之間的對(duì)話，用戶可能不知道是否回答正確，那么確認(rèn)他們的回答就顯得非常重要。用戶名就是一個(gè)常見(jiàn)的例子，用戶不知道哪些用戶名可以使用，所以只能不停地嘗試，直到能被使用為止。這個(gè)過(guò)程中需要表單對(duì)用戶提供幫助，告知那些是不能用那些是可用。

如果表單無(wú)法提供幫助，情況會(huì)變得很糟糕，用戶需要不斷的猜用驗(yàn)戶名的同時(shí)還要不斷輸入證碼，點(diǎn)擊確定后才能知道是否能用。

2. 建議

系統(tǒng)反饋并不僅限于確認(rèn)所提供的答案，還能提供回答建議。如果有一組特定答案都有效，但范圍太廣，無(wú)法設(shè)計(jì)成單一用戶界面。

例如：我輸入城市“武”會(huì)帶出與“武”相關(guān)的城市，使用即時(shí)建議來(lái)幫助用戶提供旅行目的地的有效答案；

3. 限制

有些問(wèn)題沒(méi)有明確定義的答案，但有明確定義的限制，在這種情況下，即時(shí)驗(yàn)證也能發(fā)揮作用。

例如：飛書添加會(huì)議室，備注最多 100 字符，輸入框下方會(huì)顯示計(jì)數(shù)器，以顯示用戶還能輸入多少字符。 這類即時(shí)驗(yàn)證有助于避免由于超過(guò)輸入限制而產(chǎn)生的潛在錯(cuò)誤。

4. 最佳實(shí)踐

1. 即時(shí)確認(rèn)最適合用于錯(cuò)誤率高、或者有特定格式要求的問(wèn)題；
2. 即時(shí)建議最適合用于有大量可供選擇有效答案的情況；
3. 如果需要即時(shí)驗(yàn)證答案，應(yīng)當(dāng)在用戶輸完答案之后進(jìn)行，不要在輸入過(guò)程中進(jìn)行；
4. 如果有輸入限制，應(yīng)當(dāng)采用實(shí)時(shí)、動(dòng)態(tài)更新的方法傳遞輸入限制。

二、多余輸入

向用戶提出的任何問(wèn)題，用戶都需要解析，形成答復(fù)，并在表單提供的地方輸入答案。如果某個(gè)問(wèn)題并非絕對(duì)必要，要么可以去除，要么可以在更好的時(shí)間或者位置提出，要么可以自動(dòng)推斷出答案。 提出的問(wèn)題越少，用戶可能越快越容易填完表單。

1. 去除問(wèn)題

在滿足用戶需求或者商業(yè)目標(biāo)的基礎(chǔ)上，減少多余的輸入框。

例如：N 年前我記得添加銀行卡是需要選擇所屬銀行的，現(xiàn)在只要輸入銀行卡號(hào)，所屬銀行就自動(dòng)帶出來(lái)了。

2. 智能默認(rèn)

即在滿足多數(shù)人需要的地方放置選擇，來(lái)幫助用戶作出明智選擇。互聯(lián)網(wǎng)表單中有很多地方能利用智能默認(rèn)減少必要的選擇次數(shù)，加速表單完成過(guò)程。

一組單選按鈕中預(yù)先選擇了一項(xiàng)，這可能是最簡(jiǎn)單的默認(rèn)選擇形式。如果無(wú)法為大多數(shù)人提供合適和默認(rèn)選項(xiàng)，智能默認(rèn)就不能很好的發(fā)揮作用。

3. 個(gè)人性化默認(rèn)

根據(jù)上一次的記錄進(jìn)行設(shè)置。

例如：因?yàn)橐咔?，學(xué)校需要隔天上報(bào)學(xué)生情況，第一次全部需要自己填寫，第二次只需要填寫很少一部分，其它選擇都被記住了。

4. 最佳實(shí)踐

1. 仔細(xì)檢查表單所有問(wèn)題，去除多余的問(wèn)題；
2. 通過(guò)恰當(dāng)設(shè)置滿足多數(shù)人需要的默認(rèn)選擇，智能默認(rèn)可以幫助用戶回答問(wèn)題；
3. 用戶會(huì)忽視默認(rèn)選項(xiàng)，所以要確保默認(rèn)選項(xiàng)符合多數(shù)人目標(biāo)；
4. 設(shè)置個(gè)性化默認(rèn)選擇，客戶能更快完成表單，因?yàn)榇鸢妇哂小罢承浴薄?/li>

三、額外輸入

并非所有時(shí)候所有人都需要填寫表單的所有輸入框。很多情況下，幾個(gè)簡(jiǎn)單的選項(xiàng)就能滿足多數(shù)人需要。其他情況下，可以借助額外輸入：即時(shí)增加、層疊加和循序漸進(jìn)。

1. 即時(shí)增加

即時(shí)增加提供額外輸入框給需要的人，同時(shí)不會(huì)阻礙不需要的人。這類輸入框常常被作為高級(jí)選項(xiàng)或者額外選項(xiàng)。

例如：填寫目標(biāo)任務(wù)，可能大部分人都只需要填寫一個(gè)首要目標(biāo)，就可以繼續(xù)往下操作。小部分人，需要添加多個(gè)目標(biāo)，這類用戶可以選擇繼續(xù)添加，也可以刪除，但原始輸入框不能刪除。每位填表人至少填一個(gè)目標(biāo)，即時(shí)增加并不阻礙完成這項(xiàng)主任務(wù)。

2. 疊層

層疊是顯示額外選項(xiàng)的另一種方式，額外輸入框出現(xiàn)在表單上方，就像電腦桌面上出現(xiàn)的對(duì)話框。 日歷控件可能是最常見(jiàn)的例子，用戶能夠選擇特定日期回答表單問(wèn)題。

使用場(chǎng)景：

如果有必要占用專門的屏幕空間放置編輯窗格，而且頁(yè)面的上下文對(duì)編輯任務(wù)也不重要，就可以考慮使用覆蓋層編輯。

使用覆蓋層時(shí)應(yīng)該考慮的因素：

1. 展后的編輯模塊可能會(huì)有一部分伸到窗口可見(jiàn)范圍之外。而覆蓋層則可以保證編輯模塊完全可見(jiàn)。
2. 你希望為用戶提供一個(gè)清晰的編輯區(qū)域。
3. 用戶不會(huì)頻繁編輯的內(nèi)容。與其讓用戶單擊編輯鏈接、調(diào)整彈出式窗口位置、編輯、關(guān)閉窗口才能編輯一組數(shù)據(jù)項(xiàng)，不如在頁(yè)面上為每一項(xiàng)都提供專門的編輯空間，讓用戶可以選擇修改；要么，就讓用戶在上下文中編輯，從而節(jié)省處理覆蓋層的時(shí)間。
4. 被編輯的多個(gè)項(xiàng)是一個(gè)整體。在編輯一組數(shù)據(jù)項(xiàng)時(shí)，不應(yīng)該讓覆蓋層遮住類似的數(shù)據(jù)項(xiàng)。由于上下文得到保持，用戶在編輯過(guò)程中可以參照其它項(xiàng)的值。

3. 循序漸進(jìn)

在個(gè)別情況下，額外輸入可用來(lái)顯示一組選項(xiàng)，其效果比顯示一組典型的輸入框更好。

這里說(shuō)的其實(shí)就是分類，就像我們會(huì)衣服分為春夏秋冬，放到不同的箱子（柜子）里，這樣找起來(lái)就會(huì)快捷很多。

4. 最佳實(shí)踐

1. 額外輸入可以提供更多選項(xiàng)或者高級(jí)選項(xiàng)，滿足有需要的用戶，同時(shí)不妨礙不需要的用戶；
2. 如果需要顯示大量額外輸入，可以考慮采用層疊方式代替即時(shí)顯示方式，避免網(wǎng)頁(yè)跳動(dòng)以及用戶迷失方向；
3. 確保層疊不會(huì)遮住幫助用戶填寫的輸入框，確保用戶仍然可以自行填寫；
4. 確保提供用戶明確辦法關(guān)閉或者取消模式疊層并返回表單。

四、基于選擇的輸入

彈性輸入允許用戶按照希望的方式回答問(wèn)題，額外輸入允許用戶補(bǔ)充回答想回答的問(wèn)題，而基于選擇的輸入根據(jù)對(duì)初始問(wèn)題的回答要求用戶繼續(xù)回答。

用戶有兩個(gè)初始選項(xiàng)：要么選擇支持，要么選擇不支持。根據(jù)用戶的回答，會(huì)出現(xiàn)一系列要回答的后續(xù)問(wèn)題。出現(xiàn)什么輸入取決于最初選擇–因此稱為基于選擇的輸入。

其實(shí)每一種基于選擇的輸入解決方案都有很明顯的優(yōu)缺點(diǎn)，為了免去大家自己摸索的煩惱，可用性公司 Etre 進(jìn)行了一系列研究，測(cè)試了 8 種不同的基于選擇的輸入解決方案，這里只列舉常用的 6 種。

1. 頁(yè)級(jí)選擇

把過(guò)程明確分為兩步，這可能是解決表單中選擇性輸入問(wèn)題最簡(jiǎn)單的方法。互聯(lián)網(wǎng)上常見(jiàn)的做法是采用兩個(gè)單獨(dú)的頁(yè)面。

第一頁(yè)或者稱為過(guò)程第一步–向用戶顯示初始選項(xiàng)。如果用戶選擇其中一個(gè)，就出現(xiàn)相關(guān)的選擇性輸入，取代初始選擇。對(duì)多數(shù)用戶而言，初始選擇和相關(guān)輸入之間關(guān)系明確，一旦做出初始選擇，就無(wú)法查看并訪問(wèn)到未選選項(xiàng)，除非退出重來(lái)。

在測(cè)試中，頁(yè)級(jí)選擇出錯(cuò)數(shù)量較少，眼動(dòng)儀參數(shù)表現(xiàn)較好，例如眼睛固定次數(shù)、總固定時(shí)長(zhǎng)以及平均固定時(shí)長(zhǎng)。

2. 水平選項(xiàng)卡

為避免出現(xiàn)跳轉(zhuǎn)頁(yè)面，水平選擇卡也是一種不錯(cuò)的選擇性輸入方法。

把水平選項(xiàng)卡放在上方，用戶可以瀏覽表單板塊，并進(jìn)入含有合適的基于選擇的輸入的部分。選項(xiàng)卡不僅顯示了一組初始選項(xiàng)，而且還發(fā)揮了當(dāng)前選擇的強(qiáng)大指示作用。如果只考慮標(biāo)準(zhǔn)可用性指標(biāo)，水平選項(xiàng)卡在所有測(cè)試中整體表現(xiàn)最佳，沒(méi)有參加者出錯(cuò)，他們能夠迅速完成任務(wù)，而且對(duì)這種設(shè)計(jì)打了滿意度最高分。

3. 垂直選項(xiàng)卡

用戶自上而下填寫表單，但水平選項(xiàng)卡缺乏清晰性，為了彌補(bǔ)這一點(diǎn)，可將垂直選項(xiàng)卡直接放在掃描線之內(nèi)。

就眼睛舒適度而言，垂直選項(xiàng)卡在測(cè)試中表現(xiàn)最佳。該方案中，眼睛固定總時(shí)長(zhǎng)最短，平均固定時(shí)長(zhǎng)最短，平均固定次數(shù)最少。像其他被測(cè)試的方案一樣，垂直選項(xiàng)卡隱藏了無(wú)關(guān)的表單控件，只在用戶需要時(shí)才出現(xiàn)。該因素似乎對(duì)眼睛舒適度和測(cè)試者完成表單的速度至關(guān)重要。在測(cè)試中垂直選項(xiàng)卡取得了近乎完美的滿意分。可能因?yàn)轱@示的單選按鈕和基于選擇的輸入彼此都很接近，而垂直選項(xiàng)卡確保了選擇一個(gè)單選按鈕后，眼睛不需要太多移動(dòng)，設(shè)計(jì)更有效率。

在其他可用性測(cè)試中，垂直選項(xiàng)卡的表優(yōu)于水平選項(xiàng)卡的。由于垂直選項(xiàng)卡在滿意度、眼動(dòng)指標(biāo)和完成時(shí)長(zhǎng)方面得分較高，我傾向于使用垂直選項(xiàng)卡，而不使用水平選項(xiàng)卡。

4. 下拉列表

水平選項(xiàng)卡和垂直選項(xiàng)卡都維持著獨(dú)特的界面元素，每個(gè)選項(xiàng)卡對(duì)應(yīng)一個(gè)初始選項(xiàng)。這樣既能保持所有初始選項(xiàng)可見(jiàn)，而且會(huì)占用相當(dāng)?shù)钠聊粎^(qū)域。隨著初始選項(xiàng)不斷增加，這些方法往往無(wú)法保持很好的比例。而下拉列表利用菜單和分組框?qū)⑺谢谶x擇的輸入放在表單中的特定區(qū)域。盡管這種方法會(huì)隱蔽大部分初始選項(xiàng)，列表中一次只能顯示一個(gè)選項(xiàng)，但使用單一控件可能會(huì)更好地傳達(dá)初始選項(xiàng)的范圍和影響。

和垂直選項(xiàng)卡一樣，下拉列表解決方案隱藏了無(wú)關(guān)輸入，僅在用戶需要才會(huì)顯示。也就是說(shuō)，下拉列表中基于選擇的輸入對(duì)眼睛壓力小，能迅速完成。 被測(cè)量的其他數(shù)據(jù)點(diǎn)中，下拉列表解決方案表現(xiàn)平均，滿意度分?jǐn)?shù)相對(duì)較高，而且 23 名參加者一共只犯了一個(gè)錯(cuò)誤。因此，如果初始選項(xiàng)列表超過(guò)水平或垂直選項(xiàng)卡所能支持的范圍，下拉列表基于選擇的輸入可能是安全方案。

5. 單選按鈕下方顯示

另一種基于選擇的輸入即時(shí)解決方案涉及到從各自額外輸入中垂直分離初始選項(xiàng)。這種做法的優(yōu)點(diǎn)在于能保持所有初始選項(xiàng)，以及這些選項(xiàng)中的個(gè)人選擇始終可見(jiàn)。通過(guò)強(qiáng)烈視覺(jué)指示來(lái)表明初始選項(xiàng)和其額外輸入之間的依賴關(guān)系，有助于更清晰地表明兩者關(guān)系。

不過(guò)，如果人們改變選項(xiàng)、屏幕刷新來(lái)更改額外輸入內(nèi)容，頁(yè)面跳轉(zhuǎn)的效果會(huì)導(dǎo)致人們迷失方向，尤其是額外輸入很長(zhǎng)時(shí)。

像垂直選項(xiàng)卡一樣，該解決方案的滿意度也近乎完美，因?yàn)樗@示的單選按鈕和選擇性輸入在位置上非?？拷ㄒ暰€是垂直的，不需要像水平選項(xiàng)卡左右移動(dòng)）。然而，該解決方案也有缺點(diǎn)，因?yàn)樗x單選按鈕及其相關(guān)表單選項(xiàng)之間的視覺(jué)間隔會(huì)給用戶帶來(lái)更多視覺(jué)上的不適（需要深入體驗(yàn)可能才會(huì)有這種感覺(jué)）。

測(cè)試中也存在這種情況。用戶嘗試了初始單選鈕中一些不同選項(xiàng)，分不清哪個(gè)選項(xiàng)是活動(dòng)狀態(tài)，也分不清與其基于選擇的輸入之間的關(guān)系。如果選擇性選項(xiàng)的數(shù)量很多，這種現(xiàn)象更成問(wèn)題，因?yàn)槌跏歼x項(xiàng)和額外選項(xiàng)之間的關(guān)系變得更不清晰。

6. 單選按鈕內(nèi)顯示

與單選按鈕下方顯示的辦法相似，單選按鈕內(nèi)顯示的解決方案在初始選項(xiàng)內(nèi)顯示額外輸入。如果額外輸入很少（只有一兩個(gè)）該方法可以保持初始選項(xiàng)的情境，同時(shí)又能在最相關(guān)的地方顯示所需的選擇性輸入。因?yàn)轱@示的單選按鈕及其選擇性輸入位置非常靠近，該解決方案的滿意度也近乎完美，對(duì)眼睛壓力小，能迅速完成。

但該方案不適合輸入數(shù)量很多，和單選按鈕下方顯示類似，因?yàn)轫?yè)面跳動(dòng)加上初始選項(xiàng)移動(dòng)兩者之間的頁(yè)面元素不斷顯示隱藏會(huì)造成交互迷失方向，用戶會(huì)頻繁困惑于哪個(gè)用戶界面元素觸發(fā)了哪套選項(xiàng)。

如果用戶改變初始選項(xiàng)時(shí)，加入輕量級(jí)動(dòng)畫過(guò)渡可能會(huì)有助于彌補(bǔ)交互方向的迷失。

7. 最佳實(shí)踐

1. 如果每個(gè)初始選項(xiàng)的額外輸入選項(xiàng)數(shù)量很多，那么頁(yè)級(jí)別的基于選擇的輸入選項(xiàng)可能是最佳方案；
2. 在綜合可用性、滿意度和眼動(dòng)跟蹤指標(biāo)方面,垂直選項(xiàng)卡和水平選項(xiàng)卡的表現(xiàn)都不錯(cuò)；
3. 如果選項(xiàng)比較多(4 或者 5 個(gè)以上)，而且每個(gè)選項(xiàng)都自帶一套基于選擇的輸入，最好能針對(duì)額外選項(xiàng)采用下拉列表；
4. 如果每個(gè)初始選項(xiàng)只有幾個(gè)額外的輸入選項(xiàng)，單選按鈕下方顯示或者單選按鈕內(nèi)顯示是最佳方案。