优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 5 分钟
（金山网络交互设计师）：自从iOS7发布后UI圈就开始疯狂流行起动画效果，尤其是在Facebook Home之后，大家觉得如果没有酷炫转场、扭来扭去元素，产品就好像上个世纪的老古董一样。但是让整个圈子争相学习的风尚背后却还仍然有一个争议：动效是交互设计还是视觉设计？
在很多外行人眼中，看到一个App动画不错，往往脱口而出的是“哇，这个App交互好棒！”。或者老板觉得产品太死板了，会对着大家说“我们的产品交互还需要再打磨一下”。其实从严格意义上来说，动效作为交互反馈的一部分也属于交互设计的范畴，但是大部分交互设计师既没有动效设计的能力，也一般不会去做这种事情，而现在努力学习动效的往往又是那些视觉大牛们。那做动效设计的工作流程到底是如何开展的呢？
要了解这个问题，我们先要看动效设计的目的是什么？
1，在用户体验上为了达到某种目标的引导
早期互联网产品动画较少时，大部分动效都是为了解决某个具体的交互问题而存在的，有很强的目标性。比如iOS上book的翻页效果，因为用户对手势翻页没有很好的认知也不会很快适应，所以需要模拟真实的翻书效果让用户适应。
又或者在Safari下载文件后，文件的进度和管理会在Dock的下载文件夹下，用户不容易发现和注意到，这时会有一个图标飞入到下载文件夹的动画，告诉用户下载的文件已经到这里了。
2，让界面更灵动活泼
因为现在越来越流行扁平化，所以设计师都开始用更简单的元素尽量去突出内容。但是如果只是纯粹的扁平的话就未免有点太粗糙了，给人一种界面很死板、没怎么设计的感觉。所以为了泥补这个问题，动效可以让扁平的界面更活泼起来。
比如Skype将普通的菜单弹出过程加上了果冻效果，让整个界面可爱了许多。类似于这样的动效有很多其实只是为了好看而制作的，他们属于视觉设计的部分，是为了让界面视觉更优秀。
所以可以看出动效即兼顾了交互的功能性，还具有美观性的特征，应该是交互设计师和视觉设计师互相合作的结果。
我们团队在具体开展动效设计的过程中，交互设计师会扮演导演的角色，视觉设计师扮演摄影师的角色。在设计动效时，交互设计师要先想明白动效所能解决的问题是什么，需要应用在什么场景下，以及把控动效的实现自然柔和不要过度。而视觉设计师不但要负责动效的制作，还会根据产品的特点加上很多风格化的效果。
交互设计师并不是动效的制作者，相比较而言视觉设计师不但更方便修改产品的素材，而且对产品的视觉把控能力也更强一些，所以更适合成为制作者。所以我觉得交互设计师要多了解动效的实现原理，学会运用动效解决问题，思考动效的概念。但是鼓励视觉设计师尽量多的掌握动效制作技术，让自己的效果图动起来。
视觉设计师在动效设计上需要交互设计师的把控，避免成为花瓶。和界面一样，动效在实现过程中也会影响到用户体验，比如过渡的并不自然，或者虽然很好看但是太花哨反而影响信息的阅读等，这些都可以让交互设计师帮忙check一下。
最后希望各位UI和UE同学，在面对新的流行趋势下能够更多的理解和认识它，不盲从，一起探索更好的工作方法。
动效有多炫？看，多图杀猫，手机慎入。
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量72万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
设计师必备的3个App推荐
摄氏度：做为一个设计师，在如今的多屏时代，从传统的WEB设计跨入移动App设计是必不可免的，由于设备的变革，整体的设计思路也在革新，设计工...
@凌霜设计 （Frog Design交互生）： 作为一名交互设计师，如何更好地与项目里的其他人合作？如何更好地利用大家的时间？团队经理用画图的方式跟我解释了...本文用交互设计的思维对iOS 10的新特性进行分析。撇开平时我们考虑的界面排布，页面元素等问题不谈，将视角转移到屏幕外的东西：如时间维度的，空间维度的，手势...这是书单系列的下篇，希望这次的书单系列能够帮助大家读到好书，在交互设计上精进。 上篇：《网易UEDC丨从初级到高级交互设计师的私人推荐书单》 本书单由网易U...@窒息红Leon ：刚开始实习的时候，师兄告诉我成长最快的方式就是：偷学其他前辈的本领——这不用说我也知道啦，当然不能说偷这么难听，仔细观察平时前辈的工作方...@四四四毛 ：最近两个月给公司的伙伴们做交互设计的分享，这是第一期分享的内容。在这次分享中，我认真梳理了交互设计师掌握和精通这门技艺的方法。我认为，如果想成...一直在看奇葩说，听到很多次的一个词叫“刻板印象”。而人之所以有“刻板印象”，是因为有categorical thinking（类别型思维），它往往使我们产生...编者按：初学交互设计的新人，因为没有做过任何的设计项目，所以不知道整个交互设计师的工作流程会有哪些内容，今天这篇文章请了专业科班出身的设计师来科普他们在实际...加入一个设计团队，是激动又有挑战性的事，尤其是对于像我一样刚毕业的职场小白。入职DDC 近2个月，本篇就交互新人如何迅速成长，讲一下自己的体会。 欢迎关注点...@呆呆丶L ：交互工作中要用到什么工具？学交互要看哪些书？交互工作中要做些什么？工作中需要思考哪些东西？今天这篇文章主要是写给交互设计超级新人的，都是常见的...
我们的团队
大家在关注
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里交互式微课的特征_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
交互式微课的特征
&&目前交互式微课主要是采用HTML5技术构建的一种课件形式,由于HTML5是互联网应用的网页新标准,因此在互联网上应用具有很多优秀的特征,而在线教育恰恰是基于互联网上发展而来的,因此将HTML5与微课相结合,使得交互式微课更具有其独有魅力和优势。
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢Web、App中添加动效设计有哪些优点？| 阅读（106）
众所周知，早些年流行的flash主页因其酷炫的效果风靡一时。如今随着html5和css3的发展，在配合高端浏览器的使用环境下，用户可以体验到更流畅顺滑的动画效果。
同时，随着手机性能的提升，系统和应用程序中的动效越来越丰富，其丰富的视觉细节对于有着诸多的辅助作用，有效保证富交互的实现效果，提高了产品的易用性。
一、交互动效设计的创新点
自iOS7的发布可以说给Apple带来了历史上最大的一次设计风格的改变，强调依从于内容的扁平化UI、纤细的字体和鲜明的图标、带有纵深感的层次与动画表现构成了它的全新设计特点。撇开饱受争议的细节设计，静观iOS7，不难发现，许多让我们眼前一亮的瞬间，在此，马海祥总结了以下4点交互动效设计的创新点：
在用户倾斜和移动屏幕的时候，IOS主屏可以根据感应器数据，调整壁纸和图标的相对位置，产生一种三维空间上的景深效果。
2、拟真动态
将现实中的运动现象简化抽象，形成了iOS7中一些蛮有特色的动画效果。天气应用中，全屏的气象动画优雅而逼真，洋洋洒洒的雪粒、悠然飘浮的云朵、划破天际的闪电传达出一种独特的表现力，赢得了发布会上的阵阵掌声。
还有指南针工具中的水平仪动画，采用两个圆圈逐渐相合的过程生动地表现了水平校准的过程。iOS7中还增加了动态图标，时钟图标和设置图标还原了时针分针走动和齿轮转动的状态。
信息应用中，聊天气泡随着文字一起被丢上屏幕，当用户滚动屏幕，它们互相碰撞并产生挤压缓动。
类似的还有一打开Game Center，六个鲜艳的泡泡富有节奏地弹出然后在与手指的交互过程中弹开消散。IOS7中的通知中心可以从锁屏界面激活，而激活过程中面板会与屏幕底部碰撞产生回弹效果。
当用户解锁之后，图标以屏幕中心为轴渐次缩放每个图标，产生一种由远及近贴到主屏上的感觉，点击打开应用、打开分组均采用放大展开的形式，这里的缩放更多地体现了系统的空间感。
5、手指跟随
在iOS7中跟随手势的动画很多，比如点击拨号键盘相应的按钮会变为半透明，右滑返回中当前页面的拖动效果，滑动解锁过程中的渐变动效，这些为我们带来了很强的操纵体验。
二、如何创造卓越的？
如果说之前在交互设计中，动效可有可无，那IOS7的出现，可以说宣告了动效设计已经不容忽视。还记得在《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》一书中，探讨了如何创造卓越的IOS，提出了&令人惊叹&的设计要素这一概念，即那些给用户带来的体验感受可以达到其心中某个&情感阀值&的表现层元素。而以下三方面因素将决定着产品带来的体验感受能否跨越用户心中的&情感阀值&：
1、符合直觉：保证设计能引导用户做出最符合直觉的操作；
2、差异化的创新特征：设计中要有显著的创新特征，即让用户感觉到某些不同寻常的产品体验；
3、积极响应：设计方案要以积极的姿态去缓解那些由于差异化导致的用户陌生感。
书中还提出，上述的三点推动因素主要在三个属性维度上得以体现：
1、界面外观：即基本的静态视觉元素；
2、交互方式：包括人机物理交互、手势以及其他常规的输入方式；
作者：未知，来自：网络整理
转载请注明来源：申永祥博客，（QQ：）原文地址：原文地址：
声明：博客内容除标记原创字样以外内容，均来自网络转载，版权归原作者所有，如涉及版权问题请及时联系处理。
上一篇： 下一篇：
基于用户体验的移动端交互动效设计相关文章阅读更多：&&
基于用户体验的移动端交互动效设计精彩文章花了7天看了上千个交互动效神作 我总结出5个技巧 - A5创业网
当前位置：&&&
花了7天看了上千个交互动效神作 我总结出5个技巧
11:04&&来源：优设网&
　　编者按：对一个全无经验的动效新手而言，如何制作出「正确」而不是「华丽」的动效?今天这篇Medium 上的好文，从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个方面，附上案例分析，帮你学会基础的动画制作技巧。
　　首先，我想大家会有这样的问题：什么是微交互 (micro-interaction)?
　　来自 UXPin(一款在线可交互原型制作工具)的 Carrie Cousins 给出了如下定义：&微交互是在交互设备上的单一交互流程的细节优化。&
　　可能不是太容易理解，那就多看几遍吧。
　　在进入正题之前，有一点我要先声明一下，接下来我要分析的 UI 动效都是出自非常牛逼的大神之手。我非常尊敬他们和他们的作品，他们非常乐意分享他们的经验和未完成的稿件。不过在我分析作品的时候不少设计师的态度都非常差。这可不是我的风格。我都是用严肃的眼光去看待设计的，但是会用娱乐性的方式表达我的观点。如果我碰巧说了些不中听的话，还请多多包涵。
　　让我们开始吧!
　　一、看在手绘板的份上，克制一下自己
　　设计师就像一朵含苞待放的花儿一样需要精(Jin)心(Qian)的照顾和呵护，但在设计高质量的微交互时，在你完稿前都充满着摧残。
　　动效设计是个尝试新想法并验收成果的好途径。下面这个作品出自 Sergey Valiukh(一位在字型、排版、色彩以及动效方面特别牛逼的人)之手，一起来看看。
　　下面我们一帧一帧地来分析：
　　1、首先能最直观的感受到的是图片的&3D翻动&效果，这在我看来是完全没必要的，甚至是违法的(开个玩笑，只是确保你还在看)。在这个作品中，如果把任何一个多余的动效去掉来简洁的表述的话会是一个不错的想法。
　　2、其次，你可能注意到了预览流中的图片是被裁剪过的，而在编辑界面中是原图尺寸。在实际应用中这显然是不可行的。
　　3、第三点，可以注意到顶部导航栏的图标过渡的时间特别特别地长。第一次看会觉得很棒，但是看久了就会很烦。微交互要迅速，要简洁，要有明显地速度变化，持续时间最多在300~400毫秒。
　　4、看完了这些之后，咱们再来看看底部，这里两个图标并不是同时出现，这意味着一个错误的交互叙述流程(多余地强调)和理解时间的延长。
　　总结：
　　动效设计时会有许许多多这样的参数需要考虑。你需要明确哪些可以用、哪些不可以用、哪里可以再简短、哪里不用花太多精力，并从中获取清晰易用的经验。这并不是说你不能天马行空加上一些有趣的细节，只是说这些细节可能会让整体显得很累赘。
　　小技巧：
　　去掉多余的部分。时刻提醒自己这些细节动效是不是保持了简洁的微交互，还是让交互体验变糟了?
　　关键词：
　　二、不要为了效果而牺牲叙述
　　交互叙述流程(narrative)在用户体验中非常重要，一部分是因为这与使用者的预期相关，连贯的交互叙述流程不会超出使用者的认知负荷;另一部分是因为这与我们大脑收集和理解信息大致模式相关。此外这还与我们的心智模式有关联。总之，交互叙述流程很重要。
　　SrikantShetty(一位强壮的动画设计师)的这个作品为我们呈现了一个非常&好&的例子。
　　看到这个动效的第一感觉是不是很诡异，以为是在线条上输入文字，然而却弹出了一个隐藏式的文本框。这种点按-弹出-输入的交互叙述流程挺让人心烦的，或许是想看上去酷炫一点吧。然而这种交互叙述流程打断了我们输入信息时的预期流程。我们不得不停下来去面对这样的意外，调整好心态后才能继续操作。
　　当设计师有所&灵感&的时候多半会设计出这种诡异的交互叙述流程。他们往往会为了吊炸天的效果下半天功夫，对交互的核心叙述流程却不怎么在意。这么做事实上让交互流程看上去像是一团糟。
　　好的微交互的叙述流程是清晰且顺畅的，看看下面的作品，顺便和上面这幅做个对比：
　　高下立现，交互叙述流程非常的简洁和自然。虽然左边的动效有一个线框弹跳的效果，它却起到了细节优化的效果，而不是画蛇添足。
　　小技巧：
　　保持交互叙述流程的简洁和顺畅。
　　关键词：
　　交互叙述流程
　　三、动效如果不能一步完成，那就干脆放弃
　　几乎所有出彩的微交互的动效都是一步到位或是步骤统一，那些不是很好的往往败在了过于复杂的动效上。
　　在这个例子中，Romain Passelande(他的 Dribbble 不要太屌)的动效让我&虎躯一震&。
　　不太熟悉动画的朋友可能看不到我所看到的内容。这幅动效中有两个单独的动作：直线的转换和图标的旋转。这两个动作实际上可以合并为一个动作，然而实际上并没有这样，Romain把他们分开了。如果看的不是很明显，那么看一下这张对比图：
　　左右两边的动效就是把直线的转换和图标的旋转这两个动作分开进行的，中间的动效则是用一个动作整齐划一的完成，既不繁琐也不累赘。
　　小技巧：
　　确保微交互的动效是一步完成的，如果有多个动作在不同时间和位置进行，那么干脆放弃吧。
　　关键词：
　　一步完成
　　四、问题不是出在动效上，而是在设计规划上
　　学习过 UI 精细动画的朋友可能深有体会：在静态样本做成拆分细节动作的时候往往会遇到困难。这个可以理解，好的微交互设计都会有这样的问题：把动作精确到每一帧非常难。然而糟糕的微交互设计让人更糟心。
　　下面这张表格是我对设计和动效的理论知识的总结归纳，你们拿去当做参考好了。
　　一般来说，大家都会往点点的位置努力。点点我用了紫粉色好让大家在项目中期赶时间的时候快速定位。
　　接下来让我们跳出理论进入实践：如何拆分动效的动作。
　　这是由 Sam Thibault 完成的动效作品，作品中&加入购物车&(add to cart)按钮那令人费解的转换和形状的改变填充了图片下方的空白，然而这显得很多余，也加重了使用者的认知负荷。
　　在影片制作过程中有这样一个说法：如果有问题那一定是剧本出了问题，糟糕的剧本就是糟糕的电影，设计也是如此，糟糕的设计就是糟糕的微交互。
　　小技巧：
　　在你挑动效的问题之前先确保你的设计没有问题。
　　关键词：
　　不是动效的错
　　五、不遗漏任何一个细节
　　&你不接球的话一定会错过射门。&这话是 Wayne Gretzky(冰球运动员)说的。显然他很擅长躲避着撞击的同时在冰面上翩翩起舞。仔细想想，用这话形容交互设计师进行微交互设计的时候是多么贴切：有太多太多细节了。大部分设计师并不是很习惯设计300~400毫秒的动画，所以很容易敷衍了事。
　　下面这个作品由 Ivan Bjelajac 设计，在这作品中我发现有5个细节还可以优化一下。
　　1、菜单按钮和返回按钮可以添加简洁优雅的过渡动效，菜单按钮随页面上滑显得不是很协调。
　　2、黄色方块的右箭头的缩放旋转效果不是很必要。这样看上去有些奇怪，它应该随着内容进行转变。
　　3、渐隐渐出的正文段落其实没有必要。
　　4、从左向右滑动的标题如果是从内容上淡入淡出的话会比滑动渐隐要好很多。
　　5、在图片转换为顶部横幅的时候人物照片被裁剪了。这里如果将图片重构一下与内容相呼应会更好一些。
　　和下面的对细节严格要求的动效作品相比简直是天壤之别。
　　小技巧：
　　对待细节不能松懈，不遗漏任何一个细节。
　　关键词：
　　把握细节
　　这里我想说就算你没有任何动画经验，只要时刻记住下面这些要点，你也有可能制作出精美绝伦的微交互设计。
　　交互叙述流程
　　一步完成
　　不是动效的错
　　把握细节
　　尽管这不能保证你一定能做出牛逼的动效，但这是迈向正确的方向。
责任编辑：安然
延伸阅读：关键词：
变设龙 企业高质量图片智造平台
增值电信业务经营许可证：苏B2- 在线数据处理与交易许可证：苏B2-
编辑热线：6-2
A5创业网 徐州八方网络科技有限公司 版权所有
扫一扫关注最新创业资讯