网站的空间都十分珍贵，对于屏幕空间十分有限的移动端网站来说，更是如此。所以，为了能在一屏之内尽可能的多加入内容，很多设计师会在移动端的网站中选择隐藏式菜单，这其中最为常见的就是汉堡图标。但是，有一项调查结果表明，虽然汉堡图标有效的节省了网站的空间，但是却会影响到用户的体验。

为什么汉堡突变会影响用户的使用体验？

其实，在移动网站中，可见式的导航栏比隐藏式菜单的使用更为普遍，可见式导航栏的使用率大概为后者的2.5倍，但事实上人们总是对隐藏式菜单的记忆更加深刻，造成这一现象的一个原因大概就是隐藏起来的菜单栏总是需要用户进行额外的操作并在屏幕中搜寻它的位置。

隐藏式菜单栏，尤其是汉堡图标在网站中的可见性一般较低，所以用户也较难发现他们的存在。所以说，以汉堡图标为代表的隐藏式导航栏其实是一种阻碍互动的方式，也会在一定程度上影响用户的使用体验。

如果不想使用汉堡图标的话，有几种可见式菜单栏的性能较强，可以作为完美的替代。

标签式导航

说起标签式导航栏可能很多人都没有什么概念，但是我举一个简单的例子大家就可以理解——微信的底部菜单就是一种标签式导航栏。

即，如果网站的导航菜单数量并不多，且都比较常用的话，就可以使用这种模式进行导航栏的设计，一般更多的用户比较习惯于底部的位置。但不管你把标签式导航栏放置在什么地方，都要保证它可以一眼就被用户看见，且足够清晰。在标签式导航栏的设计中，有几点需要注意。

使用标签式导航栏时，菜单项不要超过五个；导航栏在使用过程中，请尽量保证其中始终有一个标签处于激活状态，并可通过颜色、形状等变化来提示用户当前处在的位置；一般来讲，标签式导航栏的第一个标签设置为主页，其他标签按照重要程度排序；导航栏的展现形式尽量设计为图标+文字。

标签式导航栏+更多选项

如果你需要使用的标签数量超过5个，那么就无法使用标签式导航栏了吗？其实也仍有其他的解决办法，就是将较为重要的标签直接展示给用户，将功能性较低而用户又有需求的标签合并为“更多”进行隐藏，这其实也是一种标签式导航栏和隐藏式菜单的结合产物。

虽然隐藏了一些内容，但是这种方式确保了用户不必在页面中寻找菜单栏处在的位置，并且大部分主要功能没有被隐藏，用户仍然可以非常方便的使用。并且，“更多”按钮也可以与独立的菜单页面相链接，这样就可以展现给用户比“更多”更多的内容。

全屏式导航

以上两种设计方法，包括汉堡图标都是为了节省网站空间的菜单栏设计，而全屏式导航可以说是反其道而行之。这些网站直接将首页做成导航，在用户进入网站的时候，就可以直接根据导航来选择自己想要浏览的内容。

当然，这种设计并不适用与所有网站，而是更加适合被一些目标明确的网站中。这种结构分明的网站对于了解网站相关行业信息的用户来说显然更加清晰，也节省了他们寻找内容所花费的时间。

其实导航栏的设计也需要做出取舍，如想要让导航栏显示出更多的内容就无法避免其占用屏幕的空间，而如果想要让导航栏节省屏幕的空间的话就只能缩减导航栏的内容，所以，导航栏究竟该如何设计，还需要站长通过网站的定位来进行一个合理的判断，当然，导航栏的设计，还是首先要从用户的使用体验出发。

作者: https://www.haotuiwang.cn/ 平头哥SEO，原创不易，转载时必须以链接形式注明作者和原始出处及本声明。