Material Design 的新变化
今年的 Google I/O 落下帷幕,许多人期待的 Material Design 2 并没有到来,但 Material Design 依然迎来了不小变化。简书作者 Shell_Xiao糯米在文章《Google I/O 带来了 Material Design 的 7 个重大更新》里整理得很全面。在我看来,这些变化有几处影响深远。
设计与开发的进一步结合
在此之前,Material Design 只停留在设计规范阶段,在开发方面是缺失的,设计师虽然可以按照 Material Design 进行设计,但工程师很多时候依然要重新实现组件和样式,维护起来成本较大。
这次 Material Design 更新后,设计文档处处关联了 Develop 文档、资源和 Spec 参考,几乎全部组件都有官方成熟的方案供开发者使用,并且 Web、React、iOS、Flutter 等平台/框架都有 Component 包含在内。这让设计规范更实用了。
放宽的视觉规范
以往 Material Design 被诟病规范太死、让 app 风格千篇一律,而这回 Material Design 希望摆脱这个问题。在网站上,一批新的 studies(案例)被放在很前面的位置,紧接着规范的 Introduction。而且每个组件的介绍中,关联了这些 studies 的实际应用,方便参考。这次一并推出的 Theme Editor,也提供了相应的设计元素,可以在项目中直接调用。
比如在 Shrine 这个 study 里,App bar 不一定是规整的,缺个角也没问题,还有 icon、投影、按钮形状,通通不作限制。在 Theme Editor 中,我们可以看到 Floating action button 可以不是圆形,菱形、方形、甚至异形都可以。
但另一面,虽然视觉层面有所放宽,交互层面依然是很有约束,甚至带有强烈的工程师思维。拿横向导航举例,每种导航有清楚的纵深级别,A 不能高于 B,B 不能高于 C。而这些组件又有业务和设备上的建议,把可用的列出来,摆摆好,方便简单,也难免变得像是在「解题」。
对全面屏的优化
在原有 App Bar 组件的基础上,原先顶栏被定义为 Top App Bar,新增了Bottom App Bar,位于底部。Bottom App Bar 与 Bottom Navigation 不同的是,前者用于整理主要的 action button,后者类似 iOS 的 Tab Bar,承载了切换一级页面的作用。
在全面屏时代,用户更难触控到屏幕的上半部分区域,「下拉悬停」正是很多定制 Android OS 给出的一种全局的方案,而 Bottom App Bar 组件就是 Material Design 的给出的答卷,直接把按钮放在底部。此外,经典的「三大金刚」键被替代为可以拖拽操作的「小横条」,也是一例。