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

回复

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

前文传送门：
选择类控件设计解析（1）
选择类控件设计解析（2）
选择类控件设计解析（3）
选择类控件设计解析（4）
选择类控件设计解析（5）

2.3 排序
选项排序会影响用户操作，因此需要遵守一定排列原则。
逻辑顺序
你应该将所有选项按逻辑顺序摆放，比如按被选中可能性由大到小，按操作难易度由简单到复杂，按风险由小到大，将最安全的操作放在前边，列表选择一般按照信息时间排序，由新到旧。

选项的顺序可以说服用户进行选择，就像前面说的默认选择项一样，他们可能只是因为第一个选项在列表中的位置而选择了第一个选项。可以辅助用户，也可以让用户向着产品所希望的方向倾斜。
对齐
一般情况下，左侧对齐排列发挥最佳效果，标签选择除外。竖直排列相对于水平排列而言，容易读取和定位，每行一个选项足以，可以提高用户的浏览效率并减少错误。
但是竖直排列会占用较多的垂直空间，如果垂直空间受限，可以考虑水平排列。水平排列的时候，要注意每个选项之间的间距尽量大一点，以清晰的传达选项对应哪个标签。

移动端更多的情况是左侧标签对齐，右侧按钮对齐，二者与页面留出相同的边距。垂直屏幕占比小，常用于呼出选择、开关等有选择操作的表单标签。

3.3 交互区域
交互区域要适当大。单选框的面积较小，用户在点击的时候会比较困难，尤其是在移动设备上，易误操作，可以通过扩大点击区的交互区域来提高易用性。复选框和单选按钮一般都很小，点击或点选会很麻烦，可点击区域中应同时包含按钮和标签，增加操作区域的面积，方便用户操作。

列表选择中可以点击容器框所在行区域来切换行对象的选中和未选中。
2.4 文字标签
每个选项都要配合相应的文字标签来指示该选项含义。
一致性
最好在每个区域上提供同类型的标签，这样可以给用户一种视觉稳定性的感觉。同时尽量保证每个文字标签用语的表达的一致性，避免否定词，不要出现有的用名词，有的用动词的情况。

不要在同一组标签中混用文字和图标
一个分段就像是一个按钮，按钮内当然可以使用文字或者图标代表其含义，但是请不要在同一个Segment Controls中混用文字和图标，避免让用户觉得混乱和不一致。
尽量简洁
文字标签需要简洁明了，一般使用短语而不是句子，因此不需要以句号来结尾。如果需要解释说明，可以在选项下方使用单独一行文字说明。仅体现每个个体之间的差异，不用重复选项之间相同的部分，将重复部分提出来放在整个选项的上方。

2.5 辅助提示
辅助提示很好地补充在消除歧义上的不足，但我们也需要合理使用，进行克制，否则就会造成不必要的视觉噪声。
图标与环境暗示
暗示指的是用户在操作选择前，给予用户的提示，用户根据这些提示可以判断当前状态以及操作后状态。
比如在界面风格模式，主题色，导航模式切换中，用户可以通过当前界面的样式判断当前是是什么模式，以及选中其它选项后会产生什么结果，如下图（来源蚂蚁设计语言）在选择图标中就给予相对应模式的提示。

下图，白天模式与夜间模式，用户可以通过当前界面的样式判断当前是否已经开启了相关模式，从而判断拨动开关后是什么结果。

环境暗示的优势是我们不需要其它设计和反馈告知用户当前状态，可以通过选择对象和当前界面环境给予直观暗示。
警告框与提示框提示
由于按下开关控件后立即执行操作，如果操作比较危险，请在危险操作后加入二次弹窗确认，告知用户当前状态以及潜在风险，避免造成严重损失。
当用户操作后，提示框气泡反馈告知用户，让用户知道自己是触发了开启还是关闭。弹窗提示强度大，使用在一些危险、重要的反馈中，提示框则使用在一些轻量的提示中。
辅助文案
辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明。下图是手机信号设置和省电设置相关的选择，开关的主体是名称，但是下面的一行辅助文案很清晰地传达了开关开启后的后的状态。

其他辅助
并不是所有提示都需要让用户看见，我们可以给予用户其他感官的信号告知用户当前状态。界面设计与交互中，我们也仍然可以使用听觉和触觉来消除开关的歧义。
在安卓微信聊天列表中，选择一行聊天对象长按，手机会轻微振动一下，表示已点击，给予触觉反馈，同时展开的多个选项可进行选择操作；手机在关闭电源时，手机会卡擦一下，给予听觉反馈，表示已关闭屏幕，而不需要眼睛盯着屏幕关闭。