安卓简介

创始人
2018-12-04/安卓设计规范 - 图1

安迪 鲁宾
后被谷歌收购。
2018-12-04/安卓设计规范 - 图2

安卓版本都是以甜品命名

Material design核心思想

把物理世界的体验带进屏幕,去掉现实中杂质和随机。保留其原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,把原最贴近真实的体验,达到简洁与直观的效果。
material design将纸媒的阅读与物理体验运用到安卓系统中
提示:以下内容中的MD代表Material Design。
2018-12-04/安卓设计规范 - 图3

MD设计语言是跨平台的,可以在任意平台中使用。

一、材质

2018-12-04/安卓设计规范 - 图4

MD是以纸张的物理体验融入到屏幕中

这些是纸片的魔法特性,真实纸片所不具备的能力:

1、纸片可以伸缩改变形状。
2、纸片变形时,可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分。
3、多张纸片可以拼接成一张。
4、一张纸片可以分裂成多张。
5、纸片可以在任何位置凭空出现。

不过魔法纸片有些效果是禁止的:

1、一项操作不能同时触发两张纸片的反馈。
2、层叠的纸片,高度不能相同。
3、纸片不能互相穿透。
4、纸片不能弯折。
5、纸片不能产生透视必须平行于屏幕。

二、空间

2018-12-04/安卓设计规范 - 图5

MD的设计单位dp,苹果的设计单位是pt。

三、动画效果

Material Motion
可以以MD的动效设计语言来学习动效设计。因为md的设计语言是比较完整与严格的。
MD重视动画效果,它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。
动画设计要求:动画要贴近真实世界,就要重视easing。物理世界中的运动与变化都是有加速和减速的过程,忽然开始会停止的均速动画会显得机械而不真实。考虑动画的缓动,要先考虑它在现实世界中的运动规律。
2018-12-04/安卓设计规范 - 图6

缓动
动画设计书籍推荐:《原动画规律》
人再转头的过程中会眨眼,这是因为人在转头时眼睛会看到大量图像信息,大脑为避免过多信息,会让眼睛眨眼,
水波反馈
2018-12-04/安卓设计规范 - 图7

折合物理世界的反馈效果,清晰告诉用户点了哪里
所有可点击的元素,都应该有水波反馈,通过反馈动画,将点击的位置与所操作的元素关联起来,体现了MD动画的功能性。
为什么现代社会中很多机器仍然保留了实体按钮:反馈较强!
2018-12-04/安卓设计规范 - 图8

1、通过过渡动画,表达界面之间的空间与层级关系并且跨界面传递信息
ios的界面转场交互为:左右滑动也就是页面的层级变化。
2018-12-04/安卓设计规范 - 图9

2、从父界面进入子界面,需要先抬起升子元素的高度,之后展开至整个屏幕,反之亦然
2018-12-04/安卓设计规范 - 图10

3、多个相似元素,动画设计要有先后次序,起到引导视线的作用
2018-12-04/安卓设计规范 - 图11

4、相似元素的移动,要符合统一的规律
2018-12-04/安卓设计规范 - 图12

5、通过图标的变化和一些细节来达到令人愉悦的效果

四、色彩规范

2018-12-04/安卓设计规范 - 图13

1、颜色不宜过多,选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。
2018-12-04/安卓设计规范 - 图14

2、Appbar背景使用主色(色值卡500),状态栏背景使用深一级的主色或20%透明度的纯黑。(色值卡700)
2018-12-04/安卓设计规范 - 图15

3、小面积需要高亮显示的地方使用辅助色。
2018-12-04/安卓设计规范 - 图16

其余颜色通过纯黑#000000与纯白#fff的透明度变化来展现(包括图标和分割线),而且透明度限定来几个值。

五、图标

2018-12-04/安卓设计规范 - 图17

桌面图标尺寸是48dp*48dp。桌面图标建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影
安卓中的桌面图标现大多都是把ios的图标直接搬运过来。
2018-12-04/安卓设计规范 - 图18

一倍图中的小图标大小
2018-12-04/安卓设计规范 - 图19

2018-12-04/安卓设计规范 - 图20

六、图片

2018-12-04/安卓设计规范 - 图21

1、描述具体事物,优先使用照片,然后可以考虑使用插画。
2018-12-04/安卓设计规范 - 图22

图片上的文字,需要淡淡的遮罩确保可读性。深色的遮罩透明度在20%~40%之间,浅色的遮罩透明度在40%~60%之间。
2018-12-04/安卓设计规范 - 图23

3、Android 5.0(安卓L)可以从图片中提取主色,运用在其它ui元素上。

七、文字

2018-12-04/安卓设计规范 - 图24

安卓中默认英文字体是Roboto
iOS中的中文字体是苹方。英文字体是San Francisco字体(旧金山)。
2018-12-04/安卓设计规范 - 图25

中文字体是noto
2018-12-04/安卓设计规范 - 图26

sp是一倍图中字体单位

八、布局

所有可操作元素最小点击区域尺寸:48dp*48dp。栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整倍数。
ios中的最小可点击区域是44pt*44pt
2018-12-04/安卓设计规范 - 图27

常见尺寸与距离
2018-12-04/安卓设计规范 - 图28

八、组件

底部动作条

2018-12-04/安卓设计规范 - 图29

2018-12-04/安卓设计规范 - 图30

按钮

2018-12-04/安卓设计规范 - 图31

悬浮按钮层级最高

1、重要性

最重要且随处用到的操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以有效突出重要操作,但注意纸片不要叠太多层。扁平按钮适用在简单的界面,例如对话框中。

2、悬浮按钮使用规则

①建议只用一个悬浮按钮。
②悬浮按钮可贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘。
③悬浮按钮不能被其它元素挡住,也不能挡住其它按钮
④列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项。
⑤悬浮按钮的位置不能随意摆放,可以贴着左右两边的对齐基线。

3、其它

悬浮按钮通常触发正向的操作,添加、创建、收藏之类。不能触发负面、破坏性或不重要的操作,也不能有数字角标。
悬浮按钮有两种尺寸:56dp*56dp/40dp*40dp。

卡片

2018-12-04/安卓设计规范 - 图32

2018-12-04/安卓设计规范 - 图33

2018-12-04/安卓设计规范 - 图34

2018-12-04/安卓设计规范 - 图35

2018-12-04/安卓设计规范 - 图36

对话框

2018-12-04/安卓设计规范 - 图37

正向操作在右边,负向操作在左边
2018-12-04/安卓设计规范 - 图38

2018-12-04/安卓设计规范 - 图39

2018-12-04/安卓设计规范 - 图40

2018-12-04/安卓设计规范 - 图41

2018-12-04/安卓设计规范 - 图42

Tab

2018-12-04/安卓设计规范 - 图43

官方文档禁止tab选项中用图标加文本展示
2018-12-04/安卓设计规范 - 图44

2018-12-04/安卓设计规范 - 图45

抽屉导航

2018-12-04/安卓设计规范 - 图46

推荐不使用抽屉导航(使用太泛滥,交互层级多)除非功能太多;推荐使用底部导航

适配

2018-12-04/安卓设计规范 - 图47

dp=pt
2018-12-04/安卓设计规范 - 图48

现在基本使用720*1280的二倍图做设计。切图时只切2、3、4倍图;具体要看产品类型来切图
一端适配,使用ios的二倍图做为安卓的2倍图使用。
2018-12-04/安卓设计规范 - 图49

2018-12-04/安卓设计规范 - 图50

2018-12-04/安卓设计规范 - 图51

2倍图换算方法
2018-12-04/安卓设计规范 - 图52

2018-12-04/安卓设计规范 - 图53

三倍图换算方法
2018-12-04/安卓设计规范 - 图54

安卓中独有的点九切图

2018-12-04/安卓设计规范 - 图55

先在画,到处时后缀一定时.9.png
.9png命名不要带倍数
2018-12-04/安卓设计规范 - 图56