设计师需要学会设计有意义的动效

   关于动效设计,我们探讨过很多次。直到现在,我们越来越清楚地意识到,动效设计已经无处不在,已经成为了设计师们必须掌控的一个重要技能。参加过今年的Google I/O大会之后,设计师Paul Stamatiou 也充分认识到这一点,并撰写了这篇博客。这篇文章是一支号角,动效设计在过去还是趋势,但是从此刻开始,它成为了我们必将面对的新阵地。

  在今年的Google I/O大会上,我参加了一个小的讨论小组,一同探讨跨平台设计所面临的挑战。这次讨论的内容信息量非常大,就像第一次去拉斯维加斯的那种目不暇接的感觉。这次Google对Android上进行了许多令人振奋的改进,比如电池省电模式和全新的锁屏通知,许多设计比之前的第三方插件都要来的优秀。

  动效才是The Next Big Thing

  Android 更多的衍生版也在这次的I/O大会上发布,Android Wear、Android Auto 以及 Android TV,从此之后当你再聊起Android的时候,就不仅仅意味着智能手机和平板了——你还需要考虑汽车和可穿戴设备。

  “如果设计没有限制,那就不是设计,而是艺术了。” —— Android 设计主管 Matias Duarte

  随着Android和其他的Google系产品逐渐进入越来越多的领域,这也使得Google越来越有必要后退一步,全面地审视自己现有的设计。重新思考之后创造出的设计语言,就是Material Design。这种高屋建瓴的设计语言规定了一整套设计框架,在此框架内基于Android来设计程序的时候,Google和其他的设计团队可以更容易地做设计决策。

  但是,如果你仔细审视这次Google I/O大会的话,你会发现Android 5.0 和 Material Design并不是重点。谷歌通过这次大会隐晦地告诉世界,动效设计正在成为移动端软件设计中一种极为重要的、非常必要的组成要素。在Google I/O大会的每一个环节,动效设计都会被提及、探讨,也成为了开发的重点。


  一年前,在我的的草稿中还有一篇写了一半的文章,名为“完成工作所需的正确工具”。这篇文章主要介绍的设计过程中所必须的工具,以及如何借助它们更为有效地传达全部的设计意图。比如使用After Effects、Quartz Composer 来制作转场动效,使用HTML/CSS/JS来构建原型并且使用移动设备来进行交互。

  当Facebook的设计团队在设计流程中使用Quartz Composer设计首页的时候 ,曾经提到:

  “QC不仅让工程师的工作更加容易,也使得设计可以更容易呈现故事。所以,当你查看一个逼真、精心处理、可交互的Demo的时候,你可以立刻明白它是如何运作的……” ——Facebook 设计总监 Julie Zhou

  无割裂的体验

  虽然我并没有深入探究Material Design的动效设计中错综复杂的设定,但是它的特征依然非常鲜明:可信而真实的动效,响应式的互动,充满意味的过度,令人愉悦的细节。掌握好这些特征之后,再深入探究。

  “精心编排的动效设计能更为有效地吸引用户的注意力,并让用户专注于操作不同的步骤,经历不同的流程;有意味的动效设计能在界面变化、元素重新排列过程中,让整体体验更好。”

  动效可以也应该超越单纯的打磨优化。动效以一种全新的方式来呈现界面的个性,教育用户如何同特定的元素进行交互,构建用户于界面之间的独特关系。

  当整个界面随着用户的需求进行变化的时候,用户会下意识查看所有的转变,这个过程中,界面的重排和各个部分的转场动效可以清晰地告诉用户它们是什么,怎么来的,去了哪里。


  正如Google在Material Design中所设定的“独特的纸”的隐喻一样,当用户于界面进行操作的时候,UI随着涟漪般的动效而进行转变,空间的变化和界面元素的变化由动效连接在一起,用户可以轻松理解界面是怎么回事。

  成长中的设计工具

  在设计小组讨论中,Roman Nurik 问我们怎样才能最好地向别人展示设计成果。Roman的这个问题促使我们深入探讨了功能型原型。

  在过去的5年里,当我们提及原型的时候,通常想到的是通过箭头和说明连接在一起的若干界面。但是时至今日,一切都截然不同,之前的原型设计显得过于粗糙,而现在的原型要求能够置于移动端设备进行演示,拥有真实的界面过度效果,可交互的元素,滚动的区域,动画,以及必要的状态变化。


  在过去,设计师并没有真正意义上充分利用After Effects来作为重新设计的工具。除了拿来制作页面滑动效果之外,多数设计师对于其他的功能几乎如同克林贡语一样疏于了解。之所以会这样,是因为其他的部分被认为并不重要,而不被重视的结果通常就会被忽视,在日程紧张的时候,这些部分甚至会被直接移除。

  除此之外,AE还会被用作优化小过度效果,或者对象变换效果,但是也仅此而已——它仅仅只是被用作一个修修补补的工具而已。撇开这些细节,设计团队和开发团队的沟通是非常简单的:点开这里打开另一个页面,这个界面切换到另一个界面……界面的转变效果都差不多。

  但是,时代不一样了。网页过渡效果依然存在,但是所设计到页面元素越来越多,各种元素转变的先后快慢都需要被编排。在接下来的几年里,动效设计将成为桌面端/移动端/穿戴设备/智能家居/智能汽车 中必须的组成部分。这也意味着,在设计流程中,动效设计也会被纳入其中,成为必要过程。

  在Google I/O的设计交流环节中,最常被问到的问题就是设计师如何将动效设计纳入到设计流程中。Googler们提到,虽然他们推荐使用AE,但是即便是他们自己也通常只是用它来完成小过度效果、加载过程以及图标转变效果。不过,他们还提到,他们最新的Polymer网络框架已经将Material Design的UI组件纳入其中。


  简而言之,就是目前没有完美的答案。这也意味着,对于动效设计工具的开发者而言,这是一个绝佳的机会。

  Polymer 能帮你编排出一些沿着特定路径运动的组件,或者一系列自由运动的动效。不过只有当你使用Material Design风格的组件的时候,效果会非常不错,但是如果想自己定制的话,就很难说了。

  我曾经每天都使用 Framer.js 来打造我的交互设计原型。它基本上是一个JavaScript动画框架,所以你如果你对JS不熟悉的话还需要一段时间来了解它。不过,不同于其他的JS工具,对于网页开发者而言,Framer.js 非常容易上手。

  Framer 在测试小交互或将几个不同页连接到一起上有杰出的表现,但是作为新一代的工具,它在管理编排、跟踪状态、控制拖拽和滚动元素上有这更多的需求。

  同类型的工具还有Pixate,借助它,你可以使用简单的拖拽来制作原型,之后还可以在你的设备上浏览。不过这款工具没有网页端实时预览,目前开发进度也并不快。

  我仍然在等待更加完美的动效设计和可交互原型设计工具。构建属于你自己的设计的过程中,你会仔细思考如何构建以及设计的界限;许多问题只有当你遇到了才会被意识到。当然,有一点是肯定的,只有当你把一个真实的原型摆在团队面前的时候,沟通才会更加有效。当你把一个可交互的高保真原型摆在眼前的时候,你就不用解释点击什么按钮出现什么效果了。

  越多设计师深入思考动效设计,才能更快地促进真正靠谱的软件诞生,也更加有助于我们传达设计的意图。也只有这样才能促进更加优秀产品的诞生,解决更多棘手的问题。动效设计正在成熟,你需要掌控它。

  “设计就是用你所掌控的一切,来尽可能清晰的与人沟通。” —— Milton Glaser

时间: 2024-09-22 13:27:31

设计师需要学会设计有意义的动效的相关文章

聊聊未来设计趋势的APP UI动效

  善心悦目的动效已然成为一个App的必备,作为设计师自然要跟随趋势学习.APP中的动效可以划分为两类,一类是转场动效,应用在页面的切换,加载等,这类动效可以柔和页面的过度效果,增加切换.加载.等待过程的趣味性.另一类是反馈提醒,通过界面内元素的动效,增强用户的交互感知或引导用户完成任务. 动效充满了设计师体验的想象,作为一个设计师,不管你的逼格下限在哪里,一个有趣有爱充满个性的进度条都是你设计生涯中不能拒绝的爱.那么设计师什么时候需要做一个动效设计呢? 1.等待都需要一个有意义的动效.面对等待

流畅的动效设计

本文由江南大学设计学院研究生杨秋翻译,作者:Adrian Zumbrunnen,查看原文 一些网站总能在内容.可用性.设计或特性等方面有卓越的表现.现在的网站中,交互设计的细节和动效越来越丰富.我们将分享一些来自各种案例中的经验教训,分析为什么这些简单的模式可以实现得这么好. 当我们设计数码产品的时候,我们经常使用Photoshop和Sketch等设计软件.大多数人已经在工作几年后明确地知道设计不仅仅是对视觉的呈现.尽管如此,许多人仍然继续进行这种"静态设计".史蒂夫•乔布斯(Stev

高手常用的六种图标动效设计思路

  现在越来越多手机应用和web应用都开始注重动效的设计,恰到好处的动效可以给用户带来愉悦的交互体验,是应用颜值担当的一大重要部分. icon,也就是图标.在交互过程中,应用各种icon都会跟随不同的事件发生不同的转换.举两个例子,一个音乐播放器的播放模式改变和充电时电量图标的改变. 过去,icon的转换都十分死板,而近年来开始流行在切换icon的时候加入过渡动画,这种动效给用户体验带来的正面效果十分明显,给应用添色不少. 然而面对icon动效,我们应该如何设计?今天分享几个设计icon动效的思

我们为什么需要动效设计?

  最近越来越多的国内公司开始关注动效设计了,越来越多的团队意识到动效在产品用户体验中的重要性.但是为什么需要动效设计?需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计. 随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域. (文中部分案例为设计师个人作品,部分为线上产品,都是我非常非常欣赏的作品.如不慎冒犯请戳我替换掉) 一.加

UI图标icon动效设计思路

  现在越来越多手机应用和web应用都开始注重动效的设计,恰到好处的动效可以给用户带来愉悦的交互体验,是应用颜值担当的一大重要部分. (´・ω・`) icon,也就是图标.在交互过程中,应用各种icon都会跟随不同的事件发生不同的转换.举两个例子,一个音乐播放器的播放模式改变和充电时电量图标的改变. 过去,icon的转换都十分死板,而近年来开始流行在切换icon的时候加入过渡动画,这种动效给用户体验带来的正面效果十分明显,给应用添色不少. 然而面对icon动效,我们应该如何设计?今天分享几个设计

交互界面动效设计(part-01)

至从google I/O 之后,发现关于交互界面动效的讨论文章多了很多啊~想想最近几年从事着相关工作,也对此有些研究,在这里和大家分享一下! 一.界面动效设计的定义: "不是单纯的视觉透视上面改变,而是联接虚拟世界与现实世界的手段,是满足交互体验的设计" 我们所从事的是交互设计!! 二.动效在界面中的功能 动效在界面中的使用已经有很长的一段时间了,之前看到文章有提到"动效是来解决交互问题的"这肯定一个非常准确的说法,但是觉得IBOOK的翻书效果,我不是很赞同(拟物话

教你用动效阐释APP运作机制

  编者按:动效设计可以说是目前UI设计圈当中最火的趋势了,这次设计师Eugene Rudyy在Medium分享了他参与设计新版Yep!的经历,这次他讲的不是怎么设计才好看,而是怎样用动效来替代语言来告诉用户APP的运作机制.脱去华丽的外衣,动效原来还能如此精彩! Yep!是什么 一年前开始,我开始通Yep!的创始人Roman与Alexander一同工作,他们试图让Yep!改变大家的生活.这是一款帮助人们相遇和联系的APP,他们希望Yep!所提供的服务能够让大家更轻松的约会碰头,更愉悦高效地做自

疯狂流行的动效!究竟是交互设计还是视觉设计?

  @可风f (金山网络交互设计师):自从iOS7发布后UI圈就开始疯狂流行起动画效果,尤其是在Facebook Home之后,大家觉得如果没有酷炫转场.扭来扭去元素,产品就好像上个世纪的老古董一样.但是让整个圈子争相学习的风尚背后却还仍然有一个争议:动效是交互设计还是视觉设计? 在很多外行人眼中,看到一个App动画不错,往往脱口而出的是"哇,这个App交互好棒!".或者老板觉得产品太死板了,会对着大家说"我们的产品交互还需要再打磨一下".其实从严格意义上来说,动效

设计漂亮有趣的转场动效

  设计师们喜欢追求细节的完美 他们把大量时间花在了像素级按钮,表单样式,设置类型以及如何让那些图标变得漂亮和精致. -但是关于如何设计衔接却很少有人考虑.你点下按钮表单就-出现了?你滑动删除一个项目它就那么消失了?那也忒怪异忒不自然了.在真实世界里几乎没有效果,这好像是一个bug. 哦,好吧宝贝.你必须记住--它需要"滑入". 怎样?多快?反弹?渐入?静态设计图体现不出切换过程. 当提到动画和可爱的交互的时候,人们总是滥用"趣味性"这个词.对这些人来说很炫酷,但是