网站上的空间非常有价值，特别是对于移动设备。如何充分利用网站空间，提高网站内容的可读性，正确引导用户浏览是网站管理员面临的常见问题。一些设计师认为，通过使用隐藏菜单（最典型的汉堡包图标）可以有效地解决这个问题。然而，研究表明，隐藏的导航菜单（如汉堡包图标）可以很好地节省网站空间，但在一定程度上会影响用户体验。如果汉堡图标不是“好药”，那么'处方'是什么？在今天的文章中，Xiaofei带您了解为什么汉堡图标会妨碍用户体验和几种可以取代汉堡图标的导航菜单样式。 。

　为什么汉堡图标会妨碍用户体验?

首先，小飞希望澄清一个事实，即在移动设备上，可见导航实际上比隐藏菜单（如汉堡图标）使用得更广泛，前者约为后者的2.5倍。许多人可能对这些数据感到惊讶，但这是真实数据调查的结果。如果您已经研究过汉堡图标和用户体验设计文章，您应该更加了解隐藏菜单和用户体验之间的冲突。隐藏菜单（如汉堡包图标）的最大问题是可见性非常低。与可见或部分可见的导航相比，网站中的用户更难以发现，更不用说使用它了。换句话说，在网站上使用诸如汉堡包图标之类的隐藏菜单对用户来说是一种挑战，一种用户与障碍物交互的形式，并且在浏览过程中用户可能会感到困惑和困惑。会没事吗？

汉堡图标的替代方案：

虽然没有强制要求在移动网站中使用哪种形式的导航菜单，但最好采用明确的导航菜单设计，以确保主导航菜单项可见，避免用户丢失的条件并确保良好的平滑浏览经验。以下是一些更明显的导航菜单样式：

　1. 标签式导航

如果您网站上的导航菜单项数量相对较少且很常见，则可以选择选项卡式导航。无论您是要将此选项卡式导航放在页面的顶部还是底部，请确保用户可以一目了然地查看它，并确保菜单内容一目了然。虽然选项卡式菜单是最简单的导航菜单设计风格，但在网页中使用这种菜单时需要注意以下几点：

使用选项卡式导航时，最好不要超过5个菜单项;

使用选项卡式导航时，至少有一个标签应始终处于活动状态，并且活动状态标签将以颜色对比突出显示;

通常应将第一个标签设置为主页，并根据用户使用的优先级对标签栏顺序进行排序;

在导航选项卡中，最好使用“图标+文本”方式进行渲染，而常用和众所周知的操作（如搜索应用程序中的搜索按钮）只需要通过图标显示;

为了节省空间，导航栏可以在滚动过程中隐藏，并在页面静止时显示;

　2. 标签栏+"更多"选项

如果您有大量导航菜单项，则可以选择“标签栏+更多”菜单设计方法：标签样式中显示4个主菜单项，其余菜单项显示在“更多”选项中。这种设计方法的原理实际上与选项卡式导航没有太大区别，只是一个额外的“更多”选项。但是，此导航菜单样式优于隐藏菜单。一方面，虽然它也隐藏了内容，但大多数重要选项都已显示，并且可见性仍然相对较强。另一方面，“更多”选项按钮可以是下拉菜单或单独的菜单页面，具体的设计策略可以根据网站的实际情况灵活处理。

　3. 渐进收缩式导航

逐步可伸缩的导航菜单，也称为“优先级+”菜单，是符合响应式设计规则的菜单设计。它根据屏幕宽度和大小显示尽可能多的优先级菜单项。显示的菜单项将存储在“更多”按钮中，但“更多”按钮中的菜单项数量也将取决于屏幕的宽度。这种设计比静态标签类型+更多按钮更灵活自然，并且可以为用户提供更好的体验，当然，设计也更复杂。

　4. 滚动式导航菜单

与前两个设计一样，滚动菜单也是更多菜单项的解决方案。如果您的站点有许多菜单项且菜单项之间没有优先顺序，则可以在可滚动视图中列出所有项目供用户查看。然而，滚动菜单的缺点是当不滚动页面时，仅呈现主菜单，并且很难看到其余的菜单项。

　5. 全屏导航

前四种设计方案的基本思想是占用尽可能少的屏幕空间，而全屏导航使用相反的策略。这种设计方法直接进行主页导航。用户打开主页后，您可以在导航类别中上下滚动，根据需要单击不同的导航，然后找到所需的内容。

此设计模式通常用于具有明确目标任务的站点，尤其适用于将用户任务固定在特定类别中的应用程序和网站。这个结构良好的网站对于固定用户来说非常清晰明了。一方面，它使网站的设计和优化更加方便，另一方面，它更方便用户，更容易关注。力。 Yelp网站使用全屏导航，允许设计以更一致的方式组织导航内容，并提供更有针对性的演示。

最后，小飞仍然不得不说，在移动终端的导航设计中，找到一个多功能的解决方案是不现实的。网站应采用的导航取决于您的产品，用户偏好和情况。因此，在设计导航菜单时，必须基于网站的信息结构和网站本身，并参考用户的需求来定制合理的结构，优先级和标签内容，以帮助用户更好地浏览信息。只要你这样做，小飞认为你的网站导航清晰易懂，网站用户体验非常好。

来到起飞页自助网站（http://www.qifeiye.com/?t_wd=a5）成为一个快速响应的网站！