Post on 16-Feb-2017
Design in Motion
The new frontier of Interaction design
Antonio De PasqualeSenior Interaction Designer
at frog@myinteraction
交互设计新前沿
动效设计
译者LO PM
freenow8@gmail.com
My name is Antonio De PasqualeI'm a Senior Interaction Designer at frog Milan
A little about meI'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
Interaction Vs Motion
What have this two worlds in common?交互 VS 动效这两个词有什么相似之处?
Interaction Vs Motion
Concept Design
researchBenchmar
k Wirefram
eInformation
architecture User Requirements
User testing User
experience flowUser
scenario Prototyp
e...
Aestethics Animations Storytelling Motion graphicsCharacter animation Visual designTitle design Kynetic typography Transition design...
What have this two worlds in common?
Design in Motion. The new frontier of interaction design
这两个词有什么相似之处?
交互 VS 动效理念设计研究衡量标准示意图信息架构用户需求用户测试用户体验流用户场景原型…
美学动画
故事性动态影像角色动画视觉设计动感设计排版印刷转场设计
交互设计新前沿
Design in Motion. The new frontier of interaction design
Interaction Vs Motion
What have this two worlds in common?
这两个词有什么相似之处?
交互 VS 动效
动效设计场景设计
用户交互场景
用户界面设计
交互设计
应用设计
引导体系
安装媒体
交互式控制
普适计算
交互环境
人机交互
可用性工程
交互设计新前沿
A wide picture ofUser Experience Design Communication Interaction & IAMotion
Design in Motion. The new frontier of interaction design
交互设计新前沿
一张大图说明用户体验设计 & 工业自动化动效设计
场景设计
用户交互场景用户界面设计
交互设计
应用设计
引导体系
安装媒体
交互式控制
普适计算
交互环境
人机交互
可用性工程
动效设计
计算机科学 软件开发
衍生设计
传播设计数据可视化
导航设计
功能需求
信息架构前后关联需求
数位看板
销售
空间体验
体系结构
书写
工业设计机械工程
电气工程 哲学 认知科学心理学
社会学
人因工程学
音效设计 音频工程
用户体验式设计
Interaction
Design in Motion. The new frontier of interaction design
Communication
Interaction » Communication » MotionObjects 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, there can be no interaction.
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. The new frontier of interaction design
Design in Motion
The new frontier of Interaction Design
Introductionto Motion Interfaces
Motion Design & Digital Artifacts Transitional interfaces
Motion interaction foundations: tools & practice
From concept to detail design What is the right tool?
Motion interaction foundations: theory & methods
Animation principles Motion pattern taxonomy
交互设计新前沿
交互设计新前沿
动效界面介绍
动效设计与数位产品:转场界面
动效基础:理论与方法
动画原理、动效模式分类
动效交互基础:工具与实践
从概念到具体设计:什么工具合适?
INTRODUCTIONTO MOTION INTERFACES
交互式动效设计介绍
I was giving the demo to someone a little while ago, and I finished the demo and I said what do you think? They said, ‘You had me at scrolling.’
Motion Design & Digital artifacts
STEVE JOBS, 2007 (on the iPhone iner2al scroll feature)
动效设计 & 数位产品
以前我给人演示 (iphone) demo ,演示完后问他们,你感觉如何?他们说「一划,你就懂我了」 . —— 乔布斯 ,2007 懂我
Introduction Motion Design & Digital artifacts
The beginningGames used motion for the first time to visualize the
effect of a specific interaction in the digital space
Design in Motion. The new frontier of interaction design
开篇
游戏通常利用数位空间,通过一些特定的交互,产生动态视觉效果。
介绍:交互设计与数位产品
Web 1.0: Java & GifAt the beginning of the Web, few technologies allowed
motion in web pages but mostly just for eye-candy
Introduction Motion Design & Digital artifacts
Applet JavaAnimated Gif
Design in Motion. The new frontier of interaction design
介绍:交互设计与数位产品
在互联网初期,一些技术可以使网页动起来,但这些都是华而不实的。
动画图片 GIF Java小应用
The Golden Age of FlashFrom a simple animation tool, Flash changed the
way designers experience with motion & interaction
2Advacend, 2000Screen transition, Loading
screenhttp://v2.2a-archive.com/flashindex.htm
TheVoid, 1998Animated menu, interactive objects
http://www.thevoid.co.uk/index.html
Design in Motion. The new frontier of interaction design
LeoBurnet, 20063d navigation, motion detectionhttp://v2.2a-archive.com/flashindex.htm
Introduction Motion Design & Digital artifacts
介绍:交互设计与数位产品
通过简单的动画工具, Flash改变设计师动效设计体验。Flash黄金时代
Introduction Motion Design & Digital artifacts
LeoBurnet, 20063d navigation, motion detectionhttp://v2.2a-archive.com/flashindex.htm
Design in Motion. The new frontier of interaction design
介绍:交互设计与数位产品
The App WorldWith 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 menu
Card 3d parallax3D 视觉差选项卡撕页式显示隐藏控件 下拉式悬浮菜单
介绍:转场界面
伴随手机应用爆增,动效开始成为交互模型的核心部分之一。
+
Design in Motion. The new frontier of interaction design
Introduction Transitional interfaces
The Web ReloadedWith the introduction of the new w3c specifications,
html & css added new life to motion & dynamic on the web当引入新 W3C规范标准后, html 与 css 为网页动效注入新的生命力。
网页重生
介绍:转场界面
Design in Motion. The new frontier of interaction design
Gesture & MotionGesture 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.
Introduction Transitional interfaces
介绍:转场界面
手势识别变成了一种控制与动作交互的常见模式,这是对功能可感知的一种诠释。它意味着物理动作形式会变成虚拟的交互。
手势与动作
Design in Motion. The new frontier of interaction design
The FutureNew desktop physical control, css4 html6, smartphone
gesture recognition, hands & fingers tracking...
Introduction Transitional interfaces
介绍:转场界面
未来
新桌面物理操作、 css4 html6 、可手势识别的智能电话、手与手指动作捕捉等
Design in Motion. The new frontier of interaction design
Native animation in app gesture
1993
2005 2007 Today
Interactive controls
Full animation engine
3d, video,cam & motion
tracking
Pong, 1978
Gif, 1980
Applet Java, 1989
1978
Flash, 1993
Flash 3d, 2005
Leapmotion
2008
The Evolution of Motion Interaction
iOs, 2007
HTML5 + CSS3
19801989
Simple animation UI elementsInteractiv
e UI elements
WebkitTechnolog
y
Motion
iOs 7, 2013
Web Native animation
Javascript Safari +
Webkit
Jquery
2000
Flash AS.20
Xbox Kinect
Natural UI
Gestural interaction
Advanced motion patterns
Introduction Transitional interfaces
交互设计新前沿
介绍:转场界面
动效交互演变历程技术
动效交互控制
简单动画 UI 原理
交互 UI 原理
丰富动画引擎 3D 、视频、计算机辅助、动作捕捉
APP 手势运用的原生动画
Web 原生动画
仿真式界面交互手势
更高级动效模式
MOTION INTERACTIONTHEORY & METHODS
动效基础:理论与方法
Animation principles
Animation can explain whatever the mind of man can conceive.
This facility makes it the most versatile and explicit means of communication yet devised for
quick mass appreciation.WALT DISNEY COMPANY
动画原理
动画可以展现人类所能想到的一切。这是极具价值的沟通方式,能让沟通变得精彩而明确。 ——沃特迪斯尼公司
Motion interaction foundations
Animation princples
From cartoon to the User Interface
David Hungar - Bay Wei Chang, 1993Animation: from cartoon to the user interface (Paper)
http://hci.stanford.edu/courses/cs448b/papers/Chang_AnimationInUI_UIST93.pdf
Design in Motion. The new frontier of interaction design
从动漫到用户界面
交互设计新前沿
Disney animation principles
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.
Design in Motion. The new frontier of interaction design
* Panop Koonwat - https://vimeo.com/65815545
Motion interaction foundations
Animation princples
交互设计新前沿
迪斯尼动画原理 : 动画 12 大原则
迪斯尼十二动画基本原则,是一套定义了遵循基本物理定律的写实印画。
Motion interaction foundations
Design in Motion. The new frontier of interaction design
Animation princples
交互设计新前沿
Disney Animation Principles
12 principles
Squash and stretch Anticipation
StagingStraight ahead / pose-to-pose Follow through / overlapping
action Slow in and outArcs
Secondary action Timing
Exaggeration Solid Drawing
Appeal
Motion interaction foundations
Design in Motion. The new frontier of interaction design
Animation princples
迪斯尼动画原理 : 动画 12 大原则
压缩与伸展预备动作
演出布局连续运动与姿态对应跟随与重叠动作
慢进慢出弧形运动
第二动作时间节奏
夸张性扎实的描绘
吸引力
Design in Motion. The new frontier of interaction design
the purpose of this principle is to give a sense of weight and flexibility to drawn objects.
Squash & stretch
Motion interaction foundations
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 pageshttp://www.macitynet.it/flipboard-web-magazine/
External menu navigationhttp://capptivate.co/2013/11/23/airbnb/
Motion interaction foundations
Animation principles
压缩与伸展
仿真翻页 翻页 外置导航菜单
Design in Motion. The new frontier of interaction design
Increase affordance Anticipate hidden interactions
Tutorial & helpExplain new pattern
Anticipation is used to prepare the audience for an action, and to make the action appear more realistic.
Anticipation
Motion interaction foundations
Animation principles
预备动作
预备动作为观众铺垫的一下动作,使角色出场更真实
动画角色的动作,必须让馆长能够产生“预期性”,透过肢体动作的表演,或者分镜构图的安排,让观众与之角色的下一步动作,也就是让观众更能融入剧情中。
Anticipation
Card movementhttp://capptivate.co/2013/11/23/potluck/
Revealing additional function
http://capptivate.co/?s=clear
Horizontal slide to unlock
http://youtu.be/3JlOOO14oSU
Motion interaction foundations
Animation principles
预备动作
卡片抽取 横向滑动解锁 掀翻式增加功能
Design in Motion. The new frontier of interaction design
The purpose of staging is to direct the audience's attention, and make it clear what is of greatest importance in a scene
Staging
Motion interaction foundations
Animation principles
Focus on action trigger Display active object in the interface
React to user activity
演出布局
戏剧是经由编剧和导演设计安排出来的,动画更是如此,因为动画的所有动作安排与构图,都是需要靠动画师的手创造出来,所以在动画中的构图、运镜、动作、走位都需要仔细的设计安排,避免在同一时间又过多琐碎的动作与变化。最重要的还是精心设计好每一个镜头与动作,经过设计之后,不仅可让动画整体更好,也可以省去许多不必要的成本浪费。
演出布局目的引导观众注意,使观众清楚当前的场景,什么是值得注意的。
Staging
Motion interaction foundations
Message preview
http://goo.gl/fZABUf
Focus on the active area
http://vimeo.com/66395692
Animation principles
演出布局
消息预览 聚焦活动区域
Design in Motion. The new frontier of interaction design
"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.
Straight ahead and pose to pose
Motion interaction foundations
Directions Content position
Explaining IAReinforcing actions Helps exploration
Animation principles
连续运动与姿态对应
“连续运动”意味着从开始到结束,逐帧绘制出每个场景,“姿态对应”涉及到从绘制一些关键帧开始,然后填补时间间隔。
连续动作和姿态对应是两种动作动画的技巧,连续动作是将动作从第一张开始,依照顺序画到最后一张,通常是制作较简易的动态。姿势对应,将动作拆解成一些重要的定格动作。补上中间的间补动画后,产生动态的效果,通常适用于较复杂的动作。
Straight ahead and pose to pose
Motion interaction foundations
Step by step navigationhttp://capptivate.co/2014/01/18/timbre-3/
Section transitionhttp://capptivate.co/2014/01/18/epiclist/
Quick multiple fruit cut
http://goo.gl/zEOw55
Animation principles
连续运动与姿态对应
逐步导航 快速切水果 页面转场
Design in Motion. The new frontier of interaction design
"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.
Follow through and overlapping action
Motion interaction foundations
Animation principles
Explain UI pattern Show active areas / functions
Natural transitions
Set time to the experience
跟随与重叠动作
跟随动作,是将物体的各部位拆解,持续运动,直到角色动作停止。重叠动作,是将一栋中物体的各部位拆解,将其动作的时间错开。
跟随动作,是将物体的各部位拆解,通常是没有骨架的部位较容易产生跟随的动作,例如动物的尾巴,头发,衣服的末梢等等。重叠动作,是将一栋中物体的各部位拆解,将其动作的时间错开,产生分离重叠的时间差与夸张的变形,增加动画戏剧性与表现力,达到更容易吸引观众的目的,也强化了动画的趣味。
转场自然显示有效区域 / 功能
交代 UI样式
设置时间体验
Follow through and overlapping action
Motion interaction foundations
Content loadedhttp://capptivate.co/2013/09/30/phq4-3/
Revealing menuhttp://capptivate.co/2013/08/14/your-extra-life/
Tile transitionhttp://www.bobborries.com/Funnies/Windows8zoom.gif
Animation principles
跟随与重叠动作
内容加载 磁贴转场 菜单呈现
Design in Motion. The new frontier of interaction design
The "easing" principle deals with the spacing required to accurately depict the inherent law of inertia that governs all objects and people.
Slow in Slow out
Motion interaction foundations
Animation principles
Trigger for invisible interactions Change of status
Revealing new information Showing extra controls
Start/End of a transition state
慢进慢出
一般动作在开始与结束时速度较慢,中间过程速度较快一些,因为一般动作并非等速度运动,这时正常的物理现象。静止的物体开始移动时由慢而快,而将要停止时的物体则会由快变慢,若以等速度方式开始或者结束动作,则会产生一种唐突的感觉。
“easing” 原则:在空间上处理,所有支配的对象和人物,必须遵循惯性定律。
Slow in Slow out
Motion interaction foundations
Open/close main navigation
http://capptivate.co/2013/11/07/breezi/
Panel focus switchhttp://capptivate.co/2013/09/18/memoir/
List scrollinghttp://capptivate.co/2013/07/12/making-3/
Animation principles
Design in Motion. The new frontier of interaction design
慢进慢出
打开 / 关闭主导航 聚焦转换面板 列表卷动
Design in Motion. The new frontier of interaction design
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
Motion interaction foundations
Animation principles
Showing directions Explain possible interactions
Show loading and time Anticipate behaviours
弧形运动
动画中的动作,基本上除了机械的动作之外,几乎所有的动线都是以抛物线的方式进行,所以在绘制动线时,非机械式的物体,移动时不要完全以直线的方式运行,而机械式的物体,则使用较僵硬的直线运动,这样可以较容易的区别机械与非机械物体的属性,也可强化这两种完全不同的物体的个性。
它原则上模拟自然的一种趋向于弧形轨迹的行动,动画应当遵循这一原则,其次它意味着更写实。
Arcs
Motion interaction foundations
Animated infographicshttp://capptivate.co/2013/06/23/yahoo-weather-3/
Radial navigation systemhttp://capptivate.co/2013/07/08/applauze/
Data/Map content loadinghttp://capptivate.co/2013/06/25/ribbon//
Animation principles
动态信息图表 数据 /地图内容载入 弧形导航系统
弧形运动
Design in Motion. The new frontier of interaction design
This important principle about secondary motion behaviours is that they emphasize, rather than take attention away from, the main action.
Secondary actions
Motion interaction foundations
Animation principles
Showing status change Switch content focus Reinforcing transition
Keep focus on device status
第二动作
依附在主要动作之下的细微动作,虽然是属于比较微小的动作,但实际上却有画龙点睛的效果。第二动作并非不重要的动作,而是强化主要动作的关键,不仅可以使角色更生动真实,更可让角色感觉有生命。
有关第二第二动作行为准则,主要在于强调,而不是抢主要动作的注意力。
Secondary actions
Motion interaction foundations
iOs7 closing appshttp://www.youtube.com/watch?v=h8Cc1NqGTUI
Control center bump
http://goo.gl/vUOKYm
Folder position reset
http://goo.gl/JTtFnt
Animation principles
第二动作
iOS7 关闭 APP 重排文件价位置 调出控制中心
Design in Motion. The new frontier of interaction design
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
Motion interaction foundations
Animation principles
Start/End of a process Object
activation Accepted interactions Interaction
speed
时间节奏
动画的灵魂就是物体与角色的运动,而控制运动的关键就是动作的节奏与重量感。
动作的节奏就是速度的快慢,过快或者过慢都回让该动作看起来不自然,而不同的角色也会有不用的节奏,因为动作的节奏会影响到角色的个性,也会影响到动作自然与否。另一个控制运动的关键就是指量感,因为所有的物体都是有质量的,而节奏可以表现物体的质量,这和一般人对自然界的认知有关。
时间节奏对定义一个对象物理特征很有必要,如重量、大小与规模。它同样可以将对象按照一定规律出现。
Timing
Motion interaction foundations
Tapping timehttp://capptivate.co/2013/08/02/listen-3/
Loading resultshttp://www.alitalia.com
Content loadinghttp://capptivate.co/2014/01/09/yahoo-news-digest-3/
Animation principles
时间节奏
螺旋时间进度 加载结果 内容加载
Design in Motion. The new frontier of interaction design
The classical definition of exaggeration, employed by Disney, was to remain true to reality, just presenting it in a wilder, more extreme form.
Exageration
Motion interaction foundations
Animation principles
Reinforcing interaction Action trigger
Signature experience
夸张性
夸张典型的定义,来自迪斯尼,保留真实前提,通过带一点撒泼、更极端形式,合理地展现事物。
动画基本上就是夸张的表演方式,透过角色的表演,强化剧情起伏的情绪,让观众更容易融入剧情并且乐在其中。夸张不是只把动作幅度扩大而已,而是巧妙且适当地将剧情所需要的情绪释放出来。在设计动作与脚本时,如何运用动画本身容易表现苦熬张德优势去安排剧情的段落,动画师在诠释角色时对夸张程度的拿捏,都是动画精彩与否的关键。
Exageration
Motion interaction foundations
Keynote
example
Keynote
example
Reducing applicationhttp://i.imgur.com/WfWyJA5.gif
Hyper zoomhttp://capptivate.co/2013/06/27/lumosity/
Remove a matchhttp://i.imgur.com/wbIWuKD.gif
Animation principles
夸张性
还原应用窗体 透视变焦 移除一场比赛
Design in Motion. The new frontier of interaction design
The principle of solid drawing means taking into account forms in three-dimensional space, giving them volume and weight.
Solid drawing
Motion interaction foundations
Animation principles
Space extension Good for Mobile
Extra space for info3d as an additional info
layer
扎实的描绘
动画的制作,视觉表现占了很大一部分,而视觉表现则需要非常扎实的绘画训练以及对美感的敏锐度,不论是制作传统动画或者是电脑动画都一样,动画师都需要有扎实的绘画基础训练,才能将动画中所需要的画面完整的表现出来。
扎实描绘原则意味着,考虑到在三维空间的形式,赋予它们体积与质量。
Solid drawing
Motion interaction foundations
Revealing selectors
CSS Card fliphttps://daneden.me/animate/
Revealing extra spacehttp://capptivate.co/2013/11/19/445/
Animation principles
扎实的描绘
唤出选择器 CSS 卡片弹跳 3D展现额外间距
Design in Motion. The new frontier of interaction design
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
Motion interaction foundations
Animation principles
Personality Emotional experience Signature
experience
吸引力
动画角色的吸引力是类似于现场演员的魅力。重要的是,观众能感觉这个角色真实与有趣。
吸引力是任何一种艺术都必要具备的条件,动画是和电影一样,包含了许多不同的艺术类型在其中,不管是音乐、画面或者剧情,都必须相互搭配,才能交织整体感最好的动画作品。动画通常最吸引人的地方,就是充满想象力的画面的表现方式。动画几乎所有都是经由动画师与导演的手“创造”出来的,对画面表现的“自由度”极高,所以动画总是给人一种充满想象的感觉,也是动画最吸引人的地方。
Appeal
Motion interaction foundations
Animation principles
Character animation (pin)http://capptivate.co/2014/01/18/meattext/
Tapping weatherhttp://i.imgur.com/IoWbato.gif
Trash tickethttp://i.imgur.com/nDoQ
TEI.gif螺纹布局天气 卡通人物 丢弃票据
吸引力
Motion interaction foundations
Motion taxonomy
From a motion behaviours taxonomyDifferent 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 physicalphysical
SymbolicAbstractIn-context
No-contextDiscreteContinuous
User defined Motion Gestures for Mobile Interaction - J. Ruiez, Y. Li, E. Lank
Action
Scope
从一个动作行为分类
不同的方式组织动效形式,可帮助设计师理解,在什么时候、采用哪种形式,对于实现特定效果或特定动作有一定的帮助。
动作 作用域
扩展定向
正反馈反馈强调唤醒
自然
上下文
临时的
物理修饰物理特性符号抽象
上下文关联无关联离散连续
Motion interaction foundations
Motion taxonomy
To a more abstract modelTaxonomy 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
抽象模型
分类法和类别不仅可帮助我们有机组织模型,还允许我们通过想象力多种维度理解更深邃意境。时间
主动被动
空间
Motion interaction foundations
Motion taxonomy
Passive interactionThe 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
被动交互
系统正等待用户输入,它通过系统状态,阐述了一个自发的过程或触发用户激活 /反馈。时间
主动被动
空间
自动化反馈系统被激活
导航模型空间被释放
Motion interaction foundations
Motion taxonomy
Active interactionsThe 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 User feedforward
Augmented UI Object control
Passive Active
Time
Space
主动交互
系统对用户输入作出反应(直接和间距行为),对人的行为进行报告与反馈,或者对下一个交互的正反馈,展示额外空间和授权 UI操作。时间
主动被动
空间
系统对用户正反馈
增强 UI元件控制
Motion interaction foundations
Motion taxonomy
Nat
ure
of a
ction
s
How to choose the right pattern?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 interactionDesign in Motion. The new frontier of interaction
design
Automatic reaction System
activation
Navigation model Space
explanation
System feedback User
feedforward
Augmented UI Object control
如何选择合适的方式
设定一个普通规则不大可能,但设计师应该根据交互上下文关联和行为自然贯彻整体服务的一贯性原则应用动效。时间
主动被动
空间
行为自然
交互的上下文关联
自动化反馈系统被激活
导航模型空间被释放
系统对用户正反馈
增强 UI元件控制
Motion interaction foundations
Motion taxonomy
Nat
ure
of a
ction
s
Request user attention
Trigger user action
Confirm user action
User manipulate the interface
Clear
Design a memorable Signature ExperienceMotion 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 interactionDesign in Motion. The new frontier of interaction
design
用户行为确认
行为自然
交互的上下文关联
用户行为请求
用户行为触发 用户操作界面
设计一个难忘的签名经验
动作行为可增加和扩展可用性,许多情况下无处不在。同理,使用它们提供一个品牌体验签名服务,提高用户体验和产品可记忆性。
MOTION INTERACTIONTOOLS & PRACTICE
动效交互工具与实践
Design in Motion. The new frontier of interaction design
The right tool
Give me a lever and I can move the world.
ARCHIMEDE DI SIRACUSA
合适的工具
给我一个支点,我可以撬动地球。阿基米德
Design in Motion. The new frontier of interaction design
Make it Real & ShiningUser 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
Motion interaction foundations
What is the right tool?
使它更逼真和绚丽
用户体验包括与与最终用户交互所有方面。 UX 设计都是源自原型情感故事和用户交互仿真原型。
Concept & sketch
Motion prototype
Interactive prototype
Explain motion
Design in Motion. The new frontier of interaction design
Our tools
How we can visualize motion behaviours and choose the right tool?
Motion interaction foundations
What is the right tool?
我们的工具
概念与草稿动效原型交互原型动效输出
我们如何体现动效行为与选择合适工具?
High fidelityDevelopement
Low FIdelityConcept evaluation
The motion designer toolkitThere 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 EffectsBrief / Paper protoKeynote
Adobe Edge
Css framework Frame.js
Motion interaction foundations
What is the right tool?
Quarz composerVVVV
Interac2ve documenta2on
Mo2on to code
Product Storytelling
Concept & sketch
Motion prototype
Explain motion
Interactive prototype
Design in Motion. The new frontier of interaction design
动效设计师工具包
高或低保真度都无关紧要,只要适合自己的保真度,能帮助你达到所设定的目标的原型。
动效原型概念与草稿 交互原型 动效输出高保真开发低保真概念预设
手绘草稿主调 剧本
Concept & sketch
Motion interaction foundations
What is the right tool?
Protosketchhttps://protosketch.uistencils.com/
Paper sketch & prototye
Design in Motion. The new frontier of interaction design
Low fidelity / Low interaction
Keyno
Concept & sketch
te
Motion interaction foundations
What is the right tool?
Keynote app prototypehttp://www.lukew.com/ff/entry
.asp?1171
Keynote
Design in Motion. The new frontier of interaction design
Medium fidelity / Low interaction
Concept & sketch
Motion interaction foundations
What is the right tool?
Brief / InVision Apphttp://giveabrief.com/ - http://www.invisionapp.com
Brief / In Vision
Design in Motion. The new frontier of interaction design
Medium fidelity / Medium interaction
Motion interaction foundations
What is the right tool?
AE: UI Animation Design
http://goo.gl/PPEO7s
After Effects
Design in Motion. The new frontier of interaction design
High fidelity / Low interaction
Motion prototype
Motion prototype
Motion interaction foundations
What is the right tool?
High fidelity / Medium interaction
Edge Animate / Edge reflow
Design in Motion. The new frontier of interaction design
Motion interaction foundations
What is the right tool?
Cyclops / Framer JS
Cyclops & Framer Js
Motion prototype
High fidelity / Medium interaction
https://github.com/Instrument/cyclops http://www.framerjs.com/index.html
Design in Motion. The new frontier of interaction design
Motion interaction foundations
What is the right tool?
Quarz composer / VVVVOrigami / VVVVHigh fidelity / High
interactionhttp://vimeo.com/85578380 - https://github.com/PrototypingInterfaces/
Design in Motion. The new frontier of interaction design
Motion prototype
Explain motion
Motion interaction foundations
What is the right tool?
Interactive documentation
Scrolling
High fidelity / Low interactionDesign in Motion. The new frontier of interaction
design
Motion interaction foundations
What is the right tool?
Explain motion
Concept Storytelling
Design in Motion. The new frontier of interaction design
High fidelity / Low interaction
Beacon, Frog NYhttp://www.frogdesign.com/work/reinventing-the-payphone.html
What is the best tool?Agile methodology needs a different design
workflow
Motion interaction foundations
What is the right tool?
Research
Concept
Wireframe
Visual
Develop
User test
Prototype
Sketch
Review
Design in Motion. The new frontier of interaction design
There is no perfect toolThe right tool is the one that helps
you communicate your conceptWe need to explain complex problems & big project in a simple way and
test if they're clear and meaningful to people.
Motion interaction foundations
What is the right tool?
Functional prototypeConcept experience
Design in Motion. The new frontier of interaction design
Hand Sketch Keynote Brief / Paper proto A:er effect Adobe edge Mo2on to code Css framework Quarz composer Interac2ve ProductFrame.js VVVV documenta2on Storytelling
Motion interaction foundations
What is the right tool?
Research
Design in Motion. The new frontier of interaction design
Concept
Wireframe
Visual
Develop
User test
Prototype
Sketch
Review
How can we deliver motion behaviours?
From concept design to market ready solution
a DesignerCoding and testing in real time adesign solution, to highlight technology or UX/Interaction related problems on the go.Understanding from the beginning the complexity of motion dynamics
a developerIt is always a good feeling not to bethe 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?Motion interaction foundations
Design with codeUnderstanding the platform constrains
to evaluate better the real effort to produce motion
Design in Motion. The new frontier of interaction design
The future is already here.
It's just not evenly distributed.
WILLIAM GIBSON
Let's do it
FURTHER READING
Design in Motion. The new frontier of interaction design
Further reading
The Illusion of Life: Disney animation
Fran Thomas, Ollie Johnston, 1995
Designing InterfacesJenifer Tidwel, 2000
Designing gestural interfaces
Dan Saffer, 2007
Design in Motion. The new frontier of interaction design
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
Design in Motion. The new frontier of interaction design
https://daneden.me/animate/
W3C CSS3 Anima2on
http://www.w3schools.com/css/css3_animations.asp
Design in Motion. The new frontier of interaction design
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/
Design in Motion. The new frontier of interaction design
Thanks!@myinteractio
nto continue the discussion!
Oblivion GFXhttps://vimeo.com/64377100