下拉菜单设计指南

　　下拉菜单在网页设计中显然占有一席之地。然而，他们的过度使用和误用造成了许多可用性问题和混乱。下拉菜单在网页设计中显然占有一席之地。然而，他们的过度使用和误用造成了许多可用性问题和混乱。设计师们为了各种不同的目的而使用下拉，包括:

　　命令菜单，它根据所选选项启动一个操作

当用户单击“发布” 图标时，Microsoft Word使用下拉菜单显示发布命令

推荐阅读：【网页设计欣赏】全屏视频背景的网页设计欣赏

　　导航菜单，它将用户带到一个新的位置

阿里云使用下拉菜单为每个顶级类别提供子类别链接列表

　　表单填充，让用户选择一个选项进入表单字段

Element下拉组件

　　属性选择，允许用户从可能值的菜单中选择一个值

Adobe Color CC允许用户从颜色规则列表中选择调色板

　　虽然最初的术语“下拉框”和“下拉菜单”可以互换使用，但随着时间的推移，两者之间出现了功能上的区别。现在，下拉菜单主要包括下拉菜单的前两种用法(导航和命令列表)，而下拉框通常是表单填充和属性选择的选择方法。

　　下拉框通常与下拉菜单不同:它们旁边有一个下拉箭头，用于选择属性或输入表单数据。这个控件倾向于一个字段标签或一个标题，这个标题在下拉框中占据第一项的位置，以便在进行选择之前可以看到它。尽管MacOS和Windows有不同的下拉式实现，但在这两种情况下，命令菜单都不同于属性选择菜单。事实上，Macintosh人机界面指导原则明确建议不要使用下拉菜单来执行命令。

　　下拉式设计指南

　　下拉菜单确实有其优点。首先，它们节省了屏幕空间。因为它们是一个标准的小部件(即使是不愉快的小部件)，用户也知道如何处理它们。而且，当使用表单和属性选择时，下拉框会阻止用户输入错误的数据，因为它们只显示合法的选择。

　　尽管有这些优点，但如果设计者较少使用下拉菜单，web可用性就会增加。为此，以下是一些关于下拉的设计准则:

　　1、避免交互式菜单，其中当用户在同一页面的另一菜单中选择某些内容时，菜单中的选项会改变。当选择来来去去的时候，用户会感到非常困惑，当它依赖于一个不同的小部件中的选择时，通常很难看到想要的选项。

iTunes：视图菜单包含不同的选项，具体取决于在库侧面菜单中是选择了相册(左)还是歌曲(右)

　　2、灰掉任何不可用的选项而不是删除它们：任何无法选择的项目都应保留在视图中。对于额外的用户体验，如果用户在一个灰色的选项上停留超过一秒，可以考虑显示一个简短的气球帮助信息，解释为什么这个选项是禁用的，以及如何使它激活。

　　如果删除了禁用的项，界面就失去了空间一致性，变得更难学习。

Snagit：“渐变” 和“容差” 选项呈灰色显示，表示在选择“无填充” 选项时无法选择它们

　　3、需要滚动的非常长的下拉菜单使得用户无法一眼看到他们的所有选择。也需要小心的转向鼠标，这样它就不会离开下拉。(这是转向定律的一个例子，它指出用户通过隧道引导一个指向设备的时间取决于隧道的长度和宽度:隧道越长越窄，占用的时间就越多用户将指针从一端移动到另一端，转向定律来源于Fitts定律)

　　在可能的情况下，抵制住诱惑。如果你有很多项目，可以考虑其他的方式来展示它们——比如传统链接的HTML列表或者超级菜单，它们是二维的而不是线性的，并且提供更简单的鼠标管理，并且更快的平均时间到达里面的项目。

如何建站：

建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了