加入收藏 | 设为首页 | 会员中心 | 我要投稿 | RSS
您当前的位置:首页 > 产品说明

产品动效设计指南

时间:2018-11-03 18:59:26  来源:本站  作者:

  动效设计是平面设计和动画设计两个领域交融的产物,起源于上世纪50年代。80年代后,随电脑软件的使用,开始在影视、设计、互动营销等领域有了很大的发展。

  在构成界面设计的三大元素(形状、颜色、动画)中,动画最能够吸引用户的视线,引起用户注意,其次是颜色,最后是形状。传统的用户界面设计,受限于时间的关系,动效设计不仅可以表达页面的时间关系,还可以叙述因果关系。

  转场类动效用于层级跳转或场景切换, 除入场和离场动效外经常辅以缩放、透明度、旋转等平滑的效果,帮助用户理解界面间的变化和层级关系,也让界面更加真实生动。避免场景的瞬间切换导致用户产生变化盲视(视觉刺激的突兀变化会阻止用户注意到新的信息)。

  展示类动效用于突出产品核心功能和特点说明,界面信息按照一定的规律呈现,引导用户的视觉流向,帮助用户更好的理解产品,能够在第一眼吸引住用户。常见的如企业或产品的官网首页,能够对产品起到很好的宣传作用。

  引导类动效通过界面中某些元素的变化,引起用户注意或引导用户进行操作,避免用户困惑,能够自然而然的聚焦用户视线,降低其他视觉元素的干扰。

  反馈类动效用于对用户的操作及时给出相应的反馈,如:悬浮、点击、拖拽等,以视觉的形式展现给用户,告知用户系统正在与用户发生交互,让用户产生一定的心理预期。

  很多人认为,动效设计应当在视觉设计完成之后,对界面进行点缀和丰富,以此来提升界面的B格,达到高大上的效果,这是完全错误的。此时交互和视觉均已定稿,动效形式会因定稿的内容受到限制,设计上就会出现牵强,动效失去了功能性,为了动效而动效。

  动效设计应伴随原型设计开始,产品中存在交互的地方需要设计师仔细斟酌是否需要动效设计,动效的功能是什么,以什么形式出现等问题。这样能够保证每个动效都有其存在的意义,又能避免动效滥用的情况。

  现如今市场上的产品种类众多,常见如安全、社交、游戏、新闻、财经、效率、体育、工具、商务等等,都有自身特有的用户群体。因此在设计动效时,除了要考虑动效的基本设计原则外,还要考虑产品本身的特性和动效带给用户的心理感受。

  如上图所示,轨迹A和B 都是在动效设计中常用的缓动效果,如果要为一款安全类的产品设计动效,显然干净利落的轨迹B更加适合,若使用轨迹A则会导致用户心里不安,感觉产品不可靠,效率低。相对于B,轨迹A则比较适合儿童类或游戏类产品。

  说到物理运动法则,不得不提到牛顿三大定律。但现实世界中存在着摩擦力、空气阻力等外力因素,物体会做加速或减速运动,人类也养成了这样的认知。因此在动效设计时,物体的运动要符合现实世界的运动规律,符合物理运动法则的动效才符合用户的感知。

  最常用的缓动曲线包括缓入、缓出两种形式,缓入为加速曲线,缓出为减速曲线。考虑到速度变化对用户心理和注意力的影响,(不断减速的物体会吸引用户的注意力,不断加速的物体会失去用户的注意力),因此入场动效要先快后慢,持续吸引用户视线,出场动效要先慢后快。

  注重动效的功能性,设计前要问反问自己:这个动效的作用是什么?必须要有吗?去掉会怎样?对用户来说有什么用?保证每个动效都应该有其存在的意义。

  功能性动效也有简单和复杂之分,上图数据显示,复杂的动效在用户使用产品初期对用户有很大的吸引力,随着时间推移,用户满意度会逐渐下降。

  因为初期,复杂的动效设计给用户带来了新鲜感,用户也愿意花时间去了解、学习,使用久了,用户的新鲜感下降,感觉复杂的动效浪费时间,从而引起用户反感。而简单的动效,随时间增长,用户对产品和动效的节奏慢慢熟悉,满意度也会逐渐上升,维持在一个较高水平。

  每个产品都有自己的品牌调性,动效设计要符合产品的品牌调性。对产品来说,符合品牌调性的动效能够保持与其他产品的差异化,提升产品的B格,也能够在用户心中形成品牌效应。如斗鱼的加载动画,对自身品牌形象进行有效的传达的同时也给用户留下了深刻的印象。

  动效设计不是目的,最终还是需要前端同学实现。因此在设计时,要考虑动效的可实现性(机器资源、设备兼容性、运行能力)和成本(时间成本、实开发成本、人力成本)。如果动效最终没有实现或实现效果不佳,对用户体验是一种伤害,同时也浪费了设计和开发的时间。因此在设计之前,要充分与开发GG们评估好开发的时间、成本和实现性。

  在完成动效设计之后,要养成将动效整理成规范文档的习惯,在文档中定义好元素的基本参数和运动曲线,一方面方便开发同学查阅和使用,另一方面也有助于规范形成,方便其他设计同学使用和参考。

  针对如下图所示的复杂的动效,前端无法直接写出样式,可以通过动效设计软件直接生成GIF动画或PNG序列格式。(区别是,gif格式支持256种颜色,图片有白边、锯齿,而PNG支持1600万种颜色,质量比GIF好很多)

  有时候需要透明的动画格式,如:微博的点赞动画,而背景透明的GIF效果很差,APNG则可以完美解决这个问题。APNG可以通过软件(iSparta)将PNG序列文件转化成APNG动态图片。(文末会附上iSparta软件安装及使用方法)

  设计师除了要输出动效设计文档和动画以外,还要有直观的演示Demo,一方面方便其他同学查看效果,评估工作量;二来可以节省设计师与开发的沟通时间,也为设计师后期验收提供依据。

  使用方法:使用AE等软件做好动画输出渲染队列,格式选择“PNG序列”,通道选择“RGB+Alpha”PNG序列生成的所有图片拖入iSparta中在iSparta中勾选APNG,设置路径并输出。

来顶一下
返回首页
返回首页
推荐资讯
相关文章
    无相关信息
栏目更新
栏目热门