1.靠谱的移动应用的想法 2.NUI、目标用户和用户目标 3.功能肥大症 4.移动应用的导航结构 5.移动应用的动画设计 by Jason Bao 包季真

1. 指尖上的设计
从Idea到卓越应用
包季真 2014.6

2. 移动互联⺴⽹网
从Idea到卓越应⽤用
包季真 2014.6

3. 包季真
!
《触动⼈人⼼心》译者

4. 包季真
!
脉可寻产品总监
曾供于职⼤大众点评、淘宝

5. Workshop #1
• 组队
• 互相认识⼀一下
• 选出队⻓长
• 队⻓长陈述队员都是做哪款应⽤用的
• 15”

6. Chapter 1
Idea

7. 随时在线

8. 感应器

9. 1.定位

13. 2.⻨麦克⻛风

16. 唱吧
SoundCurtain
Square

17. 3.摄像头

18. ⼼心跳和脉搏监
测仪软件
微信街景
脉可寻

19. 4.加速度/陀螺仪

20. S.M.T.H.
摇⼀一摇
赛⻋车游戏

21. 5.近场

23. 6.云

24. • ⽆无限存储
• ⽆无限运算能⼒力
• ⽆无限续航能⼒力

25. 脉可寻 2.0
唤醒沉睡⼈人脉

26. 7.物联⺴⽹网

27. 链接⼿手机

28. Nest

29. CubeSensors

30. Nike +

31. Ugle

32. 增强物件

33. 天⽓气预报伞

34. CalypsoKey

35. LG G

36. 新⾏行为新习惯

39. Little Printer

40. 要⽤用、常⽤用、会⽤用

48. 你的Idea？
• 随时在线
• 感应器
• 云计算
• 物联⺴⽹网
• 要⽤用、常⽤用、会⽤用

49. Workshop #2
• 你们的Idea？
• 15”

50. Chapter 2
NUI
⺫⽬目标⽤用户.⽤用户⺫⽬目标

52. 个⼈人计算机

54. WPS

55. CLI
Command-Line Interface

56. 键盘

57. GUI
Graphic User Interface

58. 图标、滚动条、按钮

59. ⿏鼠标

61. NUI
Natural User Interface

62. ⼿手指

66. Magic Trackpad

72. Text TouchGraphical
User
Interface
Keyboard FingersMouse
Input
Device
Content Creation Content ConsumptionCommunication
Device
Usage
User Interface + Device Usage Evolution
Over Past 30 Years
CLI GUI NUI
⽤用户界⾯面
输⼊入设备
键盘 ⿏鼠标 ⼿手指

73. Text TouchGraphical
User
Interface
Keyboard FingersMouse
Input
Device
Content Creation Content ConsumptionCommunication
Device
Usage
1
⽤用户界⾯面
输⼊入设备
⽤用户

74. 设计师能做

76. 新记者群体

78. Cat Toy
新⽤用户群体

79. 为⽤用户设计⽽而不是专家

80. ⽤用户？

81. 每⽉月下载10款应⽤用。
很少能打开20次。
1/3不过⼀一周。

82. < 1 周/次

84. 您不是您的⽤用户

86. 从⽤用户出发，绕开固有观念

87. ⺫⽬目标⽤用户与⽤用户⺫⽬目标
• CLI
• GUI
• NUI
• 为⽤用户设计⽽而不是专家设计
• “您不是您的⽤用户”

88. Workshop #3
• ⽤用户如何使⽤用你们的应⽤用？
• 他们在什么样的环境下使⽤用你们的应⽤用？
• 15“

89. Workshop #4
• 头脑⻛风暴
• 说出你所有的想法。
• 20“

90. Chapter 3
功能肥⼤大症

91. ⼤大屏幕（有时还不⽌止⼀一
个），⽆无干扰，环境舒适，
99.99%的时间在线，光纤
⼊入户，1000MB有线⺴⽹网络，
百兆⽆无线⺴⽹网络，⼏几乎没有
流量费⽤用，有键盘输⼊入，
还有像素级精确度的⿏鼠标，
⼏几乎没有电源和存储空间
的顾虑。

92. 被溺爱的PC

93. 近1000个链接

96. 700+个链接

101. Less is more

104. 优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效
你准备搞个控制飞机的应用。
你搞出来的可能是这样：
……但用户其实想的是这样：
功能设计师

105. ……但用户其实想的是这样：
第1章：一切从点击开始
产品设计师

106. ⼤大部分功能是可以砍掉的
• 点评：>80%的⼈人使⽤用附近。

107. ⼤大部分功能是可以砍掉的
• 你的应⽤用中有什么功能是没⼈人使⽤用的？

108. 使⽤用感应器，
考虑场景下的⽤用户⺫⽬目标，
提供合适的内容

113. 功能肥⼤大症
• 被溺爱的PC
• ⼤大部分功能是可以砍掉的
• 考虑场景下的⽤用户⺫⽬目标，提供合适内容

114. Workshop #5
• 围绕场景，找到最重要的功能。
• 10“

115. 成本低成本⾼高
收益⾼高
收益低

116. Workshop #6
• 定位你的每个功能点
• 15“

117. 成本低成本⾼高
收益⾼高
收益低
保持成本
低⻛风险
最求收益
⾼高⻛风险

118. Chapter 4
导航

119. 多任务、层叠窗⼝口

120. 单任务、平铺

121. 导航结构
• 平铺⻚页⾯面
• 层级列表
• 标签⻚页
• Springboard
• 抽屉式导航

122. 平铺⻚页⾯面 导航

125. • +
• 简单、重复且平等的⻚页⾯面
• 占⽤用空间少；
• -
• ⽆无法快速进⾏行跳转翻⻚页；
• ⼀一般 < 5个⻚页⾯面；
• ⼀一般不适⽤用滚屏。

126. 层级列表导航

129. • +
• 平等的、⼤大量的类别、功能；
• 直接对内容进⾏行交互，占⽤用屏幕空间⼩小；
• 适合⽤用户⾃自定义分类；
• -
• ⼿手机上的⾯面包屑只有上级；
• 切换主要分类、功能⽐比较⿇麻烦；
• 主功能只有在⾸首屏才会显⽰示。

130. 标签⻚页 导航

131. • +
• 展⽰示主要功能
• 快速访问主要功能；
• 指⽰示当前位置；
• -
• ⾄至多5个标签；
• 占⽤用屏幕空间。

132. Springboard 导航

133. • +
• 展⽰示主要功能
• 快速访问主要功能；
• 指⽰示当前位置；
• -
• ⾄至多5个标签；
• 占⽤用屏幕空间。

135. • +
• 展⽰示主要功能
• 快速访问主要功能；
• 指⽰示当前位置；
• -
• ⾄至多5个标签；
• 占⽤用屏幕空间。

136. 导航结构
• 平铺⻚页⾯面
• 层级列表
• 标签⻚页
• Springboard
• 抽屉式导航

137. Workshop #7
• 你的应⽤用该使⽤用什么样的导航？
• 5“

138. Chapter 5
动画

139. 动画的作⽤用
• 状态变更
• 吸引注意
• 创造空间
• 拟物

140. 状态、内容变更(转场)

146. 吸引注意

149. 创造空间感

152. 拟物

154. 不快、不慢、不多
• 全屏性质的切换 150ms ~ 350ms
• 保持⼀一致性
• 时⻓长
• 动画⽅方式
• 与系统保持⼀一致

155. 视觉线

156. 视觉线

157. 动画
• 动画的作⽤用
• 不快、不慢、不多
• 视觉线

158. 总结
• Idea
• NUI - ⺫⽬目标⽤用户与⽤用户⺫⽬目标
• 功能肥⼤大症
• 导航
• 动画

159. 渐变

160. 移动

162. 传统的线性移动(Linear)

163. 平滑移动(Ease In Out)

164. 弹跳(Bounce)

165. ⽪皮筋(Elastic)

168. 缩放

171. Q&A
“我所说的都是错的。”
— 张⼩小⻰龙