汉堡导航在移动应用及网页设计中应用研究.docVIP

汉堡导航在移动应用及网页设计中应用研究 　　摘 要 “汉堡导航”又被称为“抽屉式导航”，“汉堡导航”诞生最初是为了适应在智能手机相对较小的屏幕上的应用。“汉堡导航”的特色明确，在界面设计中显著的提升了虚拟空间的使用，并在用户体验领域开启了崭新的领域。 　　关键词 交互设计；界面设计；导航；扁平化 　　中图分类号 TP3 文献标识码 A 文章编号 1674-6708（2015）149-0035-02 　　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 “汉堡导航”在用户体验中的问题 　　在“汉堡导航”简洁的设计性及强大的适配性给用户带来清晰的视觉体验与方便快捷的交互的同时，也暴露出它在用户的体验上的诸多弊端。 　　导航设计比较重要的一点是需要用户不需要指导，能够迅速理解并且使用。突兀地把“三条杠”摆在用户面前，如果没有很好地引导，用户会茫然不知所措，增加用户认知负担。这是对导航的实用性跟方便性的否认。显然这是在设计中是不能够被允许的。 　　“汉堡导航”出现之初，用户的反馈都是“很好”、“满分”，但是之后却发现这却是一场灾难――用户参与度只有一半。用户更新之后一度以为“汉堡导航”左侧导航栏是作为默认导航弹出的。用户不能直观找到导航，这种困顿给用户带来接下来的操作无法完成，严重影响了用户的体验。许多使用“汉