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

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

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

一、開關

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

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

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

使用方法：

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

二、單選/多選框

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

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

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

使用方法：

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

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

三、下拉框

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

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

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

使用方法：

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

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

四、總結

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

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

題圖來自 Pexels，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部