彩虹手帐033 | UI动效设计


UI动效是什么?
“没有动效的APP,不是好的APP”,优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹,已经成为现在Web、APP产品交互设计和界面设计必不可少的元素。

动效的三个重要特性

功能性Functional,物理性Material,趣味性Delightful。动效可以帮我们提升UX(用户体验),使UI界面显得更加一致和真实,并给整个产品带来创新的感觉

  • 功能性
    优化用户对界面的感知,使其感到更轻快更全面。
    引起用户的注意。
    提供(用户操作后的)视觉(功能)反馈,并为下一步的跳转做准备。

  • 物理性
    在一致的动画原则和物理的(符合物理定律的)UI模型基础上构建动画。
    定义屏幕和UI元件之间的空间相对关系,他们的相对高度,权重以及速度。

  • 趣味性
    在上面两个部分都满足的情况下,加入一些有趣的动画。
    使它感觉独特,能在诸多动画中能让人眼前一亮。
    娱乐用户,并让他们一想到动画就能想到该产品或者反之。

说完了理论自然要实践了,以下是今天的练习作业。
看似非常简单,但里面蕴含了物理学,淡入淡出效果,时间曲线等等各种原理,不可小觑。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,631评论 25 709
  • 高度总结动效设计的基本原则,有大量的案例分析。动效设计在用户体验的提升中到底有没有用呢? 我们在下面讨论的是为什么...
    七景鸣阅读 7,077评论 0 11
  • 作为一枚不会敲代码的设计师,我们不太可能让自己的设计真正“活”起来。如果没有动效设计,那总是需要很长时间去给程序员...
    miclzy阅读 4,574评论 0 5
  • “今晚,同学或者舍友在玩游戏或者追剧,我也不想看书了。” “年级或者班级里的同学大多这样子学习和生活,我也这样好了...
    BeautyG阅读 3,843评论 0 2
  • 降临鳭
    作者1阅读 1,261评论 0 0