设计师就业衔接班!45天 PS、AI、AE 从入门到入行 详情戳>>>
本文追根溯源,先从动效的起源讲起,一步步推进与产品、体验之间的关系,最后通过案例分析动效设计的原理和应用。一起来看看吧~
我们在进行设计的时候,往往遇到以下的场景:这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给用户,需要我们重新对信息进行组织分类,使信息能更高效有序地被用户认知。在进行信息设计的时候,我们会经常遇到「扁平化设计」这个词,在我的理解看来,扁平化设计可以理解为:「精简交互步骤,用户用最少的步骤就完成任务」。
迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则,是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion of Life》中提出来的观点(译者注:这本书在豆瓣的评分有9.3分,值得一看)。这些原则最初是用来为动画片这种传统的形式设计的,然而,这些原则也同样适用于 UI设计。
编者按:本文由负责Material Design 动效设计的谷歌设计师撰写,帮助大家深入理解动效的作用,才能做出更好的动效设计。有时候现代科技产物使用起来非常复杂,但是其实「复杂」本身没有好坏之分:不好是因为没有处理好这个复杂所以产生了「混乱」,所以应该被批评的不是复杂而是因复杂所产生的混乱。
动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更加清晰。
上篇内容回顾:《最全最好用的动效落地方法,都帮你总结好了(上)》接下来进入下篇。主题是:从 Web 前端的角度来讲,有哪些便捷的方法实现这些动效?
用户体验设计的发展日趋完善,优秀的动效是完善用户体验中不可或缺的一环,优秀的界面动态设计可以让产品的用户体验锦上添花……你会说,这些道理我都懂,但是动效做起来真的很麻烦啊。
本篇文章不长,但是干货满满,希望能给大家带来一些实际帮助。下面进入译文。
一、前言B类产品设计过程中会遇到各种各样的问题,不同问题有不同的解法。有的问题不适合用动效去解决,盲目无意义的动效不仅浪费设计师及开发成本,更会降低产品性能、分散用户操作注意力等。
本设计指南适用于UI界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率。一. 本指南的适用范围本指南适用于UI界面中交互微动效,属于功能性动效。
如何吸引用户注意力: 1.人性化:尽量不要传达系统消息感,可以考虑用人物对话等更有温度的形式来包装 2.个人IP:头像在互联网世界中,如同现实世界的名字一样,都是属于个人形象IP的一个标志,更容易被用户关注到
讲的非常好,很感谢,但是文章中有一点点小问题,比如说文章中有一处是长边完全显示,写成了短边完全显示,会加长阅读的时间。不过也无伤大雅,总之很感谢!
思路非常好,点个赞,现实很多设计师在设计中更多是在参考需求原型,而没有跳出原型去思考设计策略,所以当面试官问到这个问题的时候不知道怎么说。 文章最后给出的设计策略个人觉得还是并不能解决问题。对于商品交易,除非复购或者对此商品非常了解,缩短交易路径是可用的,但是这只能复盖很小一部分场景,缩短交易路径的方法并不是单纯地缩短操作路径,这是很多新手都会走的误区...
特意登录感谢无私的大神
受益匪浅,感谢作者分享,期待后续文章
如何吸引用户注意力: 1.人性化:尽量不要传达系统消息感,可以考虑用人物对话等更有温度的形式来包装 2.个人IP:头像在互联网世界中,如同现实世界的名字一样,都是属于个人形象IP的一个标志,更容易被用户关注到