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