《第16章使用者介面设计》-课件设计（公开).pptVIP

軟體工程 第16章 使用者介面設計 學習目標 瞭解使用者介面設計的一些設計原則 介紹各種與系統互動的方式，並說明適用時機 瞭解何時適合使用圖形或文字的資訊呈現方式 明白在使用者介面設計程序中的主要活動 瞭解易用性屬性和各種評估介面的不同方式 使用者介面的重要性 本章焦點放在使用者介面的設計程序上，而不是在實作這些功能的軟體上(如Java、HTML、JSP….)。 軟體系統要能發揮全部的效能，使用者介面應要設計成能夠符合使用者的技能、經驗與期望。良好的使用者介面是系統可信賴度的關鍵。 設計不良的使用者介面可能會導致使用者無法存取其中某些系統功能、容易犯錯或覺得是在幫倒忙。 使用者介面設計時需考量的因素 人只有短暫的記憶 人都會犯錯 人的生理上的能力不同 每個喜好的互動方式不同 使用者介面設計的通用性原則 16.1 使用者介面的設計議題 在設計電腦的使用者介面時，他們所面臨的2個最關鍵的問題是： 如何讓使用者與電腦系統互動？ 如何將電腦系統的資訊呈現給使用者？ 使用者互動 使用者互動（user interaction）是指使用者對電腦系統發出命令與提供相關資料。 分類成以下5種主要的方式： 直接操作：使用者直接與螢幕上的物件進行互動。這通常會需要使用某種指向裝置（滑鼠、軌跡球、觸控螢幕等），來指出目標物件和採取的行動。 選取功能表：使用者可以從功能表中選取某個命令加以執行。這種方式可以同時搭配選取螢幕上的其他物件，並且對該物件執行選取的命令。 填寫表單：使用者在表單中的各欄位填入資料，其中某些欄位可能有下拉清單。而且表單上可能有執行動作的「按鈕」，當按下這個按鈕時就會啟動某個動作。 指令語言：使用者發出指令與相關參數，指示系統應該做哪些事。 自然語言：使用者以自然語言發出指令。這通常是當作指令語言的前端，將自然語言經過剖析轉譯成系統語言。 各種互動方式的優缺點 多重使用者介面 資訊的呈現方式 所有互動式的系統都必須以某種方式向使用者呈現某些資訊，資訊的呈現方式可以是簡單的直接展示輸入資訊（例如文書處理軟體中的文字），或是以圖表的方式呈現這些資訊。 不同的資料顯示排版樣本 使用者互動的MVC模型 Java在動態網頁的應用 - JavaServer Pages Java在動態網頁的應用 - Web應用程式的開發 運用Servlet與JSP建構的網站，將採用MVC架構，將網站區分為Model、View、Control三個部分： 展示層 – 此層為MVC架構的View部分。 邏輯層 – 此層為MVC架構的Model部分。 控制層 – 此層為MVC 架構的Control部分。 Java在動態網頁的應用 - Web應用程式的開發 表示MVC架構與JSP、Servlet…等相關技術的實作關係，如圖下所示： 在決定資訊的呈現方式時，必須將下列幾項因素列入考慮： 使用者是對精確的資訊或者是不同資料數值之間的關係比較感興趣？ 資訊數值的變化速度有多快？數值改變後是否應該立即讓使用者知道？ 使用者是否必須對資訊的變化採取行動？ 使用者是否必須透過直接操作的介面與顯示的資訊進行互動？ 資訊應該以文字或數值來顯示？資訊項目的相對值是否很重要？ 動態變化數值資訊的展示方式 除了資訊的呈現方式以外，還要仔細思考在介面中要如何運用色彩。 色彩能夠幫助使用者理解與管理複雜性，因此能改進使用者介面；然而色彩也很容易被誤用，導致使用者介面在視覺上不吸引人，或是使用容易出錯。 Shneiderman 曾提出在使用者介面中有效使用色彩的14個重要原則 其中最重要的包括： 限制使用的色彩數量並且保守使用：同一個視窗中最好不要使用超過4或5種不同色彩，同一個系統介面中最好也不要使用超過7種不同色彩。 使用色彩的改變來顯示系統狀態的改變：如果顯示的色彩改變了，應該表示有某個重要事件發生。 使用色彩來協助使用者分辨：假設使用者必須找出異常的地方，可以用色彩來強調；假如要找出相似處，也可以使用不同色彩來強調。 其中最重要的包括： 使用色彩要慎重考慮而且一致：如果系統中的某個部分是以紅色來顯示錯誤訊息，其他部分也都應該同樣使用紅色。這時，紅色就不應該用在其他地方，因為使用者可能會誤認為是錯誤訊息。 注意色彩的搭配：由於眼睛的生理機能，人們無法同時集中在紅色和藍色上。因此，在藍色畫面上顯示紅色會讓眼睛容易疲勞。其他還有一些色彩組合也會在視覺上造成干擾或是閱讀困難。 設計系統訊息應考慮的因素 系統導向與使用者導向的錯誤訊息 16.2 UI設計程序 使用者介面（user interface，UI）設計是一種反覆式程序，使用者會與設計人員和介面雛