开关
image.png
一个合理的开关设计主体包含的意符包含两种：表示当前状态；表示操作后的状态。
主体之外我们还可以添加辅助提示更加清晰地传达意符和反馈。
开关类型
1.icon
由单一的icon通过颜色或图形的变化来表示开或关的状态。
思考：将开关icon的样式设计为“当前状态样式”还是设计为“按下之后的状态样式”？
iphone自带相机的实时照片开关icon，显示当前状态。
image.png
有些开关的设计因为使用广泛，用户已经形成心智模型，强行改变反而导致体验很差。典型的是视频和音乐的播放暂停开关，表示的是操作后的状态而不是当前状态。
image.png
大部分应用的开关icon都是混用当前状态和操作后状态。如bilibili视频播放界面，播放暂停开关icon表示的是操作后状态，弹幕开关表示的是当前状态，视频锁开关又表示操作后的状态。
image.png
所以关键在于设计师是否能够让用户理解相应的意符和反馈，让用户很清楚在操作开关前，能知道当前状态是什么，操作开关后当前状态是什么。反面例子：美颜相机的夜拍模式开关。
image.png
总结：单一的icon开关如果没有其他的辅助提示会造成意符和反馈的缺失，进而形成较大的歧义，用户会在疑惑中按照自己固有的心理模型和过往经验判断，降低用户体验。
2.主体与开关分离（分离式）
分离式开关指的是主体不再充当开关，只当做开关的名称或icon另外分离出一个可视化开关在意符和反馈层面给予用户提示，可视性很强，完全解决了开关状态无法被用户感知的问题，
image.png
switch包含：
两个互斥的选项（开/关、是/否、启动/禁用），用来打开或是关闭选项但控件，选择其中一个选项会导致立即执行操作。
使用规范
1.准确的Label（标签）
由于Switch控件本身就能表现当前的开/关状态，因此相关文案只需要表示所控制内容，千万不要在label中加入一些逻辑词语。例如：Andriod7.0的通知设置，双向否定表肯定（右图是关闭通知的含义）。
image.png
2.清晰的开关状态
switch可以根据App视觉风格进行样式修改，但一定要清晰的表示开关状态，不要因为样式影响了识别度。例如：钉钉pc版红色按钮
image.png
3.立即执行操作
Switch与RadioButton（单选按钮）、CheckBox（复选框）最大区别是：Switch操作后，程序立即执行相关操作。而单选/复选一般用在表单里，仅反映当前的选择状态，如果需要执行操作并生效，要点击额外的提交按钮
4.危险操作二次确认
image.png
5.注意加载状态
如果Switch所执行的操作需要与服务器数据交互，要必须考虑加载状态，例如：改变时等待服务器返回成功指令后才能改变Switch的状态。
一般做法有两种
1.在等待间加入loading在开关上
2.加载等待，比较流行。用户操作switch后。switch视觉傻瓜立即响应改变，然后再向服务器交互（微信朋友圈点赞）
衍生：
1.google inbox 的pin样式
google inbox（gmail）右上角的pinned样式很像switch，但实际是筛选工具，图钉竖直表示只显示Pin过的邮件。
image.png
可以考虑在Switch的按钮上增加视觉效果，表现Switch当前状态所代表的含义。
2.QQ音乐Android版但流畅度设置
通常来说switch打开有启用的含义，带有一点正面的褒义效果。QQ音乐却反过来，switch关闭有褒义的鼓励含义-关闭更流畅
image.png
常见的APP设置页面使用的开关都是主体与开关分离的方式。优点是清晰直观展示，在消除歧义方面优于icon开关；缺点在于占用了过多页面空间并美感欠佳。
3.名称变化
image.png
部分app会将开关的名称变化的方式统一，也有部分app会将两类混用，即一个表示当前状态，一个表示操作。
image.png
表示操作的按钮文字具有一定的引导性，用户容易感知和触发。反之，表示状态的按钮文字优于不具有引导性，如果用户没有对这类按钮形成使用习惯，甚至难以意识到它是可点击的。因此我们可以利用其特性，进行逆向应用引导用户行为。比如直播APP中，希望引导用户关注主播，又试图避免用户关注后又取关主播，可以将关注开关文案设计成表示操作（关注主播），将取消文案制作表状态（已关注）。然后对两个按钮的颜色进行区分，前者关注的对比度强，后者做的弱一些，让用户误以为不可点击。
image.png
然而名称变化的开关由于语言的模糊性，仍然造成了部分歧义，部分app会在操作后加入其它提示来消除歧义（Toast提示）。
4.总结
icon、分离式、名称变化按消除歧义的优劣排列的话，是分离式>名称变化>icon
辅助提示
1.直观的环境暗示
指的是用户在操作开关前，开关以外的区域给予用户的提示，这些提示本身存在于交互流程中，不是要设计师刻意加入，用户根据这些提示判断当前状态，以及按下开关后的状态。
例如：音频视频播放暂停按钮，用户会通过当前图像静止与无声音这个环境暗示，明白当前状态。再比如App夜间模式。
image.png
image.png
2.模态/非模态提示
当用户按下开关后，模态和非模态提示可以在反馈层面告知用户，明确当前是开启还是关闭。
常见的模态提醒控件是“警告框（Alert）”，非模态提醒控件“提示框（Toast）”。美图的夜拍模式icon开关难以区分，但是使用了顶部的非模态提示，在反馈层面告知用户当前状态，解决了问题。
image.png
拉勾网的设置隐藏简历开关属于危险操作，用户可能由于开关名称的歧义或疏忽触发开关，设置了alert来告知用户当前状态已经潜在风险。
image.png
3.辅助文案
指的是在主要部分之外，放置一些文案信息来充当意符和反馈。如高德地图的下车提示开关，下方补充的辅助文案清晰传达当前的开关状态。
image.png
4.其他辅助提示、并不是所有提示都需要让用户看见，设计师需要给予用户其他感官的信号，告知用户当前开关的状态。比如高德地图当用户打开下车提示后，会出现语音提示“已开启下车提醒”，在设计中充分考虑使用环境的影响。
5.总结
辅助提示要合理使用，注意产生不必要的视觉噪声。
image.png
总结
如果我们选择的开关类型已足够消除歧义，如分离式，我们就不需要额外地增加辅助提示。但如果使用容易造成歧义的开关，可以按照（开关类型+辅助提示1+辅助提示2...）的公式设计，即一种辅助提示不足以消除歧义，可以使用多组组合。如高德的下车提醒开关设计就包括名称变化+辅助文案+语音提示的组合。
然而任何设计都需要设计师做出妥协于平衡，虽然可以选择合适的开关类型和辅助提示来解决歧义的问题，但如分离式开关会占用空间且不美观，模态提示给予用户的反馈比较强，但可能打扰到用户。在易用性和美观性之间平衡，具体问题具体分析。
image.png
设计取舍思考的方向可以从以下角度分析
a.使用频率：使用频率越高，用户对操作的熟悉度越高，对用户造成的理解与记忆成本就降低了，设计可以偏向低干扰和美观度。反之使用频率越低，用户理解与记忆成本升高，设计应该偏向于易理解。
b.用户人群：不同的用户人群的风格偏好、认知能力不一样。如年轻人的相机产品，设计风格简约，偏向的设计方案可能类似于美颜相机。如果是老年人，偏向于易用牺牲美观度，方案转向美图秀秀和激萌
c.潜在风险：如果开关的切换会导致潜在风险，设计就应该偏向于易理解，且需要使用模态提醒告知用户风险。例如用户如果关闭了推送通知开关，会导致接收不到实时重要的信息通知，此时不仅要使用易识别的开关类型，还要添加模态提醒告知用户风险。
我们可以将这些考虑角度放到雷达图，各个支点最终形成的面积越大，越应该将按钮制作的易理解、易使用。反之偏向于将开关制作的更美观，牺牲一些易用性。考虑到一些特殊产品的特殊用户属性，可以在下图增加其他考虑角度。
image.png
网友评论