当前位置: 首页> 视频营销

下拉菜单设计的7个技巧

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

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

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

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

01 避免长列表下拉

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

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

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

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

自定义搜索输入

02 选项太少

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

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

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

03 禁用灰色选项

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

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

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

04 避免打字速度更快时使用下拉菜单

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

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

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

05 避免过度使用

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

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

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

06 减少动作数量

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

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

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

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

07 使用简洁明了的标签

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

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

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

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

 ₪큐

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

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

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