編輯導語：我們進行一個軟件的首次注冊時，經(jīng)常會遇到選擇興趣愛好的界面，這里面的一些按鈕提示能讓你清楚的知道自己的選擇；設計師從用戶的使用感受出發(fā)，能更加準確的設計用戶覺得舒適的使用感；本文作者介紹了選擇類控件設計的一些細節(jié)，我們一起來看一下。

無論是從個性化內容還是用戶體驗上來說，為界面內容選擇正確的選擇類控件可能比想象的要難。

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

一、選擇類控件的類型

對數(shù)據(jù)進行便捷選擇操作體驗，就是為了能提升用戶使用系統(tǒng)的效率；基礎的選擇控件是單選框、復選框與開關、選擇標簽、列表選擇，下拉菜單其實是單選框與復選框的延續(xù)。

• 單選框（Radio button，也叫“單選按鈕”）—— 用戶從一組選項中必須選擇一個選項。
• 復選框（Checkbox）—— 當有一個或多個獨立選項時，用戶可以選擇任意數(shù)量的選項，包括零個、一個或多個。
• 切換開關（Toggle Switches）—— 兩個互斥狀態(tài)（打開和關閉）之間的可視切換。
• 選擇標簽（Choice chips）—— 是按鈕選擇的一個替代方案。至少兩個選項，用戶可以選擇一個或多個。
• 列表選擇（List Select）——可以單擊容器框中隨附的項目，以從列表中選擇一個或多個。
• 下拉菜單（drop-down menu，也叫“下拉按鈕”）——按鈕包括一個單箭頭指示符，單擊后會顯示包含選項列表的菜單。

單選按鈕的歷史來源：

單選按鈕的命名（Radio）來源于舊收音機上用于頻率和預設電臺之間切換的的實際物理按鈕；當一個按鈕被按下時，所有其他的按鈕都會彈出，使被按下的按鈕成為唯一處于“按下”狀態(tài)的按鈕；后來被用于錄音機，盒式錄音機和可穿戴音頻播放器中，90年代初-用于“播放/暫停/快退/快進”控件。

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

1. 單選框

單選框用于對信息的選擇，允許用戶從一組選項中必須選擇一個，通常以2-5組顯示，單選框應互斥。

單選框的外觀一般是一個空白的圓洞，旁邊則通常有文字標簽；標簽的用途除了描述之外，還可以作為操作區(qū)域，當用戶選中標簽，所應的單選框就會被選上；已選上的單選按鈕一般會在圓洞內加上一小圓點，單選框僅顯示合理和正確的選項。

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

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

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

2. 復選框

復選框是一種按鈕類型，可用于打開或關閉選項。

當存在選項對象時，復選框允許用戶從一組對象中選擇一個或同時選中多個和全部項目；每個復選框都是單獨的個體，因此選中一個復選框不會影響其他復選框的取消選中狀態(tài)，全選除外。

復選框使操作在兩個相反的狀態(tài)，操作或無操作之間進行選擇。

復選框在屏幕上顯示為一個小方框，選中時，它被認為是“開”，選中的復選框包含復選標記，正方形將充滿復選標記；關閉時，則被認為是“關”，它是空的矩形框；復選框一般放置在可選信息左側（圖片、視頻以宮格形式表現(xiàn)的頁面除外）。

1）復選框的數(shù)量

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

混合狀態(tài)，僅在多級復選框時出現(xiàn)；如果使用復選框組，全局啟用和禁用多個子復選框，當這些子項并非都處于同一狀態(tài)時，父復選框應顯示為混合狀態(tài)（用短劃線表示）。

混合狀態(tài)常在嵌套層級等對多個對象一同操作時使用，以代表該選項下的子選項沒有被全選；當半選的復選框被點擊時，它便會變成平常的復選框，而它的子選項亦會跟隨全選或取消全選。

如果存在多個復選框時，考慮使用分組標簽來進行描述；并將標簽的基線與組中的第一個復選框對齊。

通常，當復選框垂直列出時，更容易區(qū)分它們的狀態(tài)；通常，復選框應左對齊，當您需要表示層次結構，例如當父復選框的狀態(tài)控制子復選框的狀態(tài)時，請使用縮進格式。

2）切換開關

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

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

開關與其他選擇控件最大的區(qū)別是：開關操作后，程序立即執(zhí)行相關操作；而其他選擇控件一般用在表單里，僅反映當前的選擇狀態(tài)，如果要執(zhí)行操作并生效，需要點擊額外的提交按鈕。

注意：

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

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

注意加載狀態(tài)：如果開關所執(zhí)行的操作需要考慮加載狀態(tài)，例如開關切換狀態(tài)不是瞬間（短時間）完成的話，開關則需要顯示加載狀態(tài)。

另外一種目前比較流行的加載方式是視覺上加載成功，服務器隨后加載成功。

用戶操作開關之后，開關視覺上立即響應改變，然后再向服務器相應改變，中間會存在一定的時間差，這樣能帶給用戶更流暢的體驗。

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

3）其它樣式

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

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

名稱變化，名稱變化指的是開關按鈕依賴于其名稱的變化告知用戶開關的當前狀態(tài)和操作，如：關注與取消關注，已關注與已取關。

名稱變化的開關由于語言的模糊性，仍然造成了部分歧義，我們可以在操作后加入其它提示來消除歧義（如：toast 提示）。

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

4. 選擇標簽

1）Tab標簽

通常用于切換不同的視圖，或者在表單中作為單選組件使用。

一個分段tab通常會由2-6個單選項，可以是圖標和短詞，它適合導航形式，被設計成一個水平或豎直的容器進行單選；一組選項卡中的所有內容應該根據(jù)較大的分組原則進行分組，每個選項卡的內容與其他選項卡的內容都互相獨立。

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

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

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

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

Tab選擇時，不要加載整個頁面，只有選項標簽及其內容區(qū)域應更改；交替切換標簽時，用戶應該感覺自己在同一位置。

不要在選項卡內容中包含支持滑動手勢的內容，因為滑動手勢是用于在選項之間導航的；例如，避免在選項卡中包含一個可以拖動的地圖，或者一個可以滑動刪除的列表。

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

空狀態(tài)：是用戶在使用產(chǎn)品時某個界面無法顯示的時刻，即沒有其他元素；良好的空狀態(tài)可以讓用戶知道正在發(fā)生的情況，發(fā)生的原因以及該怎么做。

這是四種常見的空狀態(tài)類型：

• 首次使用——新產(chǎn)品沒有內容可以顯示時，例如打開新注冊的印象筆記時會遇到這種情況。
• 內容被清除——當用戶完成類似清空消息或收件箱等操作后，會出現(xiàn)一個空白的屏幕。
• 出現(xiàn)錯誤——產(chǎn)品由于網(wǎng)絡問題造成離線時，會出現(xiàn)空狀態(tài)的使用。
• 無結果——如果用戶進行搜索，但是查詢內容為空時會發(fā)生這種情況。

2）明確選中狀態(tài)

具有3個選擇項的Tab標簽，我們能明顯區(qū)分選中和未選中狀態(tài)，應為Tab標簽是單選控件。

但是，如果只有兩個選項，又是矩形按鈕的選擇項，則很難區(qū)分當前選擇是哪個，哪個為選中狀態(tài)？我自己某段時間一直默認顏色填充形按鈕是選中狀態(tài)，但經(jīng)同事一提，一陣猛驚，那另一個是否為選中狀態(tài)？在兩個選項中存在選擇疑惑，我們如何確定狀態(tài)呢？

因此，我努力在統(tǒng)一風格的提前下，找出固有的特征，增強選中狀態(tài)（這個大家如果有更好想法，歡迎留言）。

3）多選標簽

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

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

優(yōu)點：節(jié)省空間，標簽堆砌在一起的具體樣式是由文本長度決定的；它們給人的印象是輕量的，有趣的。

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

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

Tab標簽和多選標簽

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

5. 列表選擇

列表選擇控件包含選擇按鈕、容器框、項目列表和標簽。

用戶可以單擊容器框中隨附的項目，以從列表中選擇一個或多個；列表框可能會滾動，具體取決于它包含的項目數(shù)和可見區(qū)域，更復雜的列表框允許用戶通過將項目從一個列表框移動到另一個列表框來調整容器框的大小，重新排列項目列表以及進行選擇。

優(yōu)點：

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

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

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

缺點：

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

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

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

可以根據(jù)選擇類型進行分類，這些列表框形式都可以滾動。

1）列表單選

用戶只能從互斥選項列表中選擇一項，最初的單選按鈕被用于列表中超過6個選項時，被設計成垂直方向、圓形輪廓，并擺在列表項的開頭，這就是列表單選。

現(xiàn)一些設計中，選中被設計成在列表選項外加一個描邊框形式或帶有背景色，用以節(jié)省水平空間。

2）列表多選

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

3）多選雙列表框

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

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

6. 下拉菜單

這是是一種彈出按鈕，單擊后會顯示包含選項列表的菜單。

下拉列表以最簡單的形式包含四個主要部分：一個容器框、一個朝下的箭頭按鈕、一個項目列表、一個標簽。

用戶可以單擊向下箭頭以顯示互斥項的列表，從中只能選擇一項；標準下拉菜單是針對我們所理解的“下拉”這個動詞。

在激活狀態(tài)，當你點擊文本輸入欄的地方時，它會打開一個菜單；列表項僅在單擊向下箭頭后出現(xiàn)，選擇一個項目或在下拉列表的外部單擊將其關閉。

下拉列表的優(yōu)點：

• 為用戶提供最佳選項的功能，默認情況下處于選中狀態(tài)。
• 淡化替代選項和更改：由于下拉列表隱藏了其他可用選項，因此它們很好地淡化了替代選項并過分強調了進行更改的能力（這在默認值可以滿足大多數(shù)用戶的情況下，并且其他選項可能對非專業(yè)用戶來說是危險的或令人困惑的情況下是有利的。）
• 熟悉：下拉列表是大多數(shù)用戶熟悉的選擇機制，因為下拉列表在Web和本機應用程序中得到廣泛使用。

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

• 列表包含過多的內容，可能會很麻煩地滾動。
• 當用戶習慣于捕獲眾所周知的值時，它們會使用戶放慢速度；例如，當輸入生日或信用卡到期日期時，與下拉列表進行交互相比，在直接鍵入內容通常更快、更容易。
• 忽視：由于表單內容非常緊湊，因此用戶可能會意外忽視表單，網(wǎng)頁和應用程序中的下拉列表。
• 容易消除：不小心將光標從框中移開會關閉下拉菜單，不得不重新開始選擇過程。

1）下拉菜單配分組

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

2）可編輯的下拉菜單

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

3）快捷搜索選項

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

4）下拉菜單多選

下拉菜單多選是復選框的延伸：用戶可以在同一個輸入?yún)^(qū)域選擇多個，這件控件用的比較少。

這種控件我一般在多個對象進行對比時才使用，如選擇多個公司比較他們的能耗水平與用電規(guī)模；由于公司字段比較長，在查看選中狀態(tài)時需注意容器能否充分顯示選擇的字段，在導航菜單中會明顯擁擠，在表單中使用相對自由。

如果可以的話，篩選中盡量避開這種類型。

5）超級下拉菜單（胖菜單）

將站點，應用程序或系統(tǒng)的所有不同部分合并為一個長列表，該列表進一步細分為子類別，并可以從導航欄中訪問；例如下面華為云的下拉列表，大型下拉菜單用于顯示大量的選項、分類、數(shù)據(jù)集或其他類型的相關內容組。

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

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

二、選擇類控件的行為

1. 狀態(tài)

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

1）默認

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

2）禁用

選擇按鈕置灰顯示，用戶將無法與選項進行交互；除非產(chǎn)品規(guī)則指定，否則很少會遇到這種狀態(tài)。

3）懸停

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

4）按下

當用戶按住鼠標/手指點擊，選擇控件處于被點擊的狀態(tài)。

列表多選支持批量選擇和清除使用列表多選，一次全選或取消已選擇的多個選擇項毫不費力。

下拉列表狀態(tài)：

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

列表選擇狀態(tài)：

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

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

5）失敗反饋

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

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

2. 選項

1）中立的選項

這個針對于單選框控件，如果用戶不想做出選擇，那么應該提供一個中立選項，為用戶提供一個明確的方向，中立選項比錯誤選擇要好。

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

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

2）通常給一個默認選項

這個針對于單選框、Tab切換、下拉列表。

把控制力交給用戶：

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

加速進程：

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

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

增強“建議”：

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

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

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

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

• 不知道用戶行為或想要什么；
• 選擇是否會冒昧，如性別、稱呼等；
• 防錯，保證用戶能夠看到選項并動手做出選擇，比起用戶會出錯并事后給出警示強。

3）注意選擇數(shù)量

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

3. 排序

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

1）邏輯順序

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

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

2）對齊

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

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

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

3. 交互區(qū)域

交互區(qū)域要適當大：單選框的面積較小，用戶在點擊的時候會比較困難，尤其是在移動設備上，易誤操作，可以通過擴大點擊區(qū)的交互區(qū)域來提高易用性。

復選框和單選按鈕一般都很小，點擊或點選會很麻煩，可點擊區(qū)域中應同時包含按鈕和標簽，增加操作區(qū)域的面積，方便用戶操作。

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

4. 文字標簽

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

1）一致性

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

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

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

2）盡量簡潔

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

5. 輔助提示

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

1）圖標與環(huán)境暗示

暗示指的是用戶在操作選擇前，給予用戶的提示，用戶根據(jù)這些提示可以判斷當前狀態(tài)以及操作后狀態(tài)。

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

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

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

2）警告框與提示框提示

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

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

3）輔助文案

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

4）其他輔助

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

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

三、合適的選擇類控件

我們很容易陷入到特定控件的中，所以我最好是從整體上開始思考；然后做出最佳決定，決定使用哪種選擇設計最有利于一致性、差異性和層次感，控件的高度、寬度、樣式設計和選項數(shù)量都是至關重要的因素。

我們可以從被選擇對象是單選還是多選出發(fā)，來確定使用哪種選擇控件，可以根據(jù)下圖的情況選擇正確的類型。

1. 單選時

1）選項6個以下時，使用單選框&Tab標簽

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

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

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

2）選項多于6個時，使用下拉列表&列表單選

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

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

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

2. 多選時

1）選項6個以下時，使用復選框

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

2）選項多于6個時，使用列表多選

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

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

選擇項數(shù)量在3-10之間，標簽不能過長，考慮使用多選標簽；多選標簽它們給人的印象是輕量的，有趣的。

3. 其他

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

切換開關是一種數(shù)字開關，任何由切換開關觸發(fā)的效果應立即生效；如果不是這樣，最好用單個復選框替換切換開關。

2）存在長詞時，盡量不使用多選標簽

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

3）如果垂直空間出問題，考慮標簽

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

四、寫在最后

本文介紹了多種選擇類控件，從用戶使用選擇類控件的角度闡釋了模式定義，并列舉了三種常見的錄入模式類型，涵蓋了大多數(shù)APP錄入場景。

選擇類控件本身也需要不斷進行迭代、優(yōu)化和拓展，以適應更多的應用場景；后續(xù)我將持續(xù)關注，希望本文的能幫助你。

歡迎留言糾正，感謝閱讀；我是一只小小龍，請鞭撻我吧！

參考：

1）Material Design & Developer

2）拆解「開關」背后的設計細節(jié)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

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

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