编辑导语：
在进行软件首次注册时，我们经常会遇到选择兴趣爱好的界面，这里面的一些按钮提示能让你清楚地知道自己的选择。设计师从用户的使用感受出发，能够更加准确地设计出用户觉得舒适的使用感。本文作者介绍了选择类控件设计的一些细节，我们一起来看一下。
无论是从个性化内容还是用户体验上来说，为界面内容选择正确的选择类控件可能比想象中要难。本文主要研究选择控件的设计细节，虽然是很常见的控件设计，但也有非常多需要注意的地方；能提炼总结常见事物的一般规律，这本身就是对自己已有知识理解加深的过程。
一、选择类控件的类型
对数据进行便捷选择操作体验，就是为了能提升用户使用系统的效率；基础的选择控件包括单选框、复选框与开关、选择标签、列表选择和下拉菜单。其中，单选框是用户从一组选项中必须选择一个选项；复选框则允许用户可以选择任意数量的选项，包括零个、一个或多个；切换开关则是两个互斥状态(打开和关闭)之间的可视切换；选择标签是按钮选择的一个替代方案；列表选择可以单击容器框中随附的项目，以从列表中选择一个或多个；下拉菜单则是按钮包括一个单箭头指示符，单击后会显示包含选项列表的菜单。
单选按钮的命名来源于旧收音机上用于频率和预设电台之间切换的实际物理按钮。当一个按钮被按下时，所有其他的按钮都会弹出，使被按下的按钮成为唯一处于“按下”状态的按钮。后来被用于录音机、盒式录音机和可穿戴音频播放器中，90年代初-用于“播放/暂停/快退/快进”控件。UI概念是由Xerox PARC的研究首次引入的，Xerox PARC是一家研发公司，几乎涉及到我们现在每天使用的计算机技术，包括：以太网、图形用户界面(GUI)、面向对象的编程、计算机鼠标、激光打印等；Xerox Star 8010工作站是第一款在图形用户界面中带有单选按钮的设备。
1. 单选框
单选框用于对信息进行选择，允许用户从一组选项中必须选择一个。通常以2-5组显示，单选框应该互斥。
单选框和复选框的外观：
单选框的外观一般是一个空白的圆洞，旁边则通常有文字标签。标签的用途除了描述之外，还可以作为操作区域。当用户选中标签，所应的单选框就会被选上。已选上的单选按钮一般会在圆洞内加上一小圆点，而单选框仅显示合理和正确的选项。单选按钮的状态为打开(实心圆圈)或关闭(空圆圈)。单选框一旦选上，除了选择另一个选项之外，便没法取消；所以有时会有空白的选择、重置或默认选择。每个单选按钮的标题应清楚地描述选择它的效果，通常句子结束没有标点符号。此外，考虑使用下拉菜单，会比显示所有选项占用更少空间。
复选框的外观：
复选框是一种按钮类型，可用于打开或关闭选项。当存在选项对象时，复选框允许用户从一组对象中选择一个或同时选中多个和全部项目。每个复选框都是单独的个体，因此选中一个复选框不会影响其他复选框的取消选中状态，全选除外。复选框使操作在两个相反的状态，操作或无操作之间进行选择。复选框在屏幕上显示为一个小方框，选中时，它被认为是“开”，选中的复选框包含复选标记，正方形将充满复选标记；关闭时，则被认为是“关”，它是空的矩形框。复选框一般放置在可选信息左侧(图片、视频以宫格形式表现的页面除外)。
单选框和复选框的数量与组合方式：
1)复选框的数量：
复选框可以用作单个元素，也可以组合成一个列表或嵌套式的层级列表以从中选择多个。如果需要将选择项分成几组，则使用多级复选框。混合状态仅在多级复选框时出现。如果使用复选框组，全局启用和禁用多个子复选框，当这些子项并非都处于同一状态时，父复选框应显示为混合状态(用短划线表示)。混合状态常在嵌套层级等对多个对象一同操作时使用，以代表该选项下的子选项没有被全选。当半选的复选框被点击时，它便会变成平常的复选框，而它的子选项亦会跟随全选或取消全选。
2)切换开关：
开关是两个互斥状态(打开和关闭)之间的可视切换，总有一个默认使用。拨动开关即立即生效；它是在打开时颜色是可见的，关闭时出现无色或灰色。移动端中切换开关一般有交互动效，PC端没有。
开关控件与其他选择控件的主要区别在于，开关操作后，程序会立即执行相关操作；而其他选择控件通常用于表单中，仅反映当前的选择状态。若要执行操作并使其生效，需要点击额外的提交按钮。请注意以下几点：
1. 不要为切换开关创建层次结构，避免使用开关控制单个细节或次要设置。因为在视觉上，开关的层级结构容易分散注意力，造成错误的印象，即所有子选项都是开着/关着的。所以，禁止滥用开关按钮。
2. 开关具有比复选框更明显的视觉效果，因此它控制的功能应比复选框更为强大。例如，可以使用开关打开或关闭一组复选框设置。
3. 注意加载状态：如果开关所执行的操作需要考虑加载状态(例如，开关切换状态不是瞬间完成),则需要显示加载状态。另外一种目前比较流行的加载方式是视觉上加载成功，服务器随后加载成功。这样可以带给用户更流畅的体验。
4. 避免在开关内添加说明标签。关于开关的打开或关闭，可以通过视觉样式让用户很明确地感知。额外提供文本标签描述开关状态是多余的，还会使界面混乱不堪。
5. 其它样式：单一的icon通过颜色或图形的变化来表示开或关的状态。常见的且体验较好的设计方案是将开关样式设计为当前状态样式，例如相机界面内HDR与AI功能的关闭与开启状态。当然，也有其他情况，最典型的就是视频的播放暂停开关，它们表示的是操作后的状态而不是当前状态。
6. 名称变化：名称变化指的是开关按钮依赖于其名称的变化告知用户开关的当前状态和操作，如关注与取消关注、已关注与已取关。然而，名称变化的开关由于语言的模糊性，仍然可能造成部分歧义。我们可以在操作后加入其他提示来消除歧义(如toast提示)。关键在于让用户理解按钮相应的意图，避免做出混乱的选择。
7. 选择标签：Tab标签通常用于切换不同的视图，或者在表单中作为单选组件使用。一个分段tab通常由2-6个单选项组成，可以是图标和短词。它适合导航形式，被设计成一个水平或竖直的容器进行单选。一组选项卡中的所有内容应该根据较大的分组原则进行分组，每个选项卡的内容与其他选项卡的内容都互相独立。可以包含下拉列表的选项和使用翻页功能。
固定的选项卡应遵循一定的原则，以便为用户提供最佳的使用体验。这些原则包括：选项卡中的选项数量有限，保持选项的位置不变；当选项数量可变时，可使用可滚动选项卡，但不推荐频繁使用。
优点：将所有选项都集中在一行或一列可以充分利用空间，使设计看起来更直观、美观。然而，这种布局在处理长词或短语时不太适用，因为这需要精简文本。此外，水平空间有限，特别是在移动端，即使只有少量选项，也可能导致文本过长。
在选择选项卡时，应避免加载整个页面，仅更改选项标签及其内容区域。同时，在交替切换标签时，要确保用户感觉自己仍然位于同一位置。不要在选项卡内容中包含支持滑动手势的功能，因为滑动手势用于在选项之间导航。例如，避免在选项卡中包含一个可以拖动的地图或一个可以滑动删除的列表。
当某个功能不可用时，应显示空状态并加入情感化提示，而不是删除选项卡。确保所有选项卡都启用，以便用户在使用过程中不会感到困惑。
空状态是指用户在使用产品时某个界面无法显示的时刻，例如打开新注册的印象笔记时遇到的这种情况。常见的空状态类型有：首次使用(新产品没有内容可显示)、内容被清除(用户完成类似清空消息或收件箱等操作后)、出现错误(产品由于网络问题造成离线)和无结果(用户进行搜索但查询内容为空)。
选中状态对于具有多个选项的Tab标签尤为重要。当有3个以上的选项时，可以通过颜色填充或其他特征来区分选中和未选中状态。但是，如果只有两个选项，且它们都是矩形按钮，那么很难区分当前选择是哪个且哪个为选中状态。在这种情况下，可以在统一风格的基础上找出固有的特征来增强选中状态。
多选标签通常用于从3到10个选项中进行多次选择操作。它们最适合用一到两个简短的单词或数字表示，并通过背景色来区分“选中”和“未选中”。在设计多选标签时，要考虑如何让用户知道他们可以选择多少个选项以及何时添加辅助说明以明确它是多选。此外，当选项过多时，可以考虑对标签进行分类以便于使用。
Tab控件和标签控件的区别在于，Tab控件是一种连续的背景，可以帮助用户理解他们必须要选择一个；而标签控件则是一种分离的背景，表明用户可以选择多个。
选项数量是tab控件和标签控件之间最大的区别。List选择控件包含选择按钮、容器框、项目列表和标签。用户可以单击容器框中随附的项目，以从列表中选择一个或多个；列表框可能会滚动，具体取决于它包含的项目数和可见区域，更复杂的列表框允许用户通过将项目从一个列表框移动到另一个列表框来调整容器框的大小，重新排列项目列表以及进行选择。
以下是重构后的内容：
1. 单选按钮(列表单选)
当单选按钮被设计成垂直方向、圆形轮廓，并摆在列表项的开头时，这就是列表单选。在一些设计中，选中项被设计成在列表选项外加一个描边框形式或带有背景色，用以节省水平空间。
2. 多选框(复选框)
这种类型的列表框包括使多个选择更加明显的复选框。在设计样式上，web通常是在列表开头处设计一个正方形描边框(复选框)。
3. 多选双列表框
这种类型的列表框由两个列表框组成，两处的列表框内容可以相互拖拽；比如左侧的列表框已选中项目可拖拽至右侧列表框，同时支持表内上下拖拽更换顺序。点击“右箭头”按钮可将左侧的列表框所选项目移动至右侧列表框。多选双列表框实际运用较少。
4. 下拉菜单(弹出按钮)
下拉菜单是一种弹出按钮，单击后会显示包含选项列表的菜单。下拉列表以最简单的形式包含四个主要部分：一个容器框、一个朝下的箭头按钮、一个项目列表、一个标签。用户可以单击向下箭头以显示互斥项的列表，从中只能选择一项。标准下拉菜单是针对我们所理解的“下拉”这个动词。在激活状态，当你点击文本输入栏的地方时，它会打开一个菜单；列表项仅在单击向下箭头后出现，选择一个项目或在下拉列表的外部单击将其关闭。
下拉列表的优点在于为用户提供最佳选项的功能，默认情况下处于选中状态。由于下拉列表隐藏了其他可用选项，因此它们很好地淡化了替代选项并过分强调了进行更改的能力(这在默认值可以满足大多数用户的情况下，并且其他选项可能对非专业用户来说是危险的或令人困惑的情况下是有利的)。此外，下拉列表是大多数用户熟悉的选择机制，因为下拉列表在Web和本机应用程序中得到广泛使用。缺点则是需要点击项目列表中的选项：当用户习惯于捕获众所周知的值时，它们会使用户放慢速度；例如，当输入生日或信用卡到期日期时，与下拉列表进行交互相比，在直接键入内容通常更快、更容易。此外，由于表单内容非常紧凑，因此用户可能会意外忽视表单、网页和应用程序中的下拉列表；容易消除：不小心将光标从框中移开会关闭下拉菜单，不得不重新开始选择过程。
5. 分组和编辑式下拉菜单
当长型下拉菜单的设计不是特别理想时，你可以把列表分组，这样搜索起来更加简单；可编辑式下拉菜单则可以让用户根据自己需求自定义选项。
一、可编辑的下拉菜单
可编辑的下拉菜单在菜单上方显示当前选择的菜单项，用户可以输入菜单中未列出的值。您可以将用户可以输入的值的类型限制为某些类型，例如，在设计软件中输入字体大小时，系统会默认一些数值，同时支持编辑修改。
二、快捷搜索选项
为了更方便用户的填入，支持字词搜寻，填写一半时，就会出现带有关键词名称选单。在选项很多的情况下，这个功能变得格外实用。
三、下拉菜单多选
下拉菜单多选是复选框的延伸：用户可以在同一个输入区域选择多个。这种控件我一般在多个对象进行对比时才使用，如选择多个公司比较他们的能耗水平与用电规模。由于公司字段比较长，在查看选中状态时需注意容器能否充分显示选择的字段，在导航菜单中会明显拥挤，在表单中使用相对自由。如果可以的话，筛选中尽量避开这种类型。
四、超级下拉菜单(胖菜单)
将站点、应用程序或系统的所有不同部分合并为一个长列表，该列表进一步细分为子类别，并可以从导航栏中访问。例如下面华为云的下拉列表，大型下拉菜单用于显示大量的选项、分类、数据集或其他类型的相关内容组。
五、不符合当下标准的设计会混淆用户的感观
任何偏离你所设计的平台标准的行为都会给用户带来额外的认知负担。
六、选择类控件的行为
1. 状态
选择控件在操作过程中必须更改其状态/外观，以便用户知道是否能选中，是否被选中。添加这些小的视觉反馈，以使用户正向的理解，但是差异化设计又不能喧宾夺主。
2. 默认状态
默认就是选择器的开始状态，向用户表明，可对该选择控件进行操作。
3. 禁用状态
选择按钮置灰显示，用户将无法与选项进行交互；除非产品规则指定，否则很少会遇到这种状态。
4. 悬停状态
像按钮一样，选择控件应向用户指示它们是可交互的；通常，通过突出显示鼠标悬停项目区域的背景来突出显示，吸引用户的注意，触摸设备没有悬停状态。
5. 按下状态
当用户按住鼠标/手指点击，选择控件处于被点击的状态。列表多选支持批量选择和清除使用列表多选，一次全选或取消已选择的多个选择项毫不费力。下拉列表状态：下拉列表在按下状态时会打开选项列表，还有种常见做法是悬停状态时直接打开选项列表；我更喜欢第一种，第二种在我没有明确操作的情况下，下拉列表就自动打开的这点让我比较困惑。列表选择状态：列表选择控件在管理文件时，只有通过按下选中选项才能进行编辑性操作。
请根据提供的内容完成内容重构，并保持段落结构：
1. 点击按钮进入批量编辑状态，如果状态未选择，操作按钮将被置灰；当按下或勾选列表选项后，操作按钮会点亮，并展示已选项的数量，作为对当前勾选操作的反馈。
2. 失败反馈
通常情况下，用户没有进行选择，单击“提交”按钮后会收到失败反馈。
在实际使用过程中，选择控件有不同的状态，如默认、禁用、悬停、按下等。虽然这些状态看起来很多，但它们涉及到实际交互的需求和不同场景，并且是实现可靠交互的基础。
3. 选项
1)中立的选项
对于单选框控件，如果用户不想做出选择，应该提供一个中立选项，为用户提供明确的方向。中立选项比错误选择要好。
在单选框的选择时，要充分考虑用户的实际情况，给出的选项要覆盖到所有情况。例如，需要考虑到用户不进行选择的情况，这时需要提供一个“无”的选项；给出的选项可能都不符合用户的情况，如果所有的选项用户都不会选，就需要提供一个“其它”选项。
单选框的所有选项应满足“互斥”的原则，避免选项之间存在交集。选项覆盖要全面，不能出现遗漏。例如，在一个年龄的选择设置上，如果提供的选项为“20-30岁”和“30-40岁”，那么如果用户刚好30岁该如何选择？
2)通常给一个默认选项
这个针对于单选框、Tab切换、下拉列表。
把控制权交给用户：
单选框最好有一个默认选项。当单选框将选项默设置为选中时，一旦选择了一个单选按钮，用户就不可撤销，无法返回默认状态。而默认选中一个则可以防止这类问题。一开始就向用户传递信息必须要在这组单选项之中选择一个。
加速进程：
下拉菜单中的默认选项优于“请选择”。如果根据权限或使用频率能定位到适用于大多数用户的选择项时，就不要默认为“请选择”。而是使用默认选项，这样做可以降低交互成本和节省用户的时间和点击数。
例如，“国家”和“语言”字段，在这种情况下，根据权限IP,默认选项是合理的。绝大多数用户也不会更改选项；因此继续选择就会很烦人，耽误时间。
增强“建议”：
带有默认选项的单选按钮组合是给用户的强有力建议——甚至是推荐。默认选项可能会引导用户做出最好的决定，并在接下来增加他们的信心。尤其是默认选项可以辅助用户，并让用户向着产品所希望的方向倾斜。这在用户需做出复杂决定或处在不熟悉领域时特别有帮助。当标题和描述都很陌生的时候，默认选项可以引导用户在各个可能未能理解的选项里做出最好的决定。
在产品设计中，我们总是希望引导用户做出对产品有利的决策。为了实现这一目标，设计师们会巧妙地使用默认选项、数量限制、排序规则等策略来影响用户的选择。以下是一些与这些策略相关的重要建议：
1. 默认选项
默认选项可以引导用户走向特定的路径，例如在活动页面中，忍痛离开按钮通常会被低调置灰显示，而留在页面的按钮则会被高亮显示。但有时，我们可能并不需要默认选项，例如在不清楚用户行为或需求的情况下，或者在涉及敏感信息(如性别、称呼)的选择时。此外，为了防止用户出错并提供及时的警示，有时我们也会选择不设置默认选项。
2. 选择数量
为了让用户只选择有限的项目，我们需要强制执行此操作。如果用户点击的次数超过所选数量，最早的选择将被最近的选择替换。同时，我们需要为用户提供辅助说明，以便他们了解如何进行选择。
3. 排序
选项的排序会影响用户的操作。因此，我们需要遵循一定的排序原则：
- 逻辑顺序：将所有选项按照逻辑顺序排列，例如按被选中可能性的大小、操作难易度的从简单到复杂、风险的大小等。这样可以让用户更容易理解各个选项之间的关系，并按照产品期望的方向进行选择。
- 对齐：一般情况下，左侧对齐排列效果最佳。竖直排列相对于水平排列更容易阅读和定位，每行一个选项可以提高用户的浏览效率并减少错误。但竖直排列会占用较多的垂直空间，此时可以考虑水平排列。水平排列时，要注意每个选项之间的间距尽量大一点，以清晰地传达选项对应的标签。移动端更多采用左侧标签对齐、右侧按钮对齐的方式，以留出与页面相同的边距。
4. 交互区域
交互区域需要足够大，以提高易用性。对于较小的单选框和复选框，可以通过扩大点击区域来改善操作体验。列表选择中，可以点击容器框所在行区域来切换行对象的选中和未选中状态。
5. 文字标签
每个选项都需要配合相应的文字标签来指示其含义。为了保持一致性和视觉稳定性，最好在每个区域上提供同类型的标签。同时，要保证每个文字标签表达的一致性，避免使用否定词，不要在同一组标签中混用文字和图标。
以下是重构后的内容：
一个分段就像是一个按钮，按钮内当然可以使用文字或者图标代表其含义，但是请不要在同一个Segment Controls中混用文字和图标，避免让用户觉得混乱和不一致。另外，文字标签需要简洁明了，一般使用短语而不是句子，因此不需要以句号来结尾；如果需要解释说明，可以在选项下方使用单独一行文字说明；仅体现每个个体之间的差异，不用重复选项之间相同的部分，将重复部分提出来放在整个选项的上方。
辅助提示很好地补充在消除歧义上的不足，但我们也需要合理使用，进行克制，否则就会造成不必要的视觉噪声。暗示指的是用户在操作选择前，给予用户的提示，用户根据这些提示可以判断当前状态以及操作后状态。比如在界面风格模式、主题色、导航模式切换中，用户可以通过当前界面的样式判断当前是是什么模式，以及选中其它选项后会产生什么结果。环境暗示的优势是我们不需要其它设计和反馈告知用户当前状态，可以通过选择对象和当前界面环境给予直观暗示。
由于按下开关控件后立即执行操作，如果操作比较危险，请在危险操作后加入二次弹窗确认，告知用户当前状态以及潜在风险，避免造成严重损失。当用户操作后，提示框气泡反馈告知用户，让用户知道自己是触发了开启还是关闭；弹窗提示强度大，使用在一些危险、重要的反馈中；提示框则使用在一些轻量的提示中。辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明。并不是所有提示都需要让用户看见，我们可以给予用户其他感官的信号告知用户当前状态；界面设计与交互中，我们也仍然可以使用听觉和触觉来消除开关的歧义。
我们很容易陷入到特定控件的限制中，因此从整体上开始思考并做出最佳决策是至关重要的。这包括选择设计最有利于一致性、差异性和层次感的控件类型，如高度、宽度、样式设计和选项数量等。以下是针对不同情况的建议：
1. 当被选择对象为单选时：
a. 当选项数量少于6个时，使用单选框和Tab标签。单选按钮的认知成本低，可以让用户容易地看到所有选项并进行选择。同时，使用Tab标签可以在涉及选择项与内容组之间以及在相同层次结构中进行导航时进行导航。
b. 当选项多于6个时，使用下拉列表和列表单选。对于超过6个选项的情况，单选按钮可能会令人不知所措并引起混乱。此时，可以使用下拉列表或列表单选来整合相似且相类似的选项。如果屏幕空间有限，请使用下拉菜单；如果不是，请使用列表框。使用下拉菜单时，可以使用默认选项，并淡化其他选择。
2. 当被选择对象为多选时：
a. 当选项数量少于6个时，使用复选框。当选择项标签短小且一致时，使用复选框可以方便地进行比较，减少认知负荷，帮助表单更加透明。
b. 当选项多于6个时，使用列表多选。列表多选适用于6个以上选择项进行多选的情况，需要告知用户已选多少条数据，并在选中选项时出现相关操作。
c. 当选项数量在3-10个之间时，考虑使用多选标签。这些标签给人的印象是轻量且有趣。
3. 其他情况：
a. 当选择即生效时，使用开关。切换开关是一种数字开关，任何由切换开关触发的效果应立即生效。如非必要，最好用单个复选框替换切换开关。
b. 当存在长词时，尽量不使用多选标签。多选标签不能很好地处理长词，不建议对文本进行折行或调整大小，因为这会不便于用户阅读。使用两行以上的标签会使得每个标签非常难以快速扫描。
c. 如果垂直空间出问题，可以考虑使用标签分组或者滚动条来优化界面布局。
在设计选择类控件时，确保界面的清晰度和用户体验至关重要。本文将探讨如何从用户的角度定义模式，并举例说明三种常见的录入模式类型，以满足大多数应用场景的需求。同时，为了避免出现难以区分的选项，建议使用选择标签或增加间距。
选择类控件需要不断迭代、优化和拓展，以适应更多的应用场景。本文提供了一些参考资料，包括Material Design & Developer、拆解「开关」背后的设计细节、单选框历史与使用、UI备忘单以及选择控件指南等。这些资源将帮助设计师更好地理解和应用选择类控件的设计原则。
最后，作者提醒大家，本文为小龙原创，未经许可，禁止转载。希望本文能为你提供有用的参考和启示。
