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