resume at 3:15 download chrome browser and assets http ... · google photo...
Post on 21-May-2020
1 Views
Preview:
TRANSCRIPT
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
Copyright © Studio XID, All right reserved 2015
– 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!
Copyright © Studio XID, All right reserved 2015 4
原型工具
Copyright © Studio XID, All right reserved 2015
图形⼯工具
交流工具
流程工具
5
SophisticatedBa
sicEasy to learn
Training required
原型工具
线框图⼯工具
Copyright © Studio XID, All right reserved 2015 6
Origami
Copyright © Studio XID, All right reserved 2015 7
Framer
Copyright © Studio XID, All right reserved 2015 8
Pixate
Copyright © Studio XID, All right reserved 2015 9
ProtoPie 菠萝头派
?
交互原型基础 Basic of Interactive Prototyping
Copyright © Studio XID, All right reserved 2015
剖析交互
11 Source: http://microinteractions.com/what-is-a-microinteraction/
触发器Trigger
规则Rules
反馈Feedback
循环Loops
Copyright © Studio XID, All right reserved 2015 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf12
Copyright © Studio XID, All right reserved 2015 13
触摸触发器
触摸屏
开始 Start
过程中 During
结束End
Copyright © Studio XID, All right reserved 2015 14
速度Di
stan
ce
Time
Velo
city
Time
Copyright © Studio XID, All right reserved 2015 15
加速度
Copyright © Studio XID, All right reserved 2015 16
坐标系
x
y
(10, 5)
(5, 10)
ProtoPie
Copyright © Studio XID, All right reserved 2015 18
编辑⼯工具 + 测试器
Copyright © Studio XID, All right reserved 2015 19
交互模块面板
组合⾯面板 预览⾯面板
属性菜单
排序面板
Copyright © Studio XID, All right reserved 2015 20
触发器 + 对象 + 响应触发器
响应
对象
对象
准备好来试吃了吗?
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
Copyright © Studio XID, All right reserved 2015 28
硬件倾斜Hardware Tilt
Copyright © Studio XID, All right reserved 2015 29
Tilt
Move
• Axis: X
• Direction: Horizontal• Ratio: 20• Limit
• Min: -500• Max: 0
• Smoothness: 100
Copyright © Studio XID, All right reserved 2015 30
开始-过程中- 结束Start-During-End
Touch Screen
Start During End
Copyright © Studio XID, All right reserved 2015 31
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%
Copyright © Studio XID, All right reserved 2015 34
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
Copyright © Studio XID, All right reserved 2015 35
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
Copyright © Studio XID, All right reserved 2015 38
Tap
Scale
• Fingers : 1
• Size : 720 X 1280• Pivot : (26.18 , 72)• Duration : 200
Link• Scene : Scene 2• Delay : 200
Copyright © Studio XID, All right reserved 2015
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
Copyright © Studio XID, All right reserved 2015 42
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 • 联系 hello@studioxid.com • 关注 http://weibo.com/u/5625605183
谢谢!
top related