网站建设之下拉菜单的新的设计方法

屏幕空间是在手机上的宝贵资源。为了满足同时还使导航访问的小屏幕空间的挑战，设计师往往依赖于隐藏导航汉堡包图标，隐藏导航的一个最好的例子后面。在这篇文章中，我们将看到为什么隐藏的导航产生不好的UX，什么替代品可供选择设计师。

为什么汉堡包菜单用户体验不好？

如果你对数码产品的工作，你可能已经读过几十描述移动汉堡包菜单怎样的伤害UX指标的文章。其主要缺点是它的低曝光率，这是由实际的数字备份。在定性研究，NNGroup发现隐藏的导航比可见或部分可见的导航较少发现。这意味着，当导航是隐藏的，用户不太可能使用的导航。汉堡菜单驱动订婚下来，慢下来的勘探和迷惑人。

所以，我们应该改为使用？

虽然对于移动应用和网站没有硬性和快速的规则，一般的建议是为使用可见–主导航选项在一个可见的导航栏，或组合导航显示，其中一些主要的导航选项都可见有些是一个互动的元素下隐藏。

1.标签栏

如果你在你的网站或应用中的顶级目的地数量有限，一个标签式导航可能是解决方案。当一个菜单的顶部或底部可见，它基本上是做广告的导航是存在的，人们都能够看到从一开始的导航选项。

网站建设

标签似乎是最简单的导航模式。然而，在设计这种类型的导航时的几件事情应该考虑：

• 选项卡栏允许5个或更少的导航选项来显示。
• 选项之一应始终处于活动，应由在视觉上加亮，例如，使用对比色。
• 第一个标签必须是主页和标签的顺序应与它们的优先级或逻辑顺序在用户流量。
• 这是更好地与标签为每个导航选项一起使用的图标。没有标签图标只能用于常见的操作，如搜索放大镜图标，并为这些用户经常使用的接口（如Instagram的）。

提示：为了节省屏幕空间，导航栏可以隐藏/显示上向下和向上滚动。

2.标签栏用“更多”选项

当你有超过5个顶级旅游目的地，一个实用的解决方案可能是显示4个优先部分，并有5个元素为剩余的选项列表。

该解决方案的设计原理基本相同标签栏。这里有一个例外：最后一个元素是“更多”项。

“更多”项目可以作为一个下拉菜单中工作，甚至链接到一个单独的导航页面的其余部分。从第一眼这种解决方案并不比汉堡包菜单好得多，因为它也隐藏内容和它的标签并没有说太多关于什么是隐藏在背后。如果你正确的优先级导航选项，但是，大多数用户将有4或5个可见的最高优先级的导航选项在屏幕上，以便为他们的导航体验将得到改善所有的时间。

网站建设

3.逐步折叠菜单

逐步折叠菜单，也被称为“优先+”图案，是适应屏幕宽度的菜单。它显示了尽可能多的导航成为可能，并提出下一个“更多”按钮一切。基本上，这种模式是“标签栏+更多的”导航的地方隐藏在“更多”菜单导航选项的数量取决于可用的屏幕空间的一个复杂的版本。该解决方案的灵活性提供了比“静态”“标签栏+更多”更好的用户体验。

网站建设

图片来源：布拉德·佛洛斯特

4.滚动导航

类似以前的两种模式，这是一个较长的列表的另一种方法。如果你有一些导航选项没有重点的大的区别，例如音乐风格，你可以列出可滚动视图中的所有项目。通过使列表滚动你允许用户从一侧到另一侧移动。

这种解决方案的缺点是仍然只有排在前几位的项目是没有滚动和所有其余的都出了视线可见。这，然而，当用户预期的可接受的解决方案，探讨的内容，例如新闻类，音乐类或在线商店。

网站建设

5.全屏幕导航

虽然与本文中提到的其它图案，斗争是最小化，该导航系统占用空间，全屏模式需要完全相反的办法。这种方法通常专门致力于主页导航。增量用户点击或因为他们向上和向下滚动刷卡透露更多的菜单选项。

这种模式行之有效的基于任务和基于方向的网站和应用，特别是当用户往往在一次会话中限制自己只是一个导航层次结构的分支。引导用户从全面概述页面，详细信息页面他们帮助家中他们在寻找什么，并单独的章节中重点关注的内容。

网站建设

在Yelp的全屏幕导航

使用全屏幕的导航，设计人员可以组织大量的信息以协调一致的方式，并没有压倒用户显示信息。一旦用户使得他们去哪里的决定，那么你可以奉献整个屏幕空间的内容。

结论

与导航模式的移动，没有一个尺寸适合所有溶液; 它总是取决于你的产品，你的用户和上下文。然而，每一个精心设计的导航的基础是信息架构：结构清晰，重点，并根据用户的需求的标签。帮助用户浏览应为每一个应用程序设计的重中之重。这两个第一次和老用户应该能够找出如何通过轻松您的应用程序移动。