MD规范-学习笔记
part 1
md核心思想:把物理世界的体验带进屏幕。简言之,拟物。
ios三大原则:清晰、依从、深度。
part 2
md的5个设计原则:
材质隐喻(魔法纸张:光线、厚度、投影等)
大胆夸张(排版、空间比例、用色大胆、对比明显)
动效表意(有具体的规范,区别于ios,微交互)
灵活(官方组件化丰富,与技术联系紧密)
跨平台(包括android、iOS、flutter和web)
补充:
材质:最重要的信息载体-魔法纸片,有最新的设计规范,自行搜索。
纸品特性:
1、纸片可伸缩、改变形状
2、伸缩时,内容大小不变,而是隐藏超出部分
3、多张纸片可拼成一张
4、一张纸片可分成多张
5、纸片可以在任何位置凭空出现
空间:md引入了z轴的概念,用来表现元素的层叠关系,z值越高,元素离界面底层越远,投影越重,前提是所有的元素厚度都是1dp
动画效果:动画要贴近真实世界,就要重视easing
1、通过过渡动画,表达界面之间的空间和层级关系,并且跨界面传递信息;
2、从父级界面进入子界面,需要抬高海拔高度,即投影变大;
3、多个相似元素,动画的设计要有先后次序,有错帧跟随关系,引导视线;
4、相似元素的运动,要复合统一的规律;
5、通过图标的微动画。
色彩规范:
1、颜色不宜过多,一种主色,一种辅助色(非必须),在此基础上进行明度、饱和度变化(鲜亮高对比),构成色彩方案;
2、文本信息,通过纯黑#000000与#ffffff的透明度变化来展现(包括图标和分割线),
黑色「87%普通文字」「54%减淡文字」「26%禁用状态/提示文字」「12%分割线」
白色「100%普通文字」「70%减淡文字」「30%禁用状态/提示文字」「12%分割线」
图标:
1、桌面图标尺寸48dp x 48dp,桌面图标建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影;
2、小图标24dp x 24dp,图形限制在中央20dp x 20dp区域内。线条空隙尽量保持2dp宽,圆角半径2dp,特殊情况相应调整。优先使用md默认图标。
图片:
1、图片上的文字,深色的遮照透明度20%~40%,浅色的遮照透明度40%~60%,具体根据实际情况而定;
2、可以从图片中提取主色,运用在其他UI元素上;
文字:
英文:roboto ,6种字重:thin、light、regular、medium、bold、black
中文:noto,7个字重
常用字号:(1x图)
12sp小字提示
14sp(桌面端13sp)正文/按钮文字
16sp(桌面端15sp)小标题
20sp APPbar文字
24sp 大标题
34sp/45sp/56sp/112sp 超大号字体
长篇幅正文,每行建议60字符(英文)左右,短文本,建议每行30字符(英文)左右
布局:
所有可操作区域最小点击尺寸:48dp x 48dp(ios是44dp);
栅格系统最小单位是8dp,一切距离、尺寸都应该是8的整数倍;
常见尺寸距离:
顶部状态栏高度:24dp
APPbar最小高度:56dp
底部导航栏高度:48dp
用户头像尺寸:64x64dp/40x40dp
小图标点击区域:48x48dp
侧边抽屉到屏幕右边的距离:56dp
卡片间距:8dp
分割线上下留白:8dp
大多元素的留白距离:16dp
屏幕左右对齐基线:16dp
文字左侧对齐基线:72dp
组件:
谷歌主题编辑器sketch 插件
ps设置画布:720x1280(2x图),或者1080x1920
MD过渡动画:水波反馈,圆形遮照
用户的学习成本越低,交互设计做的越好
part 3
md的3个设计目标:
创造
统一
定制