Web中的單選和復(fù)選我們見得比較多，但是在移動(dòng)端中，單選和復(fù)選控件樣式較多，需要結(jié)合不同的使用場(chǎng)景去選擇使用。下面我將總結(jié)一下移動(dòng)端中的單選和復(fù)選控件。

首先我們看看官方文件給的設(shè)計(jì)規(guī)范：

ios 和 Android 中的選擇控件設(shè)計(jì)規(guī)范

ios

ios官方文件中沒有具體說單選和復(fù)選控件，只能從一些包含選擇的空間中來：

（1）Pickers（選擇器）

選擇器是包括一個(gè)或多個(gè)不同值的可滾動(dòng)列表，每個(gè)值都具有單個(gè)選定值，常顯示在屏幕底部或彈出窗口中。

使用選擇器需要注意的有：

• 使用可預(yù)測(cè)和符合邏輯順序的值；例如使用按字母順序排列的國(guó)家/地區(qū)列表；
• 避免通過打開新的界面來顯示選擇器；
• 如果數(shù)值或選項(xiàng)較多，請(qǐng)使用列表而不是選擇器。選擇器的尺寸較小，想要快速找到想要的數(shù)值需要多次滑動(dòng)，而列表的滑動(dòng)范圍更大，可以更快地找到想要的數(shù)值或選項(xiàng)。

（2）選擇列表

使用列表的形式簡(jiǎn)潔干凈，能高效地顯示大量或少量信息。

Android

（1）單選

• 使用單選按鈕選擇單個(gè)項(xiàng)目
• 如果可以折疊可用選項(xiàng)，請(qǐng)考慮使用下拉菜單，因?yàn)樗加玫目臻g更少。

（2）復(fù)選

• 使用復(fù)選框選擇列表中的多個(gè)項(xiàng)目
• 再次點(diǎn)擊選項(xiàng)可以取消選擇

對(duì)于有層級(jí)關(guān)系的復(fù)選選項(xiàng)：

• 選中父復(fù)選框后，將選中所有子復(fù)選框

• 如果未選中父復(fù)選框，則取消選中所有子復(fù)選框

• 如果選中某些（但不是全部）子復(fù)選框，則父復(fù)選框?qū)⒆優(yōu)椴淮_定復(fù)選框

要注意的是：?jiǎn)芜x和復(fù)選控件樣式，不要混淆。也不要在單選的情況下使用復(fù)選按鈕。

左：復(fù)選；右：?jiǎn)芜x

下面，我們看實(shí)際運(yùn)用中，單選和復(fù)選控件是如何使用的

實(shí)際運(yùn)用

單選控件總結(jié)了四種樣式：按鈕式、選中打點(diǎn)、列表勾選和選擇器。

單選

（1）單選-按鈕式

• 選項(xiàng)一般是相同類型的，例如淘寶選擇商品尺寸、屬性等選項(xiàng)內(nèi)容少，選項(xiàng)數(shù)量較少；
• 彈窗內(nèi)容清晰明了，選擇區(qū)域很清楚，但選擇區(qū)域較??；
• 不適合選項(xiàng)較多、選項(xiàng)文案較長(zhǎng)的場(chǎng)景。

（2）單選-選中打點(diǎn)

• 更多是安卓上的操作控件，適用于單選，選項(xiàng)不是同一類型的情況；
• 目測(cè)選擇區(qū)域較小，但實(shí)際上只要點(diǎn)擊與文字同一排的位置即可選擇。

（3）單選-列表勾選

• 彈窗更多出現(xiàn)在安卓系統(tǒng)中，相比選中打點(diǎn)的設(shè)計(jì)，給用戶的引導(dǎo)性更強(qiáng)，目測(cè)選擇區(qū)域更大。
• 因?yàn)??離文案較遠(yuǎn)，所以選中的選項(xiàng)要突出。

• Ios系統(tǒng)中也使用列表勾選，但大部分都是跳轉(zhuǎn)一個(gè)新界面；
• 選擇之后直接更改，沒有確認(rèn)鍵；
• 選項(xiàng)字?jǐn)?shù)可以較長(zhǎng)，選項(xiàng)可以較多。

（4）單選-選擇器

• 更多出現(xiàn)在ios系統(tǒng)中，一般從出現(xiàn)在界面底部；
• 列表式看起來選項(xiàng)更清晰；
• 一般在表單填寫中出現(xiàn)，選項(xiàng)較多，可滑動(dòng)。

多選

多選形式較單一：

• 一般是勾選加外框的形狀，避免與單選按鈕混淆；
• 彈窗選擇中要盡量避免只使用單個(gè)操作按鈕的情況，會(huì)讓用戶產(chǎn)生疑惑，不知道如何關(guān)閉彈窗。

總結(jié)

這篇文章中總結(jié)了單選和復(fù)選控件使用規(guī)范以及實(shí)際場(chǎng)景中的樣式，總的來說，不論是使用哪種控件，首先看官方文件，再去搜索相關(guān)的資料，查看市面上產(chǎn)品的使用情況，根據(jù)產(chǎn)品的特點(diǎn)和用戶使用場(chǎng)景做選擇和設(shè)計(jì)。平時(shí)也要注意多積累，留心每個(gè)產(chǎn)品中的細(xì)節(jié)設(shè)計(jì)。

參考：

1. ios 設(shè)計(jì)規(guī)范：https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/#//apple_ref/doc/uid/TP40006556-CH14-SW2
2. MATERIAL DESIGN：https://material.io/design/

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

題圖來自Unsplash，基于CC0協(xié)議