对于一个没有工作经验的初学者，如何做出「合适」而非「漂亮」的动态效果？这篇当今媒介上的好文章，从抑制、互动叙述过程、一步到位的进度、不动态的断层、细节的掌握五个方面，配以经典案例，帮助你学习基本的动画方法。
首先，我想每个人都会有这样一个难题:什么是微互动？
CarrieCousins来自UXPin(在线交互原型制作的专用工具)，她提出了如下定义:“微交互是交互机器上单个交互过程的细节改进。”
大概不是很好理解，所以多看几遍。
在进入正题之前，我想明确一点。我接下来要分析的UI动态，都是出自非常厉害的上帝之手。我非常尊重他们和他们的作品，他们也非常愿意分享自己的工作经验和未完成的手稿。但是以我对作品的分析来看，很多室内设计师的心态是很差的。这不是我的设计风格。我用严肃的眼光对待设计方案，但我会用有趣的方式表达自己的观点。如果你碰巧说了什么没听到的话，请给我提意见。
现在就开始吧！
一、看在数位板的份上，抑制一下自身室内设计师就像一朵含苞待放的花，必须得到金和钱的呵护和照顾，但在设计一个高质量的微交互时，在你交稿之前，它就已经充满了伤害。
动态设计方案是试验新想法和检查项目结果的好方法。下面这本书是SergeyValiukh(一个特别擅长字形、排版、颜色及其动态效果的人)写的。让我们看一看。
下面我们来一帧一帧的分析一下:
首先能直观感受到的是画面“三维滚动”的实际效果，我觉得完全没有必要，甚至是违反规定的(在家开个玩笑，保证你在看就行)。在这本书里，如果去掉所有不必要的效果，做一个简洁的描述，会是一个非常好的想法。
其次，很有可能你会注意到，来浏览流的图片都是裁剪过的，而写作页里的都是原规格。这在实际应用中显然是不可行的。
第三，可以注意到顶部导航栏的logo连接的时间特别长。第一次看的时候感觉很好，但是看久了就会很烦。微交互应快速、简单、速率变化显著，最大延迟时间为300~400ms。
看完这个，我们再来讨论下底。这里两个标志没有分开出现，代表了不正确的互动叙事过程(不必要的注意)和理解时间的增加。
总结:
在动态设计方案时，将有许多这样的主要参数必须考虑在内。你需要确立哪些可以用，哪些不能用，哪些地方可以简洁明了，哪些地方不需要花费太多精力，并从中获得清晰实用的工作经验。这并不是说不能异想天开，加入一些有趣的细节。光说这种细节很可能会让整体看起来很累。
小贴士:
去掉不必要的部分。时刻提示自己。这种细节动态效果是维持了简单的微交互，还是让交互感觉更差？
关键词:抑制
二、不必为了更好地实际效果而放弃叙述叙事过程在客户体验中非常重要，部分原因是因为它关系到用户的估计，连贯的交互叙事过程不容易超出用户的认知负荷；一部分与每个人大脑收集和理解信息内容的一般方式有关。另外，跟人的思维方式也有关系。总之，交互地描述过程是很重要的。
SrikantShetty(一个健壮的动画设计师)的这本书给大家展示了一个非常“好”的例子。
看到这个动作，我先是觉得很诡异。我以为是在线框上输入文字，不知道d出了一个内置的输入框。这种点击-d出式的互动叙事过程挺烦的，可能是为了看起来酷吧。众所周知，这种互动的叙事过程，切断了人们键入信息内容时的估算过程。处理这样的事故，我们不得不放慢脚步，只有调整好自己的心态，才能真正重新 *** 作。
当室内设计师有了一定的“设计灵感”后，大多会设计出这种怪异的互动叙事过程。他们通常为了更好地展示天空的实际效果而花费一天中的大部分时间，但他们并不太关心交互的关键叙事过程。这样做实际上让交互过程看起来一团糟。
好的微互动叙事流程清晰流畅。看看下面的书，并与上面的书进行比较:
胜败立马揭晓，互动叙事过程非常简单当然。左侧的动态效果虽然有跳线的实际效果，但是有改善细节的实际效果，而不是蹒跚学步。
提示:保持互动叙述过程简单流畅。
关键词:互动叙事过程
三、动效假如不可以一步进行，那么就果断舍弃基本上所有优秀的微交互动态都是一步到位或者过程统一的，都不是很好，通常会被过于复杂的动态打败。
在这种情况下，RomainPasselande(他的Dribbble不一定要太牛逼)的动态效果让我“抖我的虎躯”。
不熟悉动漫的盆友很可能看不到我看到的东西。这个动画中有两个独立的姿势:平行线的变换和符号的旋转。其实这两个姿势可以合并成一个姿势，但不是那样的。罗曼把他们分开了。如果不明显，看一下这个前后对比:
上下两侧的动态效果是分开平行线变换和符号旋转两个姿势进行的，中间的动态效果是统一姿势进行的，既不复杂也不累。
提示:确保微互动的动态效果一步到位。如果有几种姿势是在不同的时间和地点进行的，果断放弃。
关键词:一步到位。
四、难题并不是出在动效上，只是在规划设计上受过UI细致动画训练的盆友很可能会深有感触:通常在静态数据样本做拆分细节姿态时会遇到困难。只要我们能理解，好的微交互设计方案都会有这样一个问题:很难精确到每一帧。殊不知，蛋糕的微交互设计方案更是让人不安。
下面的报告是我对设计方案和动态效果基础知识的总结。请作为参考。
一般来说，大家都会在更好的地方努力。1:00我用了紫色和粉色，让大家在着急的时候可以快速准确的定位到中后期的新项目。
接下来，我们跳出基础理论，来实践一下:如何拆分动态姿势。
这是萨姆·蒂博的一部充满活力的作品。作品中“加入购物车”按钮的意外变化及其外观的改变，填补了图片底部的空空缺，但显得多余，加重了用户的认知负荷。
在电影制作的过程中，有这样一个名字:如果有问题，那一定是台湾版的难题，台湾版的查高就是查高的电影，设计方案也是，就是查高的微互动。
提示:在挑起难题之前，确保你的设计没有问题。
关键词:不是动态效果的错。
五、不忽略一切一个细节"如果你不传球，你就会射不中。"这句话是韦恩·格雷兹基(冰球运动员)说的。很明显，他擅长避免碰撞和在冰上跳舞。仔细想想，用这句话来形容交互室内设计师的微交互设计方案是多么贴切:有很多细节。室内设计师大多不习惯设计300~400ms的动画，所以非常容易敷衍了事。
下面这本书是IvanBjelajac设计的，我在这本书里发现了五个可以改进的细节。
莱单按钮和返回按钮可以添加简单和优雅的收敛效果。Lai单按钮在网页上滑动的时候看起来不是很协调。
在淡黄色网格中缩放和旋转右箭头的实际效果是不必要的。那看起来怪怪的，应该会随着内容变化。
其实没必要淡化文章的正文和段落。
如果从左向右拖的话题在内容上淡入淡出，会比拖着淡出好很多。
当图片转换为顶部横幅时，人们的图片会被裁剪。如果图片在这里重建一下，配合内容就更好了。
和下面这些对细节严格管理的动态作品相差甚远。
提示:看细节的时候不能懈怠，不要什么都不管。
关键词:掌握细节
汇总在这里我想告诉你，即使你没有任何动画方面的经验，如果你始终牢记以下要点，你也可能做出一个精彩的微交互设计方案。
抑制
互动叙事过程
单步进度
不是动力故障。
掌握细节
虽然这不能保证你一定能做出强大的动态效果，但这是朝着正确方向迈出的一步。
由Willenskomer创作
口译员:埃里克
资料来源:Youshi.com
内容链接:http://www.uisdc.com/5-interaction-animation-skills
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）