Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
指尖上的设计
从Idea到卓越应用
包季真 2014.6
移动互联⺴⽹网
从Idea到卓越应⽤用
包季真 2014.6
包季真	

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

!
脉可寻产品总监	

曾供于职⼤大众点评、淘宝
Workshop #1
• 组队	

• 互相认识⼀一下	

• 选出队⻓长	

• 队⻓长陈述队员都是做哪款应⽤用的	

• 15”
Chapter 1	

Idea
随时在线
感应器
1.定位
2.⻨麦克⻛风
唱吧
SoundCurtain
Square
3.摄像头
⼼心跳和脉搏监
测仪软件
微信街景
脉可寻
4.加速度/陀螺仪
S.M.T.H.
摇⼀一摇
赛⻋车游戏
5.近场
6.云
• ⽆无限存储	

• ⽆无限运算能⼒力	

• ⽆无限续航能⼒力
脉可寻 2.0	

唤醒沉睡⼈人脉
7.物联⺴⽹网
链接⼿手机
Nest
CubeSensors
Nike +
Ugle
增强物件
天⽓气预报伞
CalypsoKey
LG G
新⾏行为新习惯
Little Printer
要⽤用、常⽤用、会⽤用
你的Idea?
• 随时在线	

• 感应器	

• 云计算	

• 物联⺴⽹网	

• 要⽤用、常⽤用、会⽤用
Workshop #2
• 你们的Idea?	

• 15”
Chapter 2	

NUI	

⺫⽬目标⽤用户.⽤用户⺫⽬目标
个⼈人计算机
WPS
CLI
Command-Line Interface
键盘
GUI
Graphic User Interface
图标、滚动条、按钮
⿏鼠标
NUI
Natural User Interface
⼿手指
Magic Trackpad
Text TouchGraphical
User
Interface
Keyboard FingersMouse
Input
Device
Content Creation Content ConsumptionCommunication
De...
Text TouchGraphical
User
Interface
Keyboard FingersMouse
Input
Device
Content Creation Content ConsumptionCommunication
De...
设计师能做
新记者群体
Cat Toy
新⽤用户群体
为⽤用户设计⽽而不是专家
⽤用户?
每⽉月下载10款应⽤用。	

很少能打开20次。	

1/3不过⼀一周。
< 1 周/次
您不是您的⽤用户
从⽤用户出发,绕开固有观念
⺫⽬目标⽤用户与⽤用户⺫⽬目标
• CLI	

• GUI	

• NUI	

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

• “您不是您的⽤用户”
Workshop #3
• ⽤用户如何使⽤用你们的应⽤用?	

• 他们在什么样的环境下使⽤用你们的应⽤用?
• 15“
Workshop #4
• 头脑⻛风暴	

• 说出你所有的想法。	

• 20“
Chapter 3	

功能肥⼤大症
⼤大屏幕(有时还不⽌止⼀一
个),⽆无干扰,环境舒适,
99.99%的时间在线,光纤
⼊入户,1000MB有线⺴⽹网络,
百兆⽆无线⺴⽹网络,⼏几乎没有
流量费⽤用,有键盘输⼊入,
还有像素级精确度的⿏鼠标,
⼏几乎没有电源和存储空间
的顾虑。
被溺爱的PC
近1000个链接
700+个链接
Less is more
优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效
你准备搞个控制飞机的应用。
你搞出来的可能是这样:
……但用户其实想的是这样:
功能设计师
……但用户其实想的是这样:
第1章:一切从点击开始
产品设计师
⼤大部分功能是可以砍掉的
• 点评:>80%的⼈人使⽤用附近。
⼤大部分功能是可以砍掉的
• 你的应⽤用中有什么功能是没⼈人使⽤用的?
使⽤用感应器,	

考虑场景下的⽤用户⺫⽬目标,	

提供合适的内容
功能肥⼤大症
• 被溺爱的PC	

• ⼤大部分功能是可以砍掉的	

• 考虑场景下的⽤用户⺫⽬目标,提供合适内容
Workshop #5
• 围绕场景,找到最重要的功能。	

• 10“
成本低成本⾼高
收益⾼高
收益低
Workshop #6
• 定位你的每个功能点	

• 15“
成本低成本⾼高
收益⾼高
收益低
保持成本	

低⻛风险
最求收益	

⾼高⻛风险
Chapter 4	

导航
多任务、层叠窗⼝口
单任务、平铺
导航结构
• 平铺⻚页⾯面	

• 层级列表	

• 标签⻚页	

• Springboard	

• 抽屉式导航
平铺⻚页⾯面 导航
• +	

• 简单、重复且平等的⻚页⾯面	

• 占⽤用空间少;	

• -	

• ⽆无法快速进⾏行跳转翻⻚页;	

• ⼀一般 < 5个⻚页⾯面;	

• ⼀一般不适⽤用滚屏。
层级列表导航
• +	

• 平等的、⼤大量的类别、功能;	

• 直接对内容进⾏行交互,占⽤用屏幕空间⼩小;	

• 适合⽤用户⾃自定义分类;	

• -	

• ⼿手机上的⾯面包屑只有上级;	

• 切换主要分类、功能⽐比较⿇麻烦;	

• 主功能只有在...
标签⻚页 导航
• +	

• 展⽰示主要功能	

• 快速访问主要功能;	

• 指⽰示当前位置;	

• -	

• ⾄至多5个标签;	

• 占⽤用屏幕空间。
Springboard 导航
• +	

• 展⽰示主要功能	

• 快速访问主要功能;	

• 指⽰示当前位置;	

• -	

• ⾄至多5个标签;	

• 占⽤用屏幕空间。
• +	

• 展⽰示主要功能	

• 快速访问主要功能;	

• 指⽰示当前位置;	

• -	

• ⾄至多5个标签;	

• 占⽤用屏幕空间。
导航结构
• 平铺⻚页⾯面	

• 层级列表	

• 标签⻚页	

• Springboard	

• 抽屉式导航
Workshop #7
• 你的应⽤用该使⽤用什么样的导航?	

• 5“
Chapter 5	

动画
动画的作⽤用
• 状态变更	

• 吸引注意	

• 创造空间	

• 拟物
状态、内容变更(转场)
吸引注意
创造空间感
拟物
不快、不慢、不多
• 全屏性质的切换 150ms ~ 350ms	

• 保持⼀一致性	

• 时⻓长	

• 动画⽅方式	

• 与系统保持⼀一致
视觉线
视觉线
动画
• 动画的作⽤用	

• 不快、不慢、不多	

• 视觉线
总结
• Idea	

• NUI - ⺫⽬目标⽤用户与⽤用户⺫⽬目标	

• 功能肥⼤大症	

• 导航	

• 动画
渐变
移动
传统的线性移动(Linear)
平滑移动(Ease In Out)
弹跳(Bounce)
⽪皮筋(Elastic)
缩放
Q&A
“我所说的都是错的。”	

— 张⼩小⻰龙
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
移动应用 从想法到卓越设计 Ctrip 2014
Prochain SlideShare
Chargement dans…5
×

移动应用 从想法到卓越设计 Ctrip 2014

834 vues

Publié le

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

by Jason Bao 包季真

Publié dans : Mobile

移动应用 从想法到卓越设计 Ctrip 2014

  1. 1. 指尖上的设计 从Idea到卓越应用 包季真 2014.6
  2. 2. 移动互联⺴⽹网 从Idea到卓越应⽤用 包季真 2014.6
  3. 3. 包季真 ! 《触动⼈人⼼心》译者
  4. 4. 包季真 ! 脉可寻产品总监 曾供于职⼤大众点评、淘宝
  5. 5. Workshop #1 • 组队 • 互相认识⼀一下 • 选出队⻓长 • 队⻓长陈述队员都是做哪款应⽤用的 • 15”
  6. 6. Chapter 1 Idea
  7. 7. 随时在线
  8. 8. 感应器
  9. 9. 1.定位
  10. 10. 2.⻨麦克⻛风
  11. 11. 唱吧 SoundCurtain Square
  12. 12. 3.摄像头
  13. 13. ⼼心跳和脉搏监 测仪软件 微信街景 脉可寻
  14. 14. 4.加速度/陀螺仪
  15. 15. S.M.T.H. 摇⼀一摇 赛⻋车游戏
  16. 16. 5.近场
  17. 17. 6.云
  18. 18. • ⽆无限存储 • ⽆无限运算能⼒力 • ⽆无限续航能⼒力
  19. 19. 脉可寻 2.0 唤醒沉睡⼈人脉
  20. 20. 7.物联⺴⽹网
  21. 21. 链接⼿手机
  22. 22. Nest
  23. 23. CubeSensors
  24. 24. Nike +
  25. 25. Ugle
  26. 26. 增强物件
  27. 27. 天⽓气预报伞
  28. 28. CalypsoKey
  29. 29. LG G
  30. 30. 新⾏行为新习惯
  31. 31. Little Printer
  32. 32. 要⽤用、常⽤用、会⽤用
  33. 33. 你的Idea? • 随时在线 • 感应器 • 云计算 • 物联⺴⽹网 • 要⽤用、常⽤用、会⽤用
  34. 34. Workshop #2 • 你们的Idea? • 15”
  35. 35. Chapter 2 NUI ⺫⽬目标⽤用户.⽤用户⺫⽬目标
  36. 36. 个⼈人计算机
  37. 37. WPS
  38. 38. CLI Command-Line Interface
  39. 39. 键盘
  40. 40. GUI Graphic User Interface
  41. 41. 图标、滚动条、按钮
  42. 42. ⿏鼠标
  43. 43. NUI Natural User Interface
  44. 44. ⼿手指
  45. 45. Magic Trackpad
  46. 46. 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 ⽤用户界⾯面 输⼊入设备 键盘 ⿏鼠标 ⼿手指
  47. 47. Text TouchGraphical User Interface Keyboard FingersMouse Input Device Content Creation Content ConsumptionCommunication Device Usage 1 ⽤用户界⾯面 输⼊入设备 ⽤用户
  48. 48. 设计师能做
  49. 49. 新记者群体
  50. 50. Cat Toy 新⽤用户群体
  51. 51. 为⽤用户设计⽽而不是专家
  52. 52. ⽤用户?
  53. 53. 每⽉月下载10款应⽤用。 很少能打开20次。 1/3不过⼀一周。
  54. 54. < 1 周/次
  55. 55. 您不是您的⽤用户
  56. 56. 从⽤用户出发,绕开固有观念
  57. 57. ⺫⽬目标⽤用户与⽤用户⺫⽬目标 • CLI • GUI • NUI • 为⽤用户设计⽽而不是专家设计 • “您不是您的⽤用户”
  58. 58. Workshop #3 • ⽤用户如何使⽤用你们的应⽤用? • 他们在什么样的环境下使⽤用你们的应⽤用? • 15“
  59. 59. Workshop #4 • 头脑⻛风暴 • 说出你所有的想法。 • 20“
  60. 60. Chapter 3 功能肥⼤大症
  61. 61. ⼤大屏幕(有时还不⽌止⼀一 个),⽆无干扰,环境舒适, 99.99%的时间在线,光纤 ⼊入户,1000MB有线⺴⽹网络, 百兆⽆无线⺴⽹网络,⼏几乎没有 流量费⽤用,有键盘输⼊入, 还有像素级精确度的⿏鼠标, ⼏几乎没有电源和存储空间 的顾虑。
  62. 62. 被溺爱的PC
  63. 63. 近1000个链接
  64. 64. 700+个链接
  65. 65. Less is more
  66. 66. 优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效 你准备搞个控制飞机的应用。 你搞出来的可能是这样: ……但用户其实想的是这样: 功能设计师
  67. 67. ……但用户其实想的是这样: 第1章:一切从点击开始 产品设计师
  68. 68. ⼤大部分功能是可以砍掉的 • 点评:>80%的⼈人使⽤用附近。
  69. 69. ⼤大部分功能是可以砍掉的 • 你的应⽤用中有什么功能是没⼈人使⽤用的?
  70. 70. 使⽤用感应器, 考虑场景下的⽤用户⺫⽬目标, 提供合适的内容
  71. 71. 功能肥⼤大症 • 被溺爱的PC • ⼤大部分功能是可以砍掉的 • 考虑场景下的⽤用户⺫⽬目标,提供合适内容
  72. 72. Workshop #5 • 围绕场景,找到最重要的功能。 • 10“
  73. 73. 成本低成本⾼高 收益⾼高 收益低
  74. 74. Workshop #6 • 定位你的每个功能点 • 15“
  75. 75. 成本低成本⾼高 收益⾼高 收益低 保持成本 低⻛风险 最求收益 ⾼高⻛风险
  76. 76. Chapter 4 导航
  77. 77. 多任务、层叠窗⼝口
  78. 78. 单任务、平铺
  79. 79. 导航结构 • 平铺⻚页⾯面 • 层级列表 • 标签⻚页 • Springboard • 抽屉式导航
  80. 80. 平铺⻚页⾯面 导航
  81. 81. • + • 简单、重复且平等的⻚页⾯面 • 占⽤用空间少; • - • ⽆无法快速进⾏行跳转翻⻚页; • ⼀一般 < 5个⻚页⾯面; • ⼀一般不适⽤用滚屏。
  82. 82. 层级列表导航
  83. 83. • + • 平等的、⼤大量的类别、功能; • 直接对内容进⾏行交互,占⽤用屏幕空间⼩小; • 适合⽤用户⾃自定义分类; • - • ⼿手机上的⾯面包屑只有上级; • 切换主要分类、功能⽐比较⿇麻烦; • 主功能只有在⾸首屏才会显⽰示。
  84. 84. 标签⻚页 导航
  85. 85. • + • 展⽰示主要功能 • 快速访问主要功能; • 指⽰示当前位置; • - • ⾄至多5个标签; • 占⽤用屏幕空间。
  86. 86. Springboard 导航
  87. 87. • + • 展⽰示主要功能 • 快速访问主要功能; • 指⽰示当前位置; • - • ⾄至多5个标签; • 占⽤用屏幕空间。
  88. 88. • + • 展⽰示主要功能 • 快速访问主要功能; • 指⽰示当前位置; • - • ⾄至多5个标签; • 占⽤用屏幕空间。
  89. 89. 导航结构 • 平铺⻚页⾯面 • 层级列表 • 标签⻚页 • Springboard • 抽屉式导航
  90. 90. Workshop #7 • 你的应⽤用该使⽤用什么样的导航? • 5“
  91. 91. Chapter 5 动画
  92. 92. 动画的作⽤用 • 状态变更 • 吸引注意 • 创造空间 • 拟物
  93. 93. 状态、内容变更(转场)
  94. 94. 吸引注意
  95. 95. 创造空间感
  96. 96. 拟物
  97. 97. 不快、不慢、不多 • 全屏性质的切换 150ms ~ 350ms • 保持⼀一致性 • 时⻓长 • 动画⽅方式 • 与系统保持⼀一致
  98. 98. 视觉线
  99. 99. 视觉线
  100. 100. 动画 • 动画的作⽤用 • 不快、不慢、不多 • 视觉线
  101. 101. 总结 • Idea • NUI - ⺫⽬目标⽤用户与⽤用户⺫⽬目标 • 功能肥⼤大症 • 导航 • 动画
  102. 102. 渐变
  103. 103. 移动
  104. 104. 传统的线性移动(Linear)
  105. 105. 平滑移动(Ease In Out)
  106. 106. 弹跳(Bounce)
  107. 107. ⽪皮筋(Elastic)
  108. 108. 缩放
  109. 109. Q&A “我所说的都是错的。” — 张⼩小⻰龙

×