恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
切换开关 设计指南
0.0°
2018-08-09 自译外文 经验/观点 原作者: Alita Joyce 举报 4214 11 16 0

简介:切换开关提示用户在两个互斥选项之间进行选择,并且总是有一个默认值。开关应该提供即时的结果,用户可以根据需要自由的切换。


每天早上,我醒来,把水倒进我的茶壶,然后打开开关。水一开,我就把水壶关掉,给自己倒一杯。我水壶上的开关就是一个例子。如果你仔细观察,你会注意到它围绕在我们周围,因为很多东西都有两个简单的状态:它们要么已经打开,要么已经关闭。从电灯开关,到打开移动热点,再到我们APP的设置页面,我们每天都与切换器进行交互。


切换开关最适合用于更改系统功能和首选项的状态。它可以替换两个单选按钮或一个复选框,允许用户在两个相反的状态之间进行选择。有时候,决定使用哪个组件(单选按钮、复选框或切换开关)可能很困难。当您想知道哪个组件适合时,请考虑选项的数量和类型,以及是否有任何明确的默认值。下表总结了有关这些常用组件的问题和答案。



当设计人员为特定场景使用适当的组件时,它可以帮助用户预测组件将做什么以及如何控制它。为了避免用户的挫折感,请在切换开关设计上遵循以下指南。


及时反馈结果


切换开关应该立即生效,不应该要求用户单击保存或提交。如果直接的结果无法实现或看起来不太合适,那么应该使用替代方法(例如单选按钮或一个复选框——参考上表)。如果您想在表单列表中包含切换开关,并且用户需要单击“ 提交”按钮以使其更改生效,请不要这样做。这种情况会使用户感到困惑,因为他们无法确定他们的切换选择是否会立即生效。我们要不惜一切代价避免混淆。单独的控件可以从需要单击命令按钮的控件生成即时结果。


don't

Image title

在美国联合航空公司的iOS应用程序中,除了视觉更改之外,当用户点击切换开关时没有任何反应。用户如何知道切换是否有效?没有提供结果。在这种情况下,单个复选框将是最佳选择。


do

Image title

当为iOS启用飞行模式时,Apple会通过将左上角的细胞条更改为飞机图标来立即提供结果


提供简洁明确的标签


保持开关的标签短而直接。考虑到交互原则,即“菜单和按钮标签应首先具有关键字,形成唯一标签。”例如,当设计一个用户可以更新通知的设置页面时:一定要说电子邮件通知或短信通知,不要说你想要收到我们的电子邮件通知吗?我们要知道用户只阅读他们认为他们需要的内容,所以在标签前加上关键字,去掉多余的话术。


切换标签应该描述当开关打开时控件会做什么,它们不应该是模棱两可的。


don't

Image title


do

Image title

遵循标准进行设计


确保切换开关看起来像滑块,并利用视觉提示(如运动和颜色)以避免混淆。当用户改变切换状态时,开关应该改变位置——就像在现实中那样。


颜色是开关重要的视觉提示,有两件事需要注意:对比和文化差异。当设计师使用低对比度的颜色时,用户很难知道开关是什么状态。因此,始终使用高对比度的颜色来表示状态变化。此外,一定要评估对你的受众的社会和文化影响。


此外,状态描述符(开关旁边的单词On和Off)可以提供系统状态的清晰可见性。

Image title

这个切换是打开还是关闭?在Windows 10中,状态描述符(单词Off)用于标识切换(关闭)的当前状态。不幸的是,这个描述符是不明确的:因为单词Off出现在开关的右边,切换点在左边,用户也可以将切换的状态解释为on(即远离标签Off)。


在添加状态描述时,请坚持on/off以迎合现实,并分别在切换的左边和右边包含off和on,以避免混淆。如果开关旁边只有一个描述,则可以将其作为切换标签。

Image title

Daylio Android应用程序使用对比色(紫色)和没有状态描述符来清楚地指示切换的状态(在左侧屏幕截图中和在右侧屏幕截图中关闭)。


设计要一致


遵循平台规范,确保在应用中一致地设计切换开关。不一致性会迫使用户放慢速度,并花更多时间考虑如何与组件交互。不要让用户去思考不同的设计功能是否相同。


don't

Image title

Chase Bank iOS应用程序使用切换和单选按钮不一致。在元素类型和内容量之外,这三个页面几乎相同。当我与这些页面进行交互时,我希望它们以相同的方式运行。相反,我花时间想知道为什么我的营销偏好没有生效。


总结


切换开关帮助用户更新设置信息。当使用切换开关时,提供直接的标签,使用标准的设计,并给出即时的结果。请记住,切换开关只能在用户需要在两个相反的状态之间进行选择时使用。

更新:2018-08-09

收藏

11人已收藏

  • 12

    作品

  • 19

    粉丝

  • 6

    关注

  • 交互设计名词收录
  • 如何正确的使用背景色
  • 五个步骤寻找和解决用户痛点
  • 交互专用名词大合集
相关标签

    猜你喜欢

      2018-08-09 自译外文 经验/观点 原作者: Alita Joyce 举报 4214 11 16 0

      切换开关 设计指南

      0.0°

      你确定要举报切换开关 设计指南

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年08月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      16
      11
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录