赚钱头条,下拉菜单怎么设置,实现下拉菜单的几种方式

本文将依据下拉菜单的属性,通过举例来讨论下拉菜单的使用场景,希望在设计上对人人有所辅助。

7个技巧,教你做好下拉菜单设计

正确地设计下拉菜单,可以辅助用户缩小选择局限,削减屏幕其他元素的滋扰,以及防止用户输入错误的信息。然则,在某些情形下,下拉菜单的错误使用将给用户体验带来严重的负面影响。在什么情形下使用下拉菜单至关主要。

本文将依据下拉菜单的属性,通过举例来讨论下拉菜单的使用场景,希望在设计上对人人有所辅助。

01 制止过长的下拉列表

在表单使用下拉菜单看起来很简单,它们不会占用界面空间,适配所有浏览器,用户对于此类组件足够熟悉。

然则,当下拉菜单里有跨越15个选项时,用户会变得不知所措,选择起来异常费劲——用户需要从20多个未分类的选项中找到想要的内容,想想都令人头大。

此外还存在转动的问题,用户必须把光标保持在下拉列表中,否则很容易转动整个页面,造成误操作。

国家选择器应该是最经典的长列表下拉菜单了,经常有跨越100多个选项。虽然列表中的选项一样平常情形下会按字母顺序排列,然则将热门国家/区域放在列表顶部的做法依旧不能知足用户需求。更好的做法是,增添自动填充功效或搜索功效,由于用户知道它们想要选择的内容是什么。(好比系统可以凭据地理位置或场景自动填充国家,或用户自主搜索国家)

7个技巧,教你做好下拉菜单设计

02 制止选项过少

而选项过少,使用下拉菜单组件也将是一个糟糕的决议。隐藏了本可以直接展示的信息内容,反而给用户的流程造成阻碍,降低了用户完成任务的效率。比较好的方式是使用单选组件,可以让用户快速浏览选项内容,提升用户的操作效率。

腾讯微生活平台官网,腾讯微生活最新动态

7个技巧,教你做好下拉菜单设计

03 置灰不能选项,而非删除

当某个选项被禁用或不能用时,应将其显示为灰色,而不是直接删除。由于这些不能用选项被禁用的情形有多种(如可能是在当前场景下是不能用的,在其他场景是可用的)。可以思量使用给不能用选项增添提醒,说明其被禁用缘故原由以及若何使其为可用状态。

7个技巧,教你做好下拉菜单设计

04 键盘输入可能更快

在某些情形下,键入可能比下拉选择速率更快。典型的案例就是信用卡日期。键入mm/yy绝对快得多,而不是从两个下拉菜单(月和年)中转动。

只管使用自由花样的输入字段需要某种形式的数据验证,但从可用性的角度来看,它仍然是最好的选择——由于它可以削减用户的肩负。

7个技巧,教你做好下拉菜单设计

05 制止过分使用

当某些数据或信息可以自动填入时,无需要求用户举行手动输入。这样的示例之一就是在结帐过程中使用的“卡类型”功效。凭据信用卡号的前几个数字,可以确定卡的类型,此时要求用户自己选择卡的类型会分外增添用户的操作。

7个技巧,教你做好下拉菜单设计

06 削减操作

可以凭据所需信息自定义下拉菜单的交互方式,以削减操作步骤。一个经典的例子是“日期选择”功效,若是使用通俗的列表菜单,则需要3个下拉菜单(月,日和年),这对于用户来说很繁琐。

更好的选择是自定义菜单组件,以允许用户仅使用一个下拉菜单选择输入。

7个技巧,教你做好下拉菜单设计

07 使用简练明了的标签

用户凭据菜单标签内容选择选项,因此准确提供信息异常主要。通常,最好使用简练的标签,以清晰解释选择的目的。以下是一些标签的准则:

  1. 对于动作菜单项,请使用动词来形貌将要发生的动作
  2. 对于链接,请使用名词来标识用户跳转到的页面
  3. 清扫菜单项中的冠词;使用“删除页面”,而不是“删除这个页面”
  4. 将菜单项保持在一行文本中

通过按逻辑顺序对列表举行排序来组织菜单项也很主要-若是可以,通常将最常选择的选项放在下拉列表顶部。然后通过用户调研,不停举行测试和完善,以重新评估效果。

本文来源于自互联网,不代表n5网立场,侵删。发布者:虚拟资源中心,转载请注明出处:https://www.n5w.com/43345.html

(0)
打赏 微信扫一扫 微信扫一扫
虚拟资源中心虚拟资源中心网络小白
上一篇 2020年6月20日 21:41
下一篇 2020年6月20日 21:42

相关推荐

联系我们

电话:

在线咨询:点击这里给我发消息

邮件:@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

公众号