颜色

颜色不宜过多。选取一种主色、一种辅助色（非必需），在此基础上进行明度、饱和度变化，构成配色方案。

Appbar背景使用主色，状态栏背景使用深一级的主色或20%透明度的纯黑。

小面积需要高亮显示的地方使用辅助色。

其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。

黑色：[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线] 白色：[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]

图片上的文字

图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。

对于带有文字的大幅图片，遮罩文字区域，不要遮住整张图片。

可以使用半透明的主色盖住图片。

文字

字体

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

Roboto

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

Noto

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

卡片统一带有2dp的圆角。

悬浮按钮有两种尺寸：56x56dp/40x40dp

对话框的四周留白比较大，通常是24dp。

另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。

还有非常多规范，不详细列举，遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多，距离与尺寸要相应增大。

Dialogs

对话框包含标题、内容和操作项。点击对话框外的区域，不会关闭对话框。

Dialog

通常情况，避免出现滚动条。空间不足时允许滚动，滚动条建议默认显示。

对话框中，取消类操作项放在左边，引起变化的操作项放在右边。要写明操作项的具体效果，不要只写“是”和“否”。标题文字要明确，即使不读正文内容也能知道在干什么，标题不要用“确定吗”这样的含糊措辞。

在对话框中改变内容，不会提交数据，点击确定后，才会发生变化。

对话框上方不能再层叠对话框。

还有一种简易对话框，不带操作项。点击列表内容触发相应操作，并关闭对话框。点击简易对话框外面，对话框会关闭，操作取消。

对话框可以是全屏式的，全屏对话框上方可以再层叠对话框。上图是一个普通界面，其中的任何改动立即生效。下图是全屏对话框，其中任何改动，要点击保存后才生效，点击X取消。

全屏对话框右上角的操作项，可以是诸如保存、发送、添加、分享、更新、创建之类的操作，不要使用完成、OK、关闭这样的含糊措辞。

只有必填项都填了，右上角的操作项才变为可点击状态。

内容发生了改变，点左上角的X，需要有个确认对话框，提示是否忽略修改。内容没有发生改变，点左上角的X，直接退出全屏对话框。

Dividers

列表中有头像、图片等元素时，使用内嵌分隔线，左端与文字对齐。

内嵌分隔线

没有头像、图标等元素时，需要用通栏分隔线。

通栏分隔线

图片本身就起到划定区域的作用，相册列表不需要分隔线。

相册列表

谨慎使用分隔线，留白和小标题也能起到分隔作用。能用留白的地方，优先使用留白。分隔线的层级高于留白。

分隔线优先级高于留白

通栏分隔线的层级高于内嵌分隔线。

Tabs

tab只用来展现不同类型的内容，不能当导航菜单使用。tab至少2项，至多6项。

超出6项，tab需要变为滚动式，左右翻页。

tab文字要显示完整，字号保持一致，不能折行，文字与图标不能混用。

Text fields

简单一根横线就能代表输入框，可以带图标。

激活状态和错误状态，横线的宽度变为2dp，颜色改变。

输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。

输入框提示文字，可以在输入内容后，缩小停留在输入框左上角。整个点击区域增高，提示文字也是点击区域的一部分。

通栏输入框是没有横线的，这种情况下通常有分隔线将输入框隔开。

右下角可以加入字数统计。字数统计不要默认显示，字数接近上限时再显示出来。

通栏输入框也可以有字数统计，单行的字数统计显示在同一行右侧。

错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。

字数限制与错误提示都会使点击区域增高。

同时有多个输入框错误时，顶部要有一个全局的错误提示。

输入框尽量带有自动补全功能。

Navigation drawer

侧边抽屉从左侧滑出，占据整个屏幕高度，遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。