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

你有没有注意到,动效设计这几年如雨后春笋般的流行起来?无论是大公司还是小公司都会专门聘请专门的动效设计师,而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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,302评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,232评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,337评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,977评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,920评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,194评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,638评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,319评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,455评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,379评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,426评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,106评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,696评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,786评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,996评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,467评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,043评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,280评论 25 707
  • 迷于设计,沉于动效。由于笔者对动效交互很感兴趣,遂著此文。希望能对大家有一点帮助。动图较多,建议 Wifi 下浏览...
    求愚阅读 3,450评论 0 29
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,982评论 4 60
  • 一直想去一个遥远的地方,陌生的人,陌生的旅途,心的洗礼。
    羊咩咩的碎碎念阅读 309评论 0 0
  • 1感赏今天老公帮我一起收拾房子,一起干活还是轻松多了,有这么一个勤快肯付出的老公真的是我的福气,再婚能吸引到这样贴...
    唐春娥_中阅读 269评论 0 2