• 媒体品牌
    爱范儿
    关注明日产品的数字潮牌
    APPSO
    先进工具,先知先行,AIGC 的灵感指南
    董车会
    造车新时代,明日出行家
    玩物志
    探索城市新生活方式,做你的明日生活指南
  • 知晓云
  • 制糖工厂
    扫描小程序码,了解更多

Drawer 的问题 | 领客专栏·原质随想

AppSo

2015-03-09 10:53

Material Design 的发布带来了很多的改变。其中一个细微而影响巨大之处就是 Drawer 的层级发生了变化。

先来看看两种不同的 Drawer 层级:

1

后者就是新规范里提倡的 Drawer 位置。可以看到,在早先版本中,Drawer 位于 Action Bar 之下,而在新版本中,Drawer 一跃到了 App 结构的最上方。

为什么 Google 最后选择了将 Drawer 置于最上级?

首先,Drawer 在 Action Bar 之下暗示了 Action Bar 在导航到其他入口时不会变化 (Action Bar 不被挡住)。在 Material Design 中,层级关系被前所未有的强化。下层内容服从上层改变是一条基本的规则。而在这样的呈现形式中,却会造成上层内容随下层内容而变化。

在例图应用里,当用户位于 Album 中时,Action Bar 上操作会变成只剩下搜索,Story 里连搜索都没有。

其次,当抽屉展开时,假设 Action Bar 上的按钮还是有效的,但是它们的效果对象却是被 Drawer 遮住了一半 (或更多更多) 的那些项目,而不是直接位于他们下方的 Drawer。实际上,绝大多数情况下,Action Bar 上的按钮时不会对 Drawer 中的内容起作用的。

可以说,Material Design 中 Drawer 的表现是最接近用户预期的。当用户从 Drawer 中进行导航时,Drawer 之下所有的内容都可以改变,包括 App Bar/Toolbar。这与现实的对应是最紧密的。

另外,由于 Quick Return 的大量运用,旧的 Drawer 在 Quick Return 下显得非常笨拙。而 Navigation Hub 概念的加入也使得 Drawer 不再是只有在一级界面才能调出的导航方式,而是被扩展到了几乎所有界面下。这个时候再使用传统 Drawer 就会出现越来越多的隐喻问题。

还有一个经常被人提到的问题是: 如果 Drawer 要遮住 App Bar/Toolbar 的话,那个看起来很漂亮的 「≡ 变成 ←」 动画不就一起被遮住了么?

其实这个动画的用途并不仅仅是展开 Drawer,在从主界面进入次级界面 (反之亦然),或者激活搜索栏的时候,都有它的用武之地。

drawer_compressed

登录,参与讨论前请先登录

评论在审核通过后将对所有人可见

正在加载中

AppSolution 领客专栏「原质随想」主笔。窥质感设计一斑。

本篇来自栏目

解锁订阅模式,获得更多专属优质内容