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

交互设计新手必看！探秘抽屉导航的前生今世 Google 不久前刚刚更新了他们的 Google+ 应用，采用了新的导航方式并抛弃了 navigationdrawer 。 一时之间，又引发了一系列关于 NavigationDrawer 利弊的讨论。 Navigationdrawer 又被称为 “OffCanvas 、“”hamburgernavigation 、”“sidenavigation 、 ““slidemenu ” 等等，虽然叫法不一样，但大致都是同一种形式的导航。 据考究， Navigationdrawer 最早源自于 Youtube ，如下截图。 而 三道杠“ ”的icon 最早出现在 1981 年 NormCox 设计的个人工作站 XeroxStar 。 详细见 “Wheredoesdraweroriginatefrom? ” 2012 年， Youtube 、Facebook 、Path 等应用纷纷使用了 Navigationdrawer 这样的导航方式，一时 之间引发了广泛的关注，甚至可以称为一种设计的趋势。 Facebook Path 但由于没有统一的规范，各个产品的抽屉导航设计也各不相同，为了控制 Android 平台日益混乱的抽 屉交互方式， 2013GoogleI/O 大会之后， Google 将 NavigationDrawer 纳入了 AndroidDesign 规范 当中，随后大量应用开始采用这种交互模式。 2014GoogleI/O 大会刚刚结束，笔者会持续跟进，敬请关注后续更新。 备受争议？ 关于 Navigationdrawer 利弊的讨论也一直不停，直到 2014 年 5月， Googleplus 更新，去掉了抽屉 导航，一时之间，又引发了热烈的讨论。 可以说 Navigationdrawer 的出现也是应需而生，较之 PC ，移动设备屏幕尺寸较小，可以说 寸土“ 寸金 ”，抽屉导航最明显的一个优势就是节省屏幕空间，让导航 藏“ ”在侧滑抽屉里，释放了更多的空 间给主要内容。 再者， Navigationdrawer 实际上是开辟了另一种新的导航模式，区别于在此之前的几种主要导航 模式：腹肌式（ Six-pack ）、下拉 栏式（ Spinner ）、选项卡式（ FixedTabs ）， 它（ Navigationdrawer ）弥补了其他几种模式在非顶级视图间进行导航的缺陷 —— 用户必须退回顶 级视图，在顶级视图切换分类之后再进入其他内容，也就是说 Drawer 的好处就是能够提供在非顶级 视图间导航的能力。 如下图所示，从 3.3跳转到 4.2 ，如果用其他导航，需要逐级回到顶级视图再逐级进入最终页面，但 是 Drawer 可以方便快捷的实现页面之间跳转。 然而自抽屉导航出现初期就一直伴随着质疑，甚至 LuisAbreu 用 为何以及如何避免使用汉堡导航？“ ” 作为文章标题，其对于 Navigationdrawer 的态度可见一斑。 当然，还有 AnthonyRose 用Z eebox 的实践经验告诉我们， “抽屉导航可能会降低你产品一半的用户 参与度 ”。（自备梯子） 对 NavigationDrawer 的质疑大致可归纳为以下几点： 1. 可发现性低； 2. 在某些平台下，和平台固有的 导航设计模式有所冲突； 3. 低效，并非一瞥即得。 大多数质疑声都集中在这个 Drawer 的可发现性上，他们认为 如果看不到，自然也就想“ 不到 ”（Outofsight ，outofmind ），在默 认状态下， Drawer 都是隐藏的，与传统的经验 —— 最重要 最常用的功能放到首屏相悖，用户比较难发现隐藏的导航，增加了认知负担。 其次，在 iOS 平台下，官方标准的导航模式一般左上角是返回，而且支持左滑（从左往右滑动）返 回的手势操作； Drawer 也是将 icon 放到左上角，这样就产生了如下图的冲突， actionbar 的左上角有 多个 icon ，