花了7天看了上千个交互动效神作,我总结出5个技巧

对一个全无经验的动效新手而言,如何制作出「正确」而不是「华丽」的动效?今天这篇Medium 上的好文,从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个方面,附上案例分析,帮你学会基础的动画制作技巧。


对一个全无经验的动效新手而言,如何制作出「正确」而不是「华丽」的动效?今天这篇Medium 上的好文,从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个方面,附上案例分析,帮你学会基础的动画制作技巧。

花了7天看了上千个交互动效神作,我总结出5个技巧

首先,我想大家会有这样的问题:什么是微交互 (micro-interaction)?

来自 UXPin(一款在线可交互原型制作工具)的 Carrie Cousins 给出了如下定义:“微交互是在交互设备上的单一交互流程的细节优化。”

可能不是太容易理解,那就多看几遍吧。

在进入正题之前,有一点我要先声明一下,接下来我要分析的 UI 动效都是出自非常牛逼的大神之手。我非常尊敬他们和他们的作品,他们非常乐意分享他们的经验和未完成的稿件。不过在我分析作品的时候不少设计师的态度都非常差。这可不是我的风格。我都是用严肃的眼光去看待设计的,但是会用娱乐性的方式表达我的观点。如果我碰巧说了些不中听的话,还请多多包涵。

让我们开始吧!

一、看在手绘板的份上,克制一下自己

设计师就像一朵含苞待放的花儿一样需要精(Jin)心(Qian)的照顾和呵护,但在设计高质量的微交互时,在你完稿前都充满着摧残。

动效设计是个尝试新想法并验收成果的好途径。下面这个作品出自 Sergey Valiukh(一位在字型、排版、色彩以及动效方面特别牛逼的人)之手,一起来看看。

花了7天看了上千个交互动效神作,我总结出5个技巧

下面我们一帧一帧地来分析:

  1. 首先能最直观的感受到的是图片的“3D翻动”效果,这在我看来是完全没必要的,甚至是违法的(开个玩笑,只是确保你还在看)。在这个作品中,如果把任何一个多余的动效去掉来简洁的表述的话会是一个不错的想法。
  2. 其次,你可能注意到了预览流中的图片是被裁剪过的,而在编辑界面中是原图尺寸。在实际应用中这显然是不可行的。
  3. 第三点,可以注意到顶部导航栏的图标过渡的时间特别特别地长。第一次看会觉得很棒,但是看久了就会很烦。微交互要迅速,要简洁,要有明显地速度变化,持续时间最多在300~400毫秒。
  4. 看完了这些之后,咱们再来看看底部,这里两个图标并不是同时出现,这意味着一个错误的交互叙述流程(多余地强调)和理解时间的延长。

总结:

动效设计时会有许许多多这样的参数需要考虑。你需要明确哪些可以用、哪些不可以用、哪里可以再简短、哪里不用花太多精力,并从中获取清晰易用的经验。这并不是说你不能天马行空加上一些有趣的细节,只是说这些细节可能会让整体显得很累赘。

小技巧:

去掉多余的部分。时刻提醒自己这些细节动效是不是保持了简洁的微交互,还是让交互体验变糟了?

关键词:克制

二、不要为了效果而牺牲叙述

交互叙述流程(narrative)在用户体验中非常重要,一部分是因为这与使用者的预期相关,连贯的交互叙述流程不会超出使用者的认知负荷;另一部分是因为这与我们大脑收集和理解信息大致模式相关。此外这还与我们的心智模式有关联。总之,交互叙述流程很重要。

SrikantShetty(一位强壮的动画设计师)的这个作品为我们呈现了一个非常“好”的例子。

花了7天看了上千个交互动效神作,我总结出5个技巧

看到这个动效的第一感觉是不是很诡异,以为是在线条上输入文字,然而却弹出了一个隐藏式的文本框。这种点按-弹出-输入的交互叙述流程挺让人心烦的,或许是想看上去酷炫一点吧。然而这种交互叙述流程打断了我们输入信息时的预期流程。我们不得不停下来去面对这样的意外,调整好心态后才能继续操作。

当设计师有所“灵感”的时候多半会设计出这种诡异的交互叙述流程。他们往往会为了吊炸天的效果下半天功夫,对交互的核心叙述流程却不怎么在意。这么做事实上让交互流程看上去像是一团糟。

好的微交互的叙述流程是清晰且顺畅的,看看下面的作品,顺便和上面这幅做个对比:

花了7天看了上千个交互动效神作,我总结出5个技巧

高下立现,交互叙述流程非常的简洁和自然。虽然左边的动效有一个线框弹跳的效果,它却起到了细节优化的效果,而不是画蛇添足。

小技巧:保持交互叙述流程的简洁和顺畅。

关键词:交互叙述流程

三、动效如果不能一步完成,那就干脆放弃

几乎所有出彩的微交互的动效都是一步到位或是步骤统一,那些不是很好的往往败在了过于复杂的动效上。

在这个例子中,Romain Passelande(他的 Dribbble 不要太屌)的动效让我“虎躯一震”。

花了7天看了上千个交互动效神作,我总结出5个技巧

不太熟悉动画的朋友可能看不到我所看到的内容。这幅动效中有两个单独的动作:直线的转换和图标的旋转。这两个动作实际上可以合并为一个动作,然而实际上并没有这样,Romain把他们分开了。如果看的不是很明显,那么看一下这张对比图:

花了7天看了上千个交互动效神作,我总结出5个技巧

左右两边的动效就是把直线的转换和图标的旋转这两个动作分开进行的,中间的动效则是用一个动作整齐划一的完成,既不繁琐也不累赘。

小技巧:确保微交互的动效是一步完成的,如果有多个动作在不同时间和位置进行,那么干脆放弃吧。

关键词:一步完成。

四、问题不是出在动效上,而是在设计规划上

学习过 UI 精细动画的朋友可能深有体会:在静态样本做成拆分细节动作的时候往往会遇到困难。这个可以理解,好的微交互设计都会有这样的问题:把动作精确到每一帧非常难。然而糟糕的微交互设计让人更糟心。

下面这张表格是我对设计和动效的理论知识的总结归纳,你们拿去当做参考好了。

花了7天看了上千个交互动效神作,我总结出5个技巧

一般来说,大家都会往点点的位置努力。点点我用了紫粉色好让大家在项目中期赶时间的时候快速定位。

接下来让我们跳出理论进入实践:如何拆分动效的动作。

花了7天看了上千个交互动效神作,我总结出5个技巧

这是由 Sam Thibault 完成的动效作品,作品中“加入购物车”(add to cart)按钮那令人费解的转换和形状的改变填充了图片下方的空白,然而这显得很多余,也加重了使用者的认知负荷。

在影片制作过程中有这样一个说法:如果有问题那一定是剧本出了问题,糟糕的剧本就是糟糕的电影,设计也是如此,糟糕的设计就是糟糕的微交互。

小技巧:在你挑动效的问题之前先确保你的设计没有问题。

关键词:不是动效的错

五、不遗漏任何一个细节

“你不接球的话一定会错过射门。”这话是 Wayne Gretzky(冰球运动员)说的。显然他很擅长躲避着撞击的同时在冰面上翩翩起舞。仔细想想,用这话形容交互设计师进行微交互设计的时候是多么贴切:有太多太多细节了。大部分设计师并不是很习惯设计300~400毫秒的动画,所以很容易敷衍了事。

下面这个作品由 Ivan Bjelajac 设计,在这作品中我发现有5个细节还可以优化一下。

花了7天看了上千个交互动效神作,我总结出5个技巧

  1. 菜单按钮和返回按钮可以添加简洁优雅的过渡动效,菜单按钮随页面上滑显得不是很协调。
  2. 黄色方块的右箭头的缩放旋转效果不是很必要。这样看上去有些奇怪,它应该随着内容进行转变。
  3. 渐隐渐出的正文段落其实没有必要。
  4. 从左向右滑动的标题如果是从内容上淡入淡出的话会比滑动渐隐要好很多。
  5. 在图片转换为顶部横幅的时候人物照片被裁剪了。这里如果将图片重构一下与内容相呼应会更好一些。

和下面的对细节严格要求的动效作品相比简直是天壤之别。

花了7天看了上千个交互动效神作,我总结出5个技巧

小技巧:对待细节不能松懈,不遗漏任何一个细节。

关键词:把握细节

总结

这里我想说就算你没有任何动画经验,只要时刻记住下面这些要点,你也有可能制作出精美绝伦的微交互设计。

  • 克制
  • 交互叙述流程
  • 一步完成
  • 不是动效的错
  • 把握细节

尽管这不能保证你一定能做出牛逼的动效,但这是迈向正确的方向。

 

作者:Willenskomer

译者:Eric

来源:优设网

文章链接:http://www.uisdc.com/5-interaction-animation-skills

版权:人人都是产品经理遵循行业规范,任何转载的稿件都会明确标注作者和来源,若标注有误,请联系主编QQ:419297645

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28835/

(0)
CatherineCatherine
上一篇 2017-05-22 07:45
下一篇 2017-05-22 09:33

相关推荐

  • 用户体验设计(UED)内功心法开山篇(附案例研究)

    何为UED?在产品定义阶段,它是一种关乎如何解决问题的思维模式,在产品迭代期,它又是一种关乎如何思辨方案真实体验水平的科学验证。更具体一点,到底是什么样的思维模式和科学验证,近一年的时间我们通过大量案例逐渐将其解构出来,并将导图成“UED内功心法”,期望能够帮助交互设计师在具体实操过程中有的放矢,更有针对性地发挥设计的价值。

    2017-04-29
  • 这3种移动端登录的交互方式,孰优孰劣?

    登录注册的界面看起来很简单,在交互上却有很多值得思考的地方。现在我们选以下三种较有代表性的登录方式来比较和小结一下。

    2017-05-26
  • APPLE WATCH 中文手册:Watch APPS-文本和标签、Watch APPS-图片

    文本和分类标签 为了在Watch app中展示文本,使用标签对象。分类标签支持格式化的文本,可以在运行时被程序修改。 要添加标签到界面控制器,可以把它拖到对应的故事版场景(storyboard),在这里指定标签的初始文本…

    2015-06-15
  • iOS 9人机界面指南(三):iOS 技术 (中)

    文章索引译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

    2017-05-29
  • Google如何从两方面正确简化产品?

    来源:优设网 作者:王笑Nothing编译   很多设计师同学为了适应简约的潮流,在简化产品方面绞尽脑汁,但简化不是两个不要:这个不要,那个也不要,简化是一个细心活。今天教同学们简化双板斧:重点是什么,何时简…

    2014-09-21
  • 交互设计相关岗位-用户研究(实习)——杭州海康威视

    杭州海康威视招聘 用户研究(实习)    职位要求: 1、人机交互、认知心理学、计算机、设计艺术或相关专业研究生在读。 2、熟悉研究方法论,熟悉一般研究步骤,了解各种研究方法,有坚实的统计和数据分析基础 3、较…

    交互设计招聘 2018-03-13
  • 用户体验 | 远大车用肺保一键清新,自由呼吸

    随着人们生活水平的不断提高,家用汽车已经成为大家的出门代步工具,开车上下班、旅游、走亲访友,基本上每天在车内都会呆上几个小时。汽车看似密闭的空气,但是由于交通的拥堵,车内空气不流通,空气质量越来越差,就会出现头晕、胸闷、咳嗽等症状,从这之后我也一直在关注着车载空气净化器设备。之前购买过一款车载净化器,但是效果不大,就一直在车内处于吃灰状态,今天我要和大家说的这款远大车用肺保FC3。是一款采用H13级别超大面积的PTFE超级过滤器,可以9...

    2018-02-02
  • Axure做的APP原型,在手机上怎么预览

    自学Axure,在各大网站查询,终于从小白到学会做基本的交互,再到能在APP端预览自己做好的原型。下面就说一下Axure做的APP原型,在手机上怎么预览?(以苹果手机为例)1原型制作好之后,点击发布→“预览选项”→配置→移动设备,导入做好的图标。2点击发布,“发布到AxShare”。3复制链接,将该链接发送到手机上并使用Safari打开。4粘贴并前往,将原型界面打开。5点击底部工具栏。6选择“添加到主屏幕”。7编辑名称→点击添加。8然后...

    2018-03-18
  • 进入第四个模块——用户体验。

    之前三个模块,我们希望解决的问题是你能够情绪纠偏、认知纠偏,不再只从原生感受上来看问题。接着我们讲的是建设系统的能力的用户体验。厚积薄发,“厚积”是系统能力,“薄发”是表面的呈现,就是用户体验。同维度竞争的时候,用户体验更是最核心的竞争力。用户体验第一课用户体验的五层要素《用户体验要素》这本书里提到:“用户体验的要素,来自5个层次的层层选择与叠加建设。”这五层分别是:感知层;角色框架层;资源结构层;能力圈范围层;战略存在层。1、最核心的...

    2018-02-05
  • 用户体验是家电实体店独享红利

    不可盲目自信,也不能过度自卑。对于众多的家电实体店来说,满足用户的体验、持续带来新的用户体验,是应对一切外来不利因素挑战和冲击的最大筹码,也是生存的底线。蔓欣||撰稿现在,主题乐园正成为现在人们选择度假的方式,在春节旅游大报告中,上海迪士尼赫然位于“最热门景点”第四,而其他像常州中华恐龙园、顺德长鹿农庄、上海长风海洋世界、武汉欢乐谷等也是今年春节期间最热门的主题公园。尽管,现在基本上所有的购物、娱乐和消费,都可以在线上解决。但是,更多的...

    2018-03-09