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

这篇文章译自 +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

Advertisements

4 thoughts on “导航抽屉到底归属于哪个层级?

  1. 自从Android L Preview发布,就一直在研究Material Design,并尝试套用到自己公司的新产品上。Google自己的文档写的看起来很完善,不过开始的时候一直缺乏很好的例子,但是自从Google自家的应用开始Material化的时候,我倒是更困惑了,因为太多的地方Google自己都没有遵循规范,相反,新改版的几个应用的碎片化反而更严重了,不仅仅在Navigation Drawer上,但是这个Navigation Drawer层级的不统一确实让我最为困惑,以至于到现在……好吧,我目前也只能传统的使用盖住tab,和ActionBar同级。

    Reply
    • 你应该用新的SupportLibrary 中的 Toolbar 来实现。有一些 Google Apps 用上了 Toolbar 一些没有,所以造成了这个不统一的问题。

      Reply
  2. 与appbar同级的确就跟投票一样是最友好的实现方式,drawer打开后appbar可以显示app名称,overflow menu完全可以隐藏。我倒是觉得,drawer要是连appbar都遮住给人的心里感觉更差,我不知道如何描述,就跟投票图第一张那个差不多,因为阴影的地方留的太多了,反而要是drawer很宽,留的阴影很少给人感觉舒服。 可以参考play music

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s