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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
使用单选项和下拉菜单的7个规则
0.0°
2018-05-09 自译外文 经验/观点 原作者: Saadia Minhas 举报 7932 103 243 7

单选按钮和下拉菜单是两个非常重要的输入控件,当用户输入时,他们都可以互换使用。但它们在不同的场景中的使用有不同的效果,本文主要讲述关于它们使用的7个规则。

Image title

来源:www.formassembly.com


无论你正在使用移动app还是网页,你会发现表单是用户界面非常重要的一个组成部分。它也是用户交互的最佳来源。用户通过在表单系统的信息输入,满足用户请求的信息。


某些项目可使用表单还包括输入控件、输入验证、错误处理和用户反馈。


单选按钮和下拉菜单是两个非常重要的输入控件。当用户输入时,他们可以互换使用。


就这些控件的可用性而言,在某些场景中使用单选按钮和下拉菜单可以更方便用户选择给定的输入。


下面是基于可用性研究的几条规则,这些规则在设计表单时会帮助你决定哪个控件更合适。


使用单选按钮


1. 当选项需要强调时


在多重情况下你会想强调选项:


1. 没有明确的默认选项或推荐选项。


2. 希望用户阅读所有选项。


3. 用户不熟悉这些选项,能预知他们的机会很少或没有机会。


Image title

当选项需要强调时


在案例中,因为默认选项没有提供关于其他选项的线索,所以使用下拉菜单看起来不是很好。


2. 当选项少于5个时


较少的选项可以并排放置,以便:


1. 用户快速轻松地扫描选项。


2. 提供快速响应,而不是打开下拉菜单并从多个选项中进行选择。


Image title

更少的选项


如果用户要从2个到4个选项中进行选择,最好使用单选按钮,如示例所示。


3. 当很明确比较选项时


可比较的选项可以并排放置,因为:


1. 用户可以一目了然且轻松地对其进行比较。


2. 从下拉菜单中比较和确定选项需要时间。


3. 用户每次想要查看所选选项时都必须打开菜单对选项进行比较。


Image title

选项比较是必需的


上面是关于用户做出一个严谨决定的订阅计划的选择。


4. 当选项能见度和快速响应优先时


清晰的选项能见度和快速响应对用户来说更易理解。


1. 对较长表单来说,扫描并标记所需选项变得更加简单快捷。


2. 每次点击下拉列表选择某选项都会需要很长时间。


Image title

长表单—— Survey Monkey Questionnaire


从给定的案例中可看出,当所有可选择的选项对用户可见时,长表单能提供良好的用户体验。


使用下拉菜单


5. 当默认选项是推荐选项时


仅查看推荐选项让用户能更容易做出选择,因为:


1. 显示所有选项会吸引用户的注意力。


2. 不鼓励用户更改默认选项。


Image title

默认推荐选项


例如,不用显示所有选项,因为用户有较小的机会更改默认选项。


6. 当大量相似选项可用时


有大量相似选项时,推荐用下拉菜单显示,因为:


1. 用户可以轻松进行预知。


2. 这时不需要看到并排放置的选项。


Image title

大量相似选项

 

7. 当选项超过7个时


数量多的选项并不适合并排显示,因为:


1. 如果一堆选项并排放置,会让用户界面变得混乱。用户在查看时会很慌乱。


2. 扫描大量单选项也需要时间。


Image title

超过7个选项


此外,对于长下拉列表,提供一个文本框是一个不错的方法,用户可以在其中键入选项名称,列表只需要显示过滤选项即可。这使得选择更便捷。


Image title

输入选项来过滤列表

 

结论


为了增强表单的用户体验,提供正确的控件对接受用户的输入是非常重要的。由于表单会有很多很长的选项,所以如果用户需要额外点击来补充其信息,此就会很无聊。


在设计表单时,这一组规则会帮助你在单选按钮和下拉菜单之间做出正确的决定。


译者:SKYUI 

原文作者:Saadia Minhas(UX设计的热衷者)

原文地址:https://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-drop-down-menus-fddf50d312d1

更新:2018-05-09

收藏

103人已收藏

  • 20

    作品

  • 745

    粉丝

  • 1

    关注

  • 5个网页及移动端设计中最常用的英文字体
  • 7个案例解析:复选框 vs 切换开关
  • 高级搜索设计:如何提升用户体验?
  • 16个有效的UX写作规则

    猜你喜欢

      2018-05-09 自译外文 经验/观点 原作者: Saadia Minhas 举报 7932 103 243 7

      使用单选项和下拉菜单的7个规则

      0.0°

      你确定要举报使用单选项和下拉菜单的7个规则

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      243
      103
      7

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

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

      登录

      手机号

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

      登录
      第三方账号登录