提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
动画会讲故事,会讲一些简单而不复杂的故事。例如:“嗨,看这里”或者“好了,你可以走了”之类。总之,动画的目的不是为了娱乐用户,而是帮助他们了解发生了什么,或者如何有效的使用应用程序。Zurb’s的话很好的解释了这一切:
我们不再只是设计静态的屏幕。我们设计用户如果通过屏幕查看内容。
动画可用于各种尺寸和背景,以统一美感和功能:他可以影响操作,连接各种状态,引导用户视线以及帮助用户查看操作结果。接下来简单举例,告诉你哪些地方可以通过使用动画来提升用户体验:
1、等待依旧,厌烦不再
如果你不能缩短等待的时长,你可以让等待变得愉快。这时你可以使用动画来代替烦人的旋转加载指示器(基本上只是提醒用户他们需要等待)。几乎任何网站或者应用都可在加载时使用加载占位图(skeleton screen)和微动画来吸引用户注意。
2、状态切换,拒绝生硬
动画可以使过渡更自然,这样就能清晰的表明发展经过。一个好的过渡动画能很好的引导用户的注意力。
Adrian Zumbrunnen有了个很好的例子,展示滚动动画在点击链接时如何保持上下文之间的关联。只需要对比这种生硬的静态变化:
与自然的过渡动画:
你就会发现,过渡动画能帮助用户了解界面的节奏与流程。这也有助于引导用户进行下一步的交互。
3、展示变化,连接上下
动画可以提升直接操作感。
Ps:直接操作(direct manipulation)-源自计算机科学。指的是对可视化对象进行直接的操作,如点击、拖拽等。与之对应的操作有命令操作,比如DOS。
举例来说,菜单图标可以平滑地转换到回放控件,并能再变回来。这种效果既告知用户按钮的功能,又为交互添加了一种奇妙的色彩。播放与暂停按钮的相互变化表明他们俩是相互关联的,并且不能同时存在。
另一个例子,当点击浮动动作按钮时,加号按钮变为书写按钮。这表明“编辑”是主要操作。如此小的细节意味着必须猜测接下来会发生什么,以及了解图标在这两种状态下的含义。
4、错误提醒、突出显示
动画可以强化用户正在执行的动作。
例如,表单输入可以通过一些动画得到极大的增强。如果表单中输入的数据是正确的,那么在确认是会展示一个“点头”动画。输入错误时可以使用一个横向抖动的效果表示。当用户看到动画时,他们能立即理解动画的含义。
5、操作完成,反馈提醒
通过动画用户可以想象到自己操作的结果。
遵循“show,don’t tell”的原则,您可以使用动画反馈来显示已经完成的工作。
在以下条带的示例中,当用户单击“付款”时,一个加载器会在应用程序显示成功状态之前短暂出现。复选标记动画使用户感觉他们轻松地完成了付款,用户确实欣赏这些重要的细节。
结论
当以一种复杂的方式使用动画时,它是强大的。真正重要的是要花时间去考虑什么时候动画是合适的,什么时候不合适。我们需要从一开始就考虑动画展示,并将其视为我们设计的自然组成部分,因为设计不仅仅是视觉呈现。就像乔帮主说的:
设计并不仅仅是它看起来怎么样 或者感觉怎么样,设计是如何让它运作。
感谢观看!!!
硬广:烦请喜欢我搬运的文章的朋友去浏览一下我的个人网站UxBooks,增加点点击量。能浏览几页而不是进入首页就退出那就更感谢
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册