一口吃掉 Material Design

边距

边距是栅格和屏幕之间的距离，在不同的屏幕上我们可以根据手指点击方便程度给予不同的边距当做安全距离，同时也可以解决列和水槽无法被整除的一些情况。

在360dp的手机设备上使用了16dp的边距

在600dp的平板电脑设备上使用了24dp的边距

可自定义栅格系统

我们设计的界面由于内在的逻辑关系需要，不能直接套用很多固定的栅格系统版式。那么可以根据需求进行自定义栅格系统。比如信息间的水槽就要考虑信息之间的逻辑关系。所以不要死板地使用栅格系统，根据自己的需要去自定义才是好的设计。

为了让用户感知图像是紧密相关的，这个案例中网格使用了8dp水槽

为了让用户认为专辑是各个独立的，这里使用了较大的32dp水槽来创建列之间的分隔

错误案例：这里使用了太大的水槽，使界面显得分裂

在不同设备中的栅格系统建议

在苹果产品平台中的栅格系统建议

色彩

Material Design的配色灵感来源于现代主义设计和路标等标识，所以它的色彩选择都非常鲜亮，颜色在明度和纯度上都较为适中，在我们设计APP时这些颜色能够突出信息并且使人愉悦。Material Design非常重视背景和文字的色彩对比，需要最大化地保证文字的可读性。在配色的时候注意三个原则：1.分级。我们可以使用不同的颜色来告诉用户哪些是可交互的，哪些是装饰；并且色彩与信息的逻辑关系应该是相关的，重要的元素应该使用最突出的颜色。2.清晰。文本和背景一定要有色彩反差，也就是常说的"黑纸白字"和"白纸黑字"。3.品牌。一个产品的品牌与调性体现在移动端应用程序上就是主色调了，比如网易系的红色、QQ音乐的绿色等，能让人时刻都明白自己在什么产品上。

Material Design配色

主色和辅助色使用同色系的样式

色表参考

Material Design提供给我们一大堆建议的色值可供参考，如果配色时您有选择恐惧症，可以尝试使用官方提供的配色色表作为参考。如果自选颜色的话，一定要注意颜色不可以选比较"脏"的颜色。

色表参考