Material Design 笔记

让我从像配色、尺寸等这些简单的开始吧！（此时的我能力弱渣，层级、动画效果之类的我只能先保留着（大实话：其实我也只是大自然的搬运工））

一、配色

色不在多，够用就好——主色*1，辅助色*1。
在此基础上进行透明度、饱和度的变化，构成配色方案。
小面积需要高亮显示的地方使用辅助色。

区域较大部分的色彩采用主色的500色调，区域较小的部分例如状态栏采用深一点的色调，例如，700。
Google 官方文档中的配色表

二、文字

英文字体使用Roboto，中文字体使用Noto。

Roboto有6种字重：Thin、Light、Regular、Medium、Bold 和 Black。

Noto有7种字重：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。

常用字号：

• 12sp 小字提示
• 14sp（桌面端13sp） 正文/按钮文字
• 16sp（桌面端15sp） 小标题
• 20sp Appbar文字
• 24sp 大标题
• 34sp/45sp/56sp/112sp 超大号文字

长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

三、布局

所有可操作元素最小点击区域尺寸：48dp X 48dp。

栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：

• 顶部状态栏高度：24dp
• Appbar最小高度：56dp
• 底部导航栏高度：48dp
• 悬浮按钮尺寸：56x56dp/40x40dp
• 用户头像尺寸：64x64dp/40x40dp
• 小图标点击区域：48x48dp
• 侧边抽屉到屏幕右边的距离：56dp
• 卡片间距：8dp
• 分隔线上下留白：8dp
• 大多元素的留白距离：16dp
• 屏幕左右对齐基线：16dp
• 文字左侧对齐基线：72dp