首页 >产品设计

UI的基本动效(下)

2014-05-26 10:33 编辑: wupeng 分类:产品设计 来源:CocoaChina

上一篇文章中向大家介绍了UI基本动效的上部分,包括指向性动效、提示性动效和空间扩展,本文中继续为您介绍下部分,向您展示其他的最常见最基本的动效模式。

 

(四)突出显示

通过动画引导使用者的注意力。使用户清楚界面上可能被忽略的变化。目的是通过动画引导用户注意特定的对象。打光和着色经常被用作突显的实例。

 

突出显示动效分类:

1. 缩放

适用场合:当一个特定对象需要被突出显示。

动作描述:缩放目标对象以突出显示。

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:-

 

2. 旋转

适用场合:当一个特定对象需要被突出显示。

动作描述:旋转目标对象以突出显示。

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:-

 

3. 着色

适用场合:当一个特定的对象需要被突出显示。

动作描述:通过目标对象的颜色来突出显示。

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:-

 

4. 褪色

适用场合:当一个特定的对象需要被突出显示。

动作描述:周围对象褪色来突显目标对象。

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:-

 

5. 模糊

适用场合:当一个特定的对象需要被突出显示。

动作描述:周围对象模糊来突显目标对象

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:-

 

6. 变暗

适用场合:当一个特定的对象需要被突出显示。

动作描述:周围的对象变暗来突显目标对象。

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:-

 

7. 翻转

适用场合:当一个特定的对象需要被突出显示。

动作描述:翻转目标对象以突出显示。

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:-

 

8. 发光突显

适用场合:当一个特定的对象需要被突出显示。

动作描述:目标对象发光以突出显示。

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:-

 

9. 改变深度

适用场合:当一个特定的对象需要被突出显示。

动作描述:目标移到其他对象之前,以突出显示。

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:对象看起来像改变了深度。

 

10. 灰显

适用场合:当一个特定的对象需要被突出显示。

动作描述:周围对象变灰,以突出显示目标对象。

一致性:-

优点:对象通过引人注意的动画,引导用户的视线。

用户感受:-

 

11. 放大

适用场合:当一个特定的对象需要被突出显示。

动作描述:目标对象在用户与之交互时放大。

一致性:如果对象不再被激活,应该回到原来的大小。

优点:通过放大目标以显示哪个对象是活跃并正在交互中的。

用户感受:-

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:知名UX设计师:设计要感同身受
下一篇:如何设计高转化率的移动主页
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部