如果你不喜欢折叠手机菜单，我们帮您找了5种其它解决方案

网站上的空间十分宝贵，特别是对移动端设备而言。如何充分利用网站上的空间，提高网站内容的可读性，正确引导用户进行浏览，是站长们面对的共同难题。一些设计师认为通过使用隐藏式菜单(最典型的要数汉堡图标)可以有效解决这个问题。不过，研究表明汉堡图标这样的隐藏式导航菜单虽然在节省网站空间上是一把好手，但在某种程度上却会影响用户体验。如果汉堡图标不是"良药"，又有哪些"妙方"呢?在今天这篇文章中，小飞就带大家看一下为什么汉堡图标会妨碍用户体验，以及可替代汉堡图标的几种导航菜单样式。

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

首先小飞要澄清一个事实：在移动设备上，可见式导航其实比汉堡图标等隐藏式菜单使用得更为广泛，前者大概是后者的2.5倍。很多人可能对这一数据感到吃惊，但这是真实的数据调查结果。如果你有仔细研究过汉堡图标和用户体验设计相关的文章，你应该更能理解隐藏式菜单和用户体验的冲突所在。汉堡图标等隐藏式菜单最大的问题就在于可见性很低，与可见式或部分可见式导航相比，在网站中它更难被用户发现，更谈不上使用了。换句话说，在网站中使用汉堡图标等隐藏式菜单，对用户来说是一个挑战，是一种有障碍的用户互动形式，用户很可能会在浏览过程中感到困惑和迷茫，这样的用户体验还会好吗?

汉堡图标的替代方案：

虽然说在移动网站中使用哪种形式的导航菜单没有强制性的要求，但最好还是采取显性的导航菜单设计，保证主要的导航菜单项都是可见的，避免用户迷失的状况，确保良好顺畅的浏览体验。下面是几种可见性较强的导航菜单样式：

1. 标签式导航

如果你网站的导航菜单项数量相对不多，且比较常用，这时你可以选择标签式导航。不管你准备将这个标签式导航放在页面上方还是下方，一定要确保用户能一眼就看见它，确保菜单内容是一目了然的。虽然标签式菜单算是导航菜单设计中最简单的一种样式了，但在网页中使用这种形式的菜单时还是要注意以下几点：

使用标签式导航时，菜单项最好不超过5个;

标签式导航在使用时，至少应有一个标签始终处于活动状态，且通过色彩对比，将活动状态的标签突出显示出来;

通常第一个标签应设置为主页，标签栏顺序按照用户使用的优先级来排列;

在导航标签当中，最好使用"图标+文本"的方式来呈现，而诸如搜索应用中的搜索按钮这样常用且用户熟知的操作，则只需要通过图标来展示;

为了节省空间，导航栏可以在滚动翻页过程中隐藏，而当页面静止的时候显现;

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

如果你的导航菜单项数量比较多，你可以选择"标签栏+更多"的菜单设计方式：将4个比较主要的菜单项以标签样式展示出来，剩下的菜单项则出现在"更多"选项中。这种设计方式的原理其实和标签式导航没有多大区别，只是多了一个"更多"选项。不过，这种导航菜单样式比隐藏式菜单更加优秀，一方面，虽然它同样隐藏了内容，但是绝大多数的重要选项已经被展示出来了，可见性还是比较强的。另一方面，"更多"选项按钮既可以出现下拉菜单，也可以链接到独立的菜单页面，具体的设计策略能够根据网站实际状况灵活处理。

3. 渐进收缩式导航

渐进收缩式导航菜单，也被称为"优先级+"菜单，是一种符合响应式设计规则的菜单设计，它会根据屏幕宽度和大小，尽可能多的显示优先级菜单项，而那些无法显示出来的菜单项则会被收纳到"更多"按钮中，当然"更多"按钮中能够菜单项的多少也取决于屏幕的宽度。这种设计方案比静态的标签式+更多的按钮更加灵活自然，更能给用户提供较好的体验，当然在设计方面也要复杂不少。

4. 滚动式导航菜单

和前两种设计方案一样，滚动式菜单也是针对较多菜单项的一种解决方法。如果你的网站有许多菜单项，且菜单项之间没有优先级顺序，你可以将所有的条目列在可滚动查看的范围内，让用户自行查看。不过滚动式菜单的弊端在于当页面没被滚动时，只有主菜单呈现，剩下的菜单项都是难以看见的。

5. 全屏导航

前面的4种设计方案的基本思路，都是尽可能的少占据屏幕空间，而全屏式导航则采用了完全相反的策略。这种设计方法，直接将主页做成导航，用户打开首页之后，可以上下滚动浏览导航类目，根据需求来点击不同的导航，寻找自己想要的内容。

这种设计模式通常适用于目标任务比较明确的网站，尤其适合于那种用户任务会固定在特定的类别当中的应用和网站。这种结构明确的网站，对于他们的固定用户而言，是非常的清晰、明确的，一方面可以让网站的设计和优化更加便捷，另一方面对用户而言更加好用，更容易集中注意力。Yelp网站就使用全屏导航让设计以更加一致的方式来组织导航内容，更有针对性的展示信息。

最后，小飞还是要说，在移动端的导航设计中，想要找到一个万能的解决方案是不现实的，网站应该采用什么样的导航始终取决于你的产品、用户喜好以及所处情境。所以，设计导航菜单时一定要基于网站和网站本身的信息架构，并且参考用户需求，来定制合理的结构、优先级和标签内容，帮助用户更好的浏览信息。只要做到这点，小飞相信你的网站导航就是清晰易懂的，网站用户体验就是极佳的。

快来起飞页自助建站平台（http://www.qifeiye.com/?t_wd=a5）做一个响应式网站吧!