Design in motion动效设计(交互设计新前沿)

DesigninMotion
T he new frontier of Interaction design
Antonio De Pasquale
Senior Interaction Designer at frog
@myinteraction
交互设计新前沿
动效设计
译者
LO PM
freenow8@gmail.com

My name is Antonio De Pasquale
I'm a Senior Interaction Designer at frog Milan
Alittleabout me
I'm specialized in digital interfaces & user experience
I'm passionate about the "aesthetics" of movement
I'm from Sicily and I love the sea.
@myinteraction

InteractionVsMotion
Whathavethistwoworldsincommon?
交互 VS 动效
这两个词有什么相似之处？

InteractionVsMotion
Concept
Design research
Benchmark
Wireframe
Information architecture
User Requirements
User testing
User experience flow
User scenario
Prototype
...
Aestethics
Animations
Storytelling
Motion graphics
Character animation
Visual design
Title design Kynetic
typography
Transition design
...
DesigninMotion.Thenewfrontierof interactiondesign
交互 VS 动效
理念
设计研究
衡量标准
示意图
信息架构
用户需求
用户测试
用户体验流
用户场景
原型…
美学
动画
故事性
动态影像
角色动画
视觉设计
动感设计
排版印刷
转场设计

InteractionVsMotion
交互 VS 动效

A wide picture of
User Experience Design
Communication
Interaction&IA
Motion
一张大图说明
用户体验设计 &
工业自动化动效设计

Interaction
Communication
Interaction »Communication»Motion
Objects that don’t move don’t interact. An interaction is some sort of communication, and communication is
about movement: our vocal cords vibrating as we speak, our hands and arms writing or typing as we send
email or instant messages, sound and data moving between two entities. -
Dan Saffer - The element of Interaction Design
Motion
交互
沟通
动效
交互 >> 沟通 >> 动效
对象本来不动的、没有交互行为的。一种交互行为是一种沟通，并配以动静结合。如，我们说话，伴随声带的振动；发送邮件或即时消
息，伴随手与胳膊的书写或键入，声音与数据在两者之间流转。
Dan Saffer——交互设计的原理（Kicker Studio的创始人和负责人之一）

Without motion,
therecanbenointeraction.
You press a key, and an email window closes.
There is motion on your screen.
Dan Saffer - The element of Interaction Design
没有动效，
称不上交互。
当你按下一个键、关闭一个电子邮件窗口，
都有动效设计应用在屏幕之上。
Dan Saffer - 交互设计的原理（Kicker Studio的创始人和负责人之一）

Design in Motion
Thenew frontier
of Interaction Design
Introduction
toMotion Interfaces
MotionDesign&DigitalArtifacts
Transitionalinterfaces
Motioninteractionfoundations:
tools& practice
Fromconcepttodetaildesign
Whatisthe righttool?
Motioninteractionfoundations:
theory& methods
Animationprinciples
Motionpatterntaxonomy
动效界面介绍
动效设计与数位产品：转场界面
动效基础：理论与方法
动画原理、动效模式分类
动效交互基础：工具与实践
从概念到具体设计：什么工具合适？

INTRODUCTION
TOMOTIONINTERFACES
交互式动效设计介绍

I was giving thedemo to someonea littlewhile ago,and I finished the
demo and I said what do you think? They said, ‘You had meatscrolling.’
Motion Design & Digital artifacts
STEVE JOBS, 2007 (on the iPhone iner2al scroll feature)
动效设计 & 数位产品
以前我给人演示(iphone) demo，演示完后问他们，你感觉如何？他们说「一划，你就懂我了」. ——乔布斯,2007懂我

Introduction MotionDesign & Digital artifacts
Thebeginning
Games used motion for the first time to visualize the
effect of a specific interaction in the digital space
开篇
游戏通常利用数位空间，通过一些特定的交互，产生动态视觉效果。
介绍：交互设计与数位产品

Web1.0:Java&Gif
At the beginning of the Web, few technologies allowed motion
in web pages but mostly just for eye-candy
Applet JavaAnimatedGif
在互联网初期，一些技术可以使网页动起来，
但这些都是华而不实的。
动画图片GIF Java小应用

TheGoldenAgeof Flash
From a simple animation tool, Flash changed the way
designers experience with motion & interaction
2Advacend, 2000
Screen transition, Loading screen
http://v2.2a-archive.com/flashindex.htm
TheVoid, 1998
Animated menu, interactive objects
http://www.thevoid.co.uk/index.html
LeoBurnet, 2006
3d navigation, motion detection
通过简单的动画工具，Flash改变设计师动效设计体验。
Flash黄金时代

LeoBurnet, 2006
3d navigation, motion detection

TheAppWorld
With the explosion of mobile apps, motion started to became
a core part of the interaction models
Introduction Transitional interfaces
Revealing hidden controls Top-down bouncing menuCard 3d parallax
3D视觉差选项卡撕页式显示隐藏控件下拉式悬浮菜单
介绍：转场界面
伴随手机应用爆增，动效开始成为交互模型的核心部分之一。

+
TheWebReloaded
With the introduction of the new w3c specifications,
html & css added new life to motion & dynamic on the web
当引入新W3C规范标准后，html与css为网页动效注入新的生命力。
网页重生

Gesture&Motion
Gesture recognition became a common pattern on console and motion interactions were the right answer
to show a new kind of affordance. Physical Motion patterns became virtual interactions.
手势识别变成了一种控制与动作交互的常见模式，这是对功能可感知的一种诠释。它意味着物理动作形式会变成虚拟的交互。
手势与动作

TheFuture
New desktop physical control, css4 html6, smartphone gesture
recognition, hands & fingers tracking...
未来
新桌面物理操作、css4 html6、可手势识别的智能电话、手与手指动作捕捉等

Nativeanimation
inappgesture
1993 2005 2007 Today
Interactivecontrols
Full animation
engine
3d,video,
cam& motiontracking
Pong,1978
Gif,1980
Applet Java,1989
1978
Flash,1993 Flash3d,2005
Leapmotion
2008
TheEvolutionof MotionInteraction
iOs,2007
HTML5+ CSS3
1980 1989
Simpleanimation
UIelements
Interactive
UIelements
Webkit
Technology
Motion
iOs7,2013
WebNative
animation
Javascript
Safari+ Webkit
Jquery
2000
FlashAS.20
XboxKinect
Natural UI
Gestural interaction
Advancedmotion
patterns
动效交互演变历程
技术
动效
交互控制
简单动画UI原理
交互UI原理
丰富动画引擎 3D、视频、计算机辅助、动作捕捉
APP手势运用的原生动画
Web原生动画
仿真式界面
交互手势
更高级动效模式

MOTION INTERACTION
THEORY&METHODS
动效基础：理论与方法

Animation principles
Animation can explain whatever themind of man can conceive.
This facility makes it themostversatileand explicit means of
communication yetdevised for quick mass appreciation.
WALT DISNEY COMPANY
动画原理
动画可以展现人类所能想到的一切。这是极具价值的沟通方式，能让沟通变得精彩而明确。 ——沃特迪斯尼公司

Motioninteractionfoundations Animation princples
FromcartoontotheUserInterface
David Hungar - Bay Wei Chang, 1993
Animation: from cartoon to the user interface (Paper)
http://hci.stanford.edu/courses/cs448b/papers/Chang_AnimationInUI_UIST93.pdf
从动漫到用户界面

Disneyanimationprinciples
Disney's Twelve Basic Principles of Animation is a set of rules that defines a realistic
impression of a motion with the basic laws of physics.
DesigninMotion.Thenewfrontierof interactiondesign * Panop Koonwat - https://vimeo.com/65815545
Motioninteractionfoundations Animation princples
迪斯尼动画原理:动画12大原则
迪斯尼十二动画基本原则，是一套定义了遵循基本物理定律的写实印画。

Motioninteractionfoundations
Animation princples

DisneyAnimationPrinciples
12 principles
Squash and stretch
Anticipation
Staging
Straight ahead / pose-to-pose
Follow through / overlapping action
Slow in and out
Arcs
Secondary action
Timing
Exaggeration
Solid Drawing
Appeal
Animation princples
迪斯尼动画原理:动画12大原则
压缩与伸展
预备动作
演出布局
连续运动与姿态对应
跟随与重叠动作
慢进慢出
弧形运动
第二动作
时间节奏
夸张性
扎实的描绘
吸引力

the purpose of this principle is to give a sense
of weight and flexibility to drawn objects.
Squash&stretch
Motioninteractionfoundations Animation principles
Rigid vs Soft
Abstract vs Organic
Fade in/out vs Moving blocks
Brand experience
压缩与伸展
物体受到力的挤压，产生拉长或者压扁的变形状况，再加上夸张的表
现方式，使得物体本身看起来有弹性、有质量、富有生命力，因此较
容易产生戏剧性。
压缩与伸展目的，让所绘制的物体看起来有质感、有弹性。
硬质与软质
抽象与实物
抽象与实物
品牌体验

Squash&stretch
Page turn to reveal menu
http://capptivate.co/?s=circa
Flipping pages
http://www.macitynet.it/flipboard-web-magazine/
External menu navigation
http://capptivate.co/2013/11/23/airbnb/
压缩与伸展
仿真翻页
翻页
外置导航菜单

Increase affordance Anticipate
hidden interactions Tutorial &
help
Explain new pattern
Anticipation is used to prepare the audience for an action,
and to make the action appear more realistic.
Anticipation
预备动作
预备动作为观众铺垫的一下动作，使角色出场更真实
动画角色的动作，必须让馆长能够产生“预期性”，透过肢体动作的表演，或者分镜构图的
安排，让观众与之角色的下一步动作，也就是让观众更能融入剧情中。

Anticipation
Card movement
http://capptivate.co/2013/11/23/potluck/
Revealing additional function
http://capptivate.co/?s=clear
Horizontal slide to unlock
http://youtu.be/3JlOOO14oSU
预备动作
卡片抽取横向滑动解锁掀翻式增加功能

The purpose of staging is to direct the audience's attention,
and make it clear what is of greatest importance in a scene
Staging
Focus on action trigger
Display active object in the interface
React to user activity
演出布局
戏剧是经由编剧和导演设计安排出来的，动画更是如此，因为动画的所有动作安排与构图，都是需要靠动画师的手创造出来，所以在动画中的构图、运镜、
动作、走位都需要仔细的设计安排，避免在同一时间又过多琐碎的动作与变化。最重要的还是精心设计好每一个镜头与动作，经过设计之后，不仅可让动
画整体更好，也可以省去许多不必要的成本浪费。
演出布局目的引导观众注意，使观众清楚当前的场景，什么是值得注意的。

Staging
Message preview
http://goo.gl/fZABUf
Focus on the active area
http://vimeo.com/66395692
演出布局
消息预览聚焦活动区域

"Straight ahead action" means drawing out a scene frame by frame from beginning to end, while
"pose to pose" involves starting with drawing a few key frames, and then filling in the intervals later.
Straightaheadandposetopose
Directions
Content position
Explaining IA
Reinforcing actions
Helps exploration
“连续运动”意味着从开始到结束，逐帧绘制出每个场景，“姿态对应”涉及到从绘制一些关键帧开始，然后填补时间间隔。
连续动作和姿态对应是两种动作动画的技巧，连续动作是将动作从第一张开始，依照顺序画到最后一张，通常是制作较简易的动态。
姿势对应，将动作拆解成一些重要的定格动作。补上中间的间补动画后，产生动态的效果，通常适用于较复杂的动作。

Straightaheadandposetopose
Step by step navigation
http://capptivate.co/2014/01/18/timbre-3/
Section transition
http://capptivate.co/2014/01/18/epiclist/
Quick multiple fruit cut
http://goo.gl/zEOw55
逐步导航快速切水果页面转场

"Follow through" means that separate parts of a body will continue moving after the character has stopped.
"Overlapping action" is the tendency for parts of the body to move at different rates.
Followthroughandoverlappingaction
Explain UI pattern
Show active areas / functions
Natural transitions
Set time to the experience
跟随动作，是将物体的各部位拆解，持续运动，直到角色动作停止。重叠动作，是将一栋中物体的各部位拆解，将其动作的时间错开。
跟随动作，是将物体的各部位拆解，通常是没有骨架的部位较容易产生
跟随的动作，例如动物的尾巴，头发，衣服的末梢等等。
重叠动作，是将一栋中物体的各部位拆解，将其动作的时间错开，产生
分离重叠的时间差与夸张的变形，增加动画戏剧性与表现力，达到更容
易吸引观众的目的，也强化了动画的趣味。
转场自然
显示有效区域/功能
交代UI样式
设置时间体验

Followthroughandoverlappingaction
Content loaded
http://capptivate.co/2013/09/30/phq4-3/
Revealing menu
http://capptivate.co/2013/08/14/your-extra-life/
Tile transition
http://www.bobborries.com/Funnies/Windows8zoom.gif
内容加载磁贴转场菜单呈现

The "easing" principle deals with the spacing required to accurately depict
the inherent law of inertia that governs all objects and people.
SlowinSlowout
Trigger for invisible interactions
Change of status
Revealing new information
Showing extra controls
Start/End of a transition state
慢进慢出
一般动作在开始与结束时速度较慢，中间过程速度较快一些，因为一般动作
并非等速度运动，这时正常的物理现象。静止的物体开始移动时由慢而快，
而将要停止时的物体则会由快变慢，若以等速度方式开始或者结束动作，则
会产生一种唐突的感觉。
“easing”原则：在空间上处理，所有支配的对象和人物，必须遵循惯性定律。

SlowinSlowout
Open/close main navigation
http://capptivate.co/2013/11/07/breezi/
Panel focus switch
http://capptivate.co/2013/09/18/memoir/
List scrolling
http://capptivate.co/2013/07/12/making-3/
慢进慢出
打开/关闭主导航聚焦转换面板列表卷动

The principle simulates natural action that tends to follow an arched trajectory,
and animation should adhere to this principle by following implied "arcs" for greater realism.
Arcs
Showing directions
Explain possible interactions
Show loading and time
Anticipate behaviours
弧形运动
动画中的动作，基本上除了机械的动作之外，几乎所有的动线都是以抛物线的方式进行，
所以在绘制动线时，非机械式的物体，移动时不要完全以直线的方式运行，而机械式的物
体，则使用较僵硬的直线运动，这样可以较容易的区别机械与非机械物体的属性，也可强
化这两种完全不同的物体的个性。
它原则上模拟自然的一种趋向于弧形轨迹的行动，动画应当遵循这一原则，其次它意味着更写实。

Arcs
Animated infographics
http://capptivate.co/2013/06/23/yahoo-weather-3/
Radial navigation system
http://capptivate.co/2013/07/08/applauze/
Data/Map content loading
http://capptivate.co/2013/06/25/ribbon//
动态信息图表数据/地图内容载入弧形导航系统
弧形运动

This important principle about secondary motion behaviours is that they emphasize,
rather than take attention away from, the main action.
Secondaryactions
Showing status change
Switch content focus
Reinforcing transition
Keep focus on device status
第二动作
依附在主要动作之下的细微动作，虽然是属于比较微小的动作，但实
际上却有画龙点睛的效果。第二动作并非不重要的动作，而是强化主
要动作的关键，不仅可以使角色更生动真实，更可让角色感觉有生命。
有关第二第二动作行为准则，主要在于强调，而不是抢主要动作的注意力。

Secondaryactions
iOs7 closing apps
http://www.youtube.com/watch?v=h8Cc1NqGTUI
Control center bump
http://goo.gl/vUOKYm
Folder position reset
http://goo.gl/JTtFnt
第二动作
iOS7 关闭APP 重排文件价位置调出控制中心

Timing is fundamental to define the physical characteristics of an object, such as weight, size and scale.
It can also make objects appear to abide by the laws of physics.
Timing
Start/End of a process
Object activation
Accepted interactions
Interaction speed
时间节奏
动画的灵魂就是物体与角色的运动，而控制运动的关键就是动作的节奏与重量感。
动作的节奏就是速度的快慢，过快或者过慢都回让该动作看起来不自然，而不同
的角色也会有不用的节奏，因为动作的节奏会影响到角色的个性，也会影响到动
作自然与否。
另一个控制运动的关键就是指量感，因为所有的物体都是有质量的，而节奏可以
表现物体的质量，这和一般人对自然界的认知有关。
时间节奏对定义一个对象物理特征很有必要，如重量、大小与规模。它同样可以将对象按照一定规律出现。

Timing
Tapping time
http://capptivate.co/2013/08/02/listen-3/
Loading results
http://www.alitalia.com
Content loading
http://capptivate.co/2014/01/09/yahoo-news-digest-3/
时间节奏
螺旋时间进度加载结果内容加载

The classical definition of exaggeration, employed by Disney, was to remain true to reality,
just presenting it in a wilder, more extreme form.
Exageration
Reinforcing interaction
Action trigger
Signature experience
夸张性
夸张典型的定义，来自迪斯尼，保留真实前提，通过带一点撒泼、更极端形式，合理地展现事物。
动画基本上就是夸张的表演方式，透过角色的表演，强化剧情起伏的情绪，让观众更容易融入剧情并且乐在其中。
夸张不是只把动作幅度扩大而已，而是巧妙且适当地将剧情所需要的情绪释放出来。在设计动作与脚本时，如何运用动画本身容易表现苦熬张德
优势去安排剧情的段落，动画师在诠释角色时对夸张程度的拿捏，都是动画精彩与否的关键。

Exageration
Keynote
example
Keynote
example
Reducing application
http://i.imgur.com/WfWyJA5.gif
Hyper zoom
http://capptivate.co/2013/06/27/lumosity/
Remove a match
http://i.imgur.com/wbIWuKD.gif
夸张性
还原应用窗体透视变焦移除一场比赛

The principle of solid drawing means taking into account forms in
three-dimensional space, giving them volume and weight.
Soliddrawing
Space extension
Good for Mobile
Extra space for info
3d as an additional info layer
扎实的描绘
动画的制作，视觉表现占了很大一部分，而视觉表现则需要非常扎实的
绘画训练以及对美感的敏锐度，不论是制作传统动画或者是电脑动画都
一样，动画师都需要有扎实的绘画基础训练，才能将动画中所需要的画
面完整的表现出来。
扎实描绘原则意味着，考虑到在三维空间的形式，赋予它们体积与质量。

Soliddrawing
Revealing selectors CSS Card flip
https://daneden.me/animate/
Revealing extra space
http://capptivate.co/2013/11/19/445/
扎实的描绘
唤出选择器 CSS 卡片弹跳 3D展现额外间距

The appeal of an animated character is similar to the charisma of a live actor.
The important thing is that the viewer feels the character is real and interesting.
Appeal
Personality Emotional
experience Signature
experience
吸引力
动画角色的吸引力是类似于现场演员的魅力。重要的是，观众能感觉这个角色真实与有趣。
吸引力是任何一种艺术都必要具备的条件，动画是和电影一样，包含了许多
不同的艺术类型在其中，不管是音乐、画面或者剧情，都必须相互搭配，才
能交织整体感最好的动画作品。
动画通常最吸引人的地方，就是充满想象力的画面的表现方式。动画几乎所
有都是经由动画师与导演的手“创造”出来的，对画面表现的“自由度”极
高，所以动画总是给人一种充满想象的感觉，也是动画最吸引人的地方。

Appeal
Character animation (pin)
http://capptivate.co/2014/01/18/meattext/
Tapping weather
http://i.imgur.com/IoWbato.gif
Trash ticket
http://i.imgur.com/nDoQTEI.gif
螺纹布局天气卡通人物丢弃票据
吸引力

Motioninteractionfoundations Motiontaxonomy
Fromamotionbehaviourstaxonomy
Different ways to organize motion patterns help designers in understanding when and which
patterns are useful for a specific action or to achieve a specific goal.
Extension
Orientation
Feedforward
Feedback
Highlight
Awaking
Johannes Tonollo,Meaningful Transitions - http://www.ui-transitions.com
Nature
Context
Temporal
Metaphor of physical
physical
Symbolic
Abstract
In-context
No-context
Discrete
Continuous
Userdefined Motion GesturesforMobileInteraction- J.Ruiez,Y.Li,E.Lank
Action Scope
从一个动作行为分类
不同的方式组织动效形式，可帮助设计师理解，在什么时候、采用哪种形式，对于实现特定效果或特定动作有一定的帮助。
动作作用域
扩展
定向
正反馈
反馈
强调
唤醒
自然
上下文
临时的
物理修饰
物理特性
符号
抽象
上下文关联
无关联
离散
连续

Toamoreabstractmodel
Taxonomy and categories help us in organizing existing patterns but understanding
the wide picture allows us to envision new behaviours in a more organic way.
ActivePassive
Time
Space
抽象模型
分类法和类别不仅可帮助我们有机组织模型，还允许我们通过想象力多种维度理解更深邃意境。
时间
主动被动
空间

Passiveinteraction
The system is waiting for the user input; it's elaborating an autonomus process or it's triggering
the user for activation / feedback on the system status.
Automatic reaction
System activation
Navigation model
Space explanation
ActivePassive
Time
Space
被动交互
系统正等待用户输入，它通过系统状态，阐述了一个自发的过程或触发用户激活/反馈。
时间
主动被动
空间
自动化反馈系统被激活
导航模型空间被释放

Activeinteractions
The system is reacting to the user input (direct & indirect actions); reporting feedback on the human action
or feedforward for the next interaction; revealing extra space and enabling UI manipulation
System feedback
Userfeedforward
Augmented UI
Object control
Passive Active
Time
Space
主动交互
系统对用户输入作出反应（直接和间距行为），对人的行为进行报告与反馈，或者对下一个交互的正反馈，展示额外空间和授权UI操作。
时间
主动被动
空间
系统对用户正反馈
增强UI元件控制

Natureofactions
Howtochoosetherightpattern?
it's impossible to set a general rule, but designers should use motion according to the context
of interaction and consistently with the nature of actions across the overall service
Passive
Time
Space
Active
Context of interaction
Automatic reaction
System activation
Navigation model
Space explanation
System feedback
Userfeedforward
Augmented UI
Object control
如何选择合适的方式
设定一个普通规则不大可能，但设计师应该根据交互上下文关联和行为自然贯彻整体服务的一贯性原则应用动效。
时间
主动被动
空间
行
为
自
然
交互的上下文关联
自动化反馈系统被激活
导航模型空间被释放
系统对用户正反馈
增强UI元件控制

Natureofactions
Request userattention
Triggeruseraction
Confirm useraction
Usermanipulatethe interface
Flipboard
Clear
DesignamemorableSignatureExperience
Motion behaviours can increase and extend usability but in many cases a pervasive, but coordinate, use of
them can give a signature brand experience to the service, improving UX and product memorability.
Context of interaction
用户行为确认
行
为
自
然
交互的上下文关联
用户行为请求
用户行为触发用户操作界面
设计一个难忘的签名经验
动作行为可增加和扩展可用性，许多情况下无处不在。同理，使用它们提供一个品牌体验签名服务，提高用户体验和产品可记忆性。

MOTION INTERACTION
TOOLS&PRACTICE
动效交互工具与实践

The right tool
Givemea lever and
I can movetheworld.
ARCHIMEDE DI SIRACUSA
合适的工具
给我一个支点，我可以撬动地球。
阿基米德

Makeit Real&Shining
User Experience encompasses all aspects of the end-user's interaction.
Sketching the UX it's all about emotional storytelling and prototyping
the user interaction in a realistic way
Motioninteractionfoundations What is the right tool?
使它更逼真和绚丽
用户体验包括与与最终用户交互所有方面。UX设计都是源自原型情感故事和用户交互仿真原型。

Concept & sketch
Motion prototype
Interactive prototype
Explain motion
Ourtools
How we can visualize motion behaviours
and choose the right tool?
我们的工具
概念与草稿
动效原型
交互原型
动效输出
我们如何体现动效行为与选择合适工具？

Highfidelity
Developement
LowFIdelity
Conceptevaluation
Themotiondesignertoolkit
There is no such thing as high or low fidelity,
only appropriate fidelity that allows you to achieve the goals you've set
for doing a prototype
Hand Sketch
A: er Eﬀects
Brief / Paper protoKeynote
Adobe Edge
Css framework
Frame.js
Quarz composer
VVVV
Interac2ve
documenta2on
Mo2on
to code
Product
Storytelling
Concept & sketch Motionprototype ExplainmotionInteractiveprototype
动效设计师工具包
高或低保真度都无关紧要，只要适合自己的保真度，能帮助你达到所设定的目标的原型。
动效原型概念与草稿交互原型动效输出
高保真开发低保真概念预设
手绘草稿
主调剧本

Concept&sketch
Protosketch
https://protosketch.uistencils.com/
Paper sketch & prototye
Low fidelity / Low interaction

Keyno
Concept&sketch
te
Keynote app prototype
http://www.lukew.com/ff/entry.asp?1171
Keynote
Medium fidelity / Low interaction

Concept&sketch
Brief / InVision App
http://giveabrief.com/ - http://www.invisionapp.com
Brief / In Vision
Medium fidelity / Medium interaction

AE: UI Animation Design
http://goo.gl/PPEO7s
After Effects
High fidelity / Low interaction
Motionprototype

Motionprototype
High fidelity / Medium interaction
Edge Animate / Edge reflow

Cyclops / Framer JS
Cyclops & Framer Js
Motionprototype
High fidelity / Medium interaction https://github.com/Instrument/cyclops http://www.framerjs.com/index.html

Quarz composer / VVVV
Origami / VVVV
High fidelity / High interaction http://vimeo.com/85578380 - https://github.com/PrototypingInterfaces/
Motionprototype

Explainmotion
Interactive documentation
Scrolling

Explainmotion
Concept Storytelling
Beacon, Frog NY
http://www.frogdesign.com/work/reinventing-the-payphone.html

What isthe besttool?
Agile methodology needs a different design workflow
Research Concept
Wireframe Visual
Develop
Usertest
PrototypeSketch
Review

Thereisnoperfecttool
Therighttoolistheonethat helpsyou
communicateyourconcept
We need to explain complex problems & big project in a simple way and test
if they're clear and meaningful to people.
Functional prototypeConcept experience
Hand Sketch Keynote Brief / Paper proto A:er eﬀect Adobe edge Mo2on to code Css framework Quarz composer Interac2ve Product
Frame.js VVVV documenta2on Storytelling

Research
Concept
Wireframe Visual
Develop
Usertest
PrototypeSketch
Review
How canwedelivermotionbehaviours?
From concept design to market ready solution

a Designer
Coding and testing in real time a
design solution, to highlight
technology or UX/Interaction related
problems on the go.
Understanding from the beginning
the complexity of motion dynamics
a developer
It is always a good feeling not to be
the last step in the production/design
process, and this will lead to better
products. As soon as you have a clear
motion vision, you can also
understanding the development effort.
What is the right tool?Motioninteractionfoundations
Designwith code
Understanding the platform constrains
to evaluate better the real effort to produce motion

Thefutureis already here.
It's justnot evenly distributed.
WILLIAM GIBSON
Let's do it

DesigninMotion.Thenewfrontierof interactiondesign Further reading
TheIllusionof Life:Disneyanimation
FranThomas,OllieJohnston,1995
DesigningInterfaces
JeniferTidwel,2000
Designinggestural interfaces
DanSaffer,2007

Design & CodeDesign principles Motion resource Motion patterns
Emo2on and Mo2on: Games as
Inspira2on for Shaping the Future
of Interface
http://katherineinterface.com/
isbisterinteractions.pdf
Articles&Insights
The Basic of Mo2on Design
https://vimeo.com/7440725
Anima2on: from cartoons to the User
Interface
http://selflanguage.org/_static/published/
animation.pdf
Transi2onal interfaces
https://medium.com/design-ux/926eb80d64e3
Capp2vate: a mo2on design library
http://capptivate.co/
UI Anima2ons: a tumblr collec2on
of UI paTerns
http://ui-animations.tumblr.com/
The Guide to Css Anima2on and
principles
http://coding.smashingmagazine.com/2011/09/14/the-
guide-to-css-animation-principles-and-examples/
Animate.css
https://daneden.me/animate/
W3C CSS3 Anima2on
http://www.w3schools.com/css/css3_animations.asp
DesigninMotion.Thenewfrontierof interactiondesign Further reading
The Mo2on Fron2er
https://medium.com/design-ux/8802af8012eb
UI Anima2on and UX: A not so
secret friendship
http://alistapart.com/article/ui-animation-and-ux-
a-not-so-secret-friendship
UI Anima2ons: a tumblr collec2on
of UI paTerns
http://ui-animations.tumblr.com/

Thanks!
@myinteraction
to continue the discussion!
Oblivion GFX
https://vimeo.com/64377100

Design in motion动效设计(交互设计新前沿)

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (10)

Semelhante a Design in motion动效设计(交互设计新前沿)

Semelhante a Design in motion动效设计(交互设计新前沿) (20)

Último

Último (17)

Design in motion动效设计(交互设计新前沿)

Notas do Editor