快捷搜索:  汽车  科技

ui设计师动效入门指南(动效-给UI设计加点料)

ui设计师动效入门指南(动效-给UI设计加点料)我打开好奇心日报,随便点击一篇文章,2G网速度,让LOGO加载动画播了好几轮。他说,广告不算。他的这种“开发至上”,猛然一听,有道理。但事实真的如此吗?我打开了支付宝,首页的广告banner在轮播。

有趣,好玩,有用,投入一点在动效上,回报或许比期待的要多。

为什么UI设计会有动效

前两天,我去找鳄鱼讨教如何0基础学开发。

一言不合,他就问了我一个很尖锐的问题:鸡叔,APP没有动效,就真的不行吗?我把功能实现了就好啊。

他的这种“开发至上”,猛然一听,有道理。

但事实真的如此吗?

我打开了支付宝,首页的广告banner在轮播。

他说,广告不算。

我打开好奇心日报,随便点击一篇文章,2G网速度,让LOGO加载动画播了好几轮。

他说,加载动画不算。

OK,我又打开陌陌,进入陌陌的新功能“点点”,各种滑动,美女乱飞,聊天气泡和橡皮筋一样被拉断。

他说,行吧,看来还是有用。

约炮神器就是有说服力!

其实“开发至上”固然重要,毕竟没有开发者们的支持,我们这些设计师们的确啥都干不成。

UI设计

动效与用户体验

动效,Motion也好,Animation也罢,无所谓了,大家随便叫。

说起动效,我们就会很自然的联想到一些词组:空间与时间,功能/意义/美观的结合,平滑,过度等等。

所以说其实动效/动画还是个挺大的概念,而我们在UI设计方面需要使用的,只是其中的一小部分。

如果你能合理的利用这些设计元素,就可以提升用户体验。

今天我不介绍工具,不写代码教程,咱们来谈点形而上的东西:

比如,动效是如何提升用户体验的,我们要注意什么。

基于设计而动

动效就是在给用户讲故事。它需要告诉用户,我们的产品是如何构架的,有什么作用。

有了动效之后,整个UI界面就活了,可以导航,可以交互,可以让用户更好更深的去体验你的产品。

当你在点击按钮触碰屏幕的时候,精心设计过的动效就会带着你,了解关于产品设计的一切故事。cool。

ui设计师动效入门指南(动效-给UI设计加点料)(1)

UI设计

为什么动效开始变得重要

当用户开始接触你的产品时,他们可能会问出一连串的问题:

· 什么是主要功能的?

· 我怎么才能进行下一步操作?

· 我如何才算是完成自己的操作?

面对这一类问题,正好给了动效施展拳脚的机会,回答用户问题的同时,提升用户体验。

· 动效可以吸引和暗示用户,从而让他们知道,那些很重要,自己的操作会带来怎样的结果。

比如,微信右上角弹红圈,你就知道有人在呼唤你。

· 动效也可以帮你熟悉用户界面,在视图切换的过程中,提供视觉引导,提示人们操作完成。

比如,A页面进入B页面,有了动效的帮助,你就很快的会知道,如何从B页面返回A页面

· 动效可以满足人们的视觉需求。

动效设计和用户体验,需要注意的小环节

动效的存在,使得交互变得更好用,更易懂。我们在已有设计元素的基础上,可以做出更多的设计,比如变换,人物动画,甚至一些3D效果。

动效设计的重点在于:不要做一些特别奇怪的东西,分散了用户的注意力,导致用户中断了他们想做的事情。

体验一、吸引用户的注意力

动效既可以将用户的注意力吸引到某一个区域,也可以扰乱用户关注,让用户注意其他地方。

好的动效设计,会使得用户界面变得可预测,易导航。

使用者们将会知道,那些元素会出现,哪些元素会消失,即将发生那些事情。

ui设计师动效入门指南(动效-给UI设计加点料)(2)

UI设计

本图来自追波,你会发现你的注意很快被吸走了对吧?

体验二、感知,空间,逻辑

在用户界面的状态切换这个环节上,很多时候我们会使用系统默认的,瞬切的方式,直接进行页面切换。

这的确在开发上省了事,但却会造成使用者,在认知流程方面出现困难。

比如点击A按钮,A界面从左到右划出。点击B界面,A界面从又到左归位。

这样大家就很容易感知。

如果都是瞬切,就没那么容易形成认知流程。认知学上管这个叫——变化盲区,即视觉上突然出现强刺激的时候,人们是无法进行分析的。因为真实生活里几乎不存在,瞬切状态。

举例来说:一个按钮突然消失,一个按钮突然出现。这就是瞬切。

我相信大家都有过类似的经历:打开一个新界面,发现某个按钮A没了,于是开始寻找按钮A。

变化盲区了吧?

用户是需要了解,元素从哪里来,会在哪消失,瞬切就不是个好选择了,对吧。

动效可以对屏幕和元素之间的空间关系做出解释,从而填补认知上的空白。它可以帮助人们熟悉用户界面,

定义自身状态,建立视觉关系。在下面的示例中,在过渡期间,用户将被引导到下一个视图,并将表面转换为通信层次结构:

ui设计师动效入门指南(动效-给UI设计加点料)(3)

UI设计

本图来自追波,登陆与转化的关系,动态协助一举完成。不过开发者很难写出来。

体验三、增强操作性和预见性

动效可以加强操作的可预见性。每一个按钮和每次触屏,都有可能用到动效。

让动态设计和视觉设计互相辉映,提升用户参与度和乐趣性。

比如,我们来看看IOS是如何做出错误提示的:

ui设计师动效入门指南(动效-给UI设计加点料)(4)

UI设计

乍看,这个摇晃的错误提示动画,似乎要比显示Passward Error来的麻烦。

但实际上呢?当晃动一出现,我们 立刻就知道,密码输错了,了解到问题所在。

于是,我们会认真的输入密码,避免下次的错误。

体验四、愉悦用户

动效可以让你的用户体验真正令人愉快甚至是难忘。

作为一个设计师,你应该将自己的一些理念融入设计之中,使你的动效设计独具一格,让人过目难忘。

如果你能将你的理念,注入微妙的动效到设计中,你可以让用户觉得他们是在用一个非常有个性的产品!

ui设计师动效入门指南(动效-给UI设计加点料)(5)

UI设计

结语

其实动效还是蛮有用的,当然这对开发者而言也是个挺头疼的事情。

所以啦,大家有空可以学学开发,提升自己,帮助他人。

如果我们能够做出有趣而符合逻辑的动效,产品体验固然会提升。用户就不会抱怨页面设计呆板,产品体验 过程枯燥了。

给动效一些投入,或许会有更多的惊喜。

猜您喜欢: