浅谈情感化设计在app动效中的运用-以点餐app为例.doc

《浅谈情感化设计在app动效中的运用-以点餐app为例.doc》由会员分享，可在线阅读，更多相关《浅谈情感化设计在app动效中的运用-以点餐app为例.doc（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、A Brief Talk on the Application of Emotional Design in Interactive Motion EffectAbstract: A products details often become a bridge between the designer and the users emotional transmission. The design of interactive animation is an important detail and logical elaboration point in a mobile applicati

2、on APP, which directly relates the emotion of the users experience and the product Logical thinking, adding and using emotional design in dynamic design, is the most effective way for designers to convey their own emotional design concepts to users in interactive design. At present, takeaway apps ha

3、ve changed the lifestyle of most people. In the details of takeout apps, emotional animation design is undoubtedly a very good optimization point. This article selects a representative ordering app for analysis, summarizes its functional characteristics, and analyzes and optimizes the dynamic effect

4、 design of the ordering app. Adding emotion, and redesigning the product positioning analysis is based on a high-quality user experience. Combined with the product definition as the basic method to analyze user needs, and used in the interactive design of emotional effects of dynamic effects.Keyword

5、s：Interface, emotional animation, ordering APP目 录1 绪 论11.1研究背景和意义11.1.1研究背景11.1.2 研究意义21.2 研究方法和内容21.2.1 研究方法21.2.2 研究内容32 点餐类APP的发展及设计分析 42.1点餐类APP发展现状42.2点餐类APP交互动效设计分析52.3点餐类APP发展趋势92.3.1 现阶段存在的问题92.3.2 外卖市场的发展趋势103 交互动效与情感化设计113.1 APP中的交互动效113.1.1 认识动效113.1.2 APP动效设计的作用123.1.3 APP动效的分类123.1.4 动效

6、设计的原则123.2 情感化设计123.2.1 情感化是什么133.2.2 情感化设计的理论134 情感化设计在APP交互动效中的设计运用144.1 在动效的表现方式中加入情感化144.2 在动效的不同表现场景中加入情感化154.3 情感化动效设计的三个层次155 个人设计实践165.1项目背景165.2用户研究165.2.1 目标用户165.2.2 产品定位165.3用户需求分析196 总结31参考文献：32致谢33 1 绪 论1.1研究背景和意义1.1.1研究背景随着移动互联网的兴起，移动APP已经成为人们生活中的必需产品，这使得市场对于APP的用户界面设计与逻辑设计的需求与日倍增。其中交

7、互动效是使得产品在操作过程中，给用户一种视觉上的实时反馈，优化操作体验。以点餐类型的外卖APP为例，外卖APP彻底改变了人们的生活方式，各类外卖软件的诞生使得人们的生活习惯产生巨大的改变，从日常的买菜做饭变成了在家使用APP下单等待饭菜送上门食用。而在外卖APP的动效设计中，用户的情绪例如食欲等会直接影响到该APP的使用频率和使用寿命、用户粘性。在该类APP的动效设计中加入合适的情感化因素无疑能提高产品的质量，增加用户体验的同时给用户留下良好的印象延长产品的使用时间以及使用次数。以当前市面上比较广泛使用的外卖APP如美团为例，在美团外卖APP中，动效设计的情感化主要体现在页面的切换加载中或是页

8、面加载失败时，会出现美团的品牌形象，一只骑着电车的袋鼠正在派送的小动画，用意是在用户的等待时间中加入趣味因素安抚用户情绪，以及在点餐过程中，图标掉落进底部购物车的一个模拟现实放进购物车的掉落动效，而在其他方面则是简单的页面交互切换，在使用过程中难免感觉略显单调，在不影响产品的操作简洁的情况下使用户在使用过程中提升用户的使用趣味和增加产品的操作魅力仍可继续优化。1.1.2 研究意义本课题探究情感化设计在交互动效中的运用，分析目前市面上的点餐APP的交互动效模块，了解使用者对该类APP的情感类需求，探究APP各种层级的操作下的情感变化，对于界面的缓冲，分类模块应用的操作上用户是否有情感上的需求，减

9、少用户在使用过程中的负面情绪，增加产品的用户粘性。为了使该类APP能以更舒适的方式被用户所使用，探究用户的情感与APP的交互动效有以下意义： 1.在满足用户对应用的正常基本操作下，加入情感化动效设计令使用者在使用过程中保持良好的情绪。2.优化应用的交互方式，在操作方式上使用户体验增加。3.使产品更具竞争力，通过增加用户的使用体验保持用户粘性达到提高商业价值的目的。1.2 研究方法和内容1.2.1 研究方法本论文在撰写中使用了以下研究方法：文献研究法，根据论文的课题方向，通过上网搜索相关的文献并进行查阅，整理分析然后提取信息，从而更加全面的了解交互设计在手机界面中的应用。案例分析法，依据课题的研

10、究对象，选取有代表性的阅读类APP进行拆解，对其功能特点进行总结归纳，分析如何使软件在确保核心功能的前提下，使操作界面更加美观和易用，为用户带来最佳的使用体验。问卷调查法，为了获得更加准确的数据和需求，限定了目标人群，主要是针对高校的师生和从事相关专业的社会群体。从中获取用户的真实需求，再进一步对其深入研究分析。1.2.2 研究内容本文在明确研究背景以及研究意义的情况下，将动效设计以及情感化设计互相结合进行研究。通过上网搜索和查阅相关的文献资料，基于分析整理前者在这个领域的研究成果，例如：学术论文、专业著作、期刊等文献资料。结合案例分析，选取有代表性的点餐类APP进行拆解，对其功能特点进行总结

11、归纳。整理动效设计的设计理论，剖析情感化的设计理念，找出情感化设计的关键元素，并应用在交互动效设计中。结合相关理论，深入探讨情感化设计对于动效设计的价值以及意义。最后，根据情感化动效设计的影响因素，分析界面情感化动效设计在手机点餐APP中的应用。2 点餐类APP的发展及设计分析 2.1线上外卖模式发展现状当前我国餐饮外卖行业市场非常广阔，自2014年起，餐饮外卖的市场规模已经接近千亿，这显然反映出餐饮外卖商户以及外卖APP用户对线上模式较高的认可程度。 艾瑞网.浅谈中国餐饮外卖O2O模式的现状与发展.2016数据显示，外卖APP用户线上叫餐的习惯已经形成，在2014年已经有46.9%的人们使用

12、过线上外卖。而且，外卖的模式十分收到当前市场的肯定，不计其数的线上餐饮类外卖公司获得多轮融资。截至到2017年年底，我国外卖市场规模已经达到2052.7亿元，市场规模整体稳定上升。根据目前的线上外卖行业市场状况和稳定的的发展现状来看，可以看得出来出未来线上外卖行业会带来持续可观的商业价值。2.2点餐类APP交互动效设计分析当前应用市场上的点餐APP数量种类繁多，因此从最具代表性且最成熟的点餐类APP中挑选两种进行设计分析，分别是美团外卖与饿了么外卖。“美团外卖APP”是美团网旗下的外卖订餐网络平台，（根据当前数据统计，产品用户数达2.5亿，合作商户数超过200万家），产品由首页，会员，订单，和

13、我的四部分组成，首页主要由推荐广告和商家构成，满足用户订餐需求，会员则是产品的一种促销内容，通过加入会员获得优惠以增加用户粘性，订单和我的则是用户订餐信息等相关内容。产品界面整体较为鲜艳活泼，其中融入的暖黄色元素能传递使用者一种舒适和活力的情绪，界面分类选择丰富，操作学习成本低适应各类人群使用是外卖APP的通用特点。界面布局中，在美团外卖APP的首页模块里将“优选好店”以及“到店自取”两个推荐分类模块采用垂直的排序，使得点餐功能的模块整体下移，不需要此推荐功能用户的点餐行为需要进行不短的下滑操作才能执行，在增加产品推广时间的同时也对用户的操作情感体验造成一定影响。从产品的loading动效来看

14、，界面缓冲的情感化动效中较多融入了美团的品牌形象动画，在给页面增加活力的同时加深用户的潜意识中的品牌形象（见图2-1）。 图2-1 美团外卖APP在转场动效上，产品的转场不论是点击亦或是滑动界面，大都使用左滑动的动效进行串联而在实际选择餐品下单的过程里，界面设计的纵向滑动模块总共有三组，分别是整体界面的滑动，左下侧的餐品分类滑动，以及整体餐品的滑动，在实际操作中当使用手机滑动选择餐品下单的时候，由于有三种纵向滑动的模块，较容易出现误操作滑动到餐品分类模块中影响操作选择的准确度。（见图2-2） 图2-2 美团外卖APP“饿了么”作为另一个十分具代表性的外卖APP，以“Everything 30m

15、in”为使命，致力于用科技打造本地生活服务平台，推动了中国餐饮行业的数字化进程，将外卖培养成中国人继做饭、堂食后的第三种常规就餐方式。(截至目前，饿了么在线外卖平台在线餐厅340万家,用户量达2.6亿产品由首页，生活，订单，和我的四部分组成，与美团外卖APP有所区别的在于菜单栏的分类中会员模块变成了生活模块，主要用处在于推荐用户当地的优惠团购以及权益。饿了么APP整体设计布局也与当前主流外卖APP的设计无异，色调偏向于天蓝色与白色的搭配，能给用户一种轻松友好的感觉。但相较之下饿了么APP虽然界面分类同样丰富多样，但从细节上有所简约，例如推荐分类的餐品会精简到一个模块内供用户自行选择查看，到店自

16、取功能则归类于选择商家的导航栏中，增加用户的自主选择体验，相较于美团外卖APP减少了大约一个屏幕以上的内容距离到达商家列表（见图2-3）。 图2-3.1 饿了么APP 图2-3.2 美团外卖APP在产品loading动效中，饿了么采用的是结合品牌LOGO的雷达图样转圈动画，直观给操作者一种等待中的感觉（见图2-4）。但在转场动效中饿了么除了较为单调的左滑动切换进行页面衔接，还有如点击移动缩小组件，上弹等转场动效丰富操作者的使用体验，也能在操作中体验到较为新鲜的互动以免产生枯燥的情绪。 图2-4饿了么在选择餐品下单的过程里，饿了么的为商家LOGO的设计也别出心裁，商家LOGO与名称在正上方呈现，

17、能十分醒目的展现出品牌的形象，居中的排版也能给用户一种稳定的感觉，而不会因为左右排版导致因商家LOGO的样式与文字产生左轻右重的不平衡感。在动效上商家的LOGO图标会随着用户的下滑而缩小渐渐隐藏的设计也增加了操作的趣味性，在整体界面的滑动模块中有别于美团外卖的是为了区别操作达到准确性提升，采用了增加一行平行滑动，减少纵向滑动模块的方式，减少用户的误操作几率，而平行滑动模块的内容设计为放大的某几种招牌以及常点餐品，当用户在点熟悉的店铺餐品的时候通过平行滑动可以减少用户操作量，增加用户在使用上的体验。（见图2-5）。 图2-5 饿了么而两款外卖APP在下单的操作体验上都有顾及用户感受，在点餐的界面

18、中，大多数购物APP都有使用餐品掉落进购物车的复合型动效加以修饰，给予使用者一种隐喻性的感受，仿佛有在现实中购物的代入感（见图2-6）。 图2-6 美团外卖2.3点餐类APP的发展趋势2.3.1 现阶段存在的问题现阶段由于行业市场的特殊性，外卖APP的设计趋势都较为相同，产品趋于同质化。目前点餐类APP在产品自身的设计和具备的功能特点都基本大同小异，功能上的变化是基于用户的喜好无法主观增加或改动，而在细节设计上也许可以存在更多的可能性，展现出品牌的特色，让用户感受到商家以及平台的态度。2.3.2 点餐类APP的发展趋势随着人们因为网络的进步形成了生活模式的变化，点餐类APP的功能也随之不断增加

19、，从基础的点餐到周边推荐再到商家之间竞争而导致的餐品多样化，点餐类的APP产品需求的功能也逐渐增多，造成了界面需求模块增加，如何用比较舒适的界面交互达到用户对于APP在功能上的多种需求是该类APP一直在研究发展并且进步的方向，从一开始的界面串联交互，到后来逐渐加入复合型动效元素增加品牌效应，再从中增加情感化元素，是界面设计从本能层面的视觉性吸引力到行为层面的易用性、使用效率的发展。3交互动效与情感化设计3.1 APP中的交互动效由于移动互联网目前正在不断高速发展过程中，移动APP的数量也紧随着与日俱增。正在这使得市场对于APP的用户界面设计与逻辑设计的需求与日倍增。其中交互动效是使得产品在操作

20、过程中，给用户一种视觉上的实时反馈，并带来良好的操作体验。现在绝大部分移动应用接受“扁平设计”美学, 在品牌化的相互对比下许多移动APP相互之间缺乏差异，看起来都大致相同，甚至逐渐趋向模板化。而动效设计作为一种新的设计流行趋势,不论是在情感、交互亦或是视觉上都得到了大部分用户的认可。3.1.1认识动效动效设计（Motion design）是通过动态效果，满足用户当前心理需求，提升用户体验的设计过程。从定义来看，满足用户心理需求与提升产品的用户体验，是动效设计的两大目标。满足用户心理需求是对交互设计的完善与补充，引导用户操作、对用户的操作进行反馈等；提升产品的用户体验是动效设计的升华，包括减少用

21、户在使用过程中的不适感，增强产品的流畅度，提升产品的气质。从动效设计的定义延伸来讲，动效设计的作用主要体现在两个方面，一方面是操作功能，帮助用户认识产品、展示层级；另一方面是情感功能，增强用户体验，包括增强操作、升华体验。 弘毅道 著.动效设计-交互设计的最后一公里3.1.2动效设计的作用动效设计的功能是对用户需求的满足以及操作的反馈，实际上在以前使用非智能手机的应用的时候，由于没有动效的指引，经常会产生类似于“这个界面是从哪里跳转来的？”、“应用是否正在运行？”、“要怎么打开这个功能？”诸如此类的问题。而如何解决这种问题就是动效的重要性所在。根据笔者的观察和使用分析对动效的作用做出了以下总结

22、：（1） 流畅的过渡随着移动APP的发展，APP的功能也逐渐增多。动效通过界面元素的出现/消失，或者是大小、透明度和位置之间的变化，引导用户做出正确的操作行为，让用户的使用过程更加行云流水，使其总能轻松地了解到使用过程中自己处于一个什么样的位置，自己将要去到哪个位置亦或是返回到哪个位置。合理并且流畅的过渡界面是动效设计的一大作用。（2） 引导用户 一个优秀的动效可以准确地引导用户应该如何操作，让用户在复杂的功能中精确了解到自己需要的功能应该如何操作。每一个APP在用户刚接触的时候都容易使其产生一种陌生感，尤其是在手机的操作空间局限性较大的情况下，由于手机的空间相较于PC端而言相对小很多，许多功

23、能不得不隐藏或者是分类，如何让用户从中寻找或是使用到他所需要的功能，就是动效从中引导的体现。例如微信APP中的扫一扫功能，会在界面上显示一个绿色框体，以及一条绿色的横线不断由上往下滑动，来告知使用者现在正在扫描中，将镜头对准需要扫描的位置。（3） 反馈用户反馈是APP中最为基础的需求，是反映用户的操作结果的体现，动效可以明确地向用户呈现他所操作的结果以及让用户了解到当前软件的状态。例如当打开IOS的解锁密码输入界面时，每当按一个数字，那个数字的按钮则会亮起，告知用户你已经准确地输入了这个数字。良好的动效是可以给用户一种鼓励或是赞扬的感觉，激励用户进行下一步的操作，人们在表达的过程后总是期望着得

24、到认可，而动效可以给予人们一种鼓励从而增强用户对于产品的使用记忆，提高用户在使用产品时的愉悦度。每个用户都可以将其想象成一个小孩，小孩都是需要夸奖以及赞扬的，在正确的操作时给予恰到好处的鼓励，在操作错误时也要将受挫感降到最低，从而让用户在使用过程中减少焦虑感，提升用户在使用过程中的情感体验。， 3.1.3动效的种类在APP交互动效设计中，包含视觉设计以及交互设计的内容，同时还包含动画视频设计。在分析APP的使用流程中总结得知，动效的产生大致可归类于MG动画-交互动画-展示动画三大来进行呈现。（1）MG动画MG动画也称之为动态图形或者图形动画，是一种融合了电影与图形设计的语言，基于时间流动而设计

25、的视觉表现形式。在APP中它所产生的优势在于它的直观性，效果丰富，充满故事感令用户的代入感得到提升，一般用于界面的加载状态例如美团APP在界面加载的过程中会呈现一只骑着电车的袋鼠，造型生动，有效地减少了用户在等待时的焦虑心情。但是它是不可交互的，在移动端中它一直以一种循环播放的形式出现，用户无法对它进行操作。（2） 交互动画交互动画从广义上来说就是我们认识的交互动效，大都用于产品的响应过程中，用户可以通过操作对它产生影响，得到它的反馈，这种交互性能有效地提高用户的参与度，使用户从观众变成了主角的位置，由被动接受转化为主动地选择。同时由于它的交互性，在用户操作的指向性以及界面的过渡、元素组件的反

26、馈上都能达到不错的效果，也能同时呼应交互设计的核心概念，优秀的动效能有效地解决用户的使用问题，也能对用户的操作给予及时反馈。（3） 展示动画展示动画是一种趋近于真实原型，根据事先设定好的时间轴动画，模拟预期的可交互效果。普遍用于产品的展示，例如淘宝APP中的一些商品介绍动画，如玩具商品等，以动画的形式，模拟出商品的用方法并进行演示，让使用者跟贴切的了解商品。但与MG动画相同的是它同样是无法与用户进行互动的，用户并无法对其造成影响。3.1.4动效设计的原则动效设计是赋予静止图像一种“生命力”让其活跃起来，以此帮助使用者更好地理解产品正在运作的事情，或者是如何更有效地使用你的产品，这是动效能够提升

27、产品使用体验的原因。1.响应式的。操作的反馈对于动效设计来说十分的重要它之所以有效是因为它迎合了用户对确认的自然渴望。在现实生活中，按钮、控件，以及对象对我们的交互产生响应，这就是人们希望事物达到的效果。用户界面应该快速地响应用户的输入，精确到用户触发的地方，以及显示新界面和创建它们的元素或操作之间的关联。2.关联性的。动效设计必须是与其触发点有所关联的，其中关联的逻辑，取决于要帮助用户理解他所看到的界面变化的原因，帮助用户更好的理解界面变动的逻辑。3.自然的。在现实里每一种运动都应该是为力所驱动的，物件的加速亦或是减速都会受到重力和摩擦力的影响，要能让用户更加有效准确的理解动效的行为逻辑，是

28、不会出现突然地启动亦或是突然的停止的。4.有目的性的。动效是为了让用户更准确更轻松地了解界面交互的逻辑，是为用户的交互体验更加良好所服务的，一个好的动效能够准确引导用户进入交互的下一步，当若是纯粹为了动的动效只会让用户觉得突兀并增加用户对于产品的交互逻辑理解的难度。5.清晰的。动效应该清晰、简洁和连贯。对动效而言，少即是多，过多的动效穿插会干扰用户对于交互的理解难度，设计动效应该只关注动效对用户的实际帮助。3.2情感化设计3.2.1情感化设计是什么情感化是完善产品，提升用户体验的关键，旨在抓住用户注意力、诱发情绪反应，以提高执行特定行为的可能性的设计。通俗的讲，就是设计以某种方式去刺激用户，让

29、其有情感上的波动。通过产品的功能、产品的某些操作行为或者产品本身的某种气质，产生情绪上的唤醒和认同，最终使用户对产品产生某种认知，在他心目中形成独特的定位。在唐纳A诺曼的设计心理学3-情感化设计一书中从知觉心理学的角度解释了人的本性三个特征层次，即本能层、行为层、反思层。 唐纳德A诺曼 著.设计心理学3-情感化设计 情感化旨在抓住用户注意力、引导用户情绪，以提高对产品的兴趣的可能性的设计。如果一个产品满足了，美观性、功能性、实用性和愉悦性这四种属性，那这就是一个让用户喜爱的产品。而愉悦性，也就是情感化设计。情感表现，是现如今人们对产品交互设计的一种更高的追求，同时也是由于现代社会的发展影响了用

30、户对于情感的诉求。动效作为交互设计中引导用户进入产品交互逻辑的引导物，加上情感化的设计能使用户进入产品交互的同时有心情上的提升，同时也能使交互逻辑过渡得更加自然。通过本能层的UI元素形态变化和元素间维度变化来捕捉视觉焦点和引导视线流；行为层遵循设计原则，增强产品可用性；反思层通过再现场景和契合品牌特性，使用户产生情感共鸣。尽管不同终端界面的交互方式有所差异，但巧妙的结合情感化的设计方法创造动效形式，探索用户与界面情感上的沟通，从而不断提升用户体验。将情感化的方法和原则运用产品的设计上,能提升用户体验,给用户留下良好印象,给人一种良好的感受,使用户选择是否使用或者说持续使用该产品,延长产品的使用

31、时间提升产品留存率,实现高层次的设计,给产品本身带来的好处。3.2.2情感化设计的理论由于情感化设计诞生的时间不长，目前普遍认可并加以应用的情感化设计理论主要有美国学者唐纳德A诺曼所著的设计心理学-情感化设计，荷兰设计师Desmet, P.M.A.的非口述情感测量方法以及日本长町三生的感性工学。唐纳德A诺曼设计心理学-情感化设计诺曼教授在本书中分析设计行业的多个领域，最后将情感化设计归类于三大层面，分别是本能层，行为层、反思层：本能层即为从人的本能出发，从视觉上使产品变得美观，因为外形美观而吸引到用户是得益于人追求美观的本能。行为层则是为从切身使用上探究产品的使用效率，是从人们对产品的实用性以

32、及便捷度的追求出发而产生的理论。反思层是从产品特质出发，通过打造产品的某种调性，契合用户内心的诉求，使用户在情感上越发喜欢这种调性的产品，是通过设计打造出一种产品文化的体现。Desmet, P.M.A.非口述情感测量方法 Desmet, P.M.A. (2003). Measuring emotion; development and application of an instrument to measure emotional responses to products. Demset在非口述情感测量方法中将用户对于产品的情感来源分为三个方面，分别是产品、产品的关注点以及产品的评价。在他

33、的理论中，人们由于各种各样的因素导致，会对产品产生不一样的关注点，例如一个外卖APP产品，某些用户会更关注于它的配送时间是否快捷，另一些用户会关注食物是否安全健康，还有一些会关注于出售的食物是否品类丰富好吃等，这些属于产品的关注点，由这些关注点中会使得用户产生各种评价，结合这款产品，以及用户对该产品的关注点、评价最终会产生用户对于该产品的情感。而该方法对于用户产品的测量是通过一系列的产品图形，让用户通过其关注点等选择不同的动画形象，通过该动画形象表述产品给他们带来的情感，测试是否产品给用户带来了所期望的情感表现。长町三生感性工学 长町三生教授的感性工学方法是从用户的情感需求出发，经过大量的调研

34、，总结出来的科学理论。感性作为一个特定的用语，感性工学的感性是一个动态的过程，它随时代、时尚、潮流和个体、个性时时发生变化，似乎难于把握，更难量化。但作为基本的感知过程通过现代技术则是完全可以测定、量化和分析的，其规律也是可以掌握的。 长町三生.感性工学.海文堂.19894 情感化设计在交互动效中的设计运用4.1在动效的表现方式中加入情感化动效的运动方式、物理性以及色彩是设计动效最为基础的三个方面。其中运动方式在动效设计中最为普遍的用法就是旋转、缩放和移动。物理性则是优秀的动效所具备的，从现实的物理现象中去分析动效的动作是否合理，从真实性去影响用户的情感体验。而动效的色彩变化可以直观的影响用户

35、的视觉以及情感体验。运动方式在移动APP的动效中，运动方式是最普遍以及最直观的动效表达方式，是便于用来表达APP内组件与组件之间逻辑的方式，通过直观的视觉效果，表达界面的层级结构、位置关系，使用户在使用过程中对自己的操作更加清晰明了。而在运动方式中的情感化表现也非常多，例如在目前的音乐软件中播放界面所使用的旋转，通过模拟唱片的方式，增加用户的代入感，模拟出现实的音乐CD的效果，使得用户被熟悉的环境所影响，更快的融入到音乐的环境中。类似的运动方式设计还有抖动，一种快频率左右平移组件的动效，一般用于在用户错误操作的时候展现，模拟出一种人摇头的动作，来告知用户操作失败，同样也是给予用户一种现实的代入

36、感，带给用户一种产品摇头的拟人动作。物理性在真实的世界中，一个物体可以被重量、表面摩擦力影响很快的加速或减速。同样的，材料设计的动效也是不会发生突然停止，或者突然启动，都是会有一个加速度或者减速度。 UI中国 动效设计四大原则在动效中加入物理规律的因素，能增加用户的熟悉感，使用户在使用过程中能预知到组件的运动规律，使用户的体验更加真实，不会由于产生用户的不真实感，从而降低用户的信任感。手机设置的各种开关就是最鲜明的例子，当点击开启或是关闭飞行模式时候，圆形的组件并非瞬间从右边移动到左边的，而会有一个由于摩擦力导致的缓冲的过程。色彩在动效中色彩的变换非常的常见，主要是从色彩的明度、色相以及透明度

37、来进行变换来实现。其中，明度的变化一般突出重点，增加视觉上的吸引力，而适当的降低非重要组件的明度也能增加用户的使用舒适度，同时通过不同明度的组件叠加，在突出重点的同时也能节省界面的空间，使得明度低的组件能直接叠放在重要组件的后方，让界面整体更加的规整，避免由于过多元素导致界面混乱的结果。色相的变化是直接影响用户视觉情绪的一种途径，在诺曼的情感化设计理论中，属于最基础的本能层情感，比如我们所熟知的红色代表热情与危险，绿色代表生命和安全，在各种APP的登录界面中，登录组件在输入正确密码后通常会转化成绿色代表成功登录，而在输入错误密码时则会出现红色的登录失败警告。透明度的变化则是通常用于表达界面的层

38、级变化，使用户更加清晰明了的感受到界面的切换，从一个层面转入到另一个层面，实现淡入淡出的效果，不会使用户迷茫。4.2在动效的不同表现场景中加入情感化 此小节将动效的表现场景结合动效的作用分为三类，即过渡转场动效、引导动效以及反馈动效，在三者中分析情感化的表现。 转场动效 在移动APP中转场一词用于表示用户在产品进行交互操作过程中，从一个界面切换到另一个界面的动作逻辑，以此链接产品各种不同的功能。在不同的转场动效中加入不同的元素可以让用户的操作达到自然、流畅、生动的效果。转场动效也是移动APP中使用的最多的动效，同时种类也非常多，例如翻页，对折，组件的散开、组合，亦或是上升下降的动效统统会影响到

39、用户对于产品的使用逻辑。根据诺曼的情感化设计三个层面理论，转场动效的本能层次在于用户对于界面的转换舒适自然、流畅，从而让用户忽略掉界面转换的时间差，通过不同形式的转场保持产品在使用过程中的连贯性。而在行为层面中则是引导用户符合产品的操作逻辑，减少失误操作，吸引用户的注意力。其中最显然易见的转场动效莫过于阅读类APP的翻页动效，在看电子书的翻页过程中通过模拟真实的书籍翻页给予用户真实感，让用户迅速进入阅读的状态。引导动效引导动效的作用一般是当移动APP更新亦或是增加新功能时所弹出的介绍功能界面，简单明了的告诉用户功能的描述，在本能层面的设计上引导动效主要是呈现在用户的第一眼的视觉感受上，例如加入

40、生动有趣的MG动画让用户避免在学习操作过程中产生焦躁的情感，同时加深品牌在用户记忆中的形象。而在行为层面上的引导动效则是更加多样化，通常会加入滑动、缩放等丰富的运动方式，让用户参与进来，忘记枯燥的学习过程，例如微信APP大规模更新后引导页展示给用户的用户使用历史，与好友的聊天频率，甚至于加入活跃度排名系统让用户看到自己使用过程中的各种统计数据，给予用户趣味性的体验。反馈动效前文提到反馈动效是APP中最为基础的需求，是反映用户的操作结果的体现。反馈动效可以明确地向用户呈现他所操作的结果以及让用户了解到当前软件的状态。当用户通过交互触发界面行为的时候，他们希望能够看到视觉上的响应整个交互系统应该明

41、确地表示它已经收到了请求并且进行处理。一般反馈动效采用的也是运动、变形等方式，例如在IOS系统的解锁手机界面中，当密码输入错误时的抖动能迅速反馈给使用者密码输入错误的信息，而在网易云音乐中的添加喜爱音乐操作中，点击心形按钮会使按钮跳动反馈给使用者已添加的信号。而反馈动效应该轻便简洁，通过微妙的动画帮助用户理解正在发生的事情，不宜太过于复杂，会给用户带来较多占用时间的体验，导致用户情绪变得焦躁。4.3情感化动效设计的三个层次 此小节根据唐纳德A诺曼所著的设计心理学-情感化设计总结出，对于交互动效来说情感化设计的三个层次。本能层次的“好看”外形的美观与否使人们对于视觉的本能需求。越是符合本能水平的

42、设计，就越可能让人接受和喜欢。在动效设计中，结合品牌调性，从颜色、ICON甚至插图中出发，运用本能水平的设计突出产品差异化就是动效情感化的本能层设计。行为层次的“好用”在产品使用的操作中，如果说产品带给用户的第一印象是本能层，那么行为水平的设计就是决定用户留存、提升用户体验的关键之一；在行为层中，产品的交互逻辑则是更为重要，同时这也是交互设计的重要理念，除了在交互设计上拥有更良好的使用体验外，界面中可以结合开机画面、引导页、空白页、下拉刷新等配合情感化设计细节例如：插图、动效的形式来表达。反思层次的“用户记忆”反思层次事实上与用户长期感受有关，通过引发用户和产品的共同回忆，可以将用户对回忆的正

43、面情感转化成对产品的情感，从而提升用户对产品的认同感。UI设计师可以在这个领域结合运营设计、趋势风格发挥设计的优势，增加和用户之间建立起情感的纽带，通过满意度、记忆等，形成对品牌的认知。 Esther 著.界面中的情感化设计在情感化界面的设计中还是要结合具体场景，避免过度设计；所以做出恰当的情感化设计，是个有趣的挑战，也是一直需要不断去探索的。设计师多换位思考，真心的为用户考虑，才能做出恰到好处的设计。5 个人设计实践5.1项目背景当前外卖APP已经改变了大多数人的生活习惯，在外卖APP的交互设计中，产品的设计趋势逐渐同质化,但是由于产品本身的功能性，品牌性大都早已因为市场的需求基本定型，很难

44、从主观上给予改变，在这情况下，如何精进产品的细节成为了当前外卖APP产品的竞争因素。在产品细节的处理中，情感化动效设计无疑是一个非常好的着手优化点。完善产品，提升用户体验的关键，旨在抓住用户注意力、诱发情绪反应，以提高执行特定行为的可能性的设计。在当前市场中，比较热门的外卖APP都在功能性上面有所着重，但是在动效设计方面略显单薄，情感化动效设计作为一种新的流行趋势,不论是在视觉、交互还是情感上体现出的优势被越来越多的设计师认可。动效作为交互设计中引导用户进入产品交互逻辑的引导物，加上情感化的设计能使用户进入产品交互的同时有心情上的提升，同时也能使交互逻辑过渡得更加自然。5.2用户研究5.2.1

45、 目标用户艾瑞网通过对使用用户的年龄、职业、行为习惯等进行划分，经过大数据统计得知，使用点餐APP的用户年龄集中在19-24岁之间年轻用户群（见图4-1）；此外，统计得知外卖APP用户的使用原因大都为工作繁忙导致（见图4-2）。图4-1（来源：艾瑞网整理） 图4-2（来源：艾瑞网整理）5.2.2 产品定位产品定位是关于产品的目标，范围、特征等约束条件，它包括两方面的内容：产品定义和用户需求。最终产品定位应该是综合考虑两者关系的结果。根据统计点餐类APP的目标用户分布，从年龄与使用环境可将产品目标人群暂定在19-24之间的上班族中。由此可归纳出设计目标产品的目标人群应该是使用人群中为青年男女上班

46、族，消费力中等，使用场景为家中或是公司等，用户目标为便捷地以优惠的价格点到喜爱的餐品。因此结合产品定位为外卖点餐类APP可以了解到产品定位。目标用户：19-24岁，工作压力大、时间紧凑，方便快速的解决工作餐的白领。主要功能：点餐下单 美食推荐产品特色：价格实惠、操作简便。使用场景：公司饭点、家中休息、出差过程中。关键词：减负、方便、易用、清晰5.3用户需求分析在设计开始前，假设界面交互可以满足目标用户所需的需求行为，从而在用户在操作的操作逻辑中挑选出可以引导使用户能更直接进入交互逻辑中的点，并加入动效设计。先要明确划分功能板块，根据产品定位，作为点餐类的线上餐饮APP，目标用户的最主要需求就是

47、下单点餐的功能。因此，产品首先应该能快捷地进入下单餐品的版块。点餐版块作为该APP的最主要功能，拆解出操作逻辑应由先选择店铺亦或是选择餐品类型，然后进入选择具体餐品过程，最后是下单付款操作，并在最后能让用户有简单快捷的点评操作。用户在进行点餐的过程中，需要有适当简洁明了的引导优惠选择功能，避免客户进行过多的优惠计算。在不同的时间段为用户提供不同的界面欢迎语或者界面元素动效，也能让用户感觉到被关心或者体会到惊喜的愉悦。5.3 设计实践（1）点餐类APP功能需求“食刻APP”是一款定位在点餐类产品的模拟品牌。由于动效设计是基于界面的交互逻辑进行的，因此需要通过分析点餐APP的功能需求了解逻辑关系，所以在了解用户关注点和用户使用习惯的基础上，要尽可能多地找出需求的来源。通过整理分析得知，在点餐APP功能中应突出以下方面：1. 首页界面是美食推荐与商家列表，核心功能是便捷地选择餐品下单；2. 商家的可划分性功能，可以根据用户的喜好菜品进行预设定；3. 个人中心的饮食数据分析；4. 订单拼单的分享功能。5. 会员优惠服务。（2） 信息架构信息架构是通过产品的信息通过组织与