開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)

535 views

Published on

  • Be the first to comment

  • Be the first to like this

開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)

  1. 1. OSS行動領域-2 1 CH 3 行動開發準則指引 設計規劃工具
  2. 2. MOBILE DEV GUIDE• Mobile 開發差異 • OS • 除非是開發驅動程式,否則影響不大。 • Browser • 並非完整支援PC上的HTML規格,開發受限。 • 瀏覽行為模式也不相同 • Screen size • 如何在有限的空間展現最大的資訊 • Operation • Keyboard/touch 2
  3. 3. MOBILE DEV GUIDE• Bandwidth • 有限頻寬網路下,如何有效操作資料與時間延遲之間取得平衡。• User Interface • 有限空間 • 操作方式受限• Software tools • Framework • 須採用MOBILE專屬框架 • 原有PC上的框架無法照單全收 • Tools • 開發工具因OS不同而有所不同 • 更受限製造商的硬體規格• Release version • 釋出版本的方式不同 • 經營模式不同 3
  4. 4. MOBILE DEV GUIDE UI 神話• 32條UI設計的準則• http://uxmyths.com/• 準則是用來參考與建議,不是鐵律。• 使用者不需要知道一切,請給他需要的。 重要的是: 不要讓使用者想 4
  5. 5. MOBILE DEV GUIDE UI THREE-CLICK RULE• 所有的網頁動作都必須在三個滑鼠點擊步驟內完成 • 瀏覽的容易度 • 實務性的建議是,每次按下滑鼠,要讓使用者更靠近他的目標,同 時盡量不要放上會讓使用者分心的東西。 • 設計產品服務時,不要focus在3這個數字,請focus在 “瀏覽”這個 經驗上。 5
  6. 6. MOBILE DEV GUIDE UI• 採用圖像可讓頁面上的元素更容易被看到 • 一圖抵千文 • 常常適得其反,反而讓想凸顯的東西被忽略了。 • 人們在網站上找資料的時候,基本上是以文字或連結為主。圖片或 flash等色彩鮮艷的區塊常會被誤認為是廣告而直接被跳過。Jakob Nielsen做過眼球追蹤實驗,發現人們幾乎不會去看任何看起來像是廣告的東西。http://www.useit.com/alertbox/banner-blindness.html 6
  7. 7. MOBILE DEV GUIDE UI 7
  8. 8. MOBILE DEV GUIDE UI 8
  9. 9. MOBILE DEV GUIDE UI• 資訊的呈現 • 在第一個畫面時,如何在有限的空間顯示重要的內容。• 導覽設計 • 將資訊切割於不同畫面中 • 善用導覽機制 • 避免將一體性資訊切割在不同畫面,因為人們的短期記憶有限的。 • 有效利用導覽方式將資訊內容引導給使用者 9
  10. 10. MOBILE DEV GUIDE UI• Layout的設計 • 利用Layout分割畫面,將重要的操作顯示給使用者。 • 避免過多顯示造成使用者負擔 • 提供使用者所需的項目 • 利用Layout呈現資訊內容 10
  11. 11. MOBILE DEV GUIDE UI• Layout的設計是用來給使用者掃描,不是閱讀。 • 要讓使用者看清與理解我們要提供的資訊內容 • 在每一頁上建立清楚視覺階層 • 例如WORD的標題樣式 • 出版慣例 • 例如報紙雜誌的斗大標題,圖片下方的小字。 • 但是美工網頁設計師不喜歡,因為想要創新與眾不同的個性。 • 利用佈局將頁面區隔成定義清楚的區域 • 明確標示出可以點選的東西 • 利用色彩、文字、圖形 • 降低干擾 • 避免擁擠 • 注意背景干擾 11
  12. 12. MOBILE DEV GUIDE UI• 讓使用者直觀知道你要表達的內容 • 例如: • 看見一個按鈕是可以點 • 或是這各好像是按鈕(思考先分之一秒) • 嗯…是按鈕?? 12
  13. 13. MOBILE DEV GUIDE UI• Facebook 個人首頁 13
  14. 14. MOBILE DEV GUIDE UI• Gmail 首頁 14
  15. 15. MOBILE DEV GUIDE UI• 博客來 15
  16. 16. MOBILE DEV GUIDE• 圖形 • 避免圖形大小超過畫面• 善用轉場效果 • 動畫很美、很吸引人 • 但是對於傳達資訊內容是否是正向效果• Mobile Site vs Mobile App • 考慮網路頻寬的延遲效果 • 注意JavaScript 與 Flash – 不是任何MOBILE都支援。 • 是否需要Off-line 16
  17. 17. 人機介面• Chris Harrison• 在進入博士班的第一年, Chris 就用了一篇名為 “Rethinking the Progress Bar” 的論文順利地進入了 HCI 領域的最高殿堂。• 在這篇研究中,他們發現不同的進度表現方式,使用者感 受的確會有所不同。他們一共研究了九種不同的進度表現 方式,最後得出了一個結論: 測試顯示的結果告訴我們, 凡是曲線中有明顯停頓的,使用者所感知的進度都比較慢, 而進度中一直在加速的,使用者都會覺得進度走得很快。 17
  18. 18. 人機介面• Chris 發現筆電現在都有一個 webcam,應該可以做些 甚麼來改善甚麼現狀。他的直覺思考,馬上就讓他想到了 Webcam 可以來解決自動 zoom-in 跟 zoom-out 的問 題,只要使用者比較接近就自動放大;相反地就縮小。• http://www.youtube.com/watch?v=DXlCA995sjY&f eature=player_embedded 18
  19. 19. 人機介面• 看到了 Kinect 之後,受到去年的 LightSpace 的啓發 後,他覺得似乎不需要這麼麻煩地在天花板架三個 Kinect, 應該在肩膀上面弄一個,順便搭上一個 Pico Projector (微型投影機),應該就可以讓任何手可觸及的 地方都變成了 touch 介面。或許你也注意到了,他所用 的 Kinect 跟別人不太一樣,是的,他跑到 MSR 做研究 了,而且用的是最新型的 Kinect, 解析度高上一倍。• http://www.youtube.com/watch?v=Pz17lbjOFn8&fe ature=player_embedded 19
  20. 20. UI 設計規劃工具• 借用建築設計與室內設計的模型概念 • 善用原型方式,快速規劃GUI的介面與行為。 • 不用實際開發就可以掌握UI的設計 • 提前發現開發風險 • 簡化實際開發的成本與時間 • 縮短與客戶之間的需求落差 • 確認實際UI後,較容易選擇適當技術與工具。 20
  21. 21. UI 設計規劃工具• Prototype tools • Pencil • Lumzy • Blueprint • App Cooker • iMockips 21
  22. 22. UI設計規劃工具• Pencil • OpenSource • http://pencil.evolus.vn/en-US/Home.aspx • 提供桌機版、Firfox 外掛版本 • 支援Linux及 Windows• Lumzy • Free to use • http://lumzy.com/ • 線上版本 • 多人合作 • 提供Mockup模擬 22
  23. 23. UI設計規劃工具• Pencil Demo • 個案• Lumzy Demo 23
  24. 24. UI 設計規劃工具• Mobile DEMO • Blueprint 24
  25. 25. UI 設計規劃工具• App Cooker 25
  26. 26. UI 設計規劃工具 26
  27. 27. UI 設計規劃工具• iMockips 27
  28. 28. 參考書• 如何設計好網站 (Don’t Make Me Think) • 上奇出版 2006 • Steve Krug 著/ 胡為君 譯• iPad Human Interfae Guidelines • Apple• iOS Human Interface Guidelines • Apple • http://developer.apple.com/library/ios/#documentation/usere xperience/conceptual/mobilehig/Introduction/Introduction.ht ml 28

×