99国精品午夜福利视频不卡99,中文字幕精品亚洲无线码二区,av无码精品一区二区三区

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

選擇類控件設(shè)計(jì)詳細(xì)解析

小龍

2020-09-27

2 評(píng)論 29727 瀏覽 79 收藏

48 分鐘

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

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

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

一、選擇類控件的類型

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

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

單選按鈕的歷史來源：

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

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

1. 單選框

單選框用于對(duì)信息的選擇，允許用戶從一組選項(xiàng)中必須選擇一個(gè)，通常以2-5組顯示，單選框應(yīng)互斥。

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

單選按鈕的狀態(tài)為打開（實(shí)心圓圈）或關(guān)閉（空?qǐng)A圈）。

單選框一旦選上，除了選擇另一個(gè)選項(xiàng)之外，便沒法取消；所以有時(shí)會(huì)有空白的選擇、重置或默認(rèn)選擇。

每個(gè)單選按鈕的標(biāo)題應(yīng)清楚地描述選擇它的效果，通常句子結(jié)束沒有標(biāo)點(diǎn)符號(hào)；此外，考慮使用下拉菜單，會(huì)比顯示所有選項(xiàng)占用更少空間。

2. 復(fù)選框

復(fù)選框是一種按鈕類型，可用于打開或關(guān)閉選項(xiàng)。

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

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

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

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

復(fù)選框可以用作單個(gè)元素，也可以組合成一個(gè)列表或嵌套式的層級(jí)列表以從中選擇多個(gè)；如果需要將選擇項(xiàng)分成幾組，則使用多級(jí)復(fù)選框。

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

混合狀態(tài)常在嵌套層級(jí)等對(duì)多個(gè)對(duì)象一同操作時(shí)使用，以代表該選項(xiàng)下的子選項(xiàng)沒有被全選；當(dāng)半選的復(fù)選框被點(diǎn)擊時(shí)，它便會(huì)變成平常的復(fù)選框，而它的子選項(xiàng)亦會(huì)跟隨全選或取消全選。

如果存在多個(gè)復(fù)選框時(shí)，考慮使用分組標(biāo)簽來進(jìn)行描述；并將標(biāo)簽的基線與組中的第一個(gè)復(fù)選框?qū)R。

通常，當(dāng)復(fù)選框垂直列出時(shí)，更容易區(qū)分它們的狀態(tài)；通常，復(fù)選框應(yīng)左對(duì)齊，當(dāng)您需要表示層次結(jié)構(gòu)，例如當(dāng)父復(fù)選框的狀態(tài)控制子復(fù)選框的狀態(tài)時(shí)，請(qǐng)使用縮進(jìn)格式。

2）切換開關(guān)

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

移動(dòng)端中切換開關(guān)一般有交互動(dòng)效，PC端沒有。

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

注意：

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

開關(guān)具有比復(fù)選框更明顯的視覺效果，因此它控制的功能應(yīng)比復(fù)選框更為強(qiáng)大，如：可以使用開關(guān)打開或關(guān)閉一組復(fù)選框設(shè)置；因此它控制的功能應(yīng)比復(fù)選框更為強(qiáng)大，如：可以使用開關(guān)打開或關(guān)閉一組復(fù)選框設(shè)置。

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

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

用戶操作開關(guān)之后，開關(guān)視覺上立即響應(yīng)改變，然后再向服務(wù)器相應(yīng)改變，中間會(huì)存在一定的時(shí)間差，這樣能帶給用戶更流暢的體驗(yàn)。

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

3）其它樣式

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

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

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

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

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

4. 選擇標(biāo)簽

1）Tab標(biāo)簽

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

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

可以包含下拉列表的選項(xiàng)和使用翻頁：

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

優(yōu)點(diǎn)：將所有選項(xiàng)都擺在一行或一列，對(duì)空間的利用率能達(dá)到最佳，設(shè)計(jì)樣式也可以做到非常直觀、漂亮。

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

Tab選擇時(shí)，不要加載整個(gè)頁面，只有選項(xiàng)標(biāo)簽及其內(nèi)容區(qū)域應(yīng)更改；交替切換標(biāo)簽時(shí)，用戶應(yīng)該感覺自己在同一位置。

不要在選項(xiàng)卡內(nèi)容中包含支持滑動(dòng)手勢(shì)的內(nèi)容，因?yàn)榛瑒?dòng)手勢(shì)是用于在選項(xiàng)之間導(dǎo)航的；例如，避免在選項(xiàng)卡中包含一個(gè)可以拖動(dòng)的地圖，或者一個(gè)可以滑動(dòng)刪除的列表。

當(dāng)功能不可用時(shí)，顯示空狀態(tài)，加入情感化提示，不要?jiǎng)h除選項(xiàng)卡，確保所有選項(xiàng)卡都啟用。

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

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

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

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

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

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

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

3）多選標(biāo)簽

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

面對(duì)多選標(biāo)簽時(shí)，面對(duì)多個(gè)選擇項(xiàng)的彼此堆疊，需讓讓用戶知道他們可以選擇多少個(gè)選項(xiàng)；添加輔助說明，既可以明確它是多選，又可以規(guī)范的最大選擇項(xiàng)，選項(xiàng)過多時(shí)進(jìn)行標(biāo)簽分類。

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

缺點(diǎn)：這種形式與tab選項(xiàng)形式有一樣的弊端，都不能很好的處理長詞；不建議對(duì)文本進(jìn)行折行或者調(diào)整大小，會(huì)不方便用戶閱讀，同時(shí)使用兩行以上的標(biāo)簽會(huì)使得每個(gè)標(biāo)簽非常難以快速掃描。

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

Tab標(biāo)簽和多選標(biāo)簽

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

5. 列表選擇

列表選擇控件包含選擇按鈕、容器框、項(xiàng)目列表和標(biāo)簽。

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

優(yōu)點(diǎn)：

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

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

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

缺點(diǎn)：

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

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

用戶可能無法一次看到所有選定的選項(xiàng)：如果在可見區(qū)域中看不到更多的可用項(xiàng)目，則用戶可能無法同時(shí)看到所有選定的項(xiàng)目；為避免此缺點(diǎn)，請(qǐng)?jiān)诹斜砜蛏戏綄⑺x項(xiàng)目顯示為標(biāo)記，或在不可滾動(dòng)的列表中突出顯示所選項(xiàng)目。

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

1）列表單選

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

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

2）列表多選

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

3）多選雙列表框

這種類型的列表框由兩個(gè)列表框組成，兩處的列表框內(nèi)容可以相互拖拽；比如左側(cè)的列表框已選中項(xiàng)目可拖拽至右側(cè)列表框，同時(shí)支持表內(nèi)上下拖拽更換順序。

點(diǎn)擊“右箭頭”按鈕可將左側(cè)的列表框所選項(xiàng)目移動(dòng)至右側(cè)列表框。多選雙列表框?qū)嶋H運(yùn)用較少。

6. 下拉菜單

這是是一種彈出按鈕，單擊后會(huì)顯示包含選項(xiàng)列表的菜單。

下拉列表以最簡單的形式包含四個(gè)主要部分：一個(gè)容器框、一個(gè)朝下的箭頭按鈕、一個(gè)項(xiàng)目列表、一個(gè)標(biāo)簽。

用戶可以單擊向下箭頭以顯示互斥項(xiàng)的列表，從中只能選擇一項(xiàng)；標(biāo)準(zhǔn)下拉菜單是針對(duì)我們所理解的“下拉”這個(gè)動(dòng)詞。

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

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

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

缺點(diǎn)是需要點(diǎn)擊項(xiàng)目列表中的選項(xiàng)，包括：

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

1）下拉菜單配分組

當(dāng)長型下拉菜單的設(shè)計(jì)不是特別理想時(shí)，你可以把列表分組，這樣搜索起來更加簡單。

2）可編輯的下拉菜單

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

3）快捷搜索選項(xiàng)

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

4）下拉菜單多選

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

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

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

5）超級(jí)下拉菜單（胖菜單）

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

7. 不符合當(dāng)下標(biāo)準(zhǔn)的設(shè)計(jì)會(huì)混淆用戶的感觀

任何偏離你所設(shè)計(jì)的平臺(tái)標(biāo)準(zhǔn)的行為都會(huì)給用戶帶來額外的認(rèn)知負(fù)擔(dān)。

二、選擇類控件的行為

1. 狀態(tài)

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

1）默認(rèn)

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

2）禁用

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

3）懸停

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

4）按下

當(dāng)用戶按住鼠標(biāo)/手指點(diǎn)擊，選擇控件處于被點(diǎn)擊的狀態(tài)。

列表多選支持批量選擇和清除使用列表多選，一次全選或取消已選擇的多個(gè)選擇項(xiàng)毫不費(fèi)力。

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

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

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

列表選擇控件在管理文件時(shí)，只有通過按下選中選項(xiàng)才能進(jìn)行編輯性操作。

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

5）失敗反饋

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

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

2. 選項(xiàng)

1）中立的選項(xiàng)

這個(gè)針對(duì)于單選框控件，如果用戶不想做出選擇，那么應(yīng)該提供一個(gè)中立選項(xiàng)，為用戶提供一個(gè)明確的方向，中立選項(xiàng)比錯(cuò)誤選擇要好。

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

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

2）通常給一個(gè)默認(rèn)選項(xiàng)

這個(gè)針對(duì)于單選框、Tab切換、下拉列表。

把控制力交給用戶：

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

加速進(jìn)程：

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

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

增強(qiáng)“建議”：

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

在用戶需做出復(fù)雜決定或處在不熟悉領(lǐng)域時(shí)特別有幫助。當(dāng)標(biāo)題和描述都很陌生的時(shí)候，默認(rèn)選項(xiàng)可以引導(dǎo)用戶在各個(gè)可能未能理解的選項(xiàng)里做出最好的決定。

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

當(dāng)然也有許多時(shí)候是不帶默認(rèn)選項(xiàng)的：

不知道用戶行為或想要什么；
選擇是否會(huì)冒昧，如性別、稱呼等；
防錯(cuò)，保證用戶能夠看到選項(xiàng)并動(dòng)手做出選擇，比起用戶會(huì)出錯(cuò)并事后給出警示強(qiáng)。

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

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

3. 排序

選項(xiàng)排序會(huì)影響用戶操作，因此需要遵守一定排列原則。

1）邏輯順序

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

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

2）對(duì)齊

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

但是豎直排列會(huì)占用較多的垂直空間，如果垂直空間受限，可以考慮水平排列；水平排列的時(shí)候，要注意每個(gè)選項(xiàng)之間的間距盡量大一點(diǎn)，以清晰的傳達(dá)選項(xiàng)對(duì)應(yīng)哪個(gè)標(biāo)簽。

移動(dòng)端更多的情況是左側(cè)標(biāo)簽對(duì)齊，右側(cè)按鈕對(duì)齊，二者與頁面留出相同的邊距；垂直屏幕占比小，常用于呼出選擇、開關(guān)等有選擇操作的表單標(biāo)簽。

3. 交互區(qū)域

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

復(fù)選框和單選按鈕一般都很小，點(diǎn)擊或點(diǎn)選會(huì)很麻煩，可點(diǎn)擊區(qū)域中應(yīng)同時(shí)包含按鈕和標(biāo)簽，增加操作區(qū)域的面積，方便用戶操作。

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

4. 文字標(biāo)簽

每個(gè)選項(xiàng)都要配合相應(yīng)的文字標(biāo)簽來指示該選項(xiàng)含義。

1）一致性

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

不要在同一組標(biāo)簽中混用文字和圖標(biāo)：

一個(gè)分段就像是一個(gè)按鈕，按鈕內(nèi)當(dāng)然可以使用文字或者圖標(biāo)代表其含義，但是請(qǐng)不要在同一個(gè)Segment Controls中混用文字和圖標(biāo)，避免讓用戶覺得混亂和不一致。

2）盡量簡潔

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

5. 輔助提示

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

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

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

比如在界面風(fēng)格模式，主題色，導(dǎo)航模式切換中，用戶可以通過當(dāng)前界面的樣式判斷當(dāng)前是是什么模式，以及選中其它選項(xiàng)后會(huì)產(chǎn)生什么結(jié)果，如下圖（來源螞蟻設(shè)計(jì)語言）在選擇圖標(biāo)中就給予相對(duì)應(yīng)模式的提示。

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

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

2）警告框與提示框提示

由于按下開關(guān)控件后立即執(zhí)行操作，如果操作比較危險(xiǎn)，請(qǐng)?jiān)谖ｋU(xiǎn)操作后加入二次彈窗確認(rèn)，告知用戶當(dāng)前狀態(tài)以及潛在風(fēng)險(xiǎn)，避免造成嚴(yán)重?fù)p失。

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

3）輔助文案

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

4）其他輔助

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

在安卓微信聊天列表中，選擇一行聊天對(duì)象長按，手機(jī)會(huì)輕微振動(dòng)一下，表示已點(diǎn)擊，給予觸覺反饋，同時(shí)展開的多個(gè)選項(xiàng)可進(jìn)行選擇操作；手機(jī)在關(guān)閉電源時(shí)，手機(jī)會(huì)卡擦以下，給予聽覺反饋，表示已關(guān)閉屏幕，而不需要眼睛盯著屏幕關(guān)閉。

三、合適的選擇類控件

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

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

1. 單選時(shí)

1）選項(xiàng)6個(gè)以下時(shí)，使用單選框&Tab標(biāo)簽

單選按鈕認(rèn)知成本低，它能可見所有選項(xiàng)并讓用戶容易做出選擇。

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

涉及到選擇項(xiàng)與內(nèi)容組之間以及在相同層次結(jié)構(gòu)中進(jìn)行導(dǎo)航時(shí)，使用Tab標(biāo)簽；不要將標(biāo)簽用于無關(guān)的目的地，也不要加載選項(xiàng)卡的整個(gè)頁面，只有選項(xiàng)卡及其內(nèi)容區(qū)域進(jìn)行更改。