打破Material Design的规则

学习规则，然后打破规则，才能更上一层楼。本文将讲如何打破material design app bar的设计规范。

上周的hack week，我们团队做了一个AR Shopping的项目，在安卓平台上用Material Design做了一个app。我亲手用eclipse写了该app的界面，知道了在开发中，material design的哪些元素是可以自定义的。

从设计师的角度来说，我们一般先学设计规范，然后画图都按照规范来，这样做设计比较安全，但也缺乏突破和创新能力。现在就从开发的角度来给设计师讲，哪些规范可以不遵守。

在Material Design尺寸设计规范中（Metrics & keylines，Structure），尺寸定义如下。

手机端：

App bar height: 56dp

App bar left and right padding: 16dp

App bar icon top, bottom, left padding: 16dp

App bar title left padding: 72dp

App bar title bottom padding: 20dp

桌面端：

App bar height: 64dp

App bar left and right padding: 24dp

App bar icon top, bottom, left padding: 20dp

App bar title left padding: 80dp

桌面端（紧凑版）：

App bar height: 48dp

App bar left and right content padding: 24

App bar left content padding: 80dp

Icon height with touch target: 40dp

那么问题来了，这些尺寸是必须遵守的吗？设计师设计的时候可不可以使用其他尺寸？

开发答：设计规范是死的，开发是活的。

以下是我写的代码以及生成的界面，可以明显的看出，padding，bar height这些参数完全可以自定义。

1. 在不设置padding或者将padding设置为0时，app bar是默认状态，完全符合material design设计规范的尺寸标准。

padding为0

2. 设置了padding之后，app bar可以变得不标准，高度、边距都能改变。

padding不为0

Material Design的字体规范中，app bar title字体大小为20sp。在颜色规范中，google提供了多种配色。那么字体大小和配色可以自定义么？答案是肯定的。

color swatches

稍微修改下代码，就可以将字体大小、颜色，app bar的颜色改成自定义样式。

总结：Material Design的App Bar中，padding、背景色、字号、字体颜色都可以自定义，但是遵守设计规范的参数会更好看，与其他app更统一。所以设计师在画图时最好还是按照设计规范来画，尽管规范可以不遵守。

App Bar的自定义讲到这里，以后有机会可能会再讲讲material design的其他控件的自定义。欢迎关注我的公众号“BaolingUX”，产品设计类文章持续更新。