美文网首页
UI设计的未来属于动效设计

UI设计的未来属于动效设计

作者: Charles_UI | 来源:发表于2017-01-09 22:38 被阅读171次

    你有没有注意到,动效设计这几年如雨后春笋般的流行起来?无论是大公司还是小公司都会专门聘请专门的动效设计师,而Google最近就I/O大会上概述了Google产品线上对于产品的标准化动效语言的规范。

    动效就是讲故事

    那么在动效设计中什么才是重要的,以及为什么它可以带来那么大的效果,首先要说明的是,动效是可以讲故事的。在一个app中的每个组成部分串联起就是一个个的序列号,而动效设计就可以很好的引导用户。对于每个按钮的点击和屏幕的转场,都是下一个故事的开始,例如,我们可以通过下面的案例看到,动效是如何帮助创建和删除项目的。

    当删除一个项目时,会引起一系列的连锁反应,以及错误的操作。因此就需要对此作出相应的反应,不要让这个选项的消失那么僵硬,例如我们关闭屏幕或返回到主界面的时候,会变成一些碎片化的数字。

    创建一个界面时,应该尽量的生动一些,毕竟我们花了时间来做的。我们可以在屏幕上使用缓动或是反弹的效果,但是注意不要太过了,只有最为精巧细致的动效是最打动用户的。

    那么在动效设计中有些元件应该做出多大程度的反弹效果是比较理想的呢?在屏幕上的距离是多大呢?由此,动效就像在设计一个接口,变的越来越重要了,并且开始驱动整个UI。所以,我们可以想象到Facebook的设计师在做iOS版本的时候全部是静态的界面布局,那么看起来会是多么的蹩脚呀。而事实上,Facebook的每个动效都是一个接口,链接着所有的组件,形成一个有效运行的整体,所以动效就是UI。

    加强空间之间的衔接关系

    每个app的每个页面就是一个家,而家里面就有空间,可以使用户在任何时间灵活的调用这些控件,如果从屏幕的飞出来一张幻灯片,然后它会从屏幕的底部返回吗?或者是已经删除?就拿下面的例子而言,在iOS的博客app中,左边的展示了底部“正在播放”向上翻页的效果,然后从屏幕的底部消失,要弹出时,会再次从底部飞出。

    是不是感觉到相当的混乱?现在比较在几个星期前更新后的动效,保持了弹出和消失的一致性,很连贯。我们可以很明确的知道界面的生动性,以及表现出来的位置。使得用户在需要使用时,可以很容易找到它。

    动效的确认

    动效可以加强用户对于预操作的形成,当需要删除一个对象时,它会变的模糊,并变小形成“飞入到界面的底部”的假象,这个效果就是表示app已经被删除了。就像发送email一样,点击发送按钮之后,会飞向屏幕的顶部逐渐消失。

    对于密码的输入,也可以结合动效提高效率,如果输入的密码是一个简单的“点”,并逐渐向后出现,而水平的震动可以表示密码错误时的状态,这些动效手势可以很清楚的辨认,而且已经成为主流反馈信息来确认操作,当“密码不正确”的时候可以有适当的动效提示。因此,在有些情况下,我们完全可以脱离文字注释,而是依靠简单的动效来达到更好的效果,给予用户反馈。

    延迟动效:可感知的隐藏

    当需要加载一些资料时,用户不会忽略这段等待的时间,而我们可以通过一些动效轻松掩盖这种延迟,因此被称为延迟动效,或是加载动效。当我们从网上下载一些音频文件时,总是会有延迟卡顿。

    取而代之的是,我们可以在已经选择的播放icon上,体现出一些加载顺序,创造一个简单的动效,来过渡这种卡顿暂停的icon。如果这段时间文件出现卡顿,用户也不会发现加载的延迟。所以它可以短暂的分散用户的注意力,而忽视后台的一些工作。所以,动效可以避免将真实的负荷卡顿呈现出来,使得用户感觉到我们的app似乎运行的很快。

    创建一种动效语言

    为app创建一种动效语音将会强化我们的品牌,并且很有个性。它可以是有弹性的和充满乐趣的,也可以是安全稳重,灵活和专业严肃,这些动效都会对我们的设计和品牌产生很好的联动效应。并且可以使得app不至于看上去千篇一律的陷阱,因为很多时候它们看起来就是一样的。

    值得肯定的是,在我们下一次起草界面的时候,请使用到动效。动效是很强大的设计工具,能轻松自然的引导用户,以及在看似单调的操作中产生一下惊喜,就像输入密码时或是列表的滚动时。我们在解锁自己iPhone时,或短信滚动读取时是有什么样的动效?可能自己都没有感知到,但是它们是真实存在的。所以用户能很流畅的通过触摸与界面进行互动,愉快的完成一些操作和事项。

    作者:Craig Dehner

    https://blog.prototypr.io/motion-design-is-the-future-of-ui-fc83ce55c02f#.6vi5wi1ba

    相关文章

      网友评论

          本文标题:UI设计的未来属于动效设计

          本文链接:https://www.haomeiwen.com/subject/omohbttx.html