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