【转帖】选择类控件设计解析（1）

回复

本帖最后由嗨，狗子于 2021-3-16 18:08 编辑

无论是从个性化内容还是用户体验上来说，为界面内容选择正确的选择类控件可能比想象的要难，全文10,856字，预计阅读20分钟，建议收藏。本文主要研究选择控件的设计细节，虽然是很常见的控件设计，但也有非常多需要注意的地方。能提炼总结常见事物的一般规律，这本身就是对自己已有知识理解加深的过程。

单选框(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 复选框

复选框是一种按钮类型，可用于打开或关闭选项。当存在选项对象时，复选框允许用户从一组对象中选择一个或同时选中多个和全部项目。每个复选框都是单独的个体，因此选中一个复选框不会影响其他复选框的取消选中状态，全选除外。

复选框使操作在两个相反的状态，操作或无操作之间进行选择。复选框在屏幕上显示为一个小方框，选中时，它被认为是“开”，选中的复选框包含复选标记，正方形将充满复选标记。；关闭时，则被认为是“关”，它是空的矩形框。复选框一般放置在可选信息左侧(图片、视频以宫格形式表现的页面除外）。

复选框的数量
复选框可以用作单个元素，也可以组合成一个列表或嵌套式的层级列表以从中选择多个。如果需要将选择项分成几组，则使用多级复选框。

混合状态，仅在多级复选框时出现。如果使用复选框组，全局启用和禁用多个子复选框，当这些子项并非都处于同一状态时，父复选框应显示为混合状态（用短划线表示）。混合状态常在嵌套层级等对多个对象一同操作时使用，以代表该选项下的子选项没有被全选。当半选的复选框被点击时，它便会变成平常的复选框，而它的子选项亦会跟随全选或取消全选。