前言：寻找写作灵感？中文期刊网用心挑选的汉堡导航网页设计研究，希望能为您的阅读和创作带来灵感，欢迎大家阅读并分享。
摘要
“汉堡导航”又被称为“抽屉式导航”，“汉堡导航”诞生最初是为了适应在智能手机相对较小的屏幕上的应用。“汉堡导航”的特色明确，在界面设计中显著的提升了虚拟空间的使用，并在用户体验领域开启了崭新的领域。
关键词
交互设计；界面设计；导航；扁平化
1概述
1.1溯源
“汉堡导航”又被称为“抽屉式导航”，最早出现在1981年NormCox设计的个人工作站XeroxStar。2012年前后，众多知名的移动应用公司纷纷推出了以“汉堡导航”作为最新设计的应用版本，例如Facebook、Path、Youtube等。随后“，汉堡导航”开始进军网页设计领域，2014年至今，国内外众多知名网站都开始采用这一新颖而又显得有些特别的导航设计元素。“汉堡导航”诞生最初是为了适应在智能手机相对较小的屏幕上的应用。“汉堡导航”可以节约屏幕空间，拓宽原本有限的智能手机界面的空间，让导航隐藏在界面一侧，将主要的屏幕空间让给更重要的内容。在此之前导航设计主要有以下几种形式：腹肌式导航、下拉式导航、标签式导航等。而网页设计中长期使用的顶部导航也因为“汉堡导航”的出现而掀起了一波崭新的“再设计”风潮。
1.2形式
“汉堡导航”在移动应用设计中主要分为侧边栏式和下拉式两种形式，而在网页设计中除了侧边栏式和下拉式之外还衍生出全屏式、文字弹出式等形式。
1.2.1侧边栏式
最开始的“汉堡导航”基本都使用了侧边栏式的设计，也使侧边栏式导航成为最经典的最有代表性的“汉堡导航”形式，这样的设计为用户模拟出了一块向左或向右的虚拟界面，用户通过平移的动效将视觉流线向左或向右移动从而获得导航信息。
1.2.2下拉式
下拉式“汉堡导航”是指由用户点击“汉堡图标”后，由图标向下方弹出的导航菜单。
1.2.3全屏式
全屏式“汉堡导航”由侧边栏式“汉堡导航”衍生而来，侧边栏式“汉堡导航”一般是会侧拉出面积约占屏幕一半左右的导航界面，而全屏式“汉堡导航”则是完整的侧拉或弹出一个和屏幕一样面积的导航界面。
2“汉堡导航”优势分析
从用户体验的角度上来说，移动应用或网页的浏览者需要在极有限的时间内寻找到其所需的信息，因此导航的设计既要符合视觉逻辑又能让浏览者有更好的用户体验。设计师使用明确色彩定义三条短水平线，后因其形似汉堡的造型被称之为“汉堡图标”。这给用户提供了一种指引，成为用户点击的向导。“汉堡导航”自诞生以来，以其清晰的视觉体验，独特的侧边交互，在风靡全球的扁平化设计风格、幽灵按钮等潮流网络设计元素搭配的使用，实现和谐统一，在网页设计中占有一席之位。导航最初的目的是作为网站的地图索引，配合用户更好的完成交互。但纵观许多网站依然没有脱胎于最初的网页设计，导航的框架性十分严重，用户虽然点的十分方便，然而杂乱无章的界面始终不能令人赏心悦目，于是汉堡导航这种可以将导航收放自如的“控件”，扩大了内容所占据的空间，并且不影响用户浏览网页的视觉体验，能让用户更好的阅读内容，不会被原来的导航所遮挡。众多设计新颖的网站在纷纷“扁平化”改版之后采用了更为简约的设计，去掉传统的导航栏使整个页面清爽了起来，这样的设计方式更加吸引用户注意，创造出崭新的用户体验。“汉堡导航”在社交应用中广泛使用。最初是在2013年九月左右在Facebook（脸书）上得以实现，得到诸多好评。之后在其他社交应用中得到广泛应用，腾讯在手机QQ5.0版本中就加入了“汉堡导航”。这给腾讯QQ手机用户带来了灵动清爽的视觉体验。整体架构化繁为简，摒除繁杂的导航界面，让操作只在左右滑动中就能快速完成。并且一直沿用至今，给用户带来更简洁大方的界面，提供更方便快捷的操作是“汉堡导航”无可比拟的优势。
3“汉堡导航”在用户体验中的问题
在“汉堡导航”简洁的设计性及强大的适配性给用户带来清晰的视觉体验与方便快捷的交互的同时，也暴露出它在用户的体验上的诸多弊端。导航设计比较重要的一点是需要用户不需要指导，能够迅速理解并且使用。突兀地把“三条杠”摆在用户面前，如果没有很好地引导，用户会茫然不知所措，增加用户认知负担。这是对导航的实用性跟方便性的否认。显然这是在设计中是不能够被允许的。“汉堡导航”出现之初，用户的反馈都是“很好”、“满分”，但是之后却发现这却是一场灾难——用户参与度只有一半。用户更新之后一度以为“汉堡导航”左侧导航栏是作为默认导航弹出的。用户不能直观找到导航，这种困顿给用户带来接下来的操作无法完成，严重影响了用户的体验。许多使用“汉堡导航”移动应用没有明确的引导用户去找导航界面，这就给用户的交互带来极大困难。另外“汉堡导航”无形之中增加了操作的成本。将所有功能都收纳到汉堡导航中之后，每次用户想要切换页面都要进行二次操作，给用户增加了使用摩擦力。这多余的操作让用户叫苦不迭。这也是为什么Facebook改版后又不得不改了回来。
4“汉堡导航”的应用原则
首先是有超过3个顶层界面。“汉堡导航”非常适合同时显示多个导航目标，如果有3个以上的顶层界面就比较适合用它，否则的话，使用固定标签切换顶层界面会更方便。抽屉的原始功能就是收纳你放不下的东西。注意说的是你摆不下的东西，而不是所有的东西都往里面放，因为有些东西是必要的东西，或者是本身的东西很少没有太多的分支标签，那么放在抽屉里就相当的麻烦，这对于抽屉式导航也是一样的。拿手机QQ的例子来讲，因为手机QQ有超过3个功能如果全部放在外面就显得十分冗杂，美观性也直线下降。再者就是有子界面间的交叉导航。如果移动应用需要子界面间进行交叉导航，可以考虑用“汉堡导航”，因为在移动应用的任何地方都可以打开它，这样从子界面到其它主要界面都会很方便。如果说一款软件有非常多的功能，或者是有许多的分类，那么放在界面上与放在汉堡导航中操作的步数是一样的，也就不存在摩擦力的问题。拿pinteres（t拼趣）来说，作为一款社交软件，它涵盖的内容和功能是相当多的，为了能够更快的进入二级甚至是三级的界面打开汉堡导航再寻找二级或是三级界面就够了，这样就十分快捷，能够准确定位。然后是有深层的导航分支。如果移动应用某个子界面分支有很深的层级，那么回到顶层界面就会成为重复点按返回键的枯燥活动，而“汉堡导航”会让这个过程高效得多。最后就是有导航中枢。“汉堡导航”反映了移动应用的结构，也可以展示移动应用的导航重点，可以把移动应用中用户最常访问的部分放在里面以便快速跳转，一般来说，这个导航中枢里可以只有顶层的几个界面。
5结论
“混搭”这种流行元素在交互设计领域已经广泛应用。独立设计元素已经远远满足用户在交互中所要求的愉悦感。“你中有我，我中有你”的生态模式也已经逐步稳固。而“扁平化设计”“视差效果”、“汉堡导航”也已经成为交互设计中的“标配”。在这种生态环境中，“汉堡导航”的无缝插入，可以完美融合多种设计风格的特点，让其在今后的交互设计中可以如鱼得水，得到更广泛的应用。
作者：房雅珉 单位：中国传媒大学南广学院动画与数字艺术学院
参考文献
[1]塞弗(DanSaffer).微交互[M].李松峰，译.北京：人民邮电出版社，2013.