開放原始碼 Ch2.3 app - oss - ui framewoks (ver 1.0)
Download as PPTX, PDF0 likes556 views
本文探讨了开源UI框架、人体工学和通用设计的重要性。强调用户界面的易用性和设计应考虑用户的能力和需求。文中还提供了多个开源UI资源和框架的实例，显示出现代设计如何提高用户体验。
開放原始碼 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
- 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
- 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