1.缓动函数曲线(http://easings.net/zh-cn)

相关曲线截图
2.最新设计规范:IOS&Android
(http://www.shejidaren.com/examples/tools/chichun/ui-design-spec.html )

3.提升Web用户体验的71个设计要点(http://www.shejidaren.com/71-good-ui-tips.html)

3.交互动效5个避免(http://www.uisdc.com/5-interaction-animation-skills)
3.1、看在手绘板的份上,克制一下自己

1、首先能最直观的感受到的是图片的“3D翻动”效果,这在我看来是完全没必要的,甚至是违法的(开个玩笑,只是确保你还在看)。在这个作品中,如果把任何一个多余的动效去掉来简洁的表述的话会是一个不错的想法。
2、其次,你可能注意到了预览流中的图片是被裁剪过的,而在编辑界面中是原图尺寸。在实际应用中这显然是不可行的。
3、第三点,可以注意到顶部导航栏的图标过渡的时间特别特别地长。第一次看会觉得很棒,但是看久了就会很烦。微交互要迅速,要简洁,要有明显地速度变化,持续时间最多在300~400毫秒。
4、看完了这些之后,咱们再来看看底部,这里两个图标并不是同时出现,这意味着一个错误的交互叙述流程(多余地强调)和理解时间的延长。
总结:
动效设计时会有许许多多这样的参数需要考虑。你需要明确哪些可以用、哪些不可以用、哪里可以再简短、哪里不用花太多精力,并从中获取清晰易用的经验。这并不是说你不能天马行空加上一些有趣的细节,只是说这些细节可能会让整体显得很累赘。
小技巧:
去掉多余的部分。时刻提醒自己这些细节动效是不是保持了简洁的微交互,还是让交互体验变糟了?
3.2、不要为了效果而牺牲叙述

看到这个动效的第一感觉是不是很诡异,以为是在线条上输入文字,然而却弹出了一个隐藏式的文本框。这种点按-弹出-输入的交互叙述流程挺让人心烦的,或许是想看上去酷炫一点吧。然而这种交互叙述流程打断了我们输入信息时的预期流程。我们不得不停下来去面对这样的意外,调整好心态后才能继续操作。
当设计师有所“灵感”的时候多半会设计出这种诡异的交互叙述流程。他们往往会为了吊炸天的效果下半天功夫,对交互的核心叙述流程却不怎么在意。这么做事实上让交互流程看上去像是一团糟。
好的微交互的叙述流程是清晰且顺畅的,看看下面的作品,顺便和上面这幅做个对比:

高下立现,交互叙述流程非常的简洁和自然。虽然左边的动效有一个线框弹跳的效果,它却起到了细节优化的效果,而不是画蛇添足。
小技巧:
保持交互叙述流程的简洁和顺畅。
关键词:
交互叙述流程
网友评论