交互设计动效解读-百度hao12

更多设计干货：百度UE

讲堂

步骤详解

一、动态交互概念

1、平常会遇到的以下场景改造野猪。

这两个场景中出现了三个关键词：“动效”，“死板”，“交互”

动效能让大家感受产品体验不死板燕无歇原唱，在交互体验设计中明明白白我的心歌词，动效是动

态交互的主要表达方式广场舞梦里的姑娘，也是交互设计师的重要工作范畴。

2、动态交互在交互设计中的“位置”

我把交互设计师的工作分为七大部分：

比如概念设计，一般是创新项目，或者在大的产品改版前期重点投入的数

据埋点和分析，有利于从理性角度帮助设计师验证设计方案或者优化产品

等。

更多设计干货：百度UE讲堂

而以动效为主的动态交互则与静态交互一起构成了交互方案，静

态交互主要是流程逻辑japonesque，界面布局和文案春娇救志明 五月天，与静态交互相比，动

态交互更能丰富和极致的展现交互过程方案，并且还可以很巧妙

的融入情感化梦中飘落雨失了身是什么歌。

二、动态交互案例分析

接下来五岁庵，结合经典的案例让大家深入认识动态交互的目的和价值巴厘泰。

a.在用户体验上为了达到某种目标的引导：

早期互联网产品动画较少时，大部分动效都是为了解决某个具体的交

互问题而存在的，有很强的目标性。

更多设计干货：百度UE讲堂

例如iphone

解锁滑动的效果

起初在我非智能手机时代，用户进行手机解锁主要是按物理键操作，而

对滑动解锁并没有很好的认知07 ghost，也不会很快适应，所以需要这样“光影闪

动效果”对操相对真实的功能引导秋天的怀念朗诵，以让用户适应。

再比如在safari下载文件后

文件的进度和管理会在Dock的“下载”文件夹下nrg文件怎么播放，用户不容易发现和注

意到山河英雄志，这时会有一个图标飞入到下载文件夹的动画，告诉用户下载的文件

已经到这里了中华冷面，和刚才讲到的iphone解锁案例一样燃点下载，Safari下载动效的

主要价值是为了让用户更明确的感知传递信息和操纵行为，功能性信息过

多的时候，进行信息的过滤与实现引导，减轻用户同一时间处理信息的负

更多设计干货：百度UE讲堂

担，同时形成行为粘性狮子座曾轶可，加深记忆减少学习成本。

b爸爸去哪儿林志颖.为了产品功能和结构上的创新：

最经典的案例就是侧边栏展开抽屉式的交互设计good boy，这个传达层级的动态交

互方案已经成熟运用在许多手机应用中吴紫彤，不需要赘述。

还有一个案例是前几年从Path客户端流行开来“点展示“的交互动效，

他的目的是为了结构上的创新r kelly。

更多设计干货：百度UE讲堂

一般来说同一层级的功能超过三个网球王子主题曲，且这三个功能不太适应同时展示在主

界面上时周笔畅 黑苹果，比较建议用这种动态交互赵正熙，这种动态交互让当前界面的默认状

态更加简单，突出了内容神犬小七主题曲，“动效“使得这个功能富有趣味性，像百度阅

读、新浪微博等产品首页的设计许小蕾，都是运用这一动态交互方案比较成功的

产品。

c.让界面更加灵动活泼：

更多设计干货：百度UE讲堂

Skype客户端将普通的菜单弹出过程加上了果冻效果2012sbs演技大赏中字，左侧是完整的动

效图，右侧是三个关键帧界面，果冻的界面让界面可爱许多儿歌数鸭子，并且给了用

户一些小惊喜音乐铁人。

再比如下拉list区域时，顶部图片有被拖放的效果，本身这个动作没有满

足功能上的引导，也不算功能或者结构的创新，仅仅是用户操作后的一个

反馈是什么让我遇见这样的你，但是这个反馈使整个界面灵动活泼，用户体验不死板赵欣丝绸舞台图片，很多这样的

设计是为了好看，属于视觉设计部分香榭丽舍大街。让界面活泼roundtrip，同时通过感官刺激生

化产品视听体验和情感联系edge出场音乐，

更多设计干货：百度UE讲堂

三、动态交互主要场景

前面的侧边栏抽屉式就是转场动效，转场动效可以柔和页面的过渡效果，

增加切换加载等待过程的趣味性。

更多设计干货：百度UE讲堂

通过界面内元素的动效福山芳树，增强用户的交互感知或者引导用户完成任务真爱每一天，

这些交互细节我们更需要动态交互：

第一如果你希望用户点击这个地方，请给它一个动效

更多设计干货：百度UE讲堂

如图为了引导用户点击报名，在按钮上加了一个手势点击的动画

设计

第二如果你希望你的点击效果不一样城市猎人插曲，给它一个动效：

如图四个细节性例子就通过点击的效果我想这样抱着你好不好，丰富了交互体验对不起我爱你韩语版。

四、动态交互使用原则：

更多设计干货：百度UE讲堂

动效持续时间长在这里发现爱，出现频率高let it go中文版，一味追求炫酷的问题屡见不鲜。

就会导致动态交互的平衡杠杆失衡。

动态交互设计当下正在经历成长的疼痛，如90年代和21世纪

初的视觉设计，当时的设计师应该还记得以阴影，斜角王莉莉，高光无

留白这些特征的设计周乙原型，当设计师着迷于新媒体并陶醉像素的奇

妙温州话歌曲，这一结果再自然不过。

在更精妙的设计语言出现之前小爸爸里的插曲，设计师在初级阶段容易滥用新功

能李炜qq，这很正正常，追溯视觉设计进化发展的过程，有助于理解现

阶段的动效设计，

类比视觉设计的发展历程

横轴代表时间发展周期，纵轴代表“形式与功能的比值“

纵轴越高表示在设计的越重视形式而忽略功能，反之表示设计时

比较重视功能。

更多设计干货：百度UE讲堂

而视觉设计的整个发展历程是这样的一根曲线。

从视觉设计行业诞生寒门闺秀，形式主义突飞猛进跨世纪，导致21世纪初期之前的“过

度设计阶段“随着时间发展，视觉设计渐渐返璞归真珠格格之风儿阵阵吹，追求形式和功能的

平衡发展拥军秧歌，直至现在的成熟阶段。

绿虚线部分就是视觉设计“疼痛发展阶段“，堪比现阶段的动态交互可

以类比视觉设计史上的”阴影阶段“技术的发展使得网页动效能力有了显

著提高在一起多好，比如CSSJS

的逐渐成熟林莹，另外移动设备不断精进的性能邓丽欣种子，比如

更多设计干货：百度UE讲堂

多核，多存储梓熙，高dpi等性能的提升抒情歌曲，都让互联网的动画效果更流畅，

现在正处于动态交互发展史的早期阶段2015魅力盛典，设计师试图通过增加动效来增强

亮点，和曾经的阴影和斜角没什么区别。

动态交互的使用原则

1不差钱小品下载.尊重操作系统的特和规范带发修行，尊重用户的使用习惯，尊重现

实的物理规律，这是交互动效使用的前提江苏中孚投资。

2张强的歌.不要无意义的动效苹果mp，动效为传递有价值信息超神学院2，不能单纯追求

酷炫增加多余效果。

不要干扰用户的视线命运石之门游戏。动画会分散用户的注意力，或者干扰

用户对重要信息的获取。

竹枝词.控制，控制包含控制动画的个数和时长，经验来看我好喜欢你mv，同一个

页面最多个动效mona lisa smile。建议单个动画时间控制在0.4-1秒之间酵母君与鸡蛋公主，

多考虑动效执行的效率，否则跳出的转化率也不会很高。

更多设计干货：百度UE讲堂

4.注意使用频率较高的功能慎用交互动画，高频操作会让用户

反感汪峰好听的歌，并且延长用户操作时间。使用频率较高的动效i fancy you，要保

持一致性ハルカカナタ，一个或者一类动画在多个界面出现时，动画效果

尽量一致

小结

动态交互：从用户触发行为到预期结果之间的合理变化过程展

开，让大家明白使用动效时候babysistermv，一定要思考为什么需要动效黑管独奏，何

时需要出现动效，以及如何在使用的过程中保持它的一致性等。

交互动效是为了解决某个功能需求而存在的，所以一定要服从用

户体验。

更多设计干货：百度UE

讲堂