本文主要研究選擇控件的設計細節，雖然是很常見的控件設計，但也有非常多需要注意的地方。能提煉總結常見事物的一般規律，這本身就是對自己已有知識理解加深的過程。

對數據進行便捷選擇操作體驗，就是為了能提升用戶使用系統的效率。基礎的選擇控件是單選框，複選框與開關；選擇標籤，列表選擇，下拉菜單其實是單選框與復選框的延續。

單選框(Radio button，也叫“單選按鈕”)——用戶從一組選項中必須選擇一個選項。

複選框(Checkbox)——當有一個或多個獨立選項時，用戶可以選擇任意數量的選項，包括零個、一個或多個。

切換開關(Toggle Switches)——兩個互斥狀態（打開和關閉）之間的可視切換。

選擇標籤(Choice chips)——是按鈕選擇的一個替代方案。至少兩個選項，用戶可以選擇一個或多個。

列表選擇(List Select)——可以單擊容器框中隨附的項目，以從列表中選擇一個或多個。

下拉菜單(drop-down menu，也叫“下拉按鈕”)——按鈕包括一個單箭頭指示符，單擊後會顯示包含選項列表的菜單。

單選按鈕的命名（Radio）來源於舊收音機上用於頻率和預設電台之間切換的的實際物理按鈕。當一個按鈕被按下時，所有其他的按鈕都會彈出，使被按下的按鈕成為唯一處於“按下”狀態的按鈕。

後來被用於錄音機，盒式錄音機和可穿戴音頻播放器中，90年代初-用於“播放/暫停/快退/快進”控件。

UI概念是由Xerox PARC的研究首次引入的，Xerox PARC是一家研發公司，幾乎涉及到我們現在每天使用的計算機技術，包括：以太網，圖形用戶界面（GUI），面向對象的編程，計算機鼠標，激光打印等。 Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設備。

1.1 單選框

單選框用於對信息的選擇，允許用戶從一組選項中必須選擇一個，通常以2-5組顯示，單選框應互斥。單選框的外觀一般是一個空白的圓洞，旁邊則通常有文字標籤。標籤的用途除了描述之外，還可以作為操作區域，當用戶選中標籤，所應的單選框就會被選上。已選上的單選按鈕一般會在圓洞內加上一小圓點。單選框僅顯示合理和正確的選項。

單選按鈕的狀態為打開（實心圓圈）或關閉（空圓圈）。

單選框一旦選上，除了選擇另一個選項之外，便沒法取消。所以有時會有空白的選擇、重置或默認選擇。

每個單選按鈕的標題應清楚地描述選擇它的效果，通常句子結束沒有標點符號。此外，考慮使用下拉菜單，會比顯示所有選項占用更少空間。

1.2 複選框

複選框是一種按鈕類型，可用於打開或關閉選項。當存在選項對象時，複選框允許用戶從一組對像中選擇一個或同時選中多個和全部項目。每個複選框都是單獨的個體，因此選中一個複選框不會影響其他復選框的取消選中狀態，全選除外。

複選框使操作在兩個相反的狀態，操作或無操作之間進行選擇。複選框在屏幕上顯示為一個小方框，選中時，它被認為是“開”，選中的複選框包含複選標記，正方形將充滿複選標記。 ；關閉時，則被認為是“關”，它是空的矩形框。複選框一般放置在可選信息左側(圖片、視頻以宮格形式表現的頁面除外）。

複選框的數量

複選框可以用作單個元素，也可以組合成一個列表或嵌套式的層級列表以從中選擇多個。如果需要將選擇項分成幾組，則使用多級複選框。

混合狀態，僅在多級複選框時出現。如果使用複選框組，全局啟用和禁用多個子復選框，當這些子項並非都處於同一狀態時，父複選框應顯示為混合狀態（用短劃線表示）。混合狀態常在嵌套層級等對多個對像一同操作時使用，以代表該選項下的子選項沒有被全選。當半選的複選框被點擊時，它便會變成平常的複選框，而它的子選項亦會跟隨全選或取消全選。

如果存在多個複選框時，考慮使用分組標籤來進行描述。並將標籤的基線與組中的第一個複選框對齊。通常，當複選框垂直列出時，更容易區分它們的狀態。通常，複選框應左對齊，當您需要表示層次結構，例如當父複選框的狀態控制子復選框的狀態時，請使用縮進格式。

1.3 切換開關

開關是兩個互斥狀態（打開和關閉）之間的可視切換。總有一個默認使用，撥動開關即立即生效。它是在打開時顏色是可見的，關閉時出現無色或灰色。

移動端中切換開關一般有交互動效，PC端沒有。

開關與其他選擇控件最大的區別是：開關操作後，程序立即執行相關操作。而其他選擇控件一般用在表單裡，僅反映當前的選擇狀態，如果要執行操作並生效，需要點擊額外的提交按鈕。

注意:

不要為切換開關創建層次結構，避免使用開關控制單個細節或次要設置。開關的層級結構這在視覺上更容易分散注意力，而且會造成一種錯誤的印象，即所有的子選項都是開著/關著的。所以禁止濫用開關按鈕。

開關具有比複選框更明顯的視覺效果，因此它控制的功能應比複選框更為強大。如，可以使用開關打開或關閉一組複選框設置。因此它控制的功能應比複選框更為強大。如，可以使用開關打開或關閉一組複選框設置。

注意加載狀態

如果開關所執行的操作需要考慮加載狀態，例如開關切換狀態不是瞬間（短時間）完成的話，開關則需要顯示加載狀態。

另外一種目前比較流行的加載方式是視覺上加載成功，服務器隨後加載成功。用戶操作開關之後，開關視覺上立即響應改變，然後再向服務器相應改變，中間會存在一定的時間差，這樣能帶給用戶更流暢的體驗。

避免在開關內添加說明標籤。關於開關的打開或關閉，可以通過視覺樣式讓用戶很明確的感知。額外的提供文本標籤描述開關狀態是多餘的，還會使界面混亂不堪。

其它樣式

單一的icon通過顏色或圖形的變化來表示開或關的狀態。常見的且體驗比較好的設計方案是將開關樣式設計為當前狀態樣式。如下圖相機界面內HDR與AI功能的關閉與開啟狀態。

當然也有其它情況。最典型的就是視頻的播放暫停開關，他們表示的就是操作後的狀態而不是當前狀態。

名稱變化，名稱變化指的是開關按鈕依賴於其名稱的變化告知用戶開關的當前狀態和操作，如：關注與取消關注，已關注與已取關。名稱變化的開關由於語言的模糊性，仍然造成了部分歧義。我們可以在操作後加入其它提示來消除歧義（如：toast提示）。

是否統一操作狀態倒不是關鍵，關鍵是我們是否能夠讓用戶理解按鈕相應的意圖，不做出混亂的選擇便可。

1.4 選擇標籤

Tab標籤

通常用於切換不同的視圖，或者在表單中作為單選組件使用。一個分段tab通常會由2-6個單選項，可以是圖標和短詞，它適合導航形式，被設計成一個水平或豎直的容器進行單選。一組選項卡中的所有內容應該根據較大的分組原則進行分組，每個選項卡的內容與其他選項卡的內容都互相獨立。

可以包含下拉列表的選項和使用翻頁。

固定的選項卡應該只包含有限數量的選項，並且保持選項的位置不變，有利於用戶記憶。可滾動選項卡用於有很多選項或選項數量可變的情況，但不推薦使用。

優點：將所有選項都擺在一行或一列，對空間的利用率能達到最佳，設計樣式也可以做到非常直觀，漂亮。

缺點：不大適合處理長詞，短語，如果要將這些內容放在選項中，就須精簡文本。水平空間非常有限，尤其是移動端，即使是少量的選項，有時候你仍然要精簡文本。

Tab選擇時，不要加載整個頁面，只有選項標籤及其內容區域應更改。交替切換標籤時，用戶應該感覺自己在同一位置。不要在選項卡內容中包含支持滑動手勢的內容，因為滑動手勢是用於在選項之間導航的。例如，避免在選項卡中包含一個可以拖動的地圖，或者一個可以滑動刪除的列表。

當功能不可用時，顯示空狀態，加入情感化提示，不要刪除選項卡，確保所有選項卡都啟用。

空狀態：是用戶在使用產品時某個界面無法顯示的時刻，即沒有其他元素。良好的空狀態可以讓用戶知道正在發生的情況，發生的原因以及該怎麼做。

這是四種常見的空狀態類型：

• 首次使用——新產品沒有內容可以顯示時，例如打開新註冊的印象筆記時會遇到這種情況。

• 內容被清除——當用戶完成類似清空消息或收件箱等操作後，會出現一個空白的屏幕。

• 出現錯誤——產品由於網絡問題造成離線時，會出現空狀態的使用。

• 無結果——如果用戶進行搜索，但是查詢內容為空時會發生這種情況。

明確選中狀態

具有3個選擇項的Tab標籤，我們能明顯區分選中和未選中狀態，應為Tab標籤是單選控件。但是，如果只有兩個選項，又是矩形按鈕的選擇項，則很難區分當前選擇是哪個，哪個為選中狀態？我自己某段時間一直默認顏色填充形按鈕是選中狀態，但經同事一提，一陣猛驚，那另一個是否為選中狀態？在兩個選項中存在選擇疑惑，我們如何確定狀態呢？

因此，我努力在統一風格的提前下，找出固有的特徵，增強選中狀態。這個大家如果有更好想法，歡迎留言。

多選標籤

標籤選擇通常用於要從3-10個選項中進行多次選擇操作情況，它們最適合用一到兩個簡短的單詞或數字。它們設計的形式一般是一個個按鈕，通過背景色來區分“選中”和“未選中”。

面對多選標籤時，面對多個選擇項的彼此堆疊，需讓讓用戶知道他們可以選擇多少個選項。添加輔助說明，既可以明確它是多選，又可以規範的最大選擇項；選項過多時進行標籤分類。

優點：節省空間，標籤堆砌在一起的具體樣式是由文本長度決定的。它們給人的印像是輕量的，有趣的。

缺點：這種形式與tab選項形式有一樣的弊端，都不能很好的處理長詞。不建議對文本進行折行或者調整大小，會不方便用戶閱讀，同時使用兩行以上的標籤會使得每個標籤非常難以快速掃描。

其他樣式：用圓形或其他形狀來表示一個個標籤選項，比較重要或更受歡迎的選項形狀更大，用戶選中多個圓形就是選擇了多個選項；也可以在常見的按鈕中加入圖片的元素，這種的話樣式新穎，但要注意選中時的文字圖片的對比，文字是否具有可見性，適當加上文字選中效果。

Tab標籤和多選標籤

選項數量是tab控件和標籤控件之間最大的區別。一個連續的背景幫助用戶理解他們必須要選擇一個，而一個分離的背景表明他們可以選擇多個。

1.5 列表選擇

列表選擇控件包含選擇按鈕，容器框，項目列表和標籤。用戶可以單擊容器框中隨附的項目，以從列表中選擇一個或多個。列錶框可能會滾動，具體取決於它包含的項目數和可見區域，更複雜的列錶框允許用戶通過將項目從一個列錶框移動到另一個列錶框來調整容器框的大小，重新排列項目列表以及進行選擇。

優點：

交互成本低：列錶框不需要用戶單擊任何內容即可在進行選擇之前顯示其中的選項（但是，如果有太多項，它們可能需要用戶滾動列表）。

增加了可見性：一次查看多個選項的能力可以加快決策速度並提高選擇準確性。列表選擇為內容提供了更多的空間。它們易於閱讀，可以容納多文字，文本可以換行，還可以增加圖片。但是，應避免在多列列錶框中進行水平滾動。

用多選雙列錶框，用戶可以控制項目的顯示順序，並獲得所選項目的清晰概述，這在列錶框包含多個選項時很有用。

缺點：

空間：他們往往很佔用空間，不適合用在垂直高度受限的頁面中。

陌生：用戶可能不知道如何立即與列錶框進行交互-特別是，如果多選列錶框中未包含複選框，則他們可能不知道如何選擇倍數。這就是為什麼將復選框包含在多選列錶框中非常重要的原因，除非它們將注意力集中在多選功能上或增加不必要的屏幕混亂。

用戶可能無法一次看到所有選定的選項：如果在可見區域中看不到更多的可用項目，則用戶可能無法同時看到所有選定的項目。為避免此缺點，請在列錶框上方將所選項目顯示為標記，或在不可滾動的列表中突出顯示所選項目。

可以根據選擇類型進行分類，這些列錶框形式都可以滾動。

列表單選

用戶只能從互斥選項列表中選擇一項。最初的單選按鈕被用於列表中超過6個選項時，被設計成垂直方向，圓形輪廓，並擺在列表項的開頭，這就是列表單選。現一些設計中，選中被設計成在列表選項外加一個描邊框形式或帶有背景色，用以節省水平空間。

列表多選

這種類型的列錶框包括使多個選擇更加明顯的複選框，設計樣式上，web通常是在列表開頭處設計一個正方形描邊框（複選框）。

多選雙列錶框

這種類型的列錶框由兩個列錶框組成，兩處的列錶框內容可以相互拖拽。比如左側的列錶框已選中項目可拖拽至右側列錶框，同時支持表內上下拖拽更換順序。

點擊“右箭頭”按鈕可將左側的列錶框所選項目移動至右側列錶框。多選雙列錶框實際運用較少。

1.6 下拉菜單

這是是一種彈出按鈕，單擊後會顯示包含選項列表的菜單。下拉列表以最簡單的形式包含四個主要部分：一個容器框，一個朝下的箭頭按鈕，一個項目列表和一個標籤。用戶可以單擊向下箭頭以顯示互斥項的列表，從中只能選擇一項。標準下拉菜單是針對我們所理解的“下拉”這個動詞。在激活狀態，當你點擊文本輸入欄的地方時，它會打開一個菜單。列表項僅在單擊向下箭頭後出現，選擇一個項目或在下拉列表的外部單擊將其關閉。

下拉列表的優點：

• 為用戶提供最佳選項的功能，默認情況下處於選中狀態。

• 淡化替代選項和更改：由於下拉列表隱藏了其他可用選項，因此它們很好地淡化了替代選項並過分強調了進行更改的能力。 （這在默認值可以滿足大多數用戶的情況下，並且其他選項可能對非專業用戶來說是危險的或令人困惑的情況下是有利的。）

• 熟悉：下拉列表是大多數用戶熟悉的選擇機制，因為下拉列表在Web和本機應用程序中得到廣泛使用。

缺點是需要點擊項目列表中的選項，包括：

• 列表包含過多的內容，可能會很麻煩地滾動。

• 當用戶習慣於捕獲眾所周知的值時，它們會使用戶放慢速度。例如，當輸入生日或信用卡到期日期時，與下拉列表進行交互相比，在直接鍵入內容通常更快，更容易。

• 忽視：由於表單內容非常緊湊，因此用戶可能會意外忽視表單，網頁和應用程序中的下拉列表。

• 容易消除：不小心將光標從框中移開會關閉下拉菜單，不得不重新開始選擇過程。

下拉菜單配分組

當長型下拉菜單的設計不是特別理想時，你可以把列表分組，這樣搜索起來更加簡單。

可編輯的下拉菜單

可編輯的下拉菜單在菜單上方顯示當前選擇的菜單項，用戶可以輸入菜單中未列出的值。您可以將用戶可以輸入的值的類型限制為某些類型。例如，設計軟件中輸入字體大小時，系統會默認一些數值，同時支持你編輯修改。

快捷搜索選項

為了更方便用戶的填入，支持字詞搜尋，填寫一半時，就會出現帶有關鍵詞名稱選單。在選項很多的情況下，這個功能變得格外實用。

下拉菜單多選

下拉菜單多選是複選框的延伸：用戶可以在同一個輸入區域選擇多個。這件控件用的比較少。

這種控件我一般在多個對象進行對比時才使用，如選擇多個公司比較他們的能耗水平與用電規模，由於公司字段比較長，在查看選中狀態時需注意容器能否充分顯示選擇的字段，在導航菜單中會明顯擁擠，在表單中使用相對自由。如果可以的話，篩選中盡量避開這種類型。

超級下拉菜單（胖菜單）

將站點，應用程序或系統的所有不同部分合併為一個長列表，該列表進一步細分為子類別，並可以從導航欄中訪問，例如下面華為雲的下拉列表，大型下拉菜單用於顯示大量的選項，分類，數據集或其他類型的相關內容組。

不符合當下標準的設計會混淆用戶的感觀

任何偏離你所設計的平台標準的行為都會給用戶帶來額外的認知負擔。

2.1 狀態

選擇控件在操作過程中必須更改其狀態/外觀，以便用戶知道是否能選中，是否被選中。添加這些小的視覺反饋，以使用戶正向的理解，但是差異化設計又不能喧賓奪主。

默認

默認就是選擇器的開始狀態。向用戶表明，可對該選擇控件進行操作。

禁用

選擇按鈕置灰顯示，用戶將無法與選項進行交互。除非產品規則指定，否則很少會遇到這種狀態。

懸停

像按鈕一樣，選擇控件應向用戶指示它們是可交互的。通常，通過突出顯示鼠標懸停項目區域的背景來突出顯示，吸引用戶的注意。觸摸設備沒有懸停狀態。

按下

當用戶按住鼠標/手指點擊，選擇控件處於被點擊的狀態。

列表多選支持批量選擇和清除

使用列表多選，一次全選或取消已選擇的多個選擇項毫不費力。

下拉列表狀態

下拉列表在按下狀態時會打開選項列表，還有種常見做法是懸停狀態時直接打開選項列表。我更喜歡第一種，第二種在我沒有明確操作的情況下，下拉列表就自動打開的這點讓我比較困惑。

列表選擇狀態

列表選擇控件在管理文件時，只有通過按下選中選項才能進行編輯性操作。

點擊按鈕進入批量編輯狀態，狀態未選擇時，操作按鈕置灰。按下/勾選列表選項後，操作按鈕點亮，展示已選項的數量，即對當前勾選操作的反饋。點擊操作按鈕，進入對應操作編輯流程。

失敗反饋

一般都是用戶沒有進行選擇，單擊“提交”按鈕後收到失敗反饋。

在實際的使用過程中，選擇控件有默認、禁用、懸停、按下等不同狀態，雖然這些狀態看起來很多，但是這些狀態涉及到實際交互的需求和不同場景，並且是實現可靠交互的基礎。

2.2 選項

中立的選項

這個針對於單選框控件

如果用戶不想做出選擇，那麼應該提供一個中立選項。為用戶提供一個明確的方向，中立選項比錯誤選擇要好。

在單選框的選擇時，要充分考慮用戶的實際情況，給出的選項要覆蓋到所有的情況。例如，要考慮到用戶不進行選擇的情況，這時需要提供一個“無”的選項；給出的選項有可能都不符合用戶的情況，如果所有的選項用戶都不會選，就需要提供一個“其它”選項。

單選框所有選項應該滿足“互斥”的原則，因此選項之間要避免存在交集，選項覆蓋要全面，不能出現遺漏。例如，在一個年齡的選擇設置上，如果提供的選項為“20-30歲”和“30-40歲”，那麼如果用戶剛好30歲該如何選擇？

通常給一個默認選項

這個針對於單選框，Tab切換，下拉列表

把控制力交給用戶

單選框最好有一個默認選項，當單選框把選項默設置為為選中時，一旦選擇了一個單選按鈕，用戶就不可撤銷，無法返回默認狀態；而默認選中一個則可以防止這類問題，一開始就向用戶傳遞信息必須要在這組單選項之中選擇一個。

加速進程

下拉菜單中默認選項優與請選擇，如果根據權限或使用頻率能定位到適用於大多數用戶的選擇項時，就不要默認為“請選擇”，而是使用默認選項，這樣做可以降低交互成本和節省用戶的時間和點擊數。

如“國家”和“語言”字段。在這種情況下，根據權限IP，默認選項是合理的，絕大多數用戶也不會更改選項，因此繼續選擇就會很煩人，耽誤時間。

增強“建議”

帶有默認選項的單選按鈕組合是給用戶的強有力建議——甚至是推薦。默認選項可能會引導用戶做出最好的決定，並在接下來增加他們的信心。尤其是默認選項可以輔助用戶，並讓用戶向著產品所希望的方向傾斜。

在用戶需做出複雜決定或處在不熟悉領域時特別有幫助。當標題和描述都很陌生的時候，默認選項可以引導用戶在各個可能未能理解的選項裡做出最好的決定。

在產品上總想說服用戶做出對產品有利的動作。默認選項就會引誘用戶去走特定的道路。常見的例子就是活動頁面，對於忍痛離開按鈕低調置灰顯示，對於留在頁面按鈕高亮顯示。

當然也有許多時候是不帶默認選項的：

• 不知道用戶行為或想要什麼

• 選擇是否會冒昧，如性別，稱呼等

• 防錯，保證用戶能夠看到選項並動手做出選擇，比起用戶會出錯並事後給出警示強

注意選擇數量

如果希望用戶只選擇一定數量的項目。要強制執行此操作，如果用戶單擊的次數多於所選數量，則他們最早的選擇將會被最近的選擇替換。同時注意需要加上輔助說明。

2.3 排序

選項排序會影響用戶操作，因此需要遵守一定排列原則。

邏輯順序

你應該將所有選項按邏輯順序擺放，比如按被選中可能性由大到小，按操作難易度由簡單到復雜，按風險由小到大，將最安全的操作放在前邊，列表選擇一般按照信息時間排序，由新到舊。

選項的順序可以說服用戶進行選擇，就像前面說的默認選擇項一樣，他們可能只是因為第一個選項在列表中的位置而選擇了第一個選項。可以輔助用戶，也可以讓用戶向著產品所希望的方向傾斜。

對齊

一般情況下，左側對齊排列發揮最佳效果，標籤選擇除外。豎直排列相對於水平排列而言，容易讀取和定位，每行一個選項足以，可以提高用戶的瀏覽效率並減少錯誤。

但是豎直排列會佔用較多的垂直空間，如果垂直空間受限，可以考慮水平排列。水平排列的時候，要注意每個選項之間的間距盡量大一點，以清晰的傳達選項對應哪個標籤。

移動端更多的情況是左側標籤對齊，右側按鈕對齊，二者與頁面留出相同的邊距。垂直屏幕佔比小，常用於呼出選擇、開關等有選擇操作的表單標籤。

3.3 交互區域

交互區域要適當大。單選框的面積較小，用戶在點擊的時候會比較困難，尤其是在移動設備上，易誤操作，可以通過擴大點擊區的交互區域來提高易用性。複選框和單選按鈕一般都很小，點擊或點選會很麻煩，可點擊區域中應同時包含按鈕和標籤，增加操作區域的面積，方便用戶操作。

列表選擇中可以點擊容器框所在行區域來切換行對象的選中和未選中。

2.4 文字標籤

每個選項都要配合相應的文字標籤來指示該選項含義。

一致性

最好在每個區域上提供同類型的標籤，這樣可以給用戶一種視覺穩定性的感覺。同時盡量保證每個文字標籤用語的表達的一致性，避免否定詞，不要出現有的用名詞，有的用動詞的情況。

不要在同一組標籤中混用文字和圖標

一個分段就像是一個按鈕，按鈕內當然可以使用文字或者圖標代表其含義，但是請不要在同一個Segment Controls中混用文字和圖標，避免讓用戶覺得混亂和不一致。

盡量簡潔

文字標籤需要簡潔明了，一般使用短語而不是句子，因此不需要以句號來結尾。如果需要解釋說明，可以在選項下方使用單獨一行文字說明。僅體現每個個體之間的差異，不用重複選項之間相同的部分，將重複部分提出來放在整個選項的上方。

2.5 輔助提示

輔助提示很好地補充在消除歧義上的不足，但我們也需要合理使用，進行克制，否則就會造成不必要的視覺噪聲。

圖標與環境暗示

暗示指的是用戶在操作選擇前，給予用戶的提示，用戶根據這些提示可以判斷當前狀態以及操作後狀態。

比如在界面風格模式，主題色，導航模式切換中，用戶可以通過當前界面的樣式判斷當前是是什麼模式，以及選中其它選項後會產生什麼結果，如下圖（來源螞蟻設計語言）在選擇圖標中就給予相對應模式的提示。

下圖，白天模式與夜間模式，用戶可以通過當前界面的樣式判斷當前是否已經開啟了相關模式，從而判斷撥動開關後是什麼結果。

環境暗示的優勢是我們不需要其它設計和反饋告知用戶當前狀態，可以通過選擇對象和當前界面環境給予直觀暗示。

警告框與提示框提示

由於按下開關控件後立即執行操作，如果操作比較危險，請在危險操作後加入二次彈窗確認，告知用戶當前狀態以及潛在風險，避免造成嚴重損失。

當用戶操作後，提示框氣泡反饋告知用戶，讓用戶知道自己是觸發了開啟還是關閉。彈窗提示強度大，使用在一些危險、重要的反饋中，提示框則使用在一些輕量的提示中。

輔助文案

輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明。下圖是手機信號設置和省電設置相關的選擇，開關的主體是名稱，但是下面的一行輔助文案很清晰地傳達了開關開啟後的後的狀態。

其他輔助

並不是所有提示都需要讓用戶看見，我們可以給予用戶其他感官的信號告知用戶當前狀態。界面設計與交互中，我們也仍然可以使用聽覺和触覺來消除開關的歧義。

在安卓微信聊天列表中，選擇一行聊天對象長按，手機會輕微振動一下，表示已點擊，給予觸覺反饋，同時展開的多個選項可進行選擇操作；手機在關閉電源時，手機會卡擦以下，給予聽覺反饋，表示已關閉屏幕，而不需要眼睛盯著屏幕關閉。

我們很容易陷入到特定控件的中，所以我最好是從整體上開始思考。然後做出最佳決定，決定使用哪種選擇設計最有利於一致性、差異性和層次感，控件的高度，寬度，樣式設計和選項數量都是至關重要的因素。我們可以從被選擇對像是單選還是多選出發，來確定使用哪種選擇控件，可以根據下圖的情況選擇正確的類型。

3.1 單選時

選項6個以下時，使用單選框&Tab標籤

單選按鈕認知成本低，它能可見所有選項並讓用戶容易做出選擇。

單選框，用戶能夠很快看到有幾個選項以及每個選項是什麼，而不用點擊或其他操作再去發現這些信息。讓所有選項都可見，使用戶可以方便地進行比較，這樣可以減少認知負荷，幫助表單更加透明。

涉及到選擇項與內容組之間以及在相同層次結構中進行導航時，使用Tab標籤。不要將標籤用於無關的目的地，也不要加載選項卡的整個頁面，只有選項卡及其內容區域進行更改。

選項多於6個時，使用下拉列表&列表單選

如果選項的數量超過6個時，應考慮使用下拉列表中或列表單選，因為單選按鈕太多，也會令人不知所措並引起混亂，用戶無論如何都無法記住所有的選項。

下拉列表簡潔。更多適用於可預測的、類似的或增量的選項(年份選擇)。數量較多且相類似的選項選擇用下拉菜單整合。

如果屏幕空間有限，請使用下拉菜單。如果不是，請使用列錶框。使用下拉菜單，可以使用默認選項，並淡化其它選擇。

3.2 多選時

選項6個以下時，使用複選框

選擇項標籤短小且一致時，使用複選框，可以方便地進行比較，這樣可以減少認知負荷，幫助表單也更加透明。

選項多於6個時，使用列表多選

列表多選一般應用於6個以上選擇項進行多選的情況，數量更多出現將翻頁或滾動情況，需要告知用戶已選多少條數據，並在選中選項時出現相關操作。

選項3-10個之間，考慮使用多選標籤

選擇項數量在3-10之間，標籤不能過長，考慮使用多選標籤。多選標籤它們給人的印像是輕量的，有趣的。

3.3 其他

當選擇即生效時，使用開關

切換開關是一種數字開關。任何由切換開關觸發的效果應立即生效。如果不是這樣，最好用單個複選框替換切換開關。

存在長詞時，盡量不使用多選標籤

多選標籤不能很好的處理長詞。不建議對文本進行折行或者調整大小，因為會不便於用戶閱讀，使用兩行以上的標籤會使得每個標籤非常難以快速掃描。

如果垂直空間出問題，考慮標籤

你應該防止出現很難看清選擇哪個控件的情況（確保按鈕和文本標籤的間距），可以考慮使用選擇標籤或拉大間距以此來在視覺上清晰地分隔選項。

寫在最後

本文介紹了多種選擇類控件，從用戶使用選擇類控件的角度闡釋了模式定義，並列舉了三種常見的錄入模式類型，涵蓋了大多數APP錄入場景。選擇類控件本身也需要不斷進行迭代、優化和拓展，以適應更多的應用場景。後續我將持續關注，希望本文的能幫助你。

歡迎留言糾正，感謝閱讀。

我是一隻小小龍，請鞭撻我吧！

參考：

1.Material Design & Developer

2.拆解「開關」背後的設計細節https://www.zcool.com.cn/article/ZMTAxMDMzMg==.html

3.單選框歷史與使用https://www.zcool.com.cn/article/ZMTE0NzEwNA==.html

4.UI備忘單https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e

5.選擇控件指南https://medium.com/tap-to-dismiss/select-to-proceed-996d19c8a7a4