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

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

選擇菜單主要分為三類：開(kāi)關(guān)、單選/多選框、下拉列表。（這里我將單選框和復(fù)選框歸為一類）

一、開(kāi)關(guān)

使用場(chǎng)景：開(kāi)關(guān)適用于具有明確開(kāi)關(guān)功能或者對(duì)立關(guān)系的操作。

優(yōu)點(diǎn)：很明確的表示出當(dāng)前狀態(tài)，操作具有對(duì)立性，要么是開(kāi)要么是關(guān)；使用戶產(chǎn)生點(diǎn)擊欲望，用戶操作時(shí)能夠直觀感受到兩種狀態(tài)的切換變化。

不足：只有兩個(gè)選項(xiàng)，選項(xiàng)必須為對(duì)立的操作關(guān)系。

使用方法：

1. 開(kāi)/關(guān)兩種狀態(tài)要有明顯的視覺(jué)區(qū)分，在顏色上，一般用綠色或藍(lán)色表示打開(kāi)狀態(tài)，紅色或灰色表示關(guān)閉狀態(tài)；在形狀上，用豎線表示打開(kāi)，圓圈表示關(guān)閉狀態(tài)。
2. 兩種狀態(tài)切換要有明確的視覺(jué)反饋，要讓用戶看到狀態(tài)的過(guò)渡。
3. 表示開(kāi)/關(guān)狀態(tài)的文字應(yīng)當(dāng)放在按鈕外面，在有的設(shè)計(jì)中，為了節(jié)約空間常將表示狀態(tài)的文字放在按鈕中。如下圖左邊所示，這種設(shè)計(jì)可能會(huì)造成用戶迷惑：OFF代表當(dāng)前是關(guān)閉狀態(tài)？還是需要我點(diǎn)擊OFF才能關(guān)閉？

二、單選/多選框

使用場(chǎng)景：選項(xiàng)5個(gè)以內(nèi)，每個(gè)選項(xiàng)的的重要程度一樣，彼此間存在對(duì)比關(guān)系。

優(yōu)勢(shì)：所有的選項(xiàng)平鋪展示，用戶一目了然；方便選項(xiàng)間進(jìn)行對(duì)比；沒(méi)有多余的操作路徑，直接點(diǎn)擊即可。

不足：占用空間過(guò)大，尤其是選項(xiàng)文字內(nèi)容較多時(shí)。

使用方法：

• 選項(xiàng)盡量不多于5個(gè)，這與用戶的短時(shí)記憶數(shù)量有關(guān)，選項(xiàng)較多時(shí)用戶做出決定時(shí)間越長(zhǎng)（Hick’s? Law），同時(shí)還會(huì)占用大量的空間。
• 如果空間允許，豎向排列的效果好于橫向排列。豎向排列更利于選項(xiàng)間的對(duì)比。
• 選項(xiàng)的可點(diǎn)擊范圍要覆蓋整個(gè)選項(xiàng)，方便用戶點(diǎn)擊?？牲c(diǎn)擊目標(biāo)越大，所用時(shí)間越短。（Fitts’Law）

• 選項(xiàng)橫向排列時(shí)注意選項(xiàng)之間的間距，避免給用戶造成錯(cuò)覺(jué)。

三、下拉框

使用場(chǎng)景：選項(xiàng)多余5個(gè)（不超過(guò)15個(gè)），選項(xiàng)間對(duì)比程度較低，用戶明確自己想要什么。

優(yōu)勢(shì)：節(jié)省頁(yè)面空間；表單較長(zhǎng)時(shí)通過(guò)隱藏（交互設(shè)計(jì)四策略之一）的方式減輕用戶的心理壓力；對(duì)于具有聯(lián)動(dòng)效果的表單來(lái)說(shuō)。

不足：無(wú)法在第一層級(jí)展示全部?jī)?nèi)容；用戶的操作路徑較長(zhǎng)；選項(xiàng)較多時(shí)用戶體驗(yàn)較差；不太適合多選的情況。

使用方法：

• 選項(xiàng)數(shù)目在5~15個(gè)之間。（針對(duì)多余15個(gè)的情況，可考慮使用具有搜索功能的下拉框）；
• 重要度較高、常用的高頻選項(xiàng)放在前面；
• 選擇框內(nèi)要有引導(dǎo)用戶操作的提示標(biāo)簽，避免無(wú)標(biāo)簽或”請(qǐng)選擇”之類的標(biāo)簽。

• 當(dāng)選擇的成本較大時(shí)，考慮是否有其他便捷的方式，如：輸入。在輸入個(gè)人生日的時(shí)候，總要向下滑動(dòng)很長(zhǎng)距離或多次點(diǎn)擊才能找到，此時(shí)采用輸入的方式成本相對(duì)較低。（關(guān)于日期輸入，也有很多細(xì)節(jié)需要注意，這個(gè)我會(huì)在下期文章做詳細(xì)說(shuō)明）

四、總結(jié)

選擇菜單的樣式遵循產(chǎn)品的設(shè)計(jì)規(guī)范，一般情況下，具有對(duì)立關(guān)系的操作使用開(kāi)/關(guān)的樣式，選項(xiàng)少于5個(gè)時(shí)，考慮平鋪的樣式展示，多于5個(gè)時(shí)采用下拉框的形式。無(wú)論何種形式，都要從用戶角度出發(fā)做到有效的引導(dǎo)、準(zhǔn)確的信息傳達(dá)和便捷的操作。

本文由 @?墨白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議