交互设计新手必看!探秘抽屉导航的前生今世.pdfVIP

交互设计新手必看 ！探秘抽屉导航的前生今世 Google不久前刚刚更新了他们的Google+应用 ，采用了新的导航 式并抛弃了navigat io ndrawer。 一时之间 ，又引发了一系列关于Navigat io nDrawer利弊的讨论。 Navigat io ndrawer又被称为“Of f Canvas“、”hamburgernavigat io n“、”sidenavigat io n“、“slidemenu” 等等 ，虽然叫法不一样 ，但大致都是同一种形式的导航。 Navigat io nDrawer的前世今生 据考究 ，Navigat io ndrawer最早源自于Yo ut ube ，如下截图。 而“三道杠”的ico n最早出现在1981年No rmCo 设计的个人工作站X ero St ar。 详细见“W heredoesdrawero riginat ef ro m?” 2012年 ，Yo ut ube、Faceboo k、Pat h等应用纷纷使用了Navigat io ndrawer这样的导航 式 ，一时 之间引发了广泛的关注 ，甚至可以称为一种设计的趋势。 Faceboo k Pat h 但由于没有统一的规范 ，各个产品的抽屉导航设计也各不相同 ，为了控制A ndro id平台日益混乱的抽 屉交互 式 ，2013GoogleI/O大会之后 ，Google将Navigat io nDrawer纳入了A ndro idDesign规范 当中 ，随后大量应用开始采用这种交互模式。 2014 GoogleI/O大会刚刚结束 ，笔者会持续跟进 ，敬请关注后续更新。 备受争议 ？ 关于Navigat io ndrawer利弊的讨论也一直不停 ，直到2014年5月 ，Googleplus更新 ，去掉了抽屉 导航 ，一时之间 ，又引发了热烈的讨论。 可以说Navigat io ndrawer的出现也是应需而生 ，较之PC ，移动设备屏幕尺寸较小 ，可以说“寸土 寸金” ，抽屉导航最明显的一个优势就是节省屏幕空间 ，让导航“藏”在侧滑抽屉里 ，释放了更多的空 间给主要内容。 再者 ，Navigat io ndrawer实际上是开辟了另一种新的导航模式 ，区别于在此之前的几种主要导航 模式 ：腹肌式 （Si -pack ）、下拉 栏式 （Spinner ）、选项卡式 （Fi edTabs ）， 它 （Navigat io ndrawer ）弥补了其他几种模式在非顶级视图间进行导航的缺陷—— 用户必须退回顶 级视图 ，在顶级视图切换分类之后再进入其他内容 ，也就是说Drawer的好处就是能够提供在非顶级 视图间导航的能力。 如下图所示 ，从3.3跳转到4 .2 ，如果用其他导航 ，需要逐级回到顶级视图再逐级进入最终页面 ，但 是Drawer可以 便快捷的实现页面之间跳转。 然而自抽屉导航出现初期就一直伴随着质疑 ，甚至LuisA breu用“为何以及如何避免使用汉堡导航 ？” 作为文章标题 ，其对于Navigat io ndrawer的态度可见一斑。 当然 ，还有A nt ho nyRose用Z eebo 的实践经验告诉我们 ，“抽屉导航可能会降低你产品一半的用户 参与度”。 （自备梯子 ） 对Navigat io nDrawer的质疑大致可归纳为以下几点 ： 1. 可发现性低 ； 2. 在某些平台下 ，和平台固有的导航设计模式有所冲突 ； 3. 低效 ，并非一瞥即得。 大多数质疑声都集中在这个Drawer的可发现性上 ，他们认为“如果看不到 ，自然也就想 不到” （O ut of sight ，o ut of mind ），在默 认状态下 ，Drawer都是隐藏的 ，与传统的经验——最重要 最常用的功能放到首屏相悖 ，用户比较难发现隐藏的导航 ，增加了认知负担。 其次 ，在iO S平台下 ，官 标准的导航模式一般左上角是返回 ，而且支持左滑 （从左往右滑动 ）返 回的手势操作 ；Drawer也是将ico n放到左上角 ，这样就产生了如下图的冲突 ，act io nbar的左上角有 多个ico n ，而且交互模式类似 ，如下图。 再次 ，特别是在信息层级扁平的产品中 ，Drawer只是在视觉上简化了界面 ，功能并没有减少 ，“ 隐藏”其实是增加了“呼出抽屉”的操作 ，让原本直接操作的过程变得复杂了。很难想象如果微信 的Tab导航变成Navigat io ndrawer之后 ，会是怎样一番吐槽的场景。 需要理清的问题 Navigat io nDrawer作为一种导航模式 ，已经不仅仅