4、颜色
调色板包含了基础色和强调色,可以用来帮助形成你的品牌色。基础色的饱和度为500。
【更多、更详细的色卡请见官方文档】
应当限制你的应用程序所使用的颜色数量,在众多基础色中选出三个色度以及一个强调色。强调色用于后背,可有可无。
对于文字、图标、分隔线等:
| Dark text (#000000) | Opacity |
| ------ | ----- |
| Primary text | 87% |
| Secondary text | 54% |
| Hint text, disabled text and icons | 38% |
| Dark text (#000000) | Opacity |
| ------ | ----- |
| Primary text | 100% |
| Secondary text | 70% |
| Hint text, disabled text and icons | 30% |
请参考:
5、图标
产品图标网格已经形成了一致的标准,且建立了一套明确的图形元素定位规则。这种标准化带来了灵活,而连贯的系统。
关键线的形状是网格的基础。利用这些核心形状做为向导,即可使整个相关产品的图标保持一致的视觉比例。
6、文字
英文字体使用Roboto,中文字体(非英文字体)使用Noto。
常用字号:
12sp 小字提示
14sp(桌面端13sp) 正文/按钮文字
16sp(桌面端15sp) 小标题
20sp Appbar文字
24sp 大标题
34sp/45sp/56sp/112sp 超大号文字
长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。
7、布局
所有可操作元素最小点击区域尺寸:48dp X 48dp。
栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离:
顶部状态栏高度:24dp
Appbar最小高度:56dp
底部导航栏高度:48dp
悬浮按钮尺寸:56x56dp/40x40dp
用户头像尺寸:64x64dp/40x40dp
小图标点击区域:48x48dp
侧边抽屉到屏幕右边的距离:56dp
卡片间距:8dp
分隔线上下留白:8dp
大多元素的留白距离:16dp
屏幕左右对齐基线:16dp
文字左侧对齐基线:72dp