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