导航菜单也就是大家常说的Menu,它罗列出了网站的不同内容类别和功能。不管是在应用程序还是Web站点上,菜单的主要作用是帮助用户能够快速找到他想要的内容,和理解使用你的应用程序或者网站的功能

对于网站来说,导航菜单并不限于只是说主导航菜单或者汉堡式菜单,还有底部导航菜单,粘性菜单等等。这些菜单在网站上的重要程度也不太相同,在设计优先级上,很多时候也是不太等同的。

下面先介绍一种最常见的菜单形式: 下拉菜单(Dropdown Menu

下拉菜单(Dropdown Menu)

下拉菜单对于网站的可用性来说至关重要,现在滥用下拉菜单的现象越来越多,我们需要通过一些下拉菜单的设计技巧,方便我们设置出合理方便用户使用的菜单。

设计师在设计不同形式下拉菜单的时候,通常的目的包括:

  • 命令式菜单,通过所选定的选项来发送一个行动操作指令。
比如Microsoft Word,如果你需要分享文档,点击该Share会出现关于Share的不同分享命令,用户可以选择自己的想要的操作。
  • 导航菜单,把用户带到一个全新的页面。
  • 表单填写,用户可以通过选择表单字段的选项代表手动输入字段
Samsung的下拉表单允许用户选择自己的行业,选择自己的国家等等。
  • 属性值选择,允许用户从属性下拉菜单的所有可能属性中选择一个值
Adobe Photoshop CC 中的Color Libraries 允许用户从颜色库规则列表中选择已经预设好的颜色值。

现在流行的下拉菜单主要涵盖最前面的两个用途(导航和命令列表),而下拉框通常是表单填写和属性值选择的首选方法。虽然下拉菜单可以节省空间,下拉框方便录入准确的数字和属性值。

但是,苹果人机界面交互指南明确建议不要使用命令式的下拉菜单。这份研究表明如果设计师不经常使用下拉菜单,那么Web可用性就会增加。大家有兴趣可以自己了解苹果对界面设计规则。

下拉菜单设计指南

我们总结了在设计下拉菜单中应该遵循的法则,你可以尝试这通过以下方法来提高用户体验:

1、避免互动菜单,当用户在同一页面的一个菜单中选择某些内容时,另一一个菜单中的选项内容也会发生变化。当来来去去不断选择不同选项事,用户就会感到非常困惑,而且当所需的选项依赖于另一个菜单中的选择时,通常用户很难发现里面的不同内容。

iTunes: View菜单包含不同的选项,这取决于在Library侧菜单中你是选择了Albums或Songs。

2、有时可以将不可用的下拉选项灰色化,而不需要删除他们。有时不能被选中的项目都应该保留在视图中。另外,如果用户将鼠标悬停在灰色选项上超过一秒钟,可以考虑显示一个简短的气球帮助消息,解释为什么禁用该选项以及如何激活该选项。如果删除了禁用项,则界面将失去空间一致性,并且用户对界面熟悉将会更加困难。

这个方式在我们使用多重联动选项对网站产品进行筛选非常有用。虽然没能找不到之前的一些真实例子,但是可以给大家简单描述一下。例如下面这个例子,如果我选择了HyBridge Knits,如果这个类别下没有关于No Hood特性的产品,可以让这个特性变灰色。

3、要避免非常长的下拉菜单,非常长的下拉框需要滚动,而且用户不能一眼看到所有的选择。它们还需要小心地控制鼠标,这样鼠标就不会离开下拉菜单。Angie‘s List虽然用固定下拉框高度来避免下拉菜单很长,但是这样仍然会出现很多问题。要查看所有选项,用户必须向下滚动几次。用户无法预测列表的末尾在哪里,因为没有滚动条。

4、有时使用输入关联的方法比下拉更容易能让客户找到选项,这种经常发生在选择国家,州,地区的时候,我可能输入NY就出现了我想要选择的New York。支持键盘输入来辅助下拉导航,通过输入文字快速方便用户找到选项。

这个是Wiki在选择语言的时候使用下拉和输入结合,帮助用户更快的找到相应的结果。

5、将下拉菜单中的顶级分类换成全局的导航栏,这样方便客户快速找到想要查找的内容。Joann将顶级类别隐藏在下拉框里面,很可能会损害用户在任何站点上的查找。

虽然下拉框有很多方便网页的作用,但是不经过合理的设计,会制造出很多令用户费解的功能,我们在设计网站的时候也要把这些常见的问题牢记在心,避免重复错误。

15条菜单设计可用性指南

在应用和网站里面,人们是很依赖菜单去发现内容的,所以我们在制作网站的时候需要制作一个方便人们查到到网站的内容的菜单,方便人们更好地利用网站的功能。一个好的网站的先决条件就是一个好的具有指引作用的菜单。通过遵循一些导航菜单设计的可用性指南,避免常见错误:

使菜单清晰可见

1、在大屏幕上面不要使用小的菜单。

2、将菜单放置在用户熟悉的位置,方便用户找到他们。(屏幕顶部或者左侧)

3、让菜单具有交互的效果,让用户清晰地知道这个地方是可以点击的。

4、确保您的菜单有足够的视觉重量。从设计的角度出发设计更加抓眼球的导航栏,吸引客户的关注。

5、使用与背景颜色形成对比的链接文本颜色。

告知用户当前位置

6、在菜单栏可以告知用户现在浏览的是哪个页面,和身处网站的哪个位置。

站在用户的角度进行设置

7、使用可理解的链接标签。 找出用户正在寻找的内容,并使用熟悉且相关的类别标签。 坚持使用能准确描述您的内容和功能的术语。

8、把菜单放置在方便用户阅读习惯的位置上。(左侧/屏幕顶部)

9、对于大型网站,使用菜单让用户预览较低级别的内容。 如果是层级比较多的,则使用大型菜单(超级菜单),可以让用户跳过一个/两个层级来节省用户时间。

10、为密切相关的内容提供本地导航菜单,方便用户相比和查找相关的内容。

11、利用视觉传播。 图片,图像和颜色都可以更好地帮助用户理解菜单

让用户更加容易操作

12、使菜单链接足够大,可以轻松点击。菜单选择按钮之间的间隔不要太小,方便用户操作。

13、确保下拉内容恰到好处,不要太长或者太短。

14、如果下拉内容太多,可以考虑滑动的黏性按钮,方便用户在适当的长度范围内通过滑动选择目标内容。

15、人性化的物理化设计,将用户频繁搜索的内容放在靠近目标连接的下拉位置,使得用户不用将鼠标拉到老远的位置。

总结:

我们在制作网站导航菜单栏的时候应当从用户的角度出发,可以利用上面这15个技巧来检验框架的菜单有没有很好地践行这些原则。

Write A Comment