设计师的必备技能!你需要学会设计有意义的动效

provide-meaning-with-motion-1

编者按:关于动效设计,我们探讨过很多次。直到现在,我们越来越清楚地意识到,动效设计已 经无处不在,已经成为了设计师们必须掌控的一个重要技能。参加过今年的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和其他的设计团队可以更容易地 做设计决策。

大势所趋,你需要了解的Material Design:《超全面总结!深聊MATERIAL DESIGN引领的设计趋势》

see-more-material-design-trand

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

1404825741-YouTubeAndroidMaterialDesignRedesignConcept-pic11

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

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

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

Julie Zhou 的设计人才观:《FACEBOOK悬赏令!美女总监JULIE ZHUO的13条人才金律》

无割裂的体验

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

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

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

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

pstam_app_bar_microtransitions

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

成长中的设计工具

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

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

1GQweekrtR3lrOhDFC08yBg

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

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

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

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

google-material-design

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

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

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

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

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

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

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

转@UISDC

更多资讯请关注:木卫艾欧:www.https://www.iamue.com/www.ued.xyz  官方微信:Aioued     官方微博:木卫艾欧网
视频教程请关注:交互学堂站:www.JhxT.org            官方微信:IxDSchool   QQ群:156360020

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

(0)
TinadminTinadmin
上一篇 2014-12-03
下一篇 2014-12-04

相关推荐

  • 两个交互设计鸿沟-评估与执行

    译者 / 熊猫小生校对 / 不器作者 /Kathryn Whitenton前言:通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑...

    2018-03-28
  • iOS和Android规范解析——标签导航和分段控件

    从今天开始,将介绍iOS和Android设计规范中关于导航的部分。今天要介绍的两个控件,经常容易混淆以至于用错。请各位读者仔细阅读,防止以后用错。

    2017-08-04
  • 注重用户体验场景化,不局限于赛事版权的世界杯营销新浪怎么玩?

    缺少赛事版权,是所有互联网公司进行世界杯营销时面临的难题。新浪的做法是,利用社交网络的优势,通过提高用户体验,最终实现成功的营销。距离2018年俄罗斯世界杯还剩不到三个月时间,目前还没有任何一家新媒体平台获得赛事新媒体版权,在此情形下,各大网络平台选择怎样的报道及营销策略,将成为世界杯媒体大战的胜负关键。3月29日下午,新浪在北京总部局举办了体育产业论坛,首席运营官兼总裁杜红分享了体育产业新时代,在用户认知和消费全面升级的趋势下,如何通...

    2018-03-29
  • 用户体验才是王道

    出生在委内瑞拉的亚历山德拉(ALEXANDRA VASQUEZ),在美国的波士顿大学毕业后不久就结婚了,婚后的她与德国籍的先生定居在柏林。和许多年轻女孩一样,对于新成立的家,亚历山德拉有许多憧憬,急着想布置有个人风格的家居特色。〝我去了大卖场,买了所有成家的基本家具,从床、沙发到餐桌。当这些东西送到我家时,我意识到我的家一点也不温暖,看起来像是一个商场的陈列间。它缺乏属于我和先生的个性以及属于自己生活的种种细节。〞〝意识到了这点后,对于...

    2018-02-03
  • iOS与安卓的交互特点

    1、物理硬件(detail返回到list) 电源、屏幕、返回、搜索 2、操作动作:(编辑删除、长按删除) android:长按-双击 ios:基本手势(滑动) 3、导航栏(detail返回到list、个人中心drawer) 跳转按钮、展示数据(…

    交互设计 2018-03-13
  • 别整标题党! 这是一份阿里的设计师分享的编写交互设计师的启迪思路的文章

    鸿影:一份设计文档的 结构大概可以分成Background项目背景、Schedule排期、History版本历史记录、Information Architecture信息架构分析(包括Site Map、Experience Map、Flow等)、Framework框架设计、Wireframe…

    交互设计 2015-08-26
  • 【优秀作业展示】交互设计基础(三)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第三期陆晗产品设计15201高铁购票界面设计搜索目的地如果没有没有您想要的目的地可以选择搜索功能选择日期如果选择三天以后出...

    2018-05-08
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 版权大战后,用户体验将成音乐平台的制胜关键

    自2015年起,国家版权局叫停“独家”版权到今年腾讯、阿里和网易云三家主流音乐APP达成史上最深度版权互授,这场版权之争终于尘埃落定,期间还穿插发生了运营8年的多米音乐停运事件,版权大战背后确实有很多难言之痛,而面向未来,已经叫实了的“后版权时代”,各家APP用什么get到我的点?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Get Over ItEagles - Hell Freezes Over (Live)一、用户体验...

    2018-03-24
  • ​从零开始做交互:第一章 交互设计基础知识

    [button type="primary" text="百度阅读:阅读全书" url="http://yuedu.baidu.com/ebook/6d8b975a49649b6648d7479d" open_new_tab="true"] [button type="primary" text="网易云课堂:阅读全书" url="http://study.…

    2015-08-07