下拉菜单设计的7个技巧
时间:2020-03-23

本文列举了下拉菜Ξ≮单―设计中的一些要点,并结合多个例子分析了怎么让下拉⊿菜单使用得恰到好处。

正г确地使用下拉菜单是美妙的,它们可以帮∮助用户缩小选择范围,逆转屏幕┆┇空间并防止错误的数据输入。但是,在某些情况下,下拉菜单的意义不大,反而会对用户体验产生╨负面影响。

重要的是要知道何时使用下拉菜单或其他接口元素,例如单选按钮,打开的文本字段等◄,过度使用或滥用它们会造成可用性问题。

在本文中,我将讨论下拉菜单的性质,并分析应该或不应该使用它们℃的情况。我还将展示一些不好的例子,以帮助你进行设计。

ↆ*

01 避免长列表下拉

在表单中使用下拉菜单似乎很容易——∽它们在界面上不会占用太多空间,所有浏览器都支持它们,并且用ю户对它们的了解也足够多。但是,当选项超过15种时,用户可能会不知所措,而他们也难以导航。

看到20多个未分类√的选项可能会令人迷惑并且令人生畏,用户很难找到他们想要的输入;还会出现滚动问题,用户必须将鼠и标光标保持在下拉框中,否则,他们最终将向下滚动页面。

长下拉列表最经典的示例是国家选择器,通常有100多个选项。尽管通常按字母顺序对其进行排序,但有时会将流行≯国家/地区放在顶部,这可能会使用¥户感到困惑。

更好的选择是使用Ψ具有自动·。完成功能的文本字段,因为用户已经知道他们在寻找什么输入。

自定义搜索输入

02 选项太少

另一方面,如果选项太少, 那么下拉菜单将是一个糟糕的选择,因为它通过隐藏可能已经暴露的信息而在用户流中引入了不必要的Ⅴ摩擦。

更好的选择是使用单选按钮,该々按钮允许用户立即扫描可用选项,θ而无需花费任何精力或精力。

如果选项很少,最好使用@单选框,而不要使用下拉菜╜单

03 禁用灰色选项

当某々个选项被禁用或不可用时,应将其显示为灰色,而不是将其删除。如果删除了禁用项,则界面将失去空间一致性,并使用户更难学习——他们可能仅由于禁用项而无法找到某些选项。

与其删除已禁用的选项,不如将它们变灰以指示其“已禁用”或“≌不可用”状态。您也可以考虑显示工具提示,以指示该选项被禁用的原因以及如何使其处于活Ⅳ动状态。

与其删除禁用的▽选项,不如将它们变灰以〾指示其“禁用”状态

0♧4 避免打字速度更快时使用下拉菜单

在某些情况下,键入实际上可能比使用下拉菜单更快。一种典型的情Ф况是输入信用卡有效期。键入mm / yy绝对快得多,而不是从两个下拉菜单(月和年)中滚动。

尽管使用自由格式的输入∈字段确实需要某种形式的数据验证,但从可用性的角度来看,它仍然是更好的选择——因为它可以减ㄨ少用户的负担。

对于用户в而言,键入时可能更快,请避免使用下拉菜单⿷。

05 避免过度使用

当某些数据或信息可以自动导出时,无需不断询问用户的输入。

这▪样的示例之一就是在结帐过程中使用的“卡类型”字段♦,可以根据信用卡号的前几个数字,确定卡的类型,因此要求用户自己选择卡的类型会产生额外的麻烦。

当可以在其他地方找到数据时,不Ⅻ要养成添加↘新输入字段的习惯。

06 减少动作数量

可以根据所需信息自定义下拉菜单的菜单部分,以减少操作数量。

一个经典的例子是“日期选择”字段,如果使用普通的列表菜单,则需要3个下拉菜单(月,日和年),这对于用户来说很烦人。

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

使用自定义菜单减少所需的操作数量。

07 使用简洁明了的标签

К

用户根据他们的标签选择菜单选项,因此准确和提供信息非常重要。通常,┍最好使用句子大小写并编写简洁的标签,以清楚表明选择的目的。

以下是写好标签的一∕些准则:

对于动作菜单项,请使用动词来描述将要发生的动作 对于链接,请使用名词来标识用户将定向到的页面 排除菜单项中的文章;使用“删除页面”,而不是“删除页面” 将菜单项保持在一行文本中

通过┚按逻辑顺序对列表进行排序来组织菜单项也很重要——如果知道的话,将选择最多的选项排列在顶部。这需要用户研究┗,应随时间进行测试和完善以重新评估结果。

 ν;

作者:LDesign1,∵公众号ID:LDesign1

本文由@LDesign1 原创发布于人人都是产品经理,未经许可,禁止转载

题图∮来自Unsplash, 基于CC0协议

上一篇: 电商付费会员竞品分析:苏宁易购 SUPER 会员的更多可能
下一篇: 需求的真伪如何判别?

热门推荐

精选推荐

摆摊做什么生意比较好赚钱_摆摊做什么生意呢_摆小地摊卖什么赚钱 2019-2022版权所有