动效设计解密

动效设计(Motiondesign)是通过动态手段,提升产品用户体验的过程。也可以视其为界面设计(UIdesign)与动态设计(motiondesign)的交集。好的动效设计能够清晰的表达产品层级之间的关系、提升易用性与可用性、减少用户的认知成本,也能够彰显产品品牌特性与差异。

在有些时候,动效很容易被想象成某种为了增加愉悦性质的内容,其本身并不具备什么价值,因此常常被当做可有可无的部分,而实际上,动效则是一种更为高级的设计展现形式,通过模拟真实世界的运动,建立起手机这个虚拟世界与用户之间的认知关联,从而创造出符合用户认知习惯的操作体验;与此同时,不同品牌之间独有的品牌特性也大不相同,对应表现的行为与动作也有所不同,所以,动效设计在品牌特性的影响下,差异化也会非常明显,这为塑造产品特色和品质感奠定了重要的基础。本质上,动效设计(MotionDesign)是因为整个用户体验行业的发展而细分出来的设计门类。

为什么要做动效设计,当然是能够为产品带来价值才会去投入资源去做,那么带来的价值是什么?在大多数的认知里,动效能吸引用户的注意,那么自然能为产品带来点击或跳转等价值,但这仅仅是动效赋能产品价值中的其中一种,动效设计的意义还有以下几种。

1.2.1让过度更加流畅

这种设计的目的在于使用户在操作APP产品的时候让它过度的更加流畅,使得界面与界面之间、界面上元素的出现和消失都尽量的流畅,通过大小、位置和透明度的变化,使用户和产品的交互过程更流畅。用户使用APP时,如何避免界面跳转太过生硬、刻板,能不能不使用一些默认的跳转方式,而是使用动画的效果,不断地思考与尝试,才能够使我们的产品给用户更好的体验。

1.2.2能够让反馈更高效

在产品设计里面有一个非常重要的原则:让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示,还有一种方式是让用户知道当前APP运行的状态,是正在等待还是正在加载,还是正在下载或变化,那这种状态的告知也是增强用户操纵感的方式之一。我们可以通过动效的设计,来告诉用户当前APP正在处在哪种状态,可以通过平移、放大、缩小删除等等动效的方式来给用户做及时的反馈。

1.2.3有效引导用户

1.2.4更清晰的层级展现

一款APP无论是简单还是复杂,都有自己的逻辑架构和逻辑层级,那当逻辑比较多、层级比较深的时候,我们就需要让用户在APP使用过程当中不迷路,能够让用户知道自己处于哪一个层级,这个页面和下一个页面是什么层级关系。也可以通过动效的方法来展现。

1.2.5增强操作

通过动效的方式来进行现实世界的模拟并且不需要任何提示,迎合用户的意识认知,使产品的交互方式更接近真实世界。增强了用户对应用的操纵感和带入感。如网易云阅读的动效,由小到大进行翻书,贴近现实。

1.2.6更有趣的体验

在可用性良好的前提下,通过细节设计和交互方式创新为产品增加亮点,可以带来更惊喜的体验,同时更好表达产品的气质与态度。比如发微博时点击中间按钮会慢慢放大,增加了趣味。

1.2.7减少用户焦虑

一些动画效果可以在加载过程中减少用户的焦虑、不安。

1.2.8吸引用户注意力

好的动效设计可以吸引客户注意力,增加页面趣味,比如苹果删除应用时会抖动。

产品经理在考虑什么时候要动效的时候,就要考虑这个动效设计究竟会给产品带来哪些作用。如果说这个产品需要有一些引导作用,那就需要动效设计了;如果需要展现层级,也需要动效设计;如果这个产品缺乏亮点,需要给用户一些彩蛋,让用户感觉有一些创新的体验,这时也需要加一些动效的设计。所以说动效设计的出现并不是UI设计师自行想象的,也不是产品经理拍脑子出来的,而是其有它相应的作用。

因此,动效的意义整体可以分为以下两块:

1、对产品而言,动效设计能够达到的效果

2、对用户来说,动效设计能够达到的效果

在这其中很多因素是互动或者呈因果关系的,比如引导用户操作可以减少用户对产品的认知成本,提升产品易用性也变相提升了用户和产品的互动性,为产品注入活力也会让用户减少部分不可避免的不适感等等,两者是相辅相成的。

动效设计涉及两种基本的交互类型:实时和非实时。

2.1.1实时

当用户在屏幕上点击UI元素时,实时交互提供即时反馈,会对用户的操作做出即时响应。

2.1.2非实时

非实时交互发生在用户操作后,这意味着用户需要经过短暂的转场才能看到结果,然后再继续。

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

2.2.2展示类

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

2.2.3引导类

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

2.2.4反馈类

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

微交互是一个完成单个任务的一瞬间事件。它给出了让用户清楚某种物理交互已经完成的提示。比如,这可以是动画按钮、切换、触发等等。微交互非常重要,事实上也是设计的未来。

这种UI交互显示APP的刷新和加载状态。在移动端,下拉刷新动效目前算是最受欢迎的动效了。在等待加载更多内容时,不仅可以告知用户状态,还可以为用户提供时尚、美观和趣味。

清晰的导航对于APP产品的设计师来说总是非常重要的。用户总是希望抢先看到最关键的事物。通过表现对所选中的导航的活动状态,这将立即吸引用户的注意力到内容上来。

谈到数字时人们总会感觉无聊,数据对于用户来说就是数字和表格。添加UI动效,用形状、颜色的变化能够让用户更好的理解数据间的逻辑关系,更容易解读。

很多人认为,动效设计应当在视觉设计完成之后,对界面进行点缀和丰富,以此来提升界面的高级感,这种说法并不正确。此时交互和视觉均已定稿,动效形式会因定稿的内容受到限制,设计上就会出现牵强,动效失去了功能性,为了动效而动效则丧失了动效本身的意义。

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

1、响应时长

2、持续时长

在动效设计时,物体的运动要符合现实世界的运动规律,符合物理运动法则的动效才符合用户的感知。

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

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

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

1.1.1品牌建设

好的动效有利于品牌的建设与传播,能够更好的诠释品牌理念。

1.1.2H5专题营销

1.1.3产品展示

展示产品(或概念原型)的功能、界面、交互操作等细节,更直观的让用户了解一款产品的用途、使用方法等细节。

1.1.4趣味/游戏

在活动和游戏当中,更好的动效能够引导用户去理解它,理解产品的功能或活动的目的。

1.1.5交互反馈

从用户触发行为到预期结果之间的合理变化过程。早期互联网动画较少时,大部分动效都是为了解决某个具体的问题而存在的,有很强的目的性。

1.1.6状态缺省页

突出状态显示,往往以趣味性为目的让用户不为等待而感到烦躁。

1.1.7底部导航

图标动效突出统一性,操作状态区分明显。

另外动效设计通过四种不同的方式来提升产品的可用性:

播放型动效有以下几种比较常见的输出格式:

Gif、Apng、Webp本质上都是将位图进行压缩和转换,而Lottie则是基于代码层面的动画渲染,PAG则结合了两者的特性。目前一般使用Apng、Lottie、和PAG就已经可以覆盖大部分的输出场景,是可以优先考虑的动图格式。

结语

动效输出的手段目前虽然非常多样,而且随着技术手段进步选择会越来越多。但是目前来说没有任何一种方案,可以完全解决我们落地动效当中的所有问题。并且目前市面上所提供的任何一款工具无法真正解决设计思维所带来的局限性。作为设计师我们需要始终保持敏锐的观察力,并且持续的更新自身的知识树,才能应对多种多样需求下输出的动效效果的落地。

另一方面我们也需要站在更长远的角度去了解一个动效需求从产品逻辑到开发逻辑之间的鸿沟,并试着通过更多元的手段去跨越鸿沟。

设计无止境,沟通无极限。

感谢!

【本文作者:李衍、魏晓峰、祝佰彤、姜晓蒙、田文峰、魏茹、廉亚杰、赵翠翠】

THE END
1.互联网营销模式2017在制定移动互联网营销策划方案时,有几个关键要素需要考虑。目标市场的准确定位,要明确自己的产品和服务适合哪个用户群体,并针对这个群体进行定制化的营销活动。创新的内容和形式,要制作出有趣、有吸引力的营销内容,以吸引用户的注意力。也要利用移动互联网的特点,加入互动元素,让用户主动参与进来,增强用户体验。最后要有http://www.bangongqq.com/yxcy/56148.html
2.按摩椅免费体验3个月,一年完成100W营业额,揭秘体验式营销背后的商业逻体验营销的 “三大黄金法则” 虽说这成功案例看着诱人,但体验式营销可不是随便搞搞就行,里头门道不少: 法则一:产品、服务得有 “体验感” 要想顾客体验后顺利买单,产品和服务就得有实打实的效果,顾客用了、感受了,觉得物超所值,哪怕价格高点也乐意买单,要是没啥效果,体验再好也是白搭,顾客扭头就走。 https://zhuanlan.zhihu.com/p/11612977331
3.如何拓展新的营销渠道媒体营销搜索引擎目标受众?1. 社交媒体营销?: 利用Facebook、Instagram等社交媒体平台进行广告投放和内容推广,提高品牌知名度和引流效果?。 积极参与社群互动,发布有价值的内容,吸引更多目标用户的关注?。 ?2. 内容营销?: 创作高质量、有价值的内容,如博客、文章、视频等,通过搜索引擎和社交媒体等渠道进行传播,吸引潜在客户?https://www.163.com/dy/article/JJ7MDLO30556ADON.html
4.什么是客户体验管理五、结语:如何通过CRM提升客户体验 在如今竞争激烈的市场环境下,客户体验管理已成为企业成功的关键因素之一。通过有效的客户体验管理,企业不仅能够提升客户的满意度和忠诚度,还能在市场中占据有利位置。企业可以利用先进的CRM系统来帮助实现这一目标,例如纷享销客和Zoho CRM等工具,它们通过数据分析、自动化营销等功能https://baijiahao.baidu.com/s?id=1817125097246609695&wfr=spider&for=pc
5.微信营销有哪几类?简析微信营销的两种类型通过微信小程序提供旅游景点介绍、预订和导航等服务,提高用户旅游和出行的便利性和体验度。 结论:微信营销的多样性和灵活性 微信营销的两种类型,即微信公众号营销和微信小程序营销,各具特点和适用场景。企业可以根据自身需求和目标选择合适的营销策略和方法,以提高品牌知名度、用户参与度和销售额。微信营销的多样性和灵https://m.shuziyingxiao.net/shhmt/wxyx/101239.html
6.营销战略有哪几种模式类型营销战略有哪几种模式类型 1. 密集型战略 - 市场渗透战略:通过提升现有产品在现有市场中的市场份额,实现业务的增长。 - 市场开发战略:利用现有产品开拓新市场,实现地域扩张,吸引新客户,开发新用途。 - 产品开发战略:在原有市场推出新产品或对现有产品进行改进和创新,以满足市场需求。 https://www.sivi8.com/rengongzhinengsiweicelue/21498.html
7.国开(中央电大)专科《市场营销学》网上形考(任务1至4)试题及答案38.一种产品或服务满足绝大多数消费者的需要 [答案:个性化的产品和服务的大规模生产] 39.以下哪一个不属于企业体验营销的策略?( ) [答案:直接营销] 40.以下哪一个不是绿色产品的特征?( ) [答案:产品质优价廉,有良好的售后服务] 三、多项选择题 http://www.gjknj.com/duwu/346004.html
8.市场营销策划分为哪几种类型,精实迅版莠品解释版GFH5市场营销策划分为多种类型,包括产品策划、品牌策划、渠道策划等。精实迅版莠品(GFH5)是一种新型策划模式,强调以精简、快速、高效的方式应对市场变化,同时融入创新思维和用户体验。这种模式有助于企业快速响应市场,提升竞争力。 市场营销策划的多元化类型解析:从精实迅版莠品到GFH5创新实践 http://juliangyuanshu.com/post/51966.html
9.智慧树知到章节测试答案汇总智慧树知到创新创业基础心理降答案汇总C、使用网络类型 D、商务活动内容 6、互联网在现实生活中的广泛应用,归纳起来主要有信息需求、交易需求、交流需求、娱乐需求、办公需求五大方面的理论模式:(错) 7、1995年7月,网上商店淘宝成立——标志着网上销售的诞生:(错) 8、以下5项中,哪项是网络营销的特点:(BCE) https://www.qqtn.com/article/article_319268_1.html
10.体验营销的类型有哪些?下面矢量函数中哪一个不能表示磁场的磁感强度?式中的为非零常数 https://www.shuashuati.com/ti/59b5e8e3cb7d4b1d863a0d8ab3c0c9d3.html
11.策划的方案14篇3.世界各地的文化、饮食、民风民俗以及名胜风景可以让听众们对世界各地增加一个新的了解,让大家在繁忙的学习中有一个轻松的听觉盛宴!节目将秉承"勤于发现 敏于感受"的旅行宗旨,弘扬"道听途说"的乐于分享的传播精神,专注于打造洞察人性和反思文化的一种纪录片全新类型. https://www.oh100.com/a/202302/6201369.html
12.运作模式有哪几种(解读运营模式十大常见运营模式分析)互联网的分销常用于电商网站, 比如大型厂家通过淘宝、 天猫、 京东、 唯品会或者微信渠道进行分销。 互联网广告联盟(CPS分成) 的本质实际上也是分销的一种。 在朋友圈大行其道的, 其本质也是分销模式。 体验式营销是通过看、 听、 用、 参与的手段, 充分刺激和调动消费者的感官、 情感、 思考、 行动、 关联等https://www.niaogebiji.com/article-134715-1.html
13.短视频营销模式有哪几种短视频营销模式有3种:1、网红广告植入式营销;2、场景沉浸体验式营销;3、情感共鸣定制式营销。图片来源:图虫创意 1、网红广告植入式营销 这种营销模式主要是借助网红的粉丝来进行推广,因为大多数非公众人物的流量实际上并不大,只有那些流量明星和一些网红的流量相对比较大,粉丝也比较多,那么这些网红只要随随便便的https://www.cifnews.com/article/101128
14.心理学:消费者心理与行为考试试题(2017年最新版)考试题库66、多项选择题 产生投资风险的因素有() A.市场风险 B.通货紧缩风险 C.利率风险 D.通货膨胀风险 E.企业经营风险 点击查看答案 67、问答题 加压过滤机主机主要由哪些组成? 点击查看答案 68、问答题 体验营销的特点体现在哪些方面? 点击查看答案 69、单项选择题 从决策方式看,现代核心家庭主要有() A.3http://www.91exam.org/exam/87-1172/1172438.html
15.线下活动策划方案16篇在这里要提一下微信新规。新规的解读是这样的:未禁止公众号互推。微信团队表示未禁止所有公众号互推,禁止的是以利益交换为前提,有恶意营销性质的公众号推荐行为。 第4式:微赞助 第一种微活动是类型众筹的一个模型。比如,你要做一个项目,或者卖一个产品,为了更好更快的招到买家,这个时候你就要玩众筹。当然建议https://m.yuwenmi.com/fanwen/huodongfangan/4064572.html
16.陆丰市文化旅游体育事业“十四五”(2021加快汕尾文旅体事业建设,坚定不移把文化旅游产业培育成为汕尾经济社会高质量发展的战略性支柱产业,将汕尾市建设成为中国沿海经济带靓丽明珠,以文塑旅、以旅彰文,绘好大蓝图、建设大景区、推进大项目、完善大平台、优化大服务、开展大营销,全力打造中国滨海休闲旅游最佳目的地,奋力谱写汕尾文旅高质量发展新篇章的总目标http://www.lufengshi.gov.cn/swlfwgltj/gkmlpt/content/0/970/mmpost_970710.html
17.市场营销技巧有哪些市场营销技巧有哪些 篇2 一、体验式营销 体验式营销是要站在消费者的感官(Sense)、情感(Feel)、思考(Think)、行动(Act)、关联(Relate)等五个方面,重新定义、设计营销的思考方式。此种思考方式突破传统上“理性消费者”的假设,认为消费者消费时是理性与感性兼具的,消费者在整个消费过程中的体验,才是研究消费者行https://www.jy135.com/zhichang/47854.html
18.专访UNIT9执行创意总监柴逸飞:闯荡国际广告界的中国面孔2014 年,以网站、游戏、APP 制作起家的 UNIT9,意识到行业的下一个浪潮是体验营销。他们要招一批懂实体科技的设计师。 另一边,为了留在英国,柴逸飞开始海投简历。最终录取他的几家公司,包括一间在伦敦郊区制造廉价牛仔裤的工厂,也包括 UNIT9。 对这个行业一无所知,他几乎是被踹进了广告创意制作公司的大门。 https://m.digitaling.com/articles/371742.html
19.关注体验式营销就象伯德·施密特博士(Bernd H.Schmitt)在他所写的《体验式营销》“Experiential Marketing”一书中指出的那样,体验式营销(Experiential Marketing)站在消费者的感官(Sense)、情感(Feel)、思考(Think)、行动(Act)、关联(Relate)五个方面,重新定义、设计营销的思考方式。此种思考方式突破传统上“理性消费者”的假设,https://www.fwsir.com/shangwu/html/shangwu_20070116220536_16628.html