SLIDE 1
Tailor Your Games for Mobile Devices
Super useful Tricks for Quick Enhancement of UX 为移动设备量身打造游戏 — 快速提升用户体验的超实用方法
Gino Gao 高博
User Experience Director | Firewing Games 交互设计总监 | 火翼游戏
What i s Int er ac tion?
什 么 是交 互？
Tailor Your Games for Mobile Devices Super useful Tricks for Quick - - PowerPoint PPT Presentation
Tailor Your Games for Mobile Devices Super useful Tricks for Quick - - PowerPoint PPT Presentation
Tailor Your Games for Mobile Devices Super useful Tricks for Quick Enhancement of UX Gino Gao User Experience Director | Firewing Games
SLIDE 2 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 3
你 来
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices我 往
输入 I nput 输 出 O ut put
SLIDE 4 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Y ou lo o k h or r ib l e
SLIDE 5 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 6
e xe rc i se Time
练 习 时 间
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 7 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
显著线索
salient cue
显著线索
salient cue
SLIDE 8 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
显著线索
salient cue
SLIDE 9 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
显著线索
salient cue
显著线索
salient cue
显著线索
salient cue
SLIDE 10
Pe o ple pa y attention
- nly to sali ent c ues
人 们 只 会 注 意 到显 著 线 索
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 11
D ec i d e what t h e salient c ues ar e i n U I ，and ma ke them obvious
考 虑 清 楚 什 么 是 界 面 中 的 重 点 ， 通过改变 颜 色 ， 大 小 和 形 状 让 它 们 成 为 显 著 线 索
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 12 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 13 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 14 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 15 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 16 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 17
P eople make e rr or s when t h e y are under s tr es s
人 在 压 力 下 更 容 易 出 错
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 18 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
压力水平
Stress Level
完成效率
Performance
简单的任务
Simple Task
复杂的任务
Complex Task
SLIDE 19
合 理 创 造 压 力 ， 促使玩家更 有 效 率 的 完 成 任 务 ， 或 是 适 时 地 犯 错
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 20 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 21
T a il o r Yo ur Game s f or Mobile Devices
为 移 动 设 备 量 身 打 造 游 戏
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 22
D e si gn f o r touc h
为 触 屏 而 设 计
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 23 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Button
SLIDE 24 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Button Button
SLIDE 25 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Button Button
SLIDE 26
L o o k d i f f e re nt , B ehave the s ame
外 观 可 以 不 同 ， 形 式 需 要 相 同
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 27
mo b i le d e v i c e s ar e not…
移 动 设 备 并 不 是
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 28 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 29 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 30 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 31 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 32 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 33
P refe r ge st ure s to buttons
比 起 按 钮 ， 更 适 合 用 手 势 来 操 作
Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices SLIDE 34 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 35
SLIDE 36
SLIDE 37 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 38 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 39 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 40 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 41
SLIDE 42 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
B u tto n si ze s and pos itions
如何决 定 界 面 中 按 钮 的 大 小 和 位 置 ？
SLIDE 43 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Button
Button SLIDE 44 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Button Button
Button Button Button Button Button Button Button SLIDE 45 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Fitts' Law MT = a + b log2 (D / W + 1) 到达时间 目标距离 目标大小 经验参数
SLIDE 46 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Button
Button?
SLIDE 47 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Button
Button SLIDE 48 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 49 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 50 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
F i tt s' L aw
越 远 越 小 越 困 难 ， 越近 越 大 越 容 易
SLIDE 51 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
S k eu omo rphi sm or Flat Des ign
拟 物 还 是 扁 平 ？
SLIDE 52 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
i O S 6 iOS 7
拟物化设计 扁平化设计
SLIDE 53 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 54 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 55 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
P eo p l e i ma gi ne objec ts tilted a n d a t a sli ght angle above
侧 向 俯 视 是 想 象 物 体 的 标 准 视 角
SLIDE 56 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 57 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
D ra w i co ns fr om a cano ni c al per s pective
如果不能很好的 驾 驭 扁 平 化 风 格 ， 就 使 用 标 准 视 角 来 绘 制 图 标
SLIDE 58 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
B ut, Saf e ne v e r kicks ass
SLIDE 59 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 60 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 61 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 62 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 63 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 64 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 65 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 66 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 67 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 68 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 69 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Po pup matter s
你 的 弹 窗 好用 吗 ？
SLIDE 70 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
No Yes Buy Gold Chest now?
SLIDE 71 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Cancel Buy Buy Gold Chest now? No Yes
SLIDE 72 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Cancel Buy Buy Gold Chest now?
SLIDE 73 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Cancel Use Use this item now?
SLIDE 74 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Cancel Join Join this alliance?
SLIDE 75 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Cancel Join Join this alliance?
Affirmative
SLIDE 76 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Cancel Reset Reset all settings?
Destructive
SLIDE 77 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Cancel Reset all settings? Reset
Destructive
SLIDE 78 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Reset Cancel Reset all settings? Reset
SLIDE 79 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Cancel Upgrade Mine to level 2? 500
SLIDE 80 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Menu Play Again
Game Over
SLIDE 81 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Menu Play Again We regret to inform you that all of your lives have been expended and therefore game has now ended.
SLIDE 82 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Cancel Use Use this item now?
SLIDE 83 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 84 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 85 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
F o nt a nd si ze matter s
字 体 ， 字 号 ， 字色 怎 么 选 ？
SLIDE 86 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
All the fonts here are the same size, but some look larger than others because the x-height
- f different font families vary.
All the fonts here are the same size, but some look larger than others because the x-height
- f different font families vary.
All the fonts here are the same size, but some look larger than others because the x-height
- f different font families vary.
SLIDE 87 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Ifjx
x - h e i g h t Ascender D esc en d er SLIDE 88 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Chromostereopsis
SLIDE 89 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis
SLIDE 90 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis
SLIDE 91 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis
SLIDE 92 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis
SLIDE 93 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis
SLIDE 94 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
C hro mo st er eops is are hard o n the ey es
色 彩 立 体 视 觉 会 导 致 难 以 阅 读
SLIDE 95 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis
SLIDE 96 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis Chromostereopsis
SLIDE 97 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
re co gni zi ng fac es
大 脑 有 专 门 识 别人 脸 的 区 域
SLIDE 98 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 99 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
D a ng er, f o o d , se x, m ovement, faces a n d s t o r i e s ge t the mos t attention
危险， 食 物 ， 性 ， 移 动 ， 人 脸 和 故 事
SLIDE 100 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Frequent buyer card
SLIDE 101 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
Frequent buyer card Frequent buyer card
SLIDE 102 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
G o a l - g r a d i e n t e f f e c t
趋近效应
SLIDE 103 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
P eo p l e a re mo re motivated as t h ey ge t clo ser to a goal
越 接 近 的 目 标 越 容 易 达 成
SLIDE 104 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
怎 样 为 你 的 游 戏 量 身 打 造 界 面 ？
SLIDE 105 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 106 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 107 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 108 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 109 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 110 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 111 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 112 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 113 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 114 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
SLIDE 115 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
怎 样 为 你 的 游 戏 量 身 打 造 界 面 ？
SLIDE 116 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
设 计 来 源 于 需 求
SLIDE 117 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
在 局 限 中 做 设 计
SLIDE 118
SLIDE 119
SLIDE 120
SLIDE 121
SLIDE 122
C hro m e
SLIDE 123
Mai l
SLIDE 124
Re w a r d
SLIDE 125
Manual
SLIDE 126
O f f er
SLIDE 127
Gac ha
SLIDE 128 Gino ¡Gao Tailor ¡your ¡games ¡for ¡mobile ¡devices
C r e a t e a p r o t o t y p e , t h e n u s e i t a s a u s e r w o u l d . Y o u ’ l l s e e w h a t ’ s m i s s i n g a n d w h a t ’ s w r o n g . R e p e a t .