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

首先我們看看官方文件給的設計規范：

ios 和 Android 中的選擇控件設計規范

ios

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

（1）Pickers（選擇器）

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

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

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

（2）選擇列表

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

Android

（1）單選

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

（2）復選

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

對于有層級關系的復選選項：

• 選中父復選框后，將選中所有子復選框

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

• 如果選中某些（但不是全部）子復選框，則父復選框將變為不確定復選框

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

左：復選；右：單選

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

實際運用

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

單選

（1）單選-按鈕式

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

（2）單選-選中打點

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

（3）單選-列表勾選

• 彈窗更多出現在安卓系統中，相比選中打點的設計，給用戶的引導性更強，目測選擇區域更大。
• 因為??離文案較遠，所以選中的選項要突出。

• Ios系統中也使用列表勾選，但大部分都是跳轉一個新界面；
• 選擇之后直接更改，沒有確認鍵；
• 選項字數可以較長，選項可以較多。

（4）單選-選擇器

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

多選

多選形式較單一：

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

總結

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

參考：

1. ios 設計規范：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/

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

題圖來自Unsplash，基于CC0協議