看完上千个交互设计神作后，我总结了这5个设计技巧，免费赠你( 二 ) _交互设计

文章插图
当设计师有所“灵感”的时候多半会设计出这种诡异的交互叙述流程。他们往往会为了吊炸天的效果下半天功夫，对交互的核心叙述流程却不怎么在意。这么做事实上让交互流程看上去像是一团糟。
好的微交互的叙述流程是清晰且顺畅的，看看下面的作品，顺便和上面这幅做个对比：
高下立现，交互叙述流程非常的简洁和自然。虽然左边的动效有一个线框弹跳的效果，它却起到了细节优化的效果，而不是画蛇添足。
小技巧：
保持交互叙述流程的简洁和顺畅。
关键词：
交互叙述流程
三、动效如果不能一步完成，那就干脆放弃
几乎所有出彩的微交互的动效都是一步到位或是步骤统一，那些不是很好的往往败在了过于复杂的动效上。
在这个例子中，（他的不要太屌）的动效让我“虎躯一震” 。
不太熟悉动画的朋友可能看不到我所看到的内容。这幅动效中有两个单独的动作：直线的转换和图标的旋转。这两个动作实际上可以合并为一个动作，然而实际上并没有这样，把他们分开了。如果看的不是很明显，那么看一下这张对比图：
花了 7 天看了上千个交互动效神作，我总结出 5 个技巧
左右两边的动效就是把直线的转换和图标的旋转这两个动作分开进行的，中间的动效则是用一个动作整齐划一的完成，既不繁琐也不累赘。
小技巧：
确保微交互的动效是一步完成的，如果有多个动作在不同时间和位置进行，那么干脆放弃吧。
关键词：
一步完成
四、问题不是出在动效上，而是在设计规划上
学习过 UI 精细动画的朋友可能深有体会：在静态样本做成拆分细节动作的时候往往会遇到困难。这个可以理解，好的微交互设计都会有这样的问题：把动作精确到每一帧非常难。然而糟糕的微交互设计让人更糟心。
下面这张表格是我对设计和动效的理论知识的总结归纳，你们拿去当做参考好了。
一般来说，大家都会往点点的位置努力。点点我用了紫粉色好让大家在项目中期赶时间的时候快速定位。

文章插图
接下来让我们跳出理论进入实践：如何拆分动效的动作。
这是由 Sam完成的动效作品，作品中“加入购物车”（add to cart）按钮那令人费解的转换和形状的改变填充了图片下方的空白，然而这显得很多余，也加重了使用者的认知负荷。
在影片制作过程中有这样一个说法：如果有问题那一定是剧本出了问题，糟糕的剧本就是糟糕的电影，设计也是如此，糟糕的设计就是糟糕的微交互。
小技巧：
在你挑动效的问题之前先确保你的设计没有问题。
关键词：
不是动效的错
五、不遗漏任何一个细节
“你不接球的话一定会错过射门。”这话是 Wayne （冰球运动员）说的。显然他很擅长躲避着撞击的同时在冰面上翩翩起舞。仔细想想，用这话形容交互设计师进行微交互设计的时候是多么贴切：有太多太多细节了。大部分设计师并不是很习惯设计300~400毫秒的动画，所以很容易敷衍了事。
下面这个作品由 Ivan设计，在这作品中我发现有5个细节还可以优化一下。