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

740 views

Published on

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

by Jason Bao 包季真

Published in: Mobile
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
740
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
9
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

移动应用 从想法到卓越设计 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 “我所说的都是错的。” — 张⼩小⻰龙

×