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

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

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

ios

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

（1）Pickers（選擇器）

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

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

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

（2）選擇列表

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

Android

（1）單選

• 使用單選按鈕選擇單個項目
• 如果可以折疊可用選項，請考慮使用下拉菜單，因為它占用的空間更少。

（2）復(fù)選

• 使用復(fù)選框選擇列表中的多個項目
• 再次點擊選項可以取消選擇

對于有層級關(guān)系的復(fù)選選項：

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

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

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

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

左：復(fù)選；右：單選

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

實際運用

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

單選

（1）單選-按鈕式

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

（2）單選-選中打點

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

（3）單選-列表勾選

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

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

（4）單選-選擇器

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

多選

多選形式較單一：

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

總結(jié)

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

參考：

1. ios 設(shè)計規(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é)議