谷歌设计师的葵花宝典（二）
上一篇文章中，给大家介绍了谷歌设计语言Material Design的由来，以及环境与空间、光源与阴影、动画效果、颜色等四个小节的内容，这篇文章，接着为大家介绍样式、布局、两个方面的内容。
样式
在上一篇中，我们介绍了material design的颜色部分，颜色也是样式中的一部分，接下来我们将陆续介绍剩下的样式：字体排版、图标、图像、书写。
字体
关于字体排版，我们只要简单记住两点：英文字体一般采用Roboto，中文字体使用Noto最基本的样式集合是基于12、14、16、20和34号的字体排版缩放。
图标
产品图标作为一个品牌下产品、服务、工具的一种视觉表现，能够简洁、显眼且友好地传递产品的核心理念与内涵。
桌面图标尺寸：48dp X 48dp；
桌面图标建议模仿现实中的折纸效果，通过扁平色彩表现空间和光影。注意避免以下问题：
不要给色彩元素加投影；
层叠不超过两层；
折角不放在右上角；
带投影的元素要完整呈现，不能被图标边缘裁剪；
如果有折痕，放在图片中央，并且最多只有一条；
带折叠效果的图标，表面不要有图案；
不能透视，弯曲。
应用程序小图标尺寸：24dp X 24dp，图形限制在20dp X 20dp区域内。
图像
在material design中图像应该是组建而成，而并非人为策划，遵循以下几个原则：
选择能够表达个人关联、信息和令人喜悦的图像；
传达特定的信息，以辅助理解的方式来创建只能的感官体验；
有焦点
个人关联
特定信息
焦点明确
书写
记住几个重要的原则：
。使用“你”对用户说话；
。不要使用“我们”；
。语言尽量简洁；
。用现在时书写；
。目标引导而不是方法引导；
布局
在布局这一章中，同学们除了熟记集中常规的布局方式，更重要的是要掌握一些常见的尺寸和距离。让app在不同平台和屏幕尺寸上拥有一致的外观和感觉，结构和视觉上的一致创造了一个可识别的跨平台产品的用户环境，它给用户提供高度的熟悉感和舒适感，让产品便于使用。
最小的触摸尺寸是48dp，在布局中，为图标（24dp）或者头像（40dp）设置边距时，要时刻记得。触摸目标不能重叠。
Overview
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
The app bar with significantly increased height for prominence
App bar height = 128dp
Action area height: 56dp
Title area height: 80dp
Title area bottom padding: 8dp
Description area height: 72dp
Description area bottom padding: 16dp
List
A two-column, left-aligned list with a 56dp floating action button.
Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp.
Vertical spacing
Status bar: 24dp
Toolbar: 56dp
Subtitle: 48dp
List item: 72dp
Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Vertical spacing
Status bar: 24dp
Toolbar: 56dp
Title and list items: 72dp
Subtitle: 48dp
Space between content areas: 8dp
Detail view
A detail card with a 56dp floating action button.
Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.
Vertical spacing
Status bar: 24dp
Toolbar: 56dp
Space between content areas: 8dp
List item: 72dp
Navigation drawer
A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.
Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.
Vertical spacing
Account menu and list items: 48dp
Space between content areas: 8dp
Navigation right margin: 56dp
上述内容是笔者自己的总结，欢迎对material design感兴趣的同学评论留言表达自己的看法。
