示例:如何设计下拉菜单技巧

时间:2018-06-26 15:15:22 关键词:下拉菜单 电子商务网站 复选框 导航菜单 子页面 片段选择器 小键盘

示例:如何设计下拉菜单技巧

一篇文章告诉你如何在网页设计的爱恨元素的——下拉菜单中发挥出色。

下拉菜单可以说是网页设计中最讨厌的元素之一。下拉式菜单具有许多优点:它们不占用空间,不需要输入验证,在所有平台上均受支持,技术壁垒低,用户熟悉其使用。但是,与此同时,下拉菜单是最容易使用的窗体组件。本文将告诉您下拉菜单的适用场景和设计技巧。

何时使用下拉菜单:

显示子页面

下拉菜单通常用于显示所有需要显示的子页面,相当于一个子导航菜单,如下所示:

博客内容分类

许多博客选择使用下拉菜单进行排序和列出标签。这是因为博客通常有很多内容,所以博客布局应该简单明了,下拉菜单可以收集布局元素之外的链接。

电子商务网站商品展示

许多电子商务网站也使用下拉菜单来展示产品或产品类别。以百思买网站为例:

何时不适合使用下拉菜单:

双重选择(是/否)

建议使用复选框或开关。

五个选项

建议使用单选框或片段选择器,以便您可以一眼看到所有选项,而无需打开列表。

更多的选择和明确的指向性

如果用户知道他们在找什么,请考虑使用可导入的解决方案。也就是说,允许用户输入并过滤出可能的答案,这样可以节省阅读长列表的时间。

纯粹的价值

通常,使用数字小键盘在手机上输入纯数值比在菜单中选择数值快。

准确的价值

对于精确的数值(例如购物车中的物品数量),可以使用计数器来让用户快速增加或减少数量。

不精确的价值

如果值不准确,请使用滑块。

在设计下拉菜单时,请注意:

尽量不要使用交互式下拉菜单

交互式下拉菜单意味着在同一页面内,当用户在菜单中选择一个选项后,另一个菜单的选项也会改变。 Web界面中的选项已经改变,用户很容易看到它令人眼花缭乱,无法把握焦点。

禁用禁用的选项

任何不可选择的选项都应该变灰,而不是删除。此外,如果用户在灰色选项上停留超过一秒钟,请考虑使用简短提示来解释选项被禁用的原因。

保持菜单标签/说明打开下拉菜单时,最好指明菜单标签或说明。菜单标题有效地提醒用户他们刚刚选择了什么。如果标签在菜单打开后消失,用户将不得不中断操作并记住要选择的选项。

支持键盘输入

在下拉菜单中应该支持键盘输入和按钮进行导航。在下拉菜单中,访问键应允许用户在不使用鼠标的情况下快速选择可见选项。在下拉框中,用户应该能够键入字母并快速导航到以该字母开头的选项。

合理的安排选择

将选项数量最多的选项放在最上面,或者将最可能的答案作为默认选项。

简化步骤

例如,如果用户输入了信用卡号码,则不需要选择信用卡类型。


转载请标注:重庆网站建设专家第一网络,链接:http://01netcn.com/news/i1253.html

023-61353088
重庆市渝中区大坪英利国际4号14F