上期文章中對搜索功能進行了拆解和細化，本期繼續探討一下單選框、下拉選擇框等這一類選擇菜單的使用方法。

在使用工具型產品時，我們經常能夠遇到各式各樣的組件，列表、下拉框、按鈕、搜索等，這些組件的使用并不是隨隨便便擺放的，都有一定的原理和規范可循，今天就來聊一聊關于“選擇菜單”的那些套路。

選擇菜單主要分為三類：開關、單選/多選框、下拉列表。（這里我將單選框和復選框歸為一類）

一、開關

使用場景：開關適用于具有明確開關功能或者對立關系的操作。

優點：很明確的表示出當前狀態，操作具有對立性，要么是開要么是關；使用戶產生點擊欲望，用戶操作時能夠直觀感受到兩種狀態的切換變化。

不足：只有兩個選項，選項必須為對立的操作關系。

使用方法：

1. 開/關兩種狀態要有明顯的視覺區分，在顏色上，一般用綠色或藍色表示打開狀態，紅色或灰色表示關閉狀態；在形狀上，用豎線表示打開，圓圈表示關閉狀態。
2. 兩種狀態切換要有明確的視覺反饋，要讓用戶看到狀態的過渡。
3. 表示開/關狀態的文字應當放在按鈕外面，在有的設計中，為了節約空間常將表示狀態的文字放在按鈕中。如下圖左邊所示，這種設計可能會造成用戶迷惑：OFF代表當前是關閉狀態？還是需要我點擊OFF才能關閉？

二、單選/多選框

使用場景：選項5個以內，每個選項的的重要程度一樣，彼此間存在對比關系。

優勢：所有的選項平鋪展示，用戶一目了然；方便選項間進行對比；沒有多余的操作路徑，直接點擊即可。

不足：占用空間過大，尤其是選項文字內容較多時。

使用方法：

• 選項盡量不多于5個，這與用戶的短時記憶數量有關，選項較多時用戶做出決定時間越長（Hick’s? Law），同時還會占用大量的空間。
• 如果空間允許，豎向排列的效果好于橫向排列。豎向排列更利于選項間的對比。
• 選項的可點擊范圍要覆蓋整個選項，方便用戶點擊?？牲c擊目標越大，所用時間越短。（Fitts’Law）

• 選項橫向排列時注意選項之間的間距，避免給用戶造成錯覺。

三、下拉框

使用場景：選項多余5個（不超過15個），選項間對比程度較低，用戶明確自己想要什么。

優勢：節省頁面空間；表單較長時通過隱藏（交互設計四策略之一）的方式減輕用戶的心理壓力；對于具有聯動效果的表單來說。

不足：無法在第一層級展示全部內容；用戶的操作路徑較長；選項較多時用戶體驗較差；不太適合多選的情況。

使用方法：

• 選項數目在5~15個之間。（針對多余15個的情況，可考慮使用具有搜索功能的下拉框）；
• 重要度較高、常用的高頻選項放在前面；
• 選擇框內要有引導用戶操作的提示標簽，避免無標簽或”請選擇”之類的標簽。

• 當選擇的成本較大時，考慮是否有其他便捷的方式，如：輸入。在輸入個人生日的時候，總要向下滑動很長距離或多次點擊才能找到，此時采用輸入的方式成本相對較低。（關于日期輸入，也有很多細節需要注意，這個我會在下期文章做詳細說明）

四、總結

選擇菜單的樣式遵循產品的設計規范，一般情況下，具有對立關系的操作使用開/關的樣式，選項少于5個時，考慮平鋪的樣式展示，多于5個時采用下拉框的形式。無論何種形式，都要從用戶角度出發做到有效的引導、準確的信息傳達和便捷的操作。

本文由 @?墨白 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議