resume at 3:15 download chrome browser and assets http ... · google photo...

Copyright © Studio XID, All right reserved 2015

Resume at 3:15

Download Chrome browser and assets http://download.protopie.io

WiFi: xid1,2,3,4 PW: protopie

1

http://download.protopie.io


– How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008

“86%的设计师认为交互设计比用户界面更难。”

2

“86% of designers feel it is more difficult to design interaction than user interface.”

Copyright © Studio XID, All right reserved 2015 3

原型工具可以拯救你!Prototyping tools to save you!


原型工具


图形⼯工具

交流工具

流程工具

5

SophisticatedBa

sicEasy to learn

Training required

原型工具

线框图⼯工具


Origami


Framer


Pixate


ProtoPie 菠萝头派

?

交互原型基础 Basic of Interactive Prototyping


剖析交互

11 Source: http://microinteractions.com/what-is-a-microinteraction/

触发器Trigger

规则Rules

反馈Feedback

循环Loops


触摸触发器

触摸屏

开始 Start

过程中 During

结束End


速度Di

stan

ce

Time

Velo

city

Time


加速度


坐标系

x

y

(10, 5)

(5, 10)

ProtoPie


编辑⼯工具 + 测试器


交互模块面板

组合⾯面板预览⾯面板

属性菜单

排序面板


触发器 + 对象 + 响应触发器

响应

对象

对象

准备好来试吃了吗?

Facebook Paper

通过加速计实现硬件倾斜Hardware Tilt by Accelerometer

Around

通过旋转&透明度变化实现投掷卡⽚片Throwing Cards by Rotate & Opacity Change

Solar

通过夹捏和场景控制实现夹捏Pinch Close by Pinch & Scene control

Google Photo

通过夹捏，旋转，移动多指手势Multi-finger gesture by Pinch & Rotate & Move

练习 Exercise


https://app.protopie.io

https://app.protopie.io


硬件倾斜Hardware Tilt


Tilt

Move

• Axis: X

• Direction: Horizontal• Ratio: 20• Limit

• Min: -500• Max: 0

• Smoothness: 100


开始-过程中- 结束Start-During-End

Touch Screen

Start During End


Drag

Scale

• When : Start

• Size : 200px• Duration : 200

Drag

Move

• When : During

• Ratio : 1

Drag

Scale

• When : End

• Size : 150px• Duration : 200

投掷卡片Throwing Cards

45°

More than 720px

Opacity: 0%Opacity: 100%


Drag

Move

• When : During• Direction : Horizontal

• Direction : Horizontal• Ratio : 1

Rotate• Mapping : CW• Ratio : 0.05• Limit

• Min : 0• Max : 45

Opacity• Mapping : More transparent• Ratio : 0.1

Drag

Move

• When : During• Direction : Vertical

• Direction : Vertical• Ratio : 1


Rotate• Direction : CW• Degree : 45• Duration : 200

Move• Destination : X 720• Duration : 200

Opacity• Opacity : 0• Duration : 200

Drag• When : End• Direction : Horizontal

夹捏Pinch Close

(32,88) (364,88)

(32,672) (364,672)

Pivot (56.18,160)

Pivot (26.18,72)

576px

324px

Scene 1 Scene 2


Tap

Scale

• Fingers : 1

• Size : 720 X 1280• Pivot : (26.18 , 72)• Duration : 200

Link• Scene : Scene 2• Delay : 200


39

Pinch

Scale

• When : During

• Direction : Both• Ratio : 1• Pivot : (56.18 , 160)

Pinch

Scale

• When : End

• Size : 324 X 576• Duration : 200• Pivot : (56.18 , 160)

Opacity• Opacity : 100 %• Delay : 200• Duration : 200

Link• Scene : Scene 1• Delay : 400

多指手势Multi-finger gesture

(10,408)

466px

324px


Pinch

Scale

• When: During

• Direction: Both• Ratio: 1

Rotate

Rotate

• When: During

• Mapping : CW• Ratio : 1

Drag

Move• Ratio : 1

Drag

Move

• When : During• Fingers : 1• Direction : Free

• Ratio : 1

• When : During• Fingers : 2• Direction : Free

内测买上开始! • 申请 http://protopie.io • 联系 [email protected] • 关注 http://weibo.com/u/5625605183

谢谢!

http://protopie.io

mailto:[email protected]

http://weibo.com/u/5625605183

resume at 3:15 download chrome browser and assets http ... · google photo...

Documents