1O P E N S O U RC E U I

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

- UI Frameworks - JSP JSF & Ajax Based- HTML 5 + JavaScript Based

CH 2

2

UI 領域

• 人體工學 / 人機介面• 通用設計• 軟體開放原始碼 UI 資源

3

UI FRAMEWROK

• Input/Output/Process (IPO) - IBM Corporation (1974).HIPO• I – 輸入資料• P – 處理資料• O – 呈現資料• S – 儲存媒介

• 任何系統都不能沒有這些 IPO• 面對使用者的系統都需要提供方式來呈現 IPO• 良好的 UI 關係到系統的好壞

4

人體工學 / 人機介面

• 初期引用科系• 工業系、工工系、工業工程等• 應用於工廠與店家

• 後期• 各領域皆需要納入人因設計• 應用於產品設計

5

人體工學 / 人機介面

• 目的• 了解工人和工作環境的交互作用，讓人類工作經驗更有效率，同時

促進工人的幸福。• 簡要回顧生理、心理、工程和人體關於工作相關之生物力

學、心理及環境壓力之各• 人因工程定義如下：人因工程是一門探討人的能力、限制

及其與設計有關之特徵• 專業人因工程師認證委員會（ Board of Certification in

Professional Ergonomics ， BCPE ， 1997 ）

6

人體工學 / 人機介面

• 早在 1857 年有一位波蘭學者（ Wojciech Jastrzebowski ）• 首先提出人因工程（又稱人體工學）這一個概念。他認為人因工程

是一門研究工作的科學（ The science of Work ），從希臘字 ergon ( 亦即工作 work) 與 nomos ( 亦即法則 ) ，衍生出 "ergonomics" （人因工程 / 人體工學）

• 涵蓋科學• 1. 生理學。• 2. 心理學。• 3. 工程學。• 4. 人體測量學。

7

人機介面

• 研究系統與用戶之間的互動關係的學問。• 系統可以是各種各樣的機器，也可以是計算機化的系統和

軟件。• 人機交互界面通常是指用戶可見的部分。用戶通過人機交

互界面與系統交流，並進行操作。• 小如收音機的播放按鍵，大至飛機上的儀表板、或是發電廠的控制

室。

8

人體工學 / 人機介面

• 人機互動 (Human-Computer Interaction, HCI)• 以操作介面 (user interface) 的設計來說，這是在軟體開

發流程中最容易被忽略的一環。一般公司和軟體工程師把寫 UI 視為一種苦工，於是常隨便抓個菜鳥去用 VB 之類的快速開發工具把元件拉一拉就結束了。• 使用者開始用軟體時，第一眼接觸到的就是 UI ，如果 UI

設計的不好，使用者容易感到挫折，甚至嘗試一兩次後就把軟體給丟了。

9

人體工學 / 人機介面

• 觸控設計• 近幾年因為 Apple 的 iPod 、 iPhone 開始走紅，越來越多人注意

到好的介面設計帶給使用者的影響是非常巨大的，甚至也對於產品的銷路有決定性的影響。

• 很多人能感覺到 Apple 設計的介面比較好看而且也比較好用，但其實說不出來為什麼，所以工程師也很難複製 Apple所創造出來的使用者體驗 (user experience) 。

10

人體工學 / 人機介面

• 圖形介面 (Graphical User Interface, GUI) 的快速開發工具將軟體介面設計的難度大大降低到像用小畫家畫畫一樣的程度。• 所有的標準 GUI 元件都是手到擒來，滑鼠一拉就能擺到

任何想擺的位置。這項工作看似簡單，但要做得好其實並不容易。• 許多人誤解介面只要好看就好，但其實好看的介面不見得

好用（常常還比較難用）。「好看」這件事目前還有很多藝術成份在裡面，但「好用」這件事其實已經有很多 HCI研究發展出的理論能告訴我們怎樣設計會比較「好用」。

11

• UI 最核心的概念 Usability – 易用性• 定義是人可以用某樣工具達到一個特定目標的容易程度。

• 五項要素：• Learnability: 使用者在第一次用就能學會的容易程度• Memorability: 經過一段時間之後再重新使用這 UI還能熟練操作

的容易程度• Efficiency: 使用者能用這個 UI多快完成任務• Errors: 包括使用者有多容易出錯、錯誤有多嚴重、以及有多容易

從錯誤中回復回來• Satisfaction: 使用者用這個 UI 時會覺得愉快的程度

12

通用設計（ UNIVERSAL DESIGN ）

• 通用設計又名全民設計、全方位設計或是通用化設計，係指無須改良或特別設計就能為所有人使用的產品、環境及通訊。它所傳達的意思是：如何能被失能者所使用，就更能被所有的人使用。 (WIKI)• 通用設計的演進始於 1950 年代，當時人們開始注意殘障

問題。• 在日本、歐洲及美國，「無障礙空間設計」（ barrier-free

design ）為身體障礙者除去了存在環境中的各種障礙。

13

通用設計（ UNIVERSAL DESIGN ）

• 在 1970 年代時，歐洲及美國一開始是採用「廣泛設計」（ accessible design ），針對在不良於行的人士在生活環境上之需求，並不是針對產品。• 美國建築師麥可 ·貝奈（ Michael Bednar ）提出• 撤除了環境中的障礙後，每個人的官能都可獲得提升。他認為建立

一個超越廣泛設計且更廣泛、全面的新觀念是必要的。也就是說廣泛設計一詞並無法完整說明他們的理念。

• 1987 年，美國設計師，羅納德 ·麥斯（ Ronald L. Mace ）開始大量的使用「通用設計」一詞，並設法定義它與「廣泛設計」的關係。

14

通用設計（ UNIVERSAL DESIGN ）

• 在 1990 年中期，羅納德 ·麥斯與一群設計師為「全民設計」訂定了七項原則。• 在學術領域，“ Universal Design”還有一個名稱為“共用性设计”。

15

通用設計（ UNIVERSAL DESIGN ）

• 七項原則• 公平使用：這種設計對任何使用者都不會造成傷害或使其受窘。• 彈性使用：這種設計涵蓋了廣泛的個人喜好及能力。• 簡易及直覺使用：不論使用者的經驗、知識、語言能力或集中力如

何，這種設計的使用都很容易了解。• 明顯的資訊：不論周圍狀況或使用著感官能力如何，這種設計有效地對使用者傳達了必要的資訊。

• 容許錯誤：這種設計將危險及因意外或不經意的動作所導致的不利後果降至最低。

• 省力：這種設計可以有效、舒適及不費力地使用。• 適當的尺寸及空間供使用：不論使用者體型、姿勢或移動性如何，

這種設計提供了適當的大小及空間供操作及使用。

16

通用設計（ UNIVERSAL DESIGN ）

• 麥斯本人所提的 3B 原則： • 1. 更好的設計（ Better Design ）。 • 2. 更美觀的設計（ More Beautiful ）。 • 3. 更高的經濟價值（ Good Business ）。

17

通用設計（ UNIVERSAL DESIGN ）

• 美國堪薩斯市州立大學人文生態學院的服裝、織品以及室內設計系共同提出的 5A 原則： • 1. 可親近性的（ Accessible ）－• 不論是產品或環境空間，必須提供使用者更容易接近與使用的介面與設計 • 2. 可調整性的（ Adjustable ）－• 設計應依不同的使用者或使用狀況，提供使用者最適合的操作方式 • 3. 可通融性的（ Adaptable ）－• 強調產品或是環境空間應具有通融性的設計，讓多數的人方便使用 • 4. 引起興趣的（ Attractive ）－• 有趣或易吸引人的設計，提高使用者操作上或使用上心理、生理的滿足感 • 5. 可負擔的（ Affordable ）－• 強調提供使用者負擔得起的產品價格，讓使用者無須花費昂貴的價錢購買• 減少心理與價錢的負擔，使用也更不具壓力。

18

通用設計（ UNIVERSAL DESIGN ）

• 日本 Tripod Design設計公司制定的七大原則與三項附加原則： • 1. 關懷使用的公平性（公平な使用への配慮） • 2. 確保使用方面的柔軟性（使用における柔軟性の確保） • 3. 追求簡單、易懂的使用方法（簡単で明解な使用法の追求） • 4. 訊息能關懷到所有的知覺（あらゆる知覚による情報への配慮） • 5. 防止事故和能容納錯誤的發生（事故の防止と誤作動への受容） • 6. 減輕身體的負擔（身体的負担の軽減） • 7. 容易使用的空間和確保各種條件（使いやすい使用空間と条件の確保）

• (1) 考量耐久性和經濟性（耐久性と経済性への配慮） • (2) 考量品質和審美性（品質と審美性への配慮） • (3) 關懷保健和環境問題（保健と環境への配慮）

19

通用設計（ UNIVERSAL DESIGN ）

• 台北市居住服務平台• http://www.housing.taipei.gov.tw

20

通用設計（ UNIVERSAL DESIGN ）

• 餐廳的義大利麵• 「 S」是建議搭配細麵，「 R」是建議搭配管麵

21

通用設計（ UNIVERSAL DESIGN ）

• 案例

22

通用設計（ UNIVERSAL DESIGN ）

• 松山機場以紅色系與藍色系做為國際線與國內線的區別，讓旅客能一目了然• 但粉紅色與黃色的對比不夠強烈，讓粉紅色圖案在黃色背景中顯得非常不清楚• 文字與背景的對比夠不夠強烈深深影響了指標的易視性

23

通用設計（ UNIVERSAL DESIGN ）

• 機場的航班資訊，經常會使用跑馬燈或 LED燈的型式• 這類的資訊多採用紅色文字，加上底部是黑色背景• 戴上模擬色盲患者的眼鏡，即可發現這些文字對色盲患者而言是幾乎看不見的！

24

通用設計（ UNIVERSAL DESIGN ）

• 戴上模擬色盲患者的眼鏡後，可發現綠色與橘色的文字仍是可見的

25

通用設計（ UNIVERSAL DESIGN ）

• 色盲患者所看到的 " 視 " 界

26

通用設計（ UNIVERSAL DESIGN ）

• 除了放大字體，還加上了聽力輔助，以及顏色的運用。

27

通用設計（ UNIVERSAL DESIGN ）

• 通用設計觀念不只強調設計的功能等要能滿足更多使用者的需求也很重視設計帶給使用者的心理感受• 包括使用或操作時是否愉快、沒有造成使用者心理上的負擔或壓力

等等• 因此，不應只進行「硬體」 (hardware) 的改善，「軟

體」 (software) 也應注意！

28

軟體開放原始碼 UI 資源JSP JSF BASED

• JSP• JavaServer Page• 早期 server端網頁技術，解決網頁與後端系統的整合。以及動態內容產生。

• 缺點 : 程式與 UI混和在一起，難以維護。• JSF• JavaServerFace• 解決程式與 UI混合嚴重的問題，將程式商業邏輯獨立為

JavaBean 。使 UI 部分完整清晰。• 大量 UI 元件爆發性增加。• 更加豐富的 UI 特性。

29

軟體開放原始碼 UI 資源JSP JSF BASED

• JavaServer Face Framework• ICEfaces - http://www.icefaces.org• ICEfaces.org provides a wide range of development and

support resources to benefit all Java developers looking to build rich J2EE Ajax applications.

• Primefaces. - http://www.primefaces.org• PrimeFaces is an open source JSF component library featuring

100+ rich set of components.

30

軟體開放原始碼 UI 資源MVC BASED

• Strust• http://struts.apache.org/• 採用 MVC 設計模式• 將 VIEW 、 MODEL 及 CONTROLLER予以分割。• Java based

• PureMVC• http://puremvc.org/• 輕量級 VIEW 、 MODEL 及 CONTROLLER框架• 支援大量程式與實作品• 徹底MVC 化框架

31

軟體開放原始碼 UI 資源AJAX BASED

• ZK• http://www.zkoss.org/• 後端 JAVA技術為主• 以 XML UI描述語法構建 UI• 台灣發展

• GWT• http://code.google.com/intl/zh/webtoolkit/• Google 官方網頁技術框架• Google 官方本身服務與產品皆使用 GWT 開發

32

軟體開放原始碼 UI 資源AJAX BASED

• Vaadin• http://vaadin.com• 採用純 JAVA技術開發• 前端採用 GWT描繪引擎• 只需要學習 JAVA• 前端 UI自動動態產生，不需要學習 HTML 、 JavaScript• 大量外掛元件，擴充性高。• 適合開發 企業系統• 提供行動裝置外掛元件以便於開發手機等網頁系統。

33

軟體開放原始碼 UI 資源HTML 5 + JAVASCRIPT BASED

• Ext JS• http://www.sencha.com/• 獨立發展 JavaScript框架• 完整的 RIA支援• 大量豐富UI 元件• 成熟度最高

• Jquery based• http://jquery.com/• 最多人使用的 UI框架• 大量外掛提供擴充資源• 以系統性API 為主， RIA非常欠缺，需要依賴大量其他框架技術。

• Jquery UI

• Dojo• http://dojotoolkit.org/• 豐富UI 元件• 支援MOBILE