編輯導語：表單頁是一種用于信息添加、錄入的頁面類型，用來確保用戶按照要求錄入信息提交給系統使用或者引導用戶進行應用設置?；跇I務需求，有時候用戶在操作過程中，不可避免的需要填寫很多表單。針對B端表單，我們應該如何去正確的設計呢？

“虛假的事物可以被隨意想象，唯有真實的事物才能被理解?！?/p>

我們在講述自己設計作品的時候經常會說“我覺得”、“我感覺”這樣的詞，這些在旁人看來都是隨意想象出來的。而那些被分析、論證、測試過的，經過時間沉淀的，可能就是牛頓說的真實的事物。

設計中視覺、交互都存在一定的規律和邏輯。當設計師能夠熟練掌握一些相關的設計規律之后，無論做什么設計創新都會更加準確和有效率。 但總結這些規律需要大量的實際工作經驗或行業案例分析、論證，完善一個邏輯，需要付出極大的精力。如果已經有人總結出了相關的設計規律和邏輯供我們學習，那我們就不要輕易錯過?！兑幝膳c邏輯-用戶體驗設計法則》

文字有點多，建議大家不用一次看完，可以利用碎片化時間看。

一、即時驗證

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

1. 確認

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

如果表單無法提供幫助，情況會變得很糟糕，用戶需要不斷的猜用驗戶名的同時還要不斷輸入證碼，點擊確定后才能知道是否能用。

2. 建議

系統反饋并不僅限于確認所提供的答案，還能提供回答建議。如果有一組特定答案都有效，但范圍太廣，無法設計成單一用戶界面。

例如：我輸入城市“武”會帶出與“武”相關的城市，使用即時建議來幫助用戶提供旅行目的地的有效答案；

3. 限制

有些問題沒有明確定義的答案，但有明確定義的限制，在這種情況下，即時驗證也能發揮作用。

例如：飛書添加會議室，備注最多 100 字符，輸入框下方會顯示計數器，以顯示用戶還能輸入多少字符。 這類即時驗證有助于避免由于超過輸入限制而產生的潛在錯誤。

4. 最佳實踐

1. 即時確認最適合用于錯誤率高、或者有特定格式要求的問題；
2. 即時建議最適合用于有大量可供選擇有效答案的情況；
3. 如果需要即時驗證答案，應當在用戶輸完答案之后進行，不要在輸入過程中進行；
4. 如果有輸入限制，應當采用實時、動態更新的方法傳遞輸入限制。

二、多余輸入

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

1. 去除問題

在滿足用戶需求或者商業目標的基礎上，減少多余的輸入框。

例如：N 年前我記得添加銀行卡是需要選擇所屬銀行的，現在只要輸入銀行卡號，所屬銀行就自動帶出來了。

2. 智能默認

即在滿足多數人需要的地方放置選擇，來幫助用戶作出明智選擇?；ヂ摼W表單中有很多地方能利用智能默認減少必要的選擇次數，加速表單完成過程。

一組單選按鈕中預先選擇了一項，這可能是最簡單的默認選擇形式。如果無法為大多數人提供合適和默認選項，智能默認就不能很好的發揮作用。

3. 個人性化默認

根據上一次的記錄進行設置。

例如：因為疫情，學校需要隔天上報學生情況，第一次全部需要自己填寫，第二次只需要填寫很少一部分，其它選擇都被記住了。

4. 最佳實踐

1. 仔細檢查表單所有問題，去除多余的問題；
2. 通過恰當設置滿足多數人需要的默認選擇，智能默認可以幫助用戶回答問題；
3. 用戶會忽視默認選項，所以要確保默認選項符合多數人目標；
4. 設置個性化默認選擇，客戶能更快完成表單，因為答案具有“粘性”。

三、額外輸入

并非所有時候所有人都需要填寫表單的所有輸入框。很多情況下，幾個簡單的選項就能滿足多數人需要。其他情況下，可以借助額外輸入：即時增加、層疊加和循序漸進。

1. 即時增加

即時增加提供額外輸入框給需要的人，同時不會阻礙不需要的人。這類輸入框常常被作為高級選項或者額外選項。

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

2. 疊層

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

使用場景：

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

使用覆蓋層時應該考慮的因素：

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

3. 循序漸進

在個別情況下，額外輸入可用來顯示一組選項，其效果比顯示一組典型的輸入框更好。

這里說的其實就是分類，就像我們會衣服分為春夏秋冬，放到不同的箱子（柜子）里，這樣找起來就會快捷很多。

4. 最佳實踐

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

四、基于選擇的輸入

彈性輸入允許用戶按照希望的方式回答問題，額外輸入允許用戶補充回答想回答的問題，而基于選擇的輸入根據對初始問題的回答要求用戶繼續回答。

用戶有兩個初始選項：要么選擇支持，要么選擇不支持。根據用戶的回答，會出現一系列要回答的后續問題。出現什么輸入取決于最初選擇–因此稱為基于選擇的輸入。

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

1. 頁級選擇

把過程明確分為兩步，這可能是解決表單中選擇性輸入問題最簡單的方法?；ヂ摼W上常見的做法是采用兩個單獨的頁面。

第一頁或者稱為過程第一步–向用戶顯示初始選項。如果用戶選擇其中一個，就出現相關的選擇性輸入，取代初始選擇。對多數用戶而言，初始選擇和相關輸入之間關系明確，一旦做出初始選擇，就無法查看并訪問到未選選項，除非退出重來。

在測試中，頁級選擇出錯數量較少，眼動儀參數表現較好，例如眼睛固定次數、總固定時長以及平均固定時長。

2. 水平選項卡

為避免出現跳轉頁面，水平選擇卡也是一種不錯的選擇性輸入方法。

把水平選項卡放在上方，用戶可以瀏覽表單板塊，并進入含有合適的基于選擇的輸入的部分。選項卡不僅顯示了一組初始選項，而且還發揮了當前選擇的強大指示作用。如果只考慮標準可用性指標，水平選項卡在所有測試中整體表現最佳，沒有參加者出錯，他們能夠迅速完成任務，而且對這種設計打了滿意度最高分。

3. 垂直選項卡

用戶自上而下填寫表單，但水平選項卡缺乏清晰性，為了彌補這一點，可將垂直選項卡直接放在掃描線之內。

就眼睛舒適度而言，垂直選項卡在測試中表現最佳。該方案中，眼睛固定總時長最短，平均固定時長最短，平均固定次數最少。像其他被測試的方案一樣，垂直選項卡隱藏了無關的表單控件，只在用戶需要時才出現。該因素似乎對眼睛舒適度和測試者完成表單的速度至關重要。在測試中垂直選項卡取得了近乎完美的滿意分?？赡芤驗轱@示的單選按鈕和基于選擇的輸入彼此都很接近，而垂直選項卡確保了選擇一個單選按鈕后，眼睛不需要太多移動，設計更有效率。

在其他可用性測試中，垂直選項卡的表優于水平選項卡的。由于垂直選項卡在滿意度、眼動指標和完成時長方面得分較高，我傾向于使用垂直選項卡，而不使用水平選項卡。

4. 下拉列表

水平選項卡和垂直選項卡都維持著獨特的界面元素，每個選項卡對應一個初始選項。這樣既能保持所有初始選項可見，而且會占用相當的屏幕區域。隨著初始選項不斷增加，這些方法往往無法保持很好的比例。而下拉列表利用菜單和分組框將所有基于選擇的輸入放在表單中的特定區域。盡管這種方法會隱蔽大部分初始選項，列表中一次只能顯示一個選項，但使用單一控件可能會更好地傳達初始選項的范圍和影響。

和垂直選項卡一樣，下拉列表解決方案隱藏了無關輸入，僅在用戶需要才會顯示。也就是說，下拉列表中基于選擇的輸入對眼睛壓力小，能迅速完成。 被測量的其他數據點中，下拉列表解決方案表現平均，滿意度分數相對較高，而且 23 名參加者一共只犯了一個錯誤。因此，如果初始選項列表超過水平或垂直選項卡所能支持的范圍，下拉列表基于選擇的輸入可能是安全方案。

5. 單選按鈕下方顯示

另一種基于選擇的輸入即時解決方案涉及到從各自額外輸入中垂直分離初始選項。這種做法的優點在于能保持所有初始選項，以及這些選項中的個人選擇始終可見。通過強烈視覺指示來表明初始選項和其額外輸入之間的依賴關系，有助于更清晰地表明兩者關系。

不過，如果人們改變選項、屏幕刷新來更改額外輸入內容，頁面跳轉的效果會導致人們迷失方向，尤其是額外輸入很長時。

像垂直選項卡一樣，該解決方案的滿意度也近乎完美，因為它顯示的單選按鈕和選擇性輸入在位置上非?？拷ㄒ暰€是垂直的，不需要像水平選項卡左右移動）。然而，該解決方案也有缺點，因為所選單選按鈕及其相關表單選項之間的視覺間隔會給用戶帶來更多視覺上的不適（需要深入體驗可能才會有這種感覺）。

測試中也存在這種情況。用戶嘗試了初始單選鈕中一些不同選項，分不清哪個選項是活動狀態，也分不清與其基于選擇的輸入之間的關系。如果選擇性選項的數量很多，這種現象更成問題，因為初始選項和額外選項之間的關系變得更不清晰。

6. 單選按鈕內顯示

與單選按鈕下方顯示的辦法相似，單選按鈕內顯示的解決方案在初始選項內顯示額外輸入。如果額外輸入很少（只有一兩個）該方法可以保持初始選項的情境，同時又能在最相關的地方顯示所需的選擇性輸入。因為顯示的單選按鈕及其選擇性輸入位置非?？拷?，該解決方案的滿意度也近乎完美，對眼睛壓力小，能迅速完成。

但該方案不適合輸入數量很多，和單選按鈕下方顯示類似，因為頁面跳動加上初始選項移動兩者之間的頁面元素不斷顯示隱藏會造成交互迷失方向，用戶會頻繁困惑于哪個用戶界面元素觸發了哪套選項。

如果用戶改變初始選項時，加入輕量級動畫過渡可能會有助于彌補交互方向的迷失。

7. 最佳實踐

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