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

Design in Motion

The new frontier of Interaction design

Antonio De PasqualeSenior Interaction Designer

at frog@myinteraction

交互设计新前沿

动效设计

译者LO PM

[email protected]

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 动效这两个词有什么相似之处？


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 动效理念设计研究衡量标准示意图信息架构用户需求用户测试用户体验流用户场景原型…

美学动画

故事性动态影像角色动画视觉设计动感设计排版印刷转场设计




What have this two worlds in common?

这两个词有什么相似之处？

交互 VS 动效

动效设计场景设计

用户交互场景

用户界面设计

交互设计

应用设计

引导体系

安装媒体

交互式控制

普适计算

交互环境

人机交互

可用性工程


A wide picture ofUser Experience Design Communication Interaction & IAMotion



一张大图说明用户体验设计 & 工业自动化动效设计

场景设计

用户交互场景用户界面设计

交互设计

应用设计

引导体系

安装媒体

交互式控制

普适计算

交互环境

人机交互

可用性工程

动效设计

计算机科学软件开发

衍生设计

传播设计数据可视化

导航设计

功能需求

信息架构前后关联需求

数位看板

销售

空间体验

体系结构

书写

工业设计机械工程

电气工程哲学认知科学心理学

社会学

人因工程学

音效设计音频工程

用户体验式设计

Interaction


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

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


开篇

游戏通常利用数位空间，通过一些特定的交互，产生动态视觉效果。

介绍：交互设计与数位产品

Web 1.0: Java & GifAt the beginning of the Web, few technologies allowed

motion in web pages but mostly just for eye-candy


Applet JavaAnimated Gif



在互联网初期，一些技术可以使网页动起来，但这些都是华而不实的。

动画图片 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


LeoBurnet, 20063d navigation, motion detectionhttp://v2.2a-archive.com/flashindex.htm



通过简单的动画工具， Flash改变设计师动效设计体验。Flash黄金时代

http://v2.2a-archive.com/flashindex.htm


















LeoBurnet, 20063d navigation, motion detectionhttp://v2.2a-archive.com/flashindex.htm








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 视觉差选项卡撕页式显示隐藏控件下拉式悬浮菜单

介绍：转场界面

伴随手机应用爆增，动效开始成为交互模型的核心部分之一。

+



The Web ReloadedWith the introduction of the new w3c specifications,

html & css added new life to motion & dynamic on the web当引入新 W3C规范标准后， html 与 css 为网页动效注入新的生命力。

网页重生



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.



手势识别变成了一种控制与动作交互的常见模式，这是对功能可感知的一种诠释。它意味着物理动作形式会变成虚拟的交互。

手势与动作


The FutureNew desktop physical control, css4 html6, smartphone

gesture recognition, hands & fingers tracking...



未来

新桌面物理操作、 css4 html6 、可手势识别的智能电话、手与手指动作捕捉等


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




动效交互演变历程技术

动效交互控制

简单动画 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


从动漫到用户界面







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.


* Panop Koonwat - https://vimeo.com/65815545


Animation princples


迪斯尼动画原理 : 动画 12 大原则

迪斯尼十二动画基本原则，是一套定义了遵循基本物理定律的写实印画。



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



Animation princples

迪斯尼动画原理 : 动画 12 大原则

压缩与伸展预备动作

演出布局连续运动与姿态对应跟随与重叠动作

慢进慢出弧形运动

第二动作时间节奏

夸张性扎实的描绘

吸引力


the purpose of this principle is to give a sense of weight and flexibility to drawn objects.

Squash & stretch



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/



压缩与伸展

仿真翻页翻页外置导航菜单






http://www.macitynet.it/flipboard-web-magazine/







http://capptivate.co/2013/11/23/airbnb/




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



预备动作

预备动作为观众铺垫的一下动作，使角色出场更真实

动画角色的动作，必须让馆长能够产生“预期性”，透过肢体动作的表演，或者分镜构图的安排，让观众与之角色的下一步动作，也就是让观众更能融入剧情中。

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



预备动作

卡片抽取横向滑动解锁掀翻式增加功能

http://capptivate.co/2013/11/23/potluck/










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.

Straight ahead and pose to pose


Directions Content position

Explaining IAReinforcing actions Helps exploration


连续运动与姿态对应

“连续运动”意味着从开始到结束，逐帧绘制出每个场景，“姿态对应”涉及到从绘制一些关键帧开始，然后填补时间间隔。

连续动作和姿态对应是两种动作动画的技巧，连续动作是将动作从第一张开始，依照顺序画到最后一张，通常是制作较简易的动态。姿势对应，将动作拆解成一些重要的定格动作。补上中间的间补动画后，产生动态的效果，通常适用于较复杂的动作。

Straight ahead and pose to pose


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


连续运动与姿态对应

逐步导航快速切水果页面转场

http://capptivate.co/2014/01/18/timbre-3/





http://capptivate.co/2014/01/18/epiclist/







"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



Explain UI pattern Show active areas / functions

Natural transitions

Set time to the experience

跟随与重叠动作

跟随动作，是将物体的各部位拆解，持续运动，直到角色动作停止。重叠动作，是将一栋中物体的各部位拆解，将其动作的时间错开。

跟随动作，是将物体的各部位拆解，通常是没有骨架的部位较容易产生跟随的动作，例如动物的尾巴，头发，衣服的末梢等等。重叠动作，是将一栋中物体的各部位拆解，将其动作的时间错开，产生分离重叠的时间差与夸张的变形，增加动画戏剧性与表现力，达到更容易吸引观众的目的，也强化了动画的趣味。

转场自然显示有效区域 / 功能

交代 UI样式

设置时间体验

Follow through and overlapping action


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


跟随与重叠动作

内容加载磁贴转场菜单呈现

http://capptivate.co/2013/09/30/phq4-3/



http://capptivate.co/2013/08/14/your-extra-life/







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.

Slow in Slow out



Trigger for invisible interactions Change of status

Revealing new information Showing extra controls

Start/End of a transition state

慢进慢出

一般动作在开始与结束时速度较慢，中间过程速度较快一些，因为一般动作并非等速度运动，这时正常的物理现象。静止的物体开始移动时由慢而快，而将要停止时的物体则会由快变慢，若以等速度方式开始或者结束动作，则会产生一种唐突的感觉。

“easing” 原则：在空间上处理，所有支配的对象和人物，必须遵循惯性定律。

Slow in Slow out


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/



慢进慢出

打开 / 关闭主导航聚焦转换面板列表卷动








http://capptivate.co/2013/09/18/memoir/



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 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//


动态信息图表数据 /地图内容载入弧形导航系统

弧形运动

http://capptivate.co/2013/06/23/yahoo-weather-3/







http://capptivate.co/2013/07/08/applauze/




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.

Secondary actions



Showing status change Switch content focus Reinforcing transition

Keep focus on device status

第二动作

依附在主要动作之下的细微动作，虽然是属于比较微小的动作，但实际上却有画龙点睛的效果。第二动作并非不重要的动作，而是强化主要动作的关键，不仅可以使角色更生动真实，更可让角色感觉有生命。

有关第二第二动作行为准则，主要在于强调，而不是抢主要动作的注意力。

Secondary actions


iOs7 closing appshttp://www.youtube.com/watch?v=h8Cc1NqGTUI

Control center bump

http://goo.gl/vUOKYm

Folder position reset

http://goo.gl/JTtFnt


第二动作

iOS7 关闭 APP 重排文件价位置调出控制中心

http://www.youtube.com/watch?v=h8Cc1NqGTUI












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 timehttp://capptivate.co/2013/08/02/listen-3/

Loading resultshttp://www.alitalia.com

Content loadinghttp://capptivate.co/2014/01/09/yahoo-news-digest-3/


时间节奏

螺旋时间进度加载结果内容加载

http://capptivate.co/2013/08/02/listen-3/



http://www.alitalia.com/



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 applicationhttp://i.imgur.com/WfWyJA5.gif

Hyper zoomhttp://capptivate.co/2013/06/27/lumosity/

Remove a matchhttp://i.imgur.com/wbIWuKD.gif


夸张性

还原应用窗体透视变焦移除一场比赛

http://i.imgur.com/WfWyJA5.gif





http://capptivate.co/2013/06/27/lumosity/



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.

Solid drawing



Space extension Good for Mobile

Extra space for info3d as an additional info

layer

扎实的描绘

动画的制作，视觉表现占了很大一部分，而视觉表现则需要非常扎实的绘画训练以及对美感的敏锐度，不论是制作传统动画或者是电脑动画都一样，动画师都需要有扎实的绘画基础训练，才能将动画中所需要的画面完整的表现出来。

扎实描绘原则意味着，考虑到在三维空间的形式，赋予它们体积与质量。

Solid drawing


Revealing selectors

CSS Card fliphttps://daneden.me/animate/

Revealing extra spacehttp://capptivate.co/2013/11/19/445/


扎实的描绘

唤出选择器 CSS 卡片弹跳 3D展现额外间距

http://capptivate.co/2013/11/19/445/




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 weatherhttp://i.imgur.com/IoWbato.gif

Trash tickethttp://i.imgur.com/nDoQ

TEI.gif螺纹布局天气卡通人物丢弃票据

吸引力

http://capptivate.co/2014/01/18/meattext/



http://i.imgur.com/IoWbato.gif







http://i.imgur.com/nDoQTEI.gif








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

从一个动作行为分类

不同的方式组织动效形式，可帮助设计师理解，在什么时候、采用哪种形式，对于实现特定效果或特定动作有一定的帮助。

动作作用域

扩展定向

正反馈反馈强调唤醒

自然

上下文

临时的

物理修饰物理特性符号抽象

上下文关联无关联离散连续

http://www.ui-transitions.com/














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 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 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 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 taxonomy

Nat

ure

of a

ction

s

Request user attention

Trigger user action

Confirm user action

User manipulate the interface

Flipboard

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

动效交互工具与实践


The right tool

Give me a lever and I can move the world.

ARCHIMEDE DI SIRACUSA

合适的工具

给我一个支点，我可以撬动地球。阿基米德


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


What is the right tool?

使它更逼真和绚丽

用户体验包括与与最终用户交互所有方面。 UX 设计都是源自原型情感故事和用户交互仿真原型。

Concept & sketch

Motion prototype

Interactive prototype

Explain motion


Our tools

How we can visualize motion behaviours and choose 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



Quarz composerVVVV

Interac2ve documenta2on

Mo2on to code

Product Storytelling

Concept & sketch

Motion prototype

Explain motion

Interactive prototype


动效设计师工具包

高或低保真度都无关紧要，只要适合自己的保真度，能帮助你达到所设定的目标的原型。

动效原型概念与草稿交互原型动效输出高保真开发低保真概念预设

手绘草稿主调剧本

Concept & sketch



Protosketchhttps://protosketch.uistencils.com/

Paper sketch & prototye


Low fidelity / Low interaction

Keyno

Concept & sketch

te



Keynote app prototypehttp://www.lukew.com/ff/entry

.asp?1171

Keynote


Medium fidelity / Low interaction

http://www.lukew.com/ff/entry.asp?1171









Concept & sketch



Brief / InVision Apphttp://giveabrief.com/ - http://www.invisionapp.com

Brief / In Vision


Medium fidelity / Medium interaction

http://giveabrief.com/






http://www.invisionapp.com/







AE: UI Animation Design

http://goo.gl/PPEO7s

After Effects


High fidelity / Low interaction

Motion prototype






Motion prototype



High fidelity / Medium interaction

Edge Animate / Edge reflow




Cyclops / Framer JS

Cyclops & Framer Js

Motion prototype

High fidelity / Medium interaction

https://github.com/Instrument/cyclops http://www.framerjs.com/index.html


http://www.framerjs.com/index.html





Quarz composer / VVVVOrigami / VVVVHigh fidelity / High

interactionhttp://vimeo.com/85578380 - https://github.com/PrototypingInterfaces/


Motion prototype





Explain motion



Interactive documentation

Scrolling

High fidelity / Low interactionDesign in Motion. The new frontier of interaction

design



Explain motion

Concept Storytelling


High fidelity / Low interaction

Beacon, Frog NYhttp://www.frogdesign.com/work/reinventing-the-payphone.html

http://www.frogdesign.com/work/reinventing-the-payphone.html










What is the best tool?Agile methodology needs a different design

workflow



Research

Concept

Wireframe

Visual

Develop

User test

Prototype

Sketch

Review


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.



Functional prototypeConcept experience


Hand Sketch Keynote Brief / Paper proto A:er effect Adobe edge Mo2on to code Css framework Quarz composer Interac2ve ProductFrame.js VVVV documenta2on Storytelling



Research


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


The future is already here.

It's just not evenly distributed.

WILLIAM GIBSON

Let's do it

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

Internet

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