安卓Material Design规范

文章目录[x]
  1. 1:01、五大原则
  2. 1.1:1、材料隐喻
  3. 1.2:2、大胆夸张
  4. 1.3:3、动效表意
  5. 1.4:4、灵活
  6. 1.5:5、 跨平台
  7. 2:02、设计目标
  8. 3:01、材质
  9. 4:02、空间
  10. 5:1、英文
  11. 6:2、中文

Md规范是一种设计风格,并不特指规范。是一种模拟纸张的手法。

一、核心思想

把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过度,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

01、五大原则

1、材料隐喻

受物理世界及其物理纹理材质的启发,包括它们如何让反射光线和投射阴影。材料表面进行重新构想,加入纸张和墨水的特性。

2、大胆夸张

以印刷设计方法,排版、网格、空间、比例、颜色和图像为指导,创造出让用户沉浸在精心设计的视觉层级、视觉意义以及视觉聚焦中。

3、动效表意

通过微妙的反馈和平滑的过渡来使动效保持一定的连续性。随着元素出现在屏幕上,它们在环境中转换和重组,相互作用产生新的变化。

4、灵活

系统旨在实现品牌传达。他集成了一个自定义代码库,可以使组件、插件和设计元素无缝的链接和灵活的运行。

5、 跨平台

使用跨平台管理,其中包括android、ios、flutter和web,方便设计师跨平台维护ui组件。

02、设计目标

创造:我们希望创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技

统一:我们希望创造一种独一无二的底层系统,在这个系统的基础智商,构建跨平台和超越设备尺寸的统一体验

定制:通过Material的视觉语言的延伸,为创新和品牌表达提供统一灵活的设计规范。

二、材质与空间

01、材质

Meterial design中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。

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

1、纸片可以伸缩,改变形状

2、纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分

3、多张纸片可以拼接成一张

4、一张纸片可以分裂成多张

5、纸片可以在任何位置凭空出现

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

1、一项操作不能同时触发两站纸片的反馈

2、层叠的纸片,高度不能相同

3、纸片不能互相穿透

4、纸片不能弯折

5、纸片不能产生透视,必须平行于屏幕

02、空间

Material Design引入了Z轴的概念:

Z轴垂直于屏幕,用来表现元素的叠层关系。Z值越高,元素离界面底层越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。

03、动效

Material Design重视动画效果,它反复强调一点:

动画不只是装饰,他有含义,能表达元素、界面之间的关系,具备功能上的作用。

动画要贴近真实世界,就要重视easing。物理世界中的运动和变化都是有加速和减速的过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing,要先考虑它在现实世界中的运动规律。

所有可点击的元素,都应该有这样的反馈效果。通过这个动画,将点击的位置与所操作的元素关联起来,体现了Material Design动画的功能性。

1、通过过渡动画,表达界面之间的空间与层级关系,并且跨界面传递信息。

2、从父界面进入子界面,需要抬升子元素的海拔高度,并展开至整个屏幕,反之亦然。

3、多个相似元素,动画的设计要有先后次序,起到引导视线的作用。

4、相似元素的运动,要符合统一的规律。

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

四、色彩规范

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

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

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

4、其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现(包括图标和分割线)

五、图标

1、桌面图标尺寸是48dp*48dp。桌面图标建议模仿显示中的折纸效果,通过扁平色彩表现空间和光影。

2、小图标尺寸是24dp*24dp。图形限制在中央20dp*20dp区域内。小图标同样有删格系统。线条、空隙尽量保持在2dp宽,圆角半径2dp。特殊情况相应调整。

3、优先使用material design默认图标。设计小图标时,使用简练的图形来表达,图形不要带空间感。

六、图标

1、描述具体食物,优先使用照片。然后可以考虑使用插画。

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

3、Android L可以从图片中提取主色,运用在其他UI元素上。

七、文字

1、英文

英文字体使用Roboto

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

2、中文

中文字体使用Noto

Noto有7种字重:Thin、Light、DemiLight、Regular、Medium、Bold和Black

常用字号:

1、12sp小字提示

2、14sp(桌面端13sp)正文/按钮文字

3、16sp(桌面端15sp)小标题

4、20sp Appbar文字

5、24sp大标题

6、34sp/45sp/56sp/112sp超大号文字

7、长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。

八、布局

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

删格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整倍数。

顶部状态栏高度:24dp

Appbar最小高度:56dp

底部导航栏高度:48dp

用户头像尺寸:64*64dp/40*40dp

小图标点击区域:48*48dp

侧边抽屉到屏幕右边的距离:56dp

卡片间距:8dp

分割线上下留白:8dp

大多元素的留白距离:16dp

屏幕左右对齐基线:16dp

文字左侧对齐基线:72dp

作者:没有腹肌的高学成
链接:https://www.jianshu.com/p/46492b6da015

点赞

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00