学习规则，然后打破规则，才能更上一层楼。本文将讲如何打破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”，产品设计类文章持续更新。
网友评论