APP推广合作
联系“鸟哥笔记小乔”
干货: 动效设计解析-从目标到落地
2020-09-03 09:00:00

随着移动互联网的普及和技术的发展,用户接触的产品更加成熟,对于产品的感知变得更加深入,挑剔程度也在变得更加严格,越来越多的产品都在努力提升用户体验,尝试通过不同的方式来打造产品的差异化:通过用户人群细分确定产品定位-找到目标人群的诉求点-定制化产品功能-流畅的交互体验-友好的视觉展示… 动效设计属于非常细分深入的手段之一;


在面对用户口味更加挑剔,容忍度及耐心更差的当下,动效设计在这一过程中开始扮演越来越重要的角色,尤其是现在扁平设计风格的广泛运用,动效作为模拟物理世界运动规律的一种形式,让冰冷的屏幕更接近真实世界的触感。动效设计也在作为一种设计师必备的技能越来越被重视。

接下来通过“动效设计的原则、目标、分类、落地实现”这几个方便来系统性跟大家聊聊,并结合工作中的一些真实项目,让大家了解动效的原理以及动效在用户体验地图中可以做哪些事情。 


一、动效设计的原则

动效设计作为设计手段之一,有静态页面无法做到的优势,存在的意义必然是为了提升体验,而过多过于复杂的动效设计就显得不合时宜,非但达不到预期目标,还会降低用户体验,拉低产品品牌印象。所以在动效的使用时要克制,避免让页面的重心产生偏差,把用户引到不必要的地方,或者产生过度设计,徒增用户使用负担。


基于过往的项目经验总结了动效设计的四个基本原则:必要性、简洁性、物理性、趣味性。

1、必要性
在做针对性漏斗转化时,动效是个不错的方式,往往我们会不自觉地想加入尽可能多的动效设计,有时甚至单个页面塞进去多处动效,这也不是不可以但需要注意的是单个页面肯定会有自己的权重重心,动效不应让页面的功能重心产生偏差。单位时间内产生的固定流量在页面内分配时,流向一部分的多了,流向其他部分就会减少。

给大家分享之前的项目做过的一次动效,当时考虑给通知做一个动效,引导用户关注从而提升通知的打开率,其实通知的内容权重在当前页面中并不大,没有必要给他做很强的内容引导,用户点进去通知里面之后并没有很强的业务属性,这就是没有站在全局的角度思考,没有遵守必要性原则。

2、简洁性
不只是动效设计,一切设计的准则都包含简洁性,好的动效方案一定不是复杂难懂需要用户花心思去思考的。而动效的简洁还需要考虑更多层面,时间的长度、动作的复杂性、视觉的重心、开发的成本。

3、符合物理运动规律
人对事物的观察和理解都是基于物理世界的规律,当虚拟界面元素的运动特性越能够模拟物理世界的运动规律,比如惯性、重力加速等,就会越符合人在真实物理世界形成的心智模型,让虚拟的屏幕与真实世界交汇,往往会更好的帮助用户预判和理解页面的逻辑。

4、趣味性
趣味性动效的意义在于培养用户的正向情感,比如愉悦、放松、认可,避免用户产生反向情感,比如愤怒、否定、失望,越强烈的正向情感越有利于帮助产品培养用户的忠诚度,对一些使用过程的负面情绪更加包容。

比如下面这个服务评价页面,当乘客体验不友好给出差评时,用憨厚可爱的动效形象给予乘客情绪上的缓冲。

司机头条项目中的双击点赞情感化动效。‍


二、动效设计的目标

在做动效之前先要搞清楚目标,为什么要做动效设计?从动效角度来说的产品目标是什么?动效设计的目标可分为业务目标和体验目标两个方向,如上图所示。

同样是服务评价的动效,我们从其他角度去聊一下设计出发点及目标,首汽约车在对司机服务态度收集评价时,会有评价动效,以提升用户的评价意愿,当用户点击好评时,下方的“去星级评价”会出现动效,引导用户操作,以提升星级评价的点击率,而好评的评价率对于司机的接单而言又是很重要的推动因素。看似微小的细节,也会正向影响到整个服务流程。


三、动效设计的分类

互联网产品的动效,从整体上来说可分为两种:交互动效和MG动画(图形动画)如果继续细分,还可以按场景和功能分为转场动效、导航动效、加载动效、展示动效、引导动效、反馈动效。

1、转场动效

转场动效是一类比较常见的动效,让页面之间有更顺畅的跳转连接,同时也可以更好的体现页面之间的层级关系,让用户更容易理解页面结构,给用户更好的使用体验。


比如下面这个登录的动效,点击登录按钮时,底部背景的斜线一边变直一边向上运动且伴随颜色变化,同时具体登录信息通过不透明度动画出现,同一辆车在两个场景之间运动,车用户会清晰地感知到这两个场景之间的强关联,过渡也很自然。
‍‍
2、导航动效

导航动效也是见的比较多的一类,Path 是最早开始尝试这种创新的交互形式的,把不同的功能收纳在“+”中,点击“+”这些图标会旋转着弹出,提高操作效率的同时又可以给用户带来操作的愉悦感,设计者的用心用户还是能够充分感受到的。随着底部菜单栏中被加入更多的功能,现在这种形式被用的越来越少了,但他仍然还是有很大的使用空间和借鉴意义。


3、加载动效

由于网络等原因在数据传输过程中无法即时加载完成时,会出现等待时长,加载动效的意义在于缓解用户等待的负面焦虑情绪,提升产品的使用体验。


4、展示动效

展示动效作为纯展示出现的机会不是很多,通过展示表达信息,不承担引导和交互行为,比如天气情感化动效展示。


5、引导动效

引导动效的意义在于引导用户行为,把流量引导目标场景,从而提升目标场景的点击量,比如常见的金刚区图标加上MG动画以后,引导用户点击。


6、反馈动效

尼尔森十大可用性原则的第一条是状态可见原则,应该让用户时刻清楚当前发生了什么事情,也就是快速的让用户了解自己处于何种状态,需要在合适的时间给用户适当的反馈,防止用户使用出现错误。


四、产品开发的什么阶段开始动效设计?

动效设计是不是应该等交互UI都定好了,再来看哪里可以加得进去动效进行丰富和点缀,这是很多初接触同学对于动效的认知。实际上这也是可行的,但这只是对于一些基础性动效而言,比如常见的金刚区图标加上MG动画以后,引导用户关注,提升某个业务场景的点击量,或者点赞动画这一类。

但如果想动过交互动效来做更深层次的业务提升,在考虑动效的时候,就需要把流程前置了,至少在原型设计阶段甚至业务目标确定之初就应该考虑有没有可能通过创新的交互形式来帮助达成目标。接下来通过一个具体的项目案例来加以说明。

我们在短视频应用浏览视频时往往会遇到这种情况,作者通过系列视频介绍一部电影或其他内容,当我们看完当前视频想接着看该系列的下一条时,左滑进入该作者的个人中心,发现作者的作品总量竟然有数百条之多,这时候想找到刚刚看到的那条视频是非常困难的。

挖掘到了用户需求然后确定产品目标为缩短此场景的用户路径,就开始思考可能的交互策略,下面这个交互方案便从这个场景切入,用户从视频广场信息流左滑时直接进入作者的作品列表信息流页面,而且从当前浏览的那条视频开始,可上下滑动继续浏览作者的其他视频,再继续左滑即可进入作者个人中心。这样只需一步操作即可从视频广场直接继续浏览作者其他视频。

优秀的交互动效要能够做到对业务和体验同时产生价值,这需要考验设计师的全局思维,站在全局的角度洞察事物的全貌,体系化的连接事物的核心要素,不断的构建自己的认知格局,不再只是从单一角度思考问题、想办法、做决策,找到价值的源头、设定行为目标、掌握专业技能、最终呈现结果。


五、动效设计的落地

具体的落地实现方式,基本分为代码实现、GIF、序列帧、JSON、WEBP、APNG、MP4,下面来依次说下这几种方式的优缺点和需要注意的地方。


1、代码实现

大部分交互动效还是需要开发老哥哥们通过代码实现的,想要完全实现设计稿的效果,就需要对每一个分解行为进行标注,主要从运用对象、运动对象的变化属性、贝塞尔曲线数值、运动时间、变化属性的描述五部分来分解标注。就像下面这个动效设计,看似简单的两步,点击展开和点击收起,需要清晰的标注出每一个元素的运动属性以及时间。

AE 插件 Flow 可导出贝塞尔曲线数值,贝塞尔曲线数值就是两个坐标值,分别代表下图两个手柄的坐标,通过这两个坐标便能够控制曲线的形状。

2、GIF与序列帧

GIF 与序列帧也是比较常用的动效导出方式,但也有各自的局限性。GIF 支持的颜色最多只有256种,而且对透明通道支持不友好,在输出透明背景的动图时会出现锯齿边沿,由于这种特性它只适用于色彩较少的动图,如果是色彩较多的大型图片它的表现力就有限了。


序列帧相对 GIF 来说很好的解决了颜色的支持数量太少和对透明通道支持不好的缺点,序列帧就是一张张的 png 图片所以他支持颜色达千万种,缺点就是文件较大更耗内存,小型动图时可以选择这种方式。

3、WEBP与APNG

当动图色彩丰富且需要透明背景格式而序列帧文件又比较大时,GIF 和序列帧就都不是合适的输出方式了,这时可以选择用 WEBP 或 APNG 格式。


WEBP 是 Google 在2010年收购了 On2 Technologies 推出,经过几个版本迭代,目前已经比较稳定,所有主流的浏览器都可以支持,在移动应用上对安卓支持比较好,iOS 应用通过一些代码框架也可以完美支持。WEBP 支持的颜色与 png 相当,并且完美的支持动图的透明通道且内存占用比 GIF 更低。
 
APNG 是 Mozilla 代码社区推出,基于 PNG 的位图动画格式,扩展方法类似网页的 GIF 89a,第一帧是标准的单幅图像,动画不被支持时也可以正常显示第一帧画面。目前已经比较稳定,所有主流的浏览器都可以支持,支持的颜色与 png 相当,也可以完美的支持动图的透明通道且内存占用比GIF更低。

给大家介绍一个导出 APNG 和 WEBP 的常用软件isparta,没有操作学习成本,直接可上手。

4、JSON

Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。Lottie 目前提供了 iOS, Android, 和 React Native 版本,能够实时渲染 After Effects动画特效。Lottie 在不需要对代码进行重写的情况下让工程师更加方便的创建更丰富的动画效果,Lottie 还有一个可选的缓存机制,对那些频繁使用的东西能够更快加载,目标就是帮助开发者和设计师能够更轻松的为应用创建动画。


Lottie 依赖于 AE 的 Bodymovin 插件,Bodymovin 可以把各种矢量元素以及位图动画导出一个 json 格式的文本,开发工程师拿到 json 文件后就可以用Lottie 来解析读取。

下面以工作中的一个具体的项目来阐述下 json 的使用经验。

Bodymovin 并不能支持所有AE的动画属性(常见的基本都支持),不支持渐变导出(位图中包含渐变完全没影响,比如这个项目案例的渐变就只是位图),如果你的动画有形状动画且形状填充了渐变,那就没办法用 json 了,他导出的渐变是黑白而非彩色的。

下图是 Bodymovin 导出时设置的勾选注意事项,设置后指定文件夹渲染导出即可。

在输出 json 的时候,不一定是要有个固定的规则,具体要怎么样输出都可以通过跟开发商量看他们认知到了怎样的实现方式。这个登录的项目也是前后导出了不同形式的 json ,最先是每一段动作导出一个 json,一共四段,开发尝试之后实现比较麻烦,觉得还是需要输出一整个连贯的动作,且动作之间不必做任何时间停留,他们可以对 json 监控,在动画暂停处加入交互动作,最终形成一套完整的交互行为。

json 有个很大的优点是如果动画是整屏他可以适配屏幕大小。

5、MP4
有些时长较长的大型动画用以上几种方式都不合适,就需要用视频格式了,视频也是被广泛兼容的格式,再经过压缩后文件也不至于过大,视频也是一种有损的输出格式且对透明通道的支持不好,一般不选用此格式。

AE 直接导出的视频文件非常大,给大家推荐一个视频压缩的软件 Total Video Converter,非常好用提供了很多输出格式,一般选常用的 MP4 格式。

最后我们要根据动效的特点,来决定具体要用哪一种输出方式,在选择输出方式时,往往方法不是唯一的,具体用哪种方法可以跟配合的开发老哥哥们协同商定,大家形成统一习惯时,输出就会很默契和高效了。

下图对这几种输出方式的优缺点做下对比:

文章转自:首汽约车UED-朱晓峰(已获得授权)


? 动效相关文章推荐阅读:
UX设计师要会用动效来解决问题
从设计到落地 | 动效怎么才能成功?


别忘了「点赞」+「在看」哦!

Eason张UED
分享到朋友圈
收藏
收藏
评分

综合评分:

我的评分
Xinstall 15天会员特权
Xinstall是专业的数据分析服务商,帮企业追踪渠道安装来源、裂变拉新统计、广告流量指导等,广泛应用于广告效果统计、APP地推与CPS/CPA归属统计等方面。
20羽毛
立即兑换
一书一课30天会员体验卡
领30天VIP会员,110+门职场大课,250+本精读好书免费学!助你提升职场力!
20羽毛
立即兑换
顺丰同城急送全国通用20元优惠券
顺丰同城急送是顺丰推出的平均1小时送全城的即时快送服务,专业安全,准时送达!
30羽毛
立即兑换
Eason张UED
Eason张UED
发表文章42
精选UX 品牌 视觉类文章 | 各大厂外部合作自媒体,欢迎关注!
确认要消耗 羽毛购买
干货: 动效设计解析-从目标到落地吗?
考虑一下
很遗憾,羽毛不足
我知道了

我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求,为完善跟帖评论自律管理,为了保护用户创造的内容、维护开放、真实、专业的平台氛围,我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容,同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。


一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规,对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息,主要表现为:
    1)反对宪法所确定的基本原则;
    2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一,损害国家荣誉和利益;
    3)侮辱、滥用英烈形象,歪曲、丑化、亵渎、否定英雄烈士事迹和精神,以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉;
    4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动;
    5)煽动民族仇恨、民族歧视,破坏民族团结;
    6)破坏国家宗教政策,宣扬邪教和封建迷信;
    7)散布谣言,扰乱社会秩序,破坏社会稳定;
    8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪;
    9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;
    10)侮辱或者诽谤他人,侵害他人名誉、隐私和其他合法权益;
    11)通过网络以文字、图片、音视频等形式,对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的;
    12)危害未成年人身心健康的;
    13)含有法律、行政法规禁止的其他内容;


2. 不友善:不尊重用户及其所贡献内容的信息或行为。主要表现为:
    1)轻蔑:贬低、轻视他人及其劳动成果;
    2)诽谤:捏造、散布虚假事实,损害他人名誉;
    3)嘲讽:以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述,以此来激怒他人;
    4)挑衅:以不友好的方式激怒他人,意图使对方对自己的言论作出回应,蓄意制造事端;
    5)羞辱:贬低他人的能力、行为、生理或身份特征,让对方难堪;
    6)谩骂:以不文明的语言对他人进行负面评价;
    7)歧视:煽动人群歧视、地域歧视等,针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击;
    8)威胁:许诺以不良的后果来迫使他人服从自己的意志;


3. 发布垃圾广告信息:以推广曝光为目的,发布影响用户体验、扰乱本网站秩序的内容,或进行相关行为。主要表现为:
    1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式:
    2)单个帐号多次发布包含垃圾广告的内容;
    3)多个广告帐号互相配合发布、传播包含垃圾广告的内容;
    4)多次发布包含欺骗性外链的内容,如未注明的淘宝客链接、跳转网站等,诱骗用户点击链接
    5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光;
    6)购买或出售帐号之间虚假地互动,发布干扰网站秩序的推广内容及相关交易。
    7)发布包含欺骗性的恶意营销内容,如通过伪造经历、冒充他人等方式进行恶意营销;
    8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。


4. 色情低俗信息,主要表现为:
    1)包含自己或他人性经验的细节描述或露骨的感受描述;
    2)涉及色情段子、两性笑话的低俗内容;
    3)配图、头图中包含庸俗或挑逗性图片的内容;
    4)带有性暗示、性挑逗等易使人产生性联想;
    5)展现血腥、惊悚、残忍等致人身心不适;
    6)炒作绯闻、丑闻、劣迹等;
    7)宣扬低俗、庸俗、媚俗内容。


5. 不实信息,主要表现为:
    1)可能存在事实性错误或者造谣等内容;
    2)存在事实夸大、伪造虚假经历等误导他人的内容;
    3)伪造身份、冒充他人,通过头像、用户名等个人信息暗示自己具有特定身份,或与特定机构或个人存在关联。


6. 传播封建迷信,主要表现为:
    1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病;
    2)求推荐算命看相大师;
    3)针对具体风水等问题进行求助或咨询;
    4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失,包括通过占卜方法问婚姻、前程、运势,东西宠物丢了能不能找回、取名改名等;


7. 文章标题党,主要表现为:
    1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户;
    2)内容与标题之间存在严重不实或者原意扭曲;
    3)使用夸张标题,内容与标题严重不符的。


8.「饭圈」乱象行为,主要表现为:
    1)诱导未成年人应援集资、高额消费、投票打榜
    2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
    3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
    4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
    5)通过「蹭热点」、制造话题等形式干扰舆论,影响传播秩序


9. 其他危害行为或内容,主要表现为:
    1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的;
    2)不当评述自然灾害、重大事故等灾难的;
    3)美化、粉饰侵略战争行为的;
    4)法律、行政法规禁止,或可能对网络生态造成不良影响的其他内容。


二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时,本网站将依据相关用户违规情节严重程度,对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号,或者滥用多个帐号发布违规内容时,本网站将加重处罚。


三、申诉
随着平台管理经验的不断丰富,本网站出于维护本网站氛围和秩序的目的,将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议,可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接