导航抽屉到底归属于哪个层级?

这篇文章译自 +Juhani Lehtimäki 的博文 Navigation Drawer – Where Does it Belong in the View Hierarchy? 英文能力过关的同学可以直接去看原文~

事情本来是没那么复杂的…

Screen_Shot_2014-10-10_at_14_44_20

Android Design | Navigation Drawer

但是一切都变了. 我们常说 “先破而后立”, 当导航抽屉成为 Google 设计规范的一部分时, Google 明确告诉我们该这么做, 而且提供了可以让开发者直接调用的工具.

难道说 Google 在一开始的时候犯了个错误? 也许第一眼看上去这样做是对的, 但是从规范上看来确实是有些问题的.

所以现在规范改变了. Google 调整了这些东西. 在新的 Material Design 规范中, Navigation Drawer (现在被叫做 Side Nav, 侧边导航栏) 一跃来到了所有东西的顶端.

Screen Shot 2014-10-10 at 14.53.59

 

Material Design | Layout

我们现在又一次来到了变革的潮流中. Google 正在不断的改变自己与应用的设计, 与此同时很多变数也随着这些改变来到. 虽然我个人是很希望看到 Google 能统一他们使用侧边导航栏的方式并且对开发者们传递一个明确的信息…

Screen Shot 2014-10-10 at 11.46.56

也许你会问, “但是层级又有什么关系呢? 反正他们都 ‘能用’ 不是么?”

我认为这很重要, 事关重大. 这关系到用户是如何认知他们正在操控的物件. 如果抽屉式主要的导航方式, 那么它就是最不能出错的.

层级关系能让用户明白现在他正在操作的东西归属于应用的哪个部分.

2014-10-07_20_08_41_framed_2

上图展现了早先版本中抽屉所处的层级, 而新的 Photos 应用也遵循了这样的层级. 在我看来这么做有两个地方有很大问题:

  1. 首先, 抽屉在这个位置暗示了 Action Bar 在我导航到其他入口的时候不会有变化… 但是它却变了.
  2. 其次, 当抽屉展开时, Action Bar 上的按钮还是有效的, 但是它们的效果对象却是被遮住了一半 (在手机上被遮住更多) 的那些项目.

令人困惑, 不是吗?

 

2014-10-07_20_08_31_framed_2

最新版的 Google Hangouts 则采用了与 Tab 平齐的抽屉. 这给了用户 “当我从抽屉中导航到别处时, Tab 不会受到影响” 的暗示, 问题是, Tab 还是会受到影响的. 这种结构明显是错误的.

 

2014-10-07_20_08_22_framed_2

最新版的 Newsstand 中抽屉的表现是最接近 Material Design 规范中提到的 Google 应用了, 我认为这样的实现是很棒的, 而且是正确的. 当我从抽屉中导航的时候, 所有的内容都会改变, 包括 Action Bar. 这与现实的对应是最紧密的.

2014-10-10_09_08_58_framed

把 Drawer 设置为最高层级也可以很有效地避免发生上图这种视觉错误 (当 Action Bar 在滑动时隐藏了的时候).

好吧, 一切都在不断的变化, 而 Google 看起来也还没拿准主意. 我还是希望 Google 能早日找回一致性, 这样我们开发者和设计师才能跟进. 在那之前, 我们还是谨慎为妙.

当然, 改变熟悉的事物绝不是一件容易的事情. 我在 Google+ 上发起了一个投票希望看看大家的意见. 从结果看来改变是要花些时间的…

Screen Shot 2014-10-10 at 15.22.25