Android UI 设计规范,由浅入深

  • ** easing **

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

  • ** 水波反馈 **

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

  • ** 转场效果 **

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

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

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

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

  • ** 细节动画 **

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

2.4 颜色

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

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

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

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

黑色:[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线]

白色:[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]

2.5 图标

  • ** 桌面图标 **

桌面图标建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影。注意避免以下问题:

  • 不要给彩色元素加投影

  • 层叠不要超过两层

  • 折角不要放在左上角

  • 带投影的元素要完整展现,不能被图标边缘裁剪

  • 如果有折痕,放在图片中央,并且最多只有一条

  • 带折叠效果的图标,表面不要有图案

  • 不能透视、弯曲

  • ** 小图标 **

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

活动区域

修饰区域

小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。

小图标同样有栅格系统。线条、空隙尽量保持2dp宽,圆角半径2dp。特殊情况相应调整。

小图标的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值