App使用者經驗設計

23,177 views

Published on

Published in: Design
1 Comment
169 Likes
Statistics
Notes
No Downloads
Views
Total views
23,177
On SlideShare
0
From Embeds
0
Number of Embeds
5,699
Actions
Shares
0
Downloads
827
Comments
1
Likes
169
Embeds 0
No embeds

No notes for slide

App使用者經驗設計

  1. 1. App使⽤用者經驗設計 李易修
  2. 2. 李易修 Justin Lee台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事·•www.lis186.com·•lis186@gmail.com·•twitter @lis186
  3. 3. 台灣使⽤用者經驗設計協會
  4. 4. 經驗 設計 廣使 ⽤用者“推 業專 業知 ,帶 動產 與 研究 與交 流” 識的 提升 sea r c h , a nd re n desig dge’s e rience nowle r exp ional k o te use rofess “Prom d the p hange” ea d ex c and l ement an a dvanc
  5. 5. 內容為什麼⾏行動裝置如此特別設計⾏行動使⽤用者者經驗⾏行動使⽤用者界⾯面設計要素使⽤用者經驗設計策略
  6. 6. 為什麼⾏行動裝置如此特別?
  7. 7. 典型的⾏行動⽣生活
  8. 8. http://www.flickr.com/photos/laraswanland/4990323020/
  9. 9. http://androidheadlines.com/2012/01/u-s-android-users-use-smartphones-more-in-the-bathroom-survey-shows.html
  10. 10. http://lucyyu.wordpress.com/2011/03/28/inspired/
  11. 11. http://929thelake.com/maybe-we-should-pad-our-poles/padded-lamp-posts-introduced-in-brick-lane/
  12. 12. http://dedicky.wordpress.com/2011/07/23/%E4%BA%A4%E4%BA%92%E4%BD%93%E9%AA%8C%E5%89%8D%E4%B8%96%E4%BB%8A%E7%94%9F/
  13. 13. http://www.flickr.com/photos/wnyc/4127773219/
  14. 14. http://www.flickr.com/photos/lis186/7053613191/in/set-72157629441689710/
  15. 15. http://www.flickr.com/photos/zandwacht/5718319650/in/faves-67435840@N07/
  16. 16. http://www.flickr.com/photos/juicowski/4699974689/
  17. 17. http://www.flickr.com/photos/heycheri/7043909105/http://www.flickr.com/photos/heycheri/7051259159/in/photostream
  18. 18. http://ruiendless.pixnet.net/blog/post/28012992-%E3%80%90%E9%A3%9F%E8%A8%98%E3%80%91%E5%96%9D%E9%85%92%E5%B0%8F%E5%BF%83%E8%AE%8A%E7%8B
  19. 19. http://www.headlightblog.com/2012/03/forget-mobile-think-multiscreen/
  20. 20. http://articles.chicagotribune.com/2012-07-08/news/ct-met-night-light-sleep-20120708_1_blue-light-bright-light-steven-lockley
  21. 21. http://www.flickr.com/photos/fraserj/5354831397/in/photostream/
  22. 22. ⾏行動裝置已經是⽣生活中的⼀一部分
  23. 23. 智慧型⼿手機+平板出貨超越PC 全球出貨量 (億台) 智慧型⼿手機+平板 7 6 5 4 PC 3 2 1 0 2005 2006 2007 2008 2009 2010 2011 2012 2013 時間http://thegadgetfan.com/mobile-smartphones/2011-the-year-smartphones-beat-pcs.html
  24. 24. 50%的家庭有1部PC, 但40%有3台以上的連網裝置 連網裝置 PC 3+ 2 1 0 15 30 45 60http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/Digital_Omnivores_Key_Insights_into_Todays_Connected_Consumer_Webinar
  25. 25. 智慧型裝置與PC 內容消費量在2011出現⿈黃⾦金交叉http://www.bgr.com/2011/10/26/we-have-entered-a-post-pc-era-report-claims-infographic/
  26. 26. 因智慧型⼿手機與平板⾵風⾏行 PC在家的使⽤用時間減少20%http://www.businessinsider.com/chart-of-the-day-pc-usage-2011-2#ixzz1G9DptpfB
  27. 27. ⾏行動裝置多樣化的使⽤用情境http://blog.nielsen.com/nielsenwire/online_mobile/in-the-u-s-tablets-are-tv-buddies-while-ereaders-make-great-bedfellows/
  28. 28. 有些⼯工作仍須PC完成, 只是PC不再是⼈人⼈人需要http://www.comscore.com/Press_Events/Presentations_Whitepapers/2011/Digital_Omnivores_Key_Insights_into_Todays_Connected_Consumer_Webinar
  29. 29. 開發中國家跳過PC邁向⾏行動年代http://www.hksilicon.com/kb/articles/65990/PC?mobi=false
  30. 30. 智慧型⼿手機
  31. 31. 從硬體到軟體創新
  32. 32. ⾏行動數據和語⾳音傳輸量 在2008年出現⿈黃⾦金交叉 每年的通訊量 數據 語⾳音 2007 2008 2009 2010 時間http://mashable.com/2010/11/08/u-s-mobile-data-traffic-exabyte/
  33. 33. 美國智慧型⼿手機與功能性⼿手機出貨量 在2011年出現⿈黃⾦金交叉 ⼿手機出貨 百分⽐比 68% 55% 智慧型⼿手機 功能性⼿手機 45% 32% 2010/2 2011/7 2011/1 2011/5 時間http://blog.nielsen.com/nielsenwire/?p=28237
  34. 34. 過去我們想把⼿手機變成電腦
  35. 35. 2005年的「掌上電腦」 跨越不了死亡之井 死亡之井 2.5% 13.5% 34% 34% 16% 創新者 早期採⽤用者 早期⼤大眾 晚期⼤大眾 落後者 時間http://iknow.stpi.org.tw/post/Read.aspx?PostID=3030
  36. 36. ⼿手指代替筆http://www.bbc.co.uk/news/business-15162399
  37. 37. 從檔案為中⼼心到APP為中⼼心
  38. 38. 不⽤用管⺫⽬目錄結構與檔案格式
  39. 39. 隨時⾃自動存檔
  40. 40. 智慧型⼿手機越過死亡之井 死亡之井 2.5% 13.5% 34% 34% 16% 創新者 早期採⽤用者 早期⼤大眾 晚期⼤大眾 落後者 時間http://iknow.stpi.org.tw/post/Read.aspx?PostID=3030
  41. 41. 這才是真正的「個⼈人電腦」
  42. 42. 平板
  43. 43. 平板不是⼤大⼿手機嗎?
  44. 44. 平板的硬體架構和⼿手機相似
  45. 45. 平板不是放⼤大的⼿手機 ze si re =
  46. 46. 游泳池不是⼤大的澡缸
  47. 47. ⼿手機⾃自⽤用,平板共享http://www.elephantjournal.com/2010/04/family-ipad-shuffleboard-as-seen-in-boulder-colorado-at-atlas-cafe/
  48. 48. 可以做不代表使⽤用者會那樣做
  49. 49. 平板不適合講電話、拍照
  50. 50. ⼤大平板 vs. ⼩小平板
  51. 51. ⼤大平板:多⼈人共享的家⽤用娛樂裝置http://www.bandwidthblog.com/2011/05/27/latest-nielsen-study-sheds-light-on-where-when-and-how-people-use-their-ipads-interface/ http://developer.android.com/guide/topics/fundamentals/fragments.html
  52. 52. ⼩小平板:旅⾏行中打發時間的伴侶http://travel.spotcoolstuff.com/best-tablet-computers-travel
  53. 53. PC vs. ⾏行動裝置
  54. 54. 螢幕空間充⾜足 有限
  55. 55. 輸⼊入鍵盤、滑⿏鼠 觸控螢幕、感測器 GPS 亮度計 接近感應器 電⼦子羅盤 加速計 相機 觸控螢幕 ⿆麥克⾵風 氣壓計
  56. 56. ⽴立⾜足點桌⾯面、資料夾/檔案 APP、雲端
  57. 57. 使⽤用情境固定 多樣
  58. 58. ⾏行動裝置讓我們從空間中解放http://www.slideshare.net/fullscreen/space150/mobile-trends-june-2011/6
  59. 59. APP
  60. 60. APP的使⽤用時間⾼高於電話 電⼦子郵件 8% 語⾳音+簡訊 App 32% 48% 上網 12%http://jacobsmedia.typepad.com/jacobs/2011/03/you-dont-know-apps.html
  61. 61. 如果智慧型⼿手機是瑞⼠士⼑刀
  62. 62. App就是上⾯面的各種⼯工具
  63. 63. 每個⼈人需要的都不盡相同
  64. 64. 開放的市場,全球性的競爭
  65. 65. 2012Q3 Smartphone OS 市佔率 2% Linux 2% 2% 4% 15% 75%IDC, 2012 Q3
  66. 66. Android, iOS 裝置數 vs. App 數健康成⻑⾧長, 展現強勁的網路效應http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/
  67. 67. Symbian, BlackBerry, Windows Phone ⽣生態圈狀況堪慮http://techcrunch.com/2011/11/28/its-still-a-feature-phone-world-global-smartphone-penetration-at-27/
  68. 68. App Store 利潤是 Google Play 的4倍 App Store 100% Google Play 23%http://techcrunch.com/2012/03/30/amazons-appstore-generates-more-revenue-than-google-play/
  69. 69. iOS版本更新速度遠⾼高於Android 15天後 6個月後 4.x 3% 2.1 6% 2.2 5.0.0 3.0 23% 1% 3% 5.1.0 5.0.1 77% 22% 2.3 64%http://www.techorz.com/tablet/android-platform-versions-as-of-2-april/http://www.appappapps.com/blog/11553-ios-5-1%E6%9B%B4%E6%96%B015%E6%97%A5%E5%85%A7%E9%81%9461%E4%BD%BF%E7%94%A8%E7%8E%87-android-4-0%E4%BB%8D%E5%8F%AA%E6%9C%891-6.html
  70. 70. 多元解析度 1536x2048 240x320320x480 240x400 240x432 320x480 1280x720 480x800 1280x800 480x854 640x960 768x1024
  71. 71. 開發Android APP請⼩小⼼心 版本 螢幕解析度 4.x 3% 2.2 normal / mdpi 23% 20% 2.3 normal / hdpi 64% 65%http://developer.android.com/resources/dashboard/screens.html
  72. 72. 2012 Q2 新APP專案平台選擇 1% 4% 28% 67%Microsoft May Be Closer Than It Appears in Androids Rearview Mirror
  73. 73. 設計⾏行動使⽤用者經驗
  74. 74. 事情沒想像中簡單
  75. 75. 使⽤用者經驗http://goo.gl/nl3VB http://goo.gl/XVAaH
  76. 76. 使⽤用者介⾯面 視覺設計 互動設計 資訊組織
  77. 77. 系統狀態連網狀態 電量 位置
  78. 78. 實體互動 ⽅方向觸控⼿手勢 握持⽅方式
  79. 79. ⽂文化 環境 活動 情緒與能⼒力 使⽤用者 知識與習慣 動機 ⺫⽬目標與任務 注意⼒力 ⼿手機 使⽤用者介⾯面 姿勢http://www.flickr.com/photos/weksa/7066754079/in/photostream/
  80. 80. http://www.giantant.com/publications/mobile_context_model.pdf
  81. 81. App可能只是服務的⼀一部分
  82. 82. ⾏行動使⽤用者介⾯面的要素
  83. 83. 觸控螢幕沒有hover事件
  84. 84. 觸控⺫⽬目標尺⼨寸 7mm 2mm 7mm i 觸控範圍要夠⼤大 視覺元素可以 間隔不能太⼩小 ⽐比觸控範圍⼩小8mm 8mm
  85. 85. ⼿手機適⽤用的⼿手勢http://gesturecons.com/
  86. 86. 平板可以作更多點的觸控http://gesturecons.com/
  87. 87. 平板可能不只⼀一個⼈人⽤用http://iapp.com.tw/2011/12/rockmate-turns-your-ipad-into-a-music-studio/
  88. 88. 操作界⾯面螢幕上不⾒見得看得到
  89. 89. 操作必須提供⾜足夠的線索
  90. 90. 沒有線索時,認知負荷極⾼高
  91. 91. ⼿手勢作為捷徑,不能作為唯⼀一路徑
  92. 92. ⼈人們根據過去經驗來操作 點兩下
  93. 93. 單⼿手操作
  94. 94. 不容易掉也很重要http://itunes.apple.com/cy/app/shoot-one-hand-katatecam.goody/id535739902?mt=8
  95. 95. 單⼿手不適合多點觸控grouplab.cpsc.ucalgary.ca/grouplab/uploads/Publications/Publications/2012-FatThumb.MobileHCI.pdf
  96. 96. 注意主要互動區域
  97. 97. 哪個設計⽐比較好?
  98. 98. 雙⼿手操作 (直向)
  99. 99. 雙⼿手操作(橫向)
  100. 100. ⼿手指不是透明的
  101. 101. 打橫是為了看更多
  102. 102. 依照版⾯面調整內容
  103. 103. 不同視窗選擇適合的轉向
  104. 104. 螢幕空間限制http://blog.miragestudio7.com/compact-living-and-small-spaces/1671/
  105. 105. 資訊架構與內容組織 功能、內容清單 分類 內容⾴頁、編輯
  106. 106. Foursquare的進化
  107. 107. 收納http://www.centralinteriordesign.com/5829/space-saving-for-small-kids-room-layout.html/minimal-furniture-in-the-room
  108. 108. Path的進化
  109. 109. 別忘了其它可⽤用的資源 GPS 加速計 電⼦子羅盤 相機 ⿆麥克⾵風 照度計 距離感測計 氣壓計 溫度計
  110. 110. 加速度計 (Accelerometer)http://www.yetihq.com/blog/iphone-accelerometer-calibration/ http://lonelysandwich.com/post/48198569/tilt-scrolling-instapaper-pro
  111. 111. 相機
  112. 112. 辨識http://www.newmobilelife.com/2012/02/23/scan-qr-code/
  113. 113. ⿆麥克⾵風 Pah....Pah...http://www.youtube.com/watch?v=r1vxeiDFoTk&feature=player_embedded#!
  114. 114. 擴增實境http://blog.indecplus.com/?p=1597
  115. 115. 通訊錄 https://play.google.com/store/apps/details?id=gogolook.callgogolook2&hl=z
  116. 116. 動畫與轉場
  117. 117. ⾏行動使⽤用者經驗設計重點把焦點放在最重要的功能評估使⽤用者需要什麼內容避免無謂的步驟不花⼼心思就會⽤用隨時準備被打斷
  118. 118. 使⽤用者經驗設計策略
  119. 119. iPhone也才滿5歲http://www.flixya.com/photo/2087027/iphone-cake
  120. 120. 界線變得模糊
  121. 121. 數位匯流正在進⾏行 應⽤用 APP 遊戲 ⾳音樂 影⽚片 電視 遊戲機 PC 平板 ⼿手機Evolution of converged cross-platform services [Source: Analysys Mason, 2011]
  122. 122. Double Diamond設計流程 點⼦子 願景 成果 時間 Discover Define Develop DeliverDesign Council, 2005
  123. 123. 以原型驅動設計 戰略 戰術 點⼦子 願景 成果 時間 Discover Define Develop DeliverDesign Council, 2005
  124. 124. 你App在服務當中扮演什麼⾓角⾊色?http://www.multiscreen-experience.com/?page_id=47
  125. 125. 只要做的對就有機會
  126. 126. 感謝您的聆聽! 李易修 Justin Lee 台灣使用者經驗設計協會(UiGathering) 創會成員與工作小組理事 ·•www.lis186.com ·•lis186@gmail.com ·•twitter @lis186

×