关于material-design的笔记

颜色

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

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。

你可能感兴趣的:(关于material-design的笔记)