1O S S 行 動 領 域 - 2

專案管理軟體–管理與實務 （開放原始碼）

行動開發準則指引設計規劃工具

CH 3

2

MOBILE DEV GUIDE

• Mobile 開發差異• OS• 除非是開發驅動程式，否則影響不大。

• Browser• 並非完整支援 PC 上的 HTML 規格，開發受限。• 瀏覽行為模式也不相同

• Screen size• 如何在有限的空間展現最大的資訊

• Operation• Keyboard/touch

3

MOBILE DEV GUIDE

• Bandwidth• 有限頻寬網路下，如何有效操作資料與時間延遲之間取得平衡。

• User Interface• 有限空間• 操作方式受限

• Software tools• Framework

• 須採用 MOBILE 專屬框架• 原有 PC 上的框架無法照單全收

• Tools• 開發工具因 OS 不同而有所不同• 更受限製造商的硬體規格

• Release version• 釋出版本的方式不同• 經營模式不同

4

MOBILE DEV GUIDEUI 神話

• 32 條 UI 設計的準則• http://uxmyths.com/• 準則是用來參考與建議，不是鐵律。• 使用者不需要知道一切，請給他需要的。

重要的是 : 不要讓使用者想

5

MOBILE DEV GUIDEUI THREE-CLICK RULE

• 所有的網頁動作都必須在三個滑鼠點擊步驟內完成• 瀏覽的容易度• 實務性的建議是，每次按下滑鼠，要讓使用者更靠近他的目標，同

時盡量不要放上會讓使用者分心的東西。 • 設計產品服務時，不要 focus 在 3 這個數字，請 focus 在 “瀏覽

”這個經驗上。

6

MOBILE DEV GUIDEUI

• 採用圖像可讓頁面上的元素更容易被看到• 一圖抵千文• 常常適得其反，反而讓想凸顯的東西被忽略了。• 人們在網站上找資料的時候，基本上是以文字或連結為主。圖片或

flash 等色彩鮮艷的區塊常會被誤認為是廣告而直接被跳過。

Jakob Nielsen 做過眼球追蹤實驗，發現人們幾乎不會去看任何看起來像是廣告的東西。http://www.useit.com/alertbox/banner-blindness.html

7

MOBILE DEV GUIDEUI

8

MOBILE DEV GUIDEUI

9

MOBILE DEV GUIDEUI

• 資訊的呈現• 在第一個畫面時，如何在有限的空間顯示重要的內容。

• 導覽設計• 將資訊切割於不同畫面中• 善用導覽機制• 避免將一體性資訊切割在不同畫面，因為人們的短期記憶有限的。• 有效利用導覽方式將資訊內容引導給使用者

10

MOBILE DEV GUIDEUI

• Layout 的設計• 利用 Layout 分割畫面，將重要的操作顯示給使用者。• 避免過多顯示造成使用者負擔• 提供使用者所需的項目• 利用 Layout 呈現資訊內容

11

MOBILE DEV GUIDEUI

• Layout 的設計是用來給使用者掃描，不是閱讀。• 要讓使用者看清與理解我們要提供的資訊內容• 在每一頁上建立清楚視覺階層• 例如 WORD 的標題樣式

• 出版慣例• 例如報紙雜誌的斗大標題，圖片下方的小字。• 但是美工網頁設計師不喜歡，因為想要創新與眾不同的個性。

• 利用佈局將頁面區隔成定義清楚的區域• 明確標示出可以點選的東西• 利用色彩、文字、圖形

• 降低干擾• 避免擁擠• 注意背景干擾

12

MOBILE DEV GUIDEUI

• 讓使用者直觀知道你要表達的內容• 例如 :• 看見一個按鈕是可以點• 或是這各好像是按鈕 (思考先分之一秒 )• 嗯…是按鈕 ??

13

MOBILE DEV GUIDEUI

• Facebook 個人首頁

14

MOBILE DEV GUIDEUI

• Gmail 首頁

15

MOBILE DEV GUIDEUI

• 博客來

16

MOBILE DEV GUIDE

• 圖形• 避免圖形大小超過畫面

• 善用轉場效果• 動畫很美、很吸引人• 但是對於傳達資訊內容是否是正向效果

• Mobile Site vs Mobile App• 考慮網路頻寬的延遲效果• 注意 JavaScript 與 Flash – 不是任何 MOBILE 都支援。• 是否需要 Off-line

17

人機介面

• Chris Harrison• 在進入博士班的第一年， Chris 就用了一篇名為

“ Rethinking the Progress Bar” 的論文順利地進入了 HCI 領域的最高殿堂。• 在這篇研究中，他們發現不同的進度表現方式，使用者感

受的確會有所不同。他們一共研究了九種不同的進度表現方式，最後得出了一個結論 : 測試顯示的結果告訴我們，凡是曲線中有明顯停頓的，使用者所感知的進度都比較慢，而進度中一直在加速的，使用者都會覺得進度走得很快。

18

人機介面

• Chris 發現筆電現在都有一個 webcam ，應該可以做些甚麼來改善甚麼現狀。他的直覺思考，馬上就讓他想到了 Webcam 可以來解決自動 zoom-in 跟 zoom-out 的問題，只要使用者比較接近就自動放大；相反地就縮小。

• http://www.youtube.com/watch?v=DXlCA995sjY&feature=player_embedded

19

人機介面

• 看到了 Kinect 之後，受到去年的 LightSpace 的啓發後，他覺得似乎不需要這麼麻煩地在天花板架三個 Kinect, 應該在肩膀上面弄一個，順便搭上一個 Pico Projector (微型投影機），應該就可以讓任何手可觸及的地方都變成了 touch 介面。或許你也注意到了，他所用的 Kinect 跟別人不太一樣，是的，他跑到 MSR 做研究了，而且用的是最新型的 Kinect, 解析度高上一倍。

• http://www.youtube.com/watch?v=Pz17lbjOFn8&feature=player_embedded

20

UI 設計規劃工具

• 借用建築設計與室內設計的模型概念• 善用原型方式，快速規劃 GUI 的介面與行為。• 不用實際開發就可以掌握 UI 的設計• 提前發現開發風險• 簡化實際開發的成本與時間• 縮短與客戶之間的需求落差• 確認實際 UI後，較容易選擇適當技術與工具。

21

UI 設計規劃工具

• Prototype tools• Pencil• Lumzy• Blueprint• App Cooker• iMockips

22

UI 設計規劃工具

• Pencil• OpenSource• http://pencil.evolus.vn/en-US/Home.aspx• 提供桌機版、 Firfox 外掛版本• 支援 Linux及 Windows

• Lumzy• Free to use• http://lumzy.com/• 線上版本• 多人合作• 提供 Mockup 模擬

23

UI 設計規劃工具

• Pencil Demo• 個案

• Lumzy Demo

24

UI 設計規劃工具

• Mobile DEMO• Blueprint

25

UI 設計規劃工具

• App Cooker

26

UI 設計規劃工具

27

UI 設計規劃工具

• iMockips

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/userexperience/conceptual/mobilehig/Introduction/Introduction.html