Más contenido relacionado Similar a 開放原始碼 Ch2.3 app - oss - ui framewoks (ver 1.0) (20) Más de My own sweet home! (18) 開放原始碼 Ch2.3 app - oss - ui framewoks (ver 1.0)1. OPEN SOURCE UI 2
1
CH
- UI Frameworks - JSP JSF & Ajax Based
- HTML 5 + JavaScript Based
3. UI FRAMEWROK
• Input/Output/Process (IPO) - IBM Corporation (1974).HIPO
• I – 輸入資料
• P – 處理資料
• O – 呈現資料
• S – 儲存媒介
• 任何系統都不能沒有這些IPO
• 面對使用者的系統都需要提供方式來呈現IPO
• 良好的UI關係到系統的好壞
3
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
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
13. 通用設計(UNIVERSAL DESIGN)
• 在1970年代時,歐洲及美國一開始是採用「廣泛設計」
(accessible design),針對在不良於行的人士在生活
環境上之需求,並不是針對產品。
• 美國建築師麥可·貝奈(Michael Bednar)提出
• 撤除了環境中的障礙後,每個人的官能都可獲得提升。他認為建立
一個超越廣泛設計且更廣泛、全面的新觀念是必要的。也就是說廣
泛設計一詞並無法完整說明他們的理念。
• 1987年,美國設計師,羅納德·麥斯(Ronald L. Mace)
開始大量的使用「通用設計」一詞,並設法定義它與「廣
泛設計」的關係。
13
15. 通用設計(UNIVERSAL DESIGN)
• 七項原則
• 公平使用:這種設計對任何使用者都不會造成傷害或使其受窘。
• 彈性使用:這種設計涵蓋了廣泛的個人喜好及能力。
• 簡易及直覺使用:不論使用者的經驗、知識、語言能力或集中力如
何,這種設計的使用都很容易了解。
• 明顯的資訊:不論周圍狀況或使用著感官能力如何,這種設計有效
地對使用者傳達了必要的資訊。
• 容許錯誤:這種設計將危險及因意外或不經意的動作所導致的不利
後果降至最低。
• 省力:這種設計可以有效、舒適及不費力地使用。
• 適當的尺寸及空間供使用:不論使用者體型、姿勢或移動性如何,
這種設計提供了適當的大小及空間供操作及使用。
15
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
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