四十天UI设计成长计划　[32]

【1】material design核心思想：

把物理世界的体验带进屏幕，还原最贴近真实的体验 。是最重视跨平 台体验的一套设计语言。

【2】material design材质与空间：

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

元素离界面底层（水平面）越远，投影越重。所有元素都有默认的海拔高度，对它进行操作会抬高它的海拔高度，同一种元素，同样的操作，抬升的高度是一致的。

【3】material design动画

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

转场效果. 通过过渡动画，表达界面之间的空间与层级关系，并且跨界面传递信息

                从主界面进入子界面，需要抬升子元素的海拔高度，并展开至整个屏幕

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

                相似元素的运动，要符合统一的规律

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

4】颜色

颜色不宜过多，选取一种主色，一种辅助色（非必需），在此基础进行明度、饱和度变化，构成配色方案。APPbar背景使用主色，状态栏背景使用深一级其的主色或百分之20透明度的纯黑。小面积需要高亮的地方使用辅助色。

【5】图标

图标尺寸48dp✖️48dp。折纸效果。通过扁平色彩表现空间光和影。

注意：不要给彩色元素加投影、层叠不要超过两层、折角不要放在左上角。带投影的元素要完。      整展现，不能被图标边缘裁剪。如果有折痕，放在图片中有，并且最多只有一条。带折叠效果的图标，表面不要有图案。不能透视、弯曲。

设计小图标时，使用最简练的图形来表达，图形要带空间感。小图标的颜色使用纯黑或者纯白，通过透明度来调整。

【6】图片

选用图片

图片上的文字

图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。可以从图片中提取主色，运用在其他UI元素上。

图片的加载

图片的加载过程非常讲究，透明度、曝光度、饱和度3个指标依次变化，效果相当细腻。

【7】文字

字体

英文字体使用Roboto，中文字体使用Noto。

常用字号：

12sp 小字提示

14sp（桌面端13sp） 正文/按钮文字

16sp（桌面端15sp） 小标题

20sp Appbar文字

24sp 大标题

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

长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

【8】布局

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

栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：

顶部状态栏高度：24dp

Appbar最小高度：56dp

底部导航栏高度：48dp

悬浮按钮尺寸：56x56dp/40x40dp

用户头像尺寸：64x64dp/40x40dp

小图标点击区域：48x48dp

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

卡片间距：8dp

分隔线上下留白：8dp

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

屏幕左右对齐基线：16dp

文字左侧对齐基线：72dp

。

。

。