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

回复

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

1.3 切换开关
开关是两个互斥状态（打开和关闭）之间的可视切换。总有一个默认使用，拨动开关即立即生效。它是在打开时颜色是可见的，关闭时出现无色或灰色。
移动端中切换开关一般有交互动效，PC端没有。
开关与其他选择控件最大的区别是：开关操作后，程序立即执行相关操作。而其他选择控件一般用在表单里，仅反映当前的选择状态，如果要执行操作并生效，需要点击额外的提交按钮。

注意:不要为切换开关创建层次结构，避免使用开关控制单个细节或次要设置。开关的层级结构这在视觉上更容易分散注意力，而且会造成一种错误的印象，即所有的子选项都是开着/关着的。所以禁止滥用开关按钮。
开关具有比复选框更明显的视觉效果，因此它控制的功能应比复选框更为强大。如，可以使用开关打开或关闭一组复选框设置。因此它控制的功能应比复选框更为强大。如，可以使用开关打开或关闭一组复选框设置。
注意加载状态
如果开关所执行的操作需要考虑加载状态，例如开关切换状态不是瞬间（短时间）完成的话，开关则需要显示加载状态。

另外一种目前比较流行的加载方式是视觉上加载成功，服务器随后加载成功。用户操作开关之后，开关视觉上立即响应改变，然后再向服务器相应改变，中间会存在一定的时间差，这样能带给用户更流畅的体验。

避免在开关内添加说明标签。关于开关的打开或关闭，可以通过视觉样式让用户很明确的感知。额外的提供文本标签描述开关状态是多余的，还会使界面混乱不堪。

其它样式
单一的 icon 通过颜色或图形的变化来表示开或关的状态。常见的且体验比较好的设计方案是将开关样式设计为当前状态样式。如下图相机界面内HDR与AI功能的关闭与开启状态。

当然也有其它情况。最典型的就是视频的播放暂停开关，他们表示的就是操作后的状态而不是当前状态。

名称变化，名称变化指的是开关按钮依赖于其名称的变化告知用户开关的当前状态和操作，如：关注与取消关注，已关注与已取关。名称变化的开关由于语言的模糊性，仍然造成了部分歧义。我们可以在操作后加入其它提示来消除歧义（如：toast 提示）。
是否统一操作状态倒不是关键，关键是我们是否能够让用户理解按钮相应的意图，不做出混乱的选择便可。

1.4 选择标签
Tab标签
通常用于切换不同的视图，或者在表单中作为单选组件使用。一个分段tab通常会由2-6个单选项，可以是图标和短词，它适合导航形式，被设计成一个水平或竖直的容器进行单选。一组选项卡中的所有内容应该根据较大的分组原则进行分组，每个选项卡的内容与其他选项卡的内容都互相独立。
可以包含下拉列表的选项和使用翻页。

固定的选项卡应该只包含有限数量的选项，并且保持选项的位置不变，有利于用户记忆。可滚动选项卡用于有很多选项或选项数量可变的情况，但不推荐使用。

优点：将所有选项都摆在一行或一列，对空间的利用率能达到最佳，设计样式也可以做到非常直观，漂亮。
缺点：不大适合处理长词，短语，如果要将这些内容放在选项中，就须精简文本。水平空间非常有限，尤其是移动端，即使是少量的选项，有时候你仍然要精简文本。
Tab选择时，不要加载整个页面，只有选项标签及其内容区域应更改。交替切换标签时，用户应该感觉自己在同一位置。不要在选项卡内容中包含支持滑动手势的内容，因为滑动手势是用于在选项之间导航的。例如，避免在选项卡中包含一个可以拖动的地图，或者一个可以滑动删除的列表。
当功能不可用时，显示空状态，加入情感化提示，不要删除选项卡，确保所有选项卡都启用。
【转帖】选择类控件设计解析（2）

空状态：是用户在使用产品时某个界面无法显示的时刻，即没有其他元素。良好的空状态可以让用户知道正在发生的情况，发生的原因以及该怎么做。
这是四种常见的空状态类型：
首次使用——新产品没有内容可以显示时，例如打开新注册的印象笔记时会遇到这种情况。
内容被清除——当用户完成类似清空消息或收件箱等操作后，会出现一个空白的屏幕。
出现错误——产品由于网络问题造成离线时，会出现空状态的使用。
无结果——如果用户进行搜索，但是查询内容为空时会发生这种情况。
明确选中状态
具有3个选择项的Tab标签，我们能明显区分选中和未选中状态，应为Tab标签是单选控件。但是，如果只有两个选项，又是矩形按钮的选择项，则很难区分当前选择是哪个，哪个为选中状态？我自己某段时间一直默认颜色填充形按钮是选中状态，但经同事一提，一阵猛惊，那另一个是否为选中状态？在两个选项中存在选择疑惑，我们如何确定状态呢？
因此，我努力在统一风格的提前下，找出固有的特征，增强选中状态。这个大家如果有更好想法，欢迎留言。

多选标签

标签选择通常用于要从3-10个选项中进行多次选择操作情况，它们最适合用一到两个简短的单词或数字。它们设计的形式一般是一个个按钮，通过背景色来区分“选中”和“未选中”。由于不存在2个选项的情况，所以面对多选标签时，面对多个选择项的彼此堆叠，需让让用户知道他们可以选择多少个选项。添加辅助说明，既可以明确它是多选，又可以规范的最大选择项；选项过多时进行标签分类。