蘭亭妙微UI設(shè)計公司分享：在設(shè)計學(xué)校文藝匯演報名表單時，如何有效地實現(xiàn)基于選擇的輸入？本文探討了隱藏非活動選項與顯示非活動選項的設(shè)計方案，分析了頁面級選項、水平Tab、垂直選項等多種形式的優(yōu)劣及適用場景。
進入正題之前，大家可以先思考一下，以下情形大家會怎么做？
學(xué)校組織文藝匯演，老師、學(xué)生、家長可以任意組隊報名表演節(jié)目。組隊后，每個隊伍都需要在學(xué)校教務(wù)系統(tǒng)上錄入信息進行報名。
假如你是教務(wù)系統(tǒng)的設(shè)計師，你會怎么設(shè)計這個報名表單？
在上述案例中，對于“參與人員”這個信息，首先需要確定有哪幾類人參加？其次再具體錄入每一類的具體人員名稱。比如：“三年5班隊”表演的節(jié)目有40個人參加，其中只有老師和學(xué)生參加，那么老師分別是哪幾位？學(xué)生又是哪幾位？
那么根據(jù)對初始問題“有哪幾類人參加？”的回答，要求繼續(xù)回答“這幾個人分別是誰？”，就是基于選擇的輸入。
基于選擇的輸入內(nèi)容大體上可以分為兩個部分：初始的選擇、選擇之后需要輸入的內(nèi)容，如下所示。
表單中基于選擇的輸入類型可選擇的交互形式有很多種，那么在需求過程中，如何選擇最適合的方式去進行設(shè)計？
表單基于選擇的輸入場景在B端產(chǎn)品中尤為多見。由于B端產(chǎn)品多為Web端，所以下列分析暫不考慮移動端的情況。
如果把基于選中的內(nèi)容需要輸入的選項稱為活動的選項，那大致可分為兩大類：隱藏非活動的選項、顯示非活動的選項。以上三個案例均為隱藏非活動的選項類型。
顯示所有未被選中選擇的選擇輸入內(nèi)容，會導(dǎo)致表單中出現(xiàn)大量無需用戶處理的內(nèi)容。除非用戶需要這部分信息去輔助判斷選擇選項，否則不建議使用此類方法。
大部分設(shè)計方式都會通過隱藏非活動的選項，來降低輸入過程中無效信息對用戶的干擾。具體如何處理初始的選擇和活動選項之間的關(guān)系，又可以分為以下幾類：頁面級選項、水平Tab、垂直選項、下拉選擇、單選按鈕下方顯示、單選按鈕內(nèi)顯示。
（1）頁面級選項
把過程明確分為兩步，這可能是解決表單中選擇性輸入問題最簡單的方法。最常見的做法是采用不同的步驟進行表單內(nèi)容的填寫，如下：
對多數(shù)用戶而言，初始選擇和相關(guān)輸入之間的關(guān)系明確，但一旦做出初始的選擇，兩者之間的聯(lián)系會變得微弱。在第二步進行相關(guān)輸入時，無法查看先前進行的初始選擇?？瓷先ミ@種方案比在當(dāng)前頁面完成所有輸入任務(wù)的方式更慢。
但在實際測試中，通過該方案設(shè)計的表單，用戶填寫錯誤比較少，眼動測試參數(shù)表現(xiàn)也比較好（主要是眼睛固定的次數(shù)、總固定時長以及平均固定時長）。
（2）水平Tab
通過Tab的形式進行初始選擇的區(qū)分，用戶可以瀏覽表單的Tab，進入對應(yīng)的Tab中進行選擇輸入的部分。例如：飛書的登錄頁。
Tab不僅作為一組篩選功能，還對選擇之后輸入的內(nèi)容起到一個明顯標題的作用。但大部分人都熟悉Tab作為導(dǎo)航的概念，對于Tab在表單中的應(yīng)用可能會存在一定的歧義。比如Tab之間是否互斥？提交選擇是針對表單中所有Tab還是當(dāng)前選中的Tab？
對比以上兩種設(shè)計形式，如果只從結(jié)果考慮用戶的使用情況，水平Tab在測試過程中基本沒有用戶出錯，并且可以快速完成任務(wù)。但根據(jù)頁面級選項案例的眼動測試數(shù)據(jù)中會發(fā)現(xiàn)，用戶瀏覽整個表單相比上面的方案所需要耗費更多的努力。
（3）垂直選項
從水平Tab方案中表現(xiàn)出來的眼動測試結(jié)果可以發(fā)現(xiàn)，其不符合用戶自上而下的閱讀模式。而垂直選項的方案則彌補了這一缺陷。如下圖所示。
在選擇選項之后，眼睛不需要做太多的移動，設(shè)計更有效率，如下方案例眼動數(shù)據(jù)所示。
（4）下拉選項
相比水平Tab和垂直選項，下拉選項在視覺上沒那么獨特。每一個選項對應(yīng)一個初始選項，如下圖所示。
下拉選項的解決方案利用選擇后，輸入的內(nèi)容在下方特定的位置進行展示。所選選項可作為標題，更好的傳達初始選項的范圍和影響（看具體業(yè)務(wù)是否需要在表單中映射這個關(guān)系），上方案例中的映射關(guān)系就比較弱。
（5）單選按鈕下方顯示
展示所有選項，根據(jù)用戶選擇情況在下方顯示具體需要選擇輸入的內(nèi)容，如下圖所示。
（6）單選按鈕內(nèi)顯示
與單選按鈕下方顯示的辦法類似，在初始選項內(nèi)顯示額外的輸入內(nèi)容。
基于選擇的輸入，在設(shè)計方案的選擇中，需要考慮各個方面。
如果每個初始選項的額外輸入選項數(shù)量很多，且同時存在其他需錄入的信息時，那么頁面級選項可能是最佳方案。雖然需要兩個網(wǎng)頁來拆分表單，但至少不會讓用戶產(chǎn)生困惑，也無需懷疑選項之間是否互斥。
垂直選項和水平Tab兩個方案需要通過交互設(shè)計或者視覺設(shè)計來規(guī)避其互斥問題。
如果初始選項列表較長（4或者5個以上），并且每個選項都自帶一套基于選擇的輸入，在設(shè)計時最好能針對額外選項采用下拉列表和視覺分組。
如果每個初始選項只有幾個額外的輸入選項，單選按鈕下方顯示或者單選按鈕內(nèi)顯示是最佳的方案。但容易出現(xiàn)因選項切換而造成的頁面跳動問題。
就整體而言，隱藏?zé)o關(guān)的輸入項，可以減輕用戶對表單的負擔(dān)，幫助用戶更快的完成表單內(nèi)容。
最好能清晰的顯示選項與基于選擇的輸入項之間的關(guān)系。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍藍設(shè)計）www.aknz.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
藍藍設(shè)計的小編 http://www.aknz.cn