1. OPEN SOURCE UI 2
1
CH
- UI Frameworks - JSP JSF & Ajax Based
- HTML 5 + JavaScript Based

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

3. UI FRAMEWROK
• Input/Output/Process (IPO) - IBM Corporation (1974).HIPO
• I – 輸入資料
• P – 處理資料
• O – 呈現資料
• S – 儲存媒介
• 任何系統都不能沒有這些IPO
• 面對使用者的系統都需要提供方式來呈現IPO
• 良好的UI關係到系統的好壞
3

4. 人體工學/人機介面
• 初期引用科系
• 工業系、工工系、工業工程等
• 應用於工廠與店家
• 後期
• 各領域皆需要納入人因設計
• 應用於產品設計
4

5. 人體工學/人機介面
• 目的
• 了解工人和工作環境的交互作用，讓人類工作經驗更有效率，同時
促進工人的幸福。
• 簡要回顧生理、心理、工程和人體關於工作相關之生物力
學、心理及環境壓力之各
• 人因工程定義如下：人因工程是一門探討人的能力、限制
及其與設計有關之特徵
• 專業人因工程師認證委員會（Board of Certification in
Professional Ergonomics，BCPE，1997）
5

6. 人體工學/人機介面
• 早在 1857 年有一位波蘭學者（Wojciech Jastrzebowski）
• 首先提出人因工程（又稱人體工學）這一個概念。他認為人因工程
是一門研究工作的科學（The science of Work），從希臘字
ergon (亦即工作 work) 與 nomos (亦即法則)，衍生出
"ergonomics" （人因工程/人體工學）
• 涵蓋科學
• 1. 生理學。
• 2. 心理學。
• 3. 工程學。
• 4. 人體測量學。
6

7. 人機介面
• 研究系統與用戶之間的互動關係的學問。
• 系統可以是各種各樣的機器，也可以是計算機化的系統和
軟件。
• 人機交互界面通常是指用戶可見的部分。用戶通過人機交
互界面與系統交流，並進行操作。
• 小如收音機的播放按鍵，大至飛機上的儀表板、或是發電廠的控制
室。
7

8. 人體工學/人機介面
• 人機互動(Human-Computer Interaction, HCI)
• 以操作介面(user interface)的設計來說，這是在軟體開
發流程中最容易被忽略的一環。一般公司和軟體工程師把
寫UI視為一種苦工，於是常隨便抓個菜鳥去用VB之類的快
速開發工具把元件拉一拉就結束了。
• 使用者開始用軟體時，第一眼接觸到的就是UI，如果UI設
計的不好，使用者容易感到挫折，甚至嘗試一兩次後就把
軟體給丟了。
8

9. 人體工學/人機介面
• 觸控設計
• 近幾年因為Apple的iPod、iPhone開始走紅，越來越多人注意到
好的介面設計帶給使用者的影響是非常巨大的，甚至也對於產品的
銷路有決定性的影響。
• 很多人能感覺到Apple設計的介面比較好看而且也比較好用，但其
實說不出來為什麼，所以工程師也很難複製Apple所創造出來的使
用者體驗(user experience)。
9

10. 人體工學/人機介面
• 圖形介面(Graphical User Interface, GUI)的快速開發工
具將軟體介面設計的難度大大降低到像用小畫家畫畫一樣
的程度。
• 所有的標準GUI元件都是手到擒來，滑鼠一拉就能擺到任
何想擺的位置。這項工作看似簡單，但要做得好其實並不
容易。
• 許多人誤解介面只要好看就好，但其實好看的介面不見得
好用（常常還比較難用）。「好看」這件事目前還有很多
藝術成份在裡面，但「好用」這件事其實已經有很多HCI
研究發展出的理論能告訴我們怎樣設計會比較「好用」。
10

11. • UI最核心的概念Usability – 易用性
• 定義是人可以用某樣工具達到一個特定目標的容易程度。
• 五項要素：
• Learnability: 使用者在第一次用就能學會的容易程度
• Memorability: 經過一段時間之後再重新使用這UI還能熟練操作的
容易程度
• Efficiency: 使用者能用這個UI多快完成任務
• Errors: 包括使用者有多容易出錯、錯誤有多嚴重、以及有多容易從
錯誤中回復回來
• Satisfaction: 使用者用這個UI時會覺得愉快的程度
11

12. 通用設計（UNIVERSAL DESIGN）
• 通用設計又名全民設計、全方位設計或是通用化設計，係
指無須改良或特別設計就能為所有人使用的產品、環境及
通訊。它所傳達的意思是：如何能被失能者所使用，就更
能被所有的人使用。 (WIKI)
• 通用設計的演進始於1950年代，當時人們開始注意殘障問
題。
• 在日本、歐洲及美國，「無障礙空間設計」（barrier-free design）
為身體障礙者除去了存在環境中的各種障礙。
12

13. 通用設計（UNIVERSAL DESIGN）
• 在1970年代時，歐洲及美國一開始是採用「廣泛設計」
（accessible design），針對在不良於行的人士在生活
環境上之需求，並不是針對產品。
• 美國建築師麥可·貝奈（Michael Bednar）提出
• 撤除了環境中的障礙後，每個人的官能都可獲得提升。他認為建立
一個超越廣泛設計且更廣泛、全面的新觀念是必要的。也就是說廣
泛設計一詞並無法完整說明他們的理念。
• 1987年，美國設計師，羅納德·麥斯（Ronald L. Mace）
開始大量的使用「通用設計」一詞，並設法定義它與「廣
泛設計」的關係。
13

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

15. 通用設計（UNIVERSAL DESIGN）
• 七項原則
• 公平使用：這種設計對任何使用者都不會造成傷害或使其受窘。
• 彈性使用：這種設計涵蓋了廣泛的個人喜好及能力。
• 簡易及直覺使用：不論使用者的經驗、知識、語言能力或集中力如
何，這種設計的使用都很容易了解。
• 明顯的資訊：不論周圍狀況或使用著感官能力如何，這種設計有效
地對使用者傳達了必要的資訊。
• 容許錯誤：這種設計將危險及因意外或不經意的動作所導致的不利
後果降至最低。
• 省力：這種設計可以有效、舒適及不費力地使用。
• 適當的尺寸及空間供使用：不論使用者體型、姿勢或移動性如何，
這種設計提供了適當的大小及空間供操作及使用。
15

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

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

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

19. 通用設計（UNIVERSAL DESIGN）
• 台北市居住服務平台
• http://www.housing.taipei.gov.tw
19

20. 通用設計（UNIVERSAL DESIGN）
• 餐廳的義大利麵
• 「S」是建議搭配細麵，「R」是建議搭配管麵
20

21. 通用設計（UNIVERSAL DESIGN）
• 案例
21

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

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

24. 通用設計（UNIVERSAL DESIGN）
• 戴上模擬色盲患者的眼鏡後，可發現綠色與橘色的文字仍
是可見的
24

25. 通用設計（UNIVERSAL DESIGN）
• 色盲患者所看到的"視"界
25

26. 通用設計（UNIVERSAL DESIGN）
• 除了放大字體，還加上了聽力輔助，以及顏色的運用。
26

27. 通用設計（UNIVERSAL DESIGN）
• 通用設計觀念不只強調設計的功能等要能滿足更多使用者
的需求也很重視設計帶給使用者的心理感受
• 包括使用或操作時是否愉快、沒有造成使用者心理上的負擔或壓力
等等
• 因此，不應只進行「硬體」(hardware) 的改善，「軟體」
(software) 也應注意！
27

28. 軟體開放原始碼UI資源
JSP JSF BASED
• JSP
• JavaServer Page
• 早期server端網頁技術，解決網頁與後端系統的整合。以及動態內
容產生。
• 缺點: 程式與UI混和在一起，難以維護。
• JSF
• JavaServerFace
• 解決程式與UI混合嚴重的問題，將程式商業邏輯獨立為JavaBean。
使UI部分完整清晰。
• 大量UI元件爆發性增加。
• 更加豐富的UI特性。
28

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.
29

30. 軟體開放原始碼UI資源
MVC BASED
• Strust
• http://struts.apache.org/
• 採用MVC設計模式
• 將VIEW、MODEL及CONTROLLER予以分割。
• Java based
• PureMVC
• http://puremvc.org/
• 輕量級VIEW、MODEL及CONTROLLER框架
• 支援大量程式與實作品
• 徹底MVC化框架
30

31. 軟體開放原始碼UI資源
AJAX BASED
• ZK
• http://www.zkoss.org/
• 後端JAVA技術為主
• 以XML UI描述語法構建UI
• 台灣發展
• GWT
• http://code.google.com/intl/zh/webtoolkit/
• Google 官方網頁技術框架
• Google 官方本身服務與產品皆使用GWT開發
31

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

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
33