《軟件工程》第16章 用戶界面設(shè)計課件

第16章用戶界面設(shè)計第16章用戶界面設(shè)計目標(biāo)介紹用戶界面設(shè)計的一般設(shè)計原則；介紹多種交互模式以及它們的應(yīng)用；解釋什么時候應(yīng)該使用圖形顯示和文本顯示方式來顯示信息；講解在用戶界面設(shè)計過程中應(yīng)包括的主要活動；介紹可用性屬性以及界面評價的不同方法。目標(biāo)介紹用戶界面設(shè)計的一般設(shè)計原則；內(nèi)容設(shè)計問題用戶界面設(shè)計過程用戶分析用戶界面原型構(gòu)造界面評估內(nèi)容設(shè)計問題用戶界面用戶界面的設(shè)計應(yīng)與將來的用戶所具有的技能、經(jīng)驗和他們的期待相一致。系統(tǒng)用戶經(jīng)常通過用戶界面，而不是它的功能來評價一個系統(tǒng)。一個不好的界面設(shè)計可能導(dǎo)致用戶無法使用系統(tǒng)的某些特性。界面設(shè)計不好就是為什么如此多的軟件系統(tǒng)還從未使用過的原因。用戶界面用戶界面的設(shè)計應(yīng)與將來的用戶所具有的技能、經(jīng)驗和他們界面設(shè)計中人的因素有限的短時記憶人們可以瞬間想起七條信息。如果你在同一時間內(nèi)提供給用戶太多的信息，他們就不能夠全部接受。人們會犯錯誤

當(dāng)我們犯錯誤的時候，系統(tǒng)運行就會不正常，并發(fā)出問題警告消息和報警，這些消息可能會對用戶施加更大的精神壓力，從而也增加了他們操作失誤的可能性。

人是不同的我們有很強(qiáng)的身體行為能力。設(shè)計者在設(shè)計時不能按照他們個人的能力來進(jìn)行。人們會有不同的交互偏好有些人喜歡看圖片，而有的人喜歡閱讀文字。界面設(shè)計中人的因素有限的短時記憶《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件用戶界面設(shè)計原則用戶界面設(shè)計必須要考慮到系統(tǒng)用戶的需要、經(jīng)驗和用戶的能力。設(shè)計者應(yīng)該意識到使用軟件的人的身體和精神上的局限性（例如有限的短時記憶），還要認(rèn)識到人們是會犯錯誤的。用戶界面設(shè)計原則是界面設(shè)計的基礎(chǔ)，盡管不是所有的原則都會應(yīng)用到全部的設(shè)計中。用戶界面設(shè)計原則用戶界面設(shè)計必須要考慮到系統(tǒng)用戶的需要、經(jīng)驗設(shè)計原則用戶熟悉界面所使用的屬于和概念應(yīng)該來自于用戶的經(jīng)驗，而不是計算機(jī)的概念。例如，一個辦公系統(tǒng)應(yīng)該要使用諸如信件，文件，文件夾之類的概念，而不是目錄，文件標(biāo)識符等的概念。一致性界面設(shè)計應(yīng)該是一致的，即盡可能地讓相似的操作有相同的觸發(fā)方式。意外最小化如果一個命令式按某種已知的方法進(jìn)行操作的，那么用戶就應(yīng)該可以預(yù)測相似的命令的操作方式。設(shè)計原則用戶熟悉設(shè)計原則可恢復(fù)性界面應(yīng)該有一種機(jī)制來允許用戶從錯誤中恢復(fù)，這可能包括撤銷，對破壞性行為的確認(rèn)，軟刪除等。用戶指南用戶界面應(yīng)該提供一些比如幫助系統(tǒng)，在線手冊等用戶指南。用戶差異性界面設(shè)計應(yīng)該為不同類型用戶提供合適的交互功能。例如，某些用戶可能有視覺困難，所以就用該給他們提供大量的文字信息。設(shè)計原則可恢復(fù)性《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件界面設(shè)計中的設(shè)計問題在交互式設(shè)計中，兩個關(guān)鍵問題：用戶應(yīng)該如何與計算機(jī)系統(tǒng)進(jìn)行交互？來自計算機(jī)系統(tǒng)的信息應(yīng)該如何傳達(dá)給用戶？用戶交互和信息表達(dá)應(yīng)該通過比如用戶界面隱喻這樣連貫的框架集成起來。界面設(shè)計中的設(shè)計問題在交互式設(shè)計中，兩個關(guān)鍵問題：用戶交互類型直接操作菜單選擇表格填寫命令語言自然語言用戶交互類型直接操作交互類型交互類型《軟件工程》第16章用戶界面設(shè)計課件多用戶界面多用戶界面《軟件工程》第16章用戶界面設(shè)計課件LIBSYS系統(tǒng)的交互文檔搜索用戶使用搜索工具找他們所需要的文檔文檔請求用戶請求將文檔傳遞到他們的本地機(jī)或者是服務(wù)器上以供打印LIBSYS系統(tǒng)的交互文檔搜索《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件基于web的用戶界面許多基于web的系統(tǒng)都有基于web表格的界面。表格域可以是菜單，自由文字輸入，單選框等。在LIBSYS系統(tǒng)中，用戶從可訪問的集合菜單中選擇某個集合，在自由文本輸入字段中輸入要檢索的短語。基于web的用戶界面許多基于web的系統(tǒng)都有基于web表格的《軟件工程》第16章用戶界面設(shè)計課件LIBSYS系統(tǒng)的搜索表格LIBSYS系統(tǒng)的搜索表格信息表示信息表達(dá)是將系統(tǒng)的信息表達(dá)給系統(tǒng)用戶。信息可以是直接表達(dá)的（比如文字處理器中的文本），或是將信息轉(zhuǎn)換成另一種形式（比如表格）來表達(dá)。MVC（Model-View-Controller）方法首先廣泛應(yīng)用于Smalltalk語言中，它是支持?jǐn)?shù)據(jù)的多重表達(dá)的有效方式。信息表示信息表達(dá)是將系統(tǒng)的信息表達(dá)給系統(tǒng)用戶?！盾浖こ獭返?6章用戶界面設(shè)計課件信息表示信息表示《軟件工程》第16章用戶界面設(shè)計課件用戶交互的MVC模型用戶交互的MVC模型MVC(Model-View-Controller)把一個應(yīng)用的輸入、輸出、處理流程按照Model、View、Controller的方式進(jìn)行分離，應(yīng)用被分成三個層——模型層、視圖層、控制層。

模型(Model)：就是業(yè)務(wù)流程/狀態(tài)的處理以及業(yè)務(wù)規(guī)則的制定。即是MVC的主要核心。

視圖(View)：代表用戶交互界面，也就是Web的HTML界面。

控制(Controller)：可以理解為從用戶接收請求,將模型與視圖匹配在一起，共同完成用戶的請求。MVC(Model-View-Controller)把一個應(yīng)MVC模型在基于窗口的GUI應(yīng)用程序中，控制器(Controller)一般就是控件的事件處理函數(shù)?？刂破?Controller)有兩個基本功能:一是把用戶從界面上的操作(點擊按鈕)映射成模型(Model)對應(yīng)的功能(如刪除數(shù)據(jù))，二是把模型(Model)的變化更新到視圖(View)上。MVC模型在基于窗口的GUI應(yīng)用程序中，控制器(Contro《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件留言板分析例子留言板可以切成三部份:

模型(M)：包含數(shù)據(jù)庫鏈接、生成數(shù)據(jù)集、數(shù)據(jù)庫更新操作。

視圖(V)：包含獲取模型的數(shù)據(jù)集，將數(shù)據(jù)集內(nèi)填充到各種顯示界面內(nèi)，如（留言板列表，管理控制頁面，添加修改刪除界面等一切用戶看得到的頁面。）

控制(C)：包含數(shù)據(jù)庫更新的數(shù)據(jù)校驗，將更新完畢后的結(jié)果轉(zhuǎn)交給視圖進(jìn)行呈現(xiàn)。留言板分析例子留言板可以切成三部份:留言板分析_細(xì)分模型(M)

數(shù)據(jù)鏈接：數(shù)據(jù)鏈接參數(shù)、鏈接失敗處理。

數(shù)據(jù)操作：生成固定格式的數(shù)據(jù)集、運行單行SQL、解析固定格式的數(shù)據(jù)集更新數(shù)據(jù)庫（內(nèi)容包括有：留言記錄，管理員帳號，系統(tǒng)設(shè)定）。

文件操作：將文件內(nèi)部格式封成數(shù)據(jù)集，并附帶讀取寫入文件操作。（內(nèi)容包括有：留言板樣式設(shè)定、版權(quán)設(shè)定、搜索引擎關(guān)鍵字設(shè)定、留言板標(biāo)題設(shè)定）

返回留言板分析_細(xì)分模型(M)

數(shù)據(jù)鏈接：數(shù)據(jù)鏈接參數(shù)、鏈接留言板分析_細(xì)分視圖(V)

數(shù)據(jù)顯示：根據(jù)要求授權(quán)給控制器[C]向模型[M]請求數(shù)據(jù)集，然后根據(jù)數(shù)據(jù)集顯示出界面。

操作結(jié)果顯示：根據(jù)控制返回的數(shù)據(jù)資料決定顯示的提示資料

具體資料包括有：

留言添加頁：判斷留言者是否管理員、判斷本次留言是回復(fù)還是新建留言。

留言管理頁：批量刪除留言、查詢留言、管理員帳號管理、系統(tǒng)設(shè)定等。

留言顯示頁：判斷留言是否為管理員專用、判斷本留言是否為管理員發(fā)布、是否允許回復(fù)、是否顯示留言者的敏感資料、留言是否需要審核后再顯示。

返回留言板分析_細(xì)分視圖(V)

數(shù)據(jù)顯示：根據(jù)要求授權(quán)給留言板分析_細(xì)分控制(C)

數(shù)據(jù)/文件操作：接收操作資料，校驗數(shù)據(jù)是否符合條件，引用模型的生成數(shù)據(jù)集類生成指定數(shù)據(jù)集，然后交給相應(yīng)的模型操作方法操作，并獲取操作結(jié)果以預(yù)定好的格式轉(zhuǎn)交給視圖處理

返回留言板分析_細(xì)分控制(C)

數(shù)據(jù)/文件操作：接收操作資料封裝成Class

模型(M)：

數(shù)據(jù)庫鏈接和數(shù)據(jù)操作可以封成一個Class。

數(shù)據(jù)庫數(shù)據(jù)集的結(jié)構(gòu)，可以引用Dictionary控件與數(shù)組完成。文件操作部份封裝成一個Class

文件結(jié)構(gòu)定義可以封成一個Class

封裝成Class

模型(M)：

數(shù)據(jù)庫鏈接和數(shù)據(jù)封裝成Class

視圖(V)：

視圖部可均是以文件模式出現(xiàn)，也可以將部份代碼封裝后引用。

控制(C)：

數(shù)據(jù)校驗：SQL注入防御處理、日文字符替換處理、特定常用校驗正則式，數(shù)據(jù)/文件更新操作：以文件模式出現(xiàn)，每個文件處理模型(M)中的某個類。并完成控制(C)的工作。

封裝成Class

視圖(V)：

視圖部可均是以文件模封裝成Class視圖[V]模型[C]鏈接器：接收視圖[V]要求數(shù)據(jù)集的請求，將請求轉(zhuǎn)換成模型[M]合適的SQL句，交給模型[M]數(shù)據(jù)集成生器生成數(shù)據(jù)集，返回給視圖[V]封裝成Class視圖[V]模型[C]鏈接器：信息表示靜態(tài)信息在一段時間開始時進(jìn)行初始化，并且在這段時間內(nèi)不會變化的信息?？梢允菙?shù)字或文本形式動態(tài)信息在某一時間段內(nèi)會改變，而且這種改變必須要與系統(tǒng)用戶進(jìn)行交流的信息。可以是數(shù)字或文本的形式信息表示靜態(tài)信息信息表示要考慮的因素用戶對精確信息或不同數(shù)據(jù)值之間的關(guān)系感興趣嗎？信息值變更的速度如何？數(shù)值的變更需要馬上顯示給用戶嗎？用戶必須根據(jù)信息的變更執(zhí)行某種動作嗎？用戶需要經(jīng)由直接操作界面與顯示的信息進(jìn)行交互嗎？要顯示的信息是文本形式的還是數(shù)字形式的？數(shù)值項的相對值重要嗎？信息表示要考慮的因素用戶對精確信息或不同數(shù)據(jù)值之間的關(guān)系感興兩種信息表示法兩種信息表示法模擬和數(shù)字表示法數(shù)字表示緊湊—占用的屏幕空間??；精確的數(shù)字可以進(jìn)行交流。模擬表示很容易獲得一個相對值的直觀印象；能夠顯示相對值；易于觀察異常數(shù)據(jù)值。模擬和數(shù)字表示法數(shù)字表示動態(tài)變化的數(shù)字信息表達(dá)方法動態(tài)變化的數(shù)字信息表達(dá)方法表示相對值的圖形信息表達(dá)表示相對值的圖形信息表達(dá)數(shù)據(jù)可視化數(shù)據(jù)可視化是顯示大量信息的技術(shù)。可視化可以表現(xiàn)數(shù)據(jù)中實體和趨勢之間的關(guān)系。數(shù)據(jù)可視化的實例有：從多個地點收集起來的氣象信息；電話網(wǎng)狀態(tài)顯示為相互連接的一組節(jié)點；化工廠狀態(tài)可視化為相互連接的一組反應(yīng)罐和管道，顯示出它們當(dāng)中的壓力和溫度信息；在三維空間中顯示和操縱分子模型；一組網(wǎng)頁顯示為一個擴(kuò)展樹。數(shù)據(jù)可視化數(shù)據(jù)可視化是顯示大量信息的技術(shù)。顏色顯示顏色能夠改善用戶界面，幫助用戶了解并處理系統(tǒng)的復(fù)雜結(jié)構(gòu)。顏色可以應(yīng)用來突出顯示異常事件。在界面設(shè)計中，顏色的應(yīng)用常出現(xiàn)的錯誤有：使用顏色來傳達(dá)意思；在顯示中過度使用顏色。顏色顯示顏色能夠改善用戶界面，幫助用戶了解并處理系統(tǒng)的復(fù)雜結(jié)顏色使用的指導(dǎo)限制使用顏色的數(shù)量，并在如何使用顏色的問題上盡量保守一些；利用顏色的變化說明系統(tǒng)狀態(tài)的變化；使用彩色編碼支持用戶想要完成的任務(wù)；使用彩色編碼要慎重，并且前后一致；注意色彩搭配。顏色使用的指導(dǎo)限制使用顏色的數(shù)量，并在如何使用顏色的問題上盡錯誤消息錯誤消息設(shè)計是非常重要的。錯誤消息設(shè)計不好，可能就意味著用戶拒絕而不是接受一個系統(tǒng)。錯誤消息應(yīng)該是有禮貌的、簡潔的、一致的和有建設(shè)性的。在錯誤消息設(shè)計中，用戶的背景和經(jīng)驗應(yīng)該是一個決定性的因素。錯誤消息錯誤消息設(shè)計是非常重要的。錯誤消息設(shè)計不好，可能就意在消息措詞上的設(shè)計因素在消息措詞上的設(shè)計因素《軟件工程》第16章用戶界面設(shè)計課件用戶錯誤假設(shè)護(hù)士誤拼了一個病人的名字，這個病人的記錄就是護(hù)士極力想恢復(fù)的。用戶錯誤假設(shè)護(hù)士誤拼了一個病人的名字，這個病人的記錄就是護(hù)士好的和不好的錯誤消息設(shè)計好的和不好的錯誤消息設(shè)計用戶界面設(shè)計過程用戶界面設(shè)計（UIdesign）是一個反復(fù)的過程，用戶要與設(shè)計者和界面原型交互，以確定系統(tǒng)用戶界面的特性、構(gòu)成、外表和感受。界面設(shè)計過程的三個核心活動：用戶分析理解用戶所做的任務(wù)。系統(tǒng)原型開發(fā)開發(fā)一系列實驗系統(tǒng)原型。界面評估

收集有關(guān)用戶對界面的真實體驗信息。用戶界面設(shè)計過程用戶界面設(shè)計（UIdesign）是一個反用戶界面設(shè)計過程用戶界面設(shè)計過程用戶分析如果你不理解用戶想與計算機(jī)做什么的話，那你就不會對設(shè)計有效用戶界面有可行的想法。用戶分析一定要描述為其他的用戶和設(shè)計者能夠理解的術(shù)語。腳本描述典型的應(yīng)用，它是描述用戶分析的一種方法。用戶分析如果你不理解用戶想與計算機(jī)做什么的話，那你就不會對設(shè)用戶交互腳本珍妮的專業(yè)是宗教研究，她正在寫一篇有關(guān)印度建筑及其受宗教活動影響方面的論文。為了了解這些方面的東西，她需要翻閱反映一些著名建筑細(xì)節(jié)的圖片，但是她無法在本地圖書館找到這些材料。

于是她找到負(fù)責(zé)此方面的圖書管理員討論她的需求，該圖書管理員給她一些搜索術(shù)語以供使用。同時他也告訴了她位于新德里和倫敦的哪些圖書館有可能收藏此材料，他和珍妮可以登錄到圖書館目錄上用上述搜索術(shù)語進(jìn)行檢索。他們發(fā)現(xiàn)了一些原始資料，對部分有建筑細(xì)節(jié)內(nèi)容的圖片發(fā)出了拷貝請求，這些圖片會直接郵寄給珍妮。

用戶交互腳本珍妮的專業(yè)是宗教研究，她正在寫一篇來自腳本的需求用戶可能不知道恰當(dāng)是搜索短語，他們會需要提供幫助他們選擇搜索短語的入口。用戶要能夠選擇要搜索的集合。用戶要能執(zhí)行搜索并請求相關(guān)資料的副本。來自腳本的需求用戶可能不知道恰當(dāng)是搜索短語，他們會需要提供幫分析技術(shù)任務(wù)分析把所要完成的任務(wù)分為多個步驟。采訪和問卷詢問用戶他們所做的工作。深入實際關(guān)注用戶的工作。分析技術(shù)任務(wù)分析層次化任務(wù)分析（HTA）層次化任務(wù)分析（HTA）采訪基于開放式問題設(shè)計半結(jié)構(gòu)化的采訪。用戶可以提供他們認(rèn)為必需的信息，而不僅僅是你所想到的信息。小組討論或者是小組采訪允許用戶彼此之間討論他們所做的事。采訪基于開放式問題設(shè)計半結(jié)構(gòu)化的采訪。深入實際貼近地觀察人們是如何工作的、如何與其他人進(jìn)行交互的以及如何使用工作場合中的特征來支持他們的工作。深入實際是很有價值的，因為許多用戶任務(wù)都是很直觀的，這些任務(wù)很難描述和解釋。深入實際也可以幫我們理解社會和組織在工作方面的影響所扮演的角色。深入實際貼近地觀察人們是如何工作的、如何與其他人進(jìn)行交互的以深入實際的觀察報告空中交通管制包括多個控制“套件”，這些控制相鄰空域扇區(qū)的套件是自然地一個挨一個擺放的。在一個扇區(qū)中的飛機(jī)用一個條形紙表示，按照能反映它們在扇區(qū)中的位置的順序放進(jìn)一個木頭架子中。如果架子上沒有足夠的槽（例如，當(dāng)空域非常繁忙的時候），管制員就將條形紙擺在木架前的桌面上。在我們觀察管制員的時候，我們注意到管制員經(jīng)常性地掃描在相鄰扇區(qū)中的紙架。我們與他們就這一點交談并問及為什么要這樣做。他們的回答是，當(dāng)相鄰的管制員有紙條擺在桌面上時，就意味著有很多飛機(jī)將要進(jìn)入他們的扇區(qū)。于是他們就努力提高飛機(jī)在扇區(qū)中的速度來“清空”扇區(qū)，以便能讓更多的飛機(jī)進(jìn)來。深入實際的觀察報告空中交通管制包括多個控制“套從觀察中所學(xué)到的事情管制員要能看到扇區(qū)內(nèi)的所有飛機(jī)，因此，我們應(yīng)該避免使用滾動顯示，這種顯示方式會使得飛機(jī)消失在顯示屏的上面或下面。界面應(yīng)該有某種方法來告知管制員有多少飛機(jī)在相鄰的扇區(qū)中，以便管制員來計劃他們的工作負(fù)荷。從觀察中所學(xué)到的事情管制員要能看到扇區(qū)內(nèi)的所有飛機(jī)，因此，我用戶界面原型構(gòu)造原型構(gòu)造的目的是讓用戶獲得對界面的直接體驗。如果沒有這樣直接的經(jīng)驗，我們是不可能評價一個界面的可用性的。原型構(gòu)造過程分為以下兩步：在過程的最早階段，我們應(yīng)該在紙面上規(guī)劃出原型；然后我們要對設(shè)計進(jìn)行提煉并逐步地開發(fā)復(fù)雜的自動化的原型，接著再開發(fā)。用戶界面原型構(gòu)造原型構(gòu)造的目的是讓用戶獲得對界面的直接體驗。紙面上的原型構(gòu)造運用界面草圖來完成腳本。使用情節(jié)串聯(lián)圖板來顯示一系列描述交互序列的草圖。紙面上的原型構(gòu)造是獲得用戶對某個設(shè)計方案的反應(yīng)的一個有效方法。紙面上的原型構(gòu)造運用界面草圖來完成腳本。原型構(gòu)造技術(shù)腳本驅(qū)動方法使用諸如MacromediaDirector這樣的工具創(chuàng)建一系列腳本和屏幕。當(dāng)用戶與這些屏幕交互時，腳本得到執(zhí)行，下一個屏幕出現(xiàn)。可視化編程語言使用一種快速開發(fā)的語言（比如VisualBasic）。對可視化開發(fā)系統(tǒng)的詳細(xì)介紹見17章?；谝蛱鼐W(wǎng)的原型構(gòu)造使用web瀏覽器和相關(guān)的腳本。原型構(gòu)造技術(shù)腳本驅(qū)動方法用戶界面評估界面評估就是評定一個界面的可用性并檢查它是否符合用戶需求的過程。對大多數(shù)系統(tǒng)來說，用戶界面設(shè)計的系統(tǒng)評估是非常昂貴的，并且是不實用的。理想情況下，對用戶界面的評估應(yīng)該有一個可用性詳細(xì)說明書。然而，這樣的可用性說明書是很少制作出來的。用戶界面評估界面評估就是評定一個界面的可用性并檢查它是否符合可用性屬性可用性屬性簡單的評估方法可以獲得用戶反饋的問卷調(diào)查；觀察在系統(tǒng)使用過程中用戶的表現(xiàn)，并聽取用戶對如何使用系統(tǒng)完成某項任務(wù)的“思想交流”；典型系統(tǒng)使用的“快照”；在軟件中嵌入一段統(tǒng)計代碼，以收集最常用的功能和最容易犯的錯誤的信息。簡單的評估方法可以獲得用戶反饋的問卷調(diào)查；要點用戶界面設(shè)計原則對用戶界面設(shè)計具有指導(dǎo)作用。與一個軟件系統(tǒng)交互的方式包括直接操作、菜單系統(tǒng)、表格填寫、命令語言和自然語言。當(dāng)要表示變化趨勢和近似值的時候，應(yīng)該使用圖形信息表示法。數(shù)字顯示僅用于需要精確表示的時候。在用戶界面中使用顏色時應(yīng)該保守一點，并保持一致。要點用戶界面設(shè)計原則對用戶界面設(shè)計具有指導(dǎo)作用。要點用戶界面設(shè)計過程包括用戶分析、界面原型構(gòu)造以及界面評估。用戶分析的目的是要讓設(shè)計者敏銳地觀察用戶實際的工作方式。用戶界面原型開發(fā)應(yīng)該是一個漸進(jìn)的過程，早期的原型在紙面上完成，在得到初始的評估和反饋意見后，再基于此原型實現(xiàn)自動化的原型。用戶界面評估的目的是獲得UI設(shè)計如何得以改善的反饋意見，以及了解界面是否能滿足可用性的需求。要點用戶界面設(shè)計過程包括用戶分析、界面原型構(gòu)造以及界面評估。第16章用戶界面設(shè)計第16章用戶界面設(shè)計目標(biāo)介紹用戶界面設(shè)計的一般設(shè)計原則；介紹多種交互模式以及它們的應(yīng)用；解釋什么時候應(yīng)該使用圖形顯示和文本顯示方式來顯示信息；講解在用戶界面設(shè)計過程中應(yīng)包括的主要活動；介紹可用性屬性以及界面評價的不同方法。目標(biāo)介紹用戶界面設(shè)計的一般設(shè)計原則；內(nèi)容設(shè)計問題用戶界面設(shè)計過程用戶分析用戶界面原型構(gòu)造界面評估內(nèi)容設(shè)計問題用戶界面用戶界面的設(shè)計應(yīng)與將來的用戶所具有的技能、經(jīng)驗和他們的期待相一致。系統(tǒng)用戶經(jīng)常通過用戶界面，而不是它的功能來評價一個系統(tǒng)。一個不好的界面設(shè)計可能導(dǎo)致用戶無法使用系統(tǒng)的某些特性。界面設(shè)計不好就是為什么如此多的軟件系統(tǒng)還從未使用過的原因。用戶界面用戶界面的設(shè)計應(yīng)與將來的用戶所具有的技能、經(jīng)驗和他們界面設(shè)計中人的因素有限的短時記憶人們可以瞬間想起七條信息。如果你在同一時間內(nèi)提供給用戶太多的信息，他們就不能夠全部接受。人們會犯錯誤

當(dāng)我們犯錯誤的時候，系統(tǒng)運行就會不正常，并發(fā)出問題警告消息和報警，這些消息可能會對用戶施加更大的精神壓力，從而也增加了他們操作失誤的可能性。

人是不同的我們有很強(qiáng)的身體行為能力。設(shè)計者在設(shè)計時不能按照他們個人的能力來進(jìn)行。人們會有不同的交互偏好有些人喜歡看圖片，而有的人喜歡閱讀文字。界面設(shè)計中人的因素有限的短時記憶《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件用戶界面設(shè)計原則用戶界面設(shè)計必須要考慮到系統(tǒng)用戶的需要、經(jīng)驗和用戶的能力。設(shè)計者應(yīng)該意識到使用軟件的人的身體和精神上的局限性（例如有限的短時記憶），還要認(rèn)識到人們是會犯錯誤的。用戶界面設(shè)計原則是界面設(shè)計的基礎(chǔ)，盡管不是所有的原則都會應(yīng)用到全部的設(shè)計中。用戶界面設(shè)計原則用戶界面設(shè)計必須要考慮到系統(tǒng)用戶的需要、經(jīng)驗設(shè)計原則用戶熟悉界面所使用的屬于和概念應(yīng)該來自于用戶的經(jīng)驗，而不是計算機(jī)的概念。例如，一個辦公系統(tǒng)應(yīng)該要使用諸如信件，文件，文件夾之類的概念，而不是目錄，文件標(biāo)識符等的概念。一致性界面設(shè)計應(yīng)該是一致的，即盡可能地讓相似的操作有相同的觸發(fā)方式。意外最小化如果一個命令式按某種已知的方法進(jìn)行操作的，那么用戶就應(yīng)該可以預(yù)測相似的命令的操作方式。設(shè)計原則用戶熟悉設(shè)計原則可恢復(fù)性界面應(yīng)該有一種機(jī)制來允許用戶從錯誤中恢復(fù)，這可能包括撤銷，對破壞性行為的確認(rèn)，軟刪除等。用戶指南用戶界面應(yīng)該提供一些比如幫助系統(tǒng)，在線手冊等用戶指南。用戶差異性界面設(shè)計應(yīng)該為不同類型用戶提供合適的交互功能。例如，某些用戶可能有視覺困難，所以就用該給他們提供大量的文字信息。設(shè)計原則可恢復(fù)性《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件界面設(shè)計中的設(shè)計問題在交互式設(shè)計中，兩個關(guān)鍵問題：用戶應(yīng)該如何與計算機(jī)系統(tǒng)進(jìn)行交互？來自計算機(jī)系統(tǒng)的信息應(yīng)該如何傳達(dá)給用戶？用戶交互和信息表達(dá)應(yīng)該通過比如用戶界面隱喻這樣連貫的框架集成起來。界面設(shè)計中的設(shè)計問題在交互式設(shè)計中，兩個關(guān)鍵問題：用戶交互類型直接操作菜單選擇表格填寫命令語言自然語言用戶交互類型直接操作交互類型交互類型《軟件工程》第16章用戶界面設(shè)計課件多用戶界面多用戶界面《軟件工程》第16章用戶界面設(shè)計課件LIBSYS系統(tǒng)的交互文檔搜索用戶使用搜索工具找他們所需要的文檔文檔請求用戶請求將文檔傳遞到他們的本地機(jī)或者是服務(wù)器上以供打印LIBSYS系統(tǒng)的交互文檔搜索《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件基于web的用戶界面許多基于web的系統(tǒng)都有基于web表格的界面。表格域可以是菜單，自由文字輸入，單選框等。在LIBSYS系統(tǒng)中，用戶從可訪問的集合菜單中選擇某個集合，在自由文本輸入字段中輸入要檢索的短語?；趙eb的用戶界面許多基于web的系統(tǒng)都有基于web表格的《軟件工程》第16章用戶界面設(shè)計課件LIBSYS系統(tǒng)的搜索表格LIBSYS系統(tǒng)的搜索表格信息表示信息表達(dá)是將系統(tǒng)的信息表達(dá)給系統(tǒng)用戶。信息可以是直接表達(dá)的（比如文字處理器中的文本），或是將信息轉(zhuǎn)換成另一種形式（比如表格）來表達(dá)。MVC（Model-View-Controller）方法首先廣泛應(yīng)用于Smalltalk語言中，它是支持?jǐn)?shù)據(jù)的多重表達(dá)的有效方式。信息表示信息表達(dá)是將系統(tǒng)的信息表達(dá)給系統(tǒng)用戶?！盾浖こ獭返?6章用戶界面設(shè)計課件信息表示信息表示《軟件工程》第16章用戶界面設(shè)計課件用戶交互的MVC模型用戶交互的MVC模型MVC(Model-View-Controller)把一個應(yīng)用的輸入、輸出、處理流程按照Model、View、Controller的方式進(jìn)行分離，應(yīng)用被分成三個層——模型層、視圖層、控制層。

模型(Model)：就是業(yè)務(wù)流程/狀態(tài)的處理以及業(yè)務(wù)規(guī)則的制定。即是MVC的主要核心。

視圖(View)：代表用戶交互界面，也就是Web的HTML界面。

控制(Controller)：可以理解為從用戶接收請求,將模型與視圖匹配在一起，共同完成用戶的請求。MVC(Model-View-Controller)把一個應(yīng)MVC模型在基于窗口的GUI應(yīng)用程序中，控制器(Controller)一般就是控件的事件處理函數(shù)?？刂破?Controller)有兩個基本功能:一是把用戶從界面上的操作(點擊按鈕)映射成模型(Model)對應(yīng)的功能(如刪除數(shù)據(jù))，二是把模型(Model)的變化更新到視圖(View)上。MVC模型在基于窗口的GUI應(yīng)用程序中，控制器(Contro《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件《軟件工程》第16章用戶界面設(shè)計課件留言板分析例子留言板可以切成三部份:

模型(M)：包含數(shù)據(jù)庫鏈接、生成數(shù)據(jù)集、數(shù)據(jù)庫更新操作。

視圖(V)：包含獲取模型的數(shù)據(jù)集，將數(shù)據(jù)集內(nèi)填充到各種顯示界面內(nèi)，如（留言板列表，管理控制頁面，添加修改刪除界面等一切用戶看得到的頁面。）

控制(C)：包含數(shù)據(jù)庫更新的數(shù)據(jù)校驗，將更新完畢后的結(jié)果轉(zhuǎn)交給視圖進(jìn)行呈現(xiàn)。留言板分析例子留言板可以切成三部份:留言板分析_細(xì)分模型(M)

數(shù)據(jù)鏈接：數(shù)據(jù)鏈接參數(shù)、鏈接失敗處理。

數(shù)據(jù)操作：生成固定格式的數(shù)據(jù)集、運行單行SQL、解析固定格式的數(shù)據(jù)集更新數(shù)據(jù)庫（內(nèi)容包括有：留言記錄，管理員帳號，系統(tǒng)設(shè)定）。

文件操作：將文件內(nèi)部格式封成數(shù)據(jù)集，并附帶讀取寫入文件操作。（內(nèi)容包括有：留言板樣式設(shè)定、版權(quán)設(shè)定、搜索引擎關(guān)鍵字設(shè)定、留言板標(biāo)題設(shè)定）

返回留言板分析_細(xì)分模型(M)

數(shù)據(jù)鏈接：數(shù)據(jù)鏈接參數(shù)、鏈接留言板分析_細(xì)分視圖(V)

數(shù)據(jù)顯示：根據(jù)要求授權(quán)給控制器[C]向模型[M]請求數(shù)據(jù)集，然后根據(jù)數(shù)據(jù)集顯示出界面。

操作結(jié)果顯示：根據(jù)控制返回的數(shù)據(jù)資料決定顯示的提示資料

具體資料包括有：

留言添加頁：判斷留言者是否管理員、判斷本次留言是回復(fù)還是新建留言。

留言管理頁：批量刪除留言、查詢留言、管理員帳號管理、系統(tǒng)設(shè)定等。

留言顯示頁：判斷留言是否為管理員專用、判斷本留言是否為管理員發(fā)布、是否允許回復(fù)、是否顯示留言者的敏感資料、留言是否需要審核后再顯示。

返回留言板分析_細(xì)分視圖(V)

數(shù)據(jù)顯示：根據(jù)要求授權(quán)給留言板分析_細(xì)分控制(C)

數(shù)據(jù)/文件操作：接收操作資料，校驗數(shù)據(jù)是否符合條件，引用模型的生成數(shù)據(jù)集類生成指定數(shù)據(jù)集，然后交給相應(yīng)的模型操作方法操作，并獲取操作結(jié)果以預(yù)定好的格式轉(zhuǎn)交給視圖處理

返回留言板分析_細(xì)分控制(C)

數(shù)據(jù)/文件操作：接收操作資料封裝成Class

模型(M)：

數(shù)據(jù)庫鏈接和數(shù)據(jù)操作可以封成一個Class。

數(shù)據(jù)庫數(shù)據(jù)集的結(jié)構(gòu)，可以引用Dictionary控件與數(shù)組完成。文件操作部份封裝成一個Class

文件結(jié)構(gòu)定義可以封成一個Class

封裝成Class

模型(M)：

數(shù)據(jù)庫鏈接和數(shù)據(jù)封裝成Class

視圖(V)：

視圖部可均是以文件模式出現(xiàn)，也可以將部份代碼封裝后引用。

控制(C)：

數(shù)據(jù)校驗：SQL注入防御處理、日文字符替換處理、特定常用校驗正則式，數(shù)據(jù)/文件更新操作：以文件模式出現(xiàn)，每個文件處理模型(M)中的某個類。并完成控制(C)的工作。

封裝成Class

視圖(V)：

視圖部可均是以文件模封裝成Class視圖[V]模型[C]鏈接器：接收視圖[V]要求數(shù)據(jù)集的請求，將請求轉(zhuǎn)換成模型[M]合適的SQL句，交給模型[M]數(shù)據(jù)集成生器生成數(shù)據(jù)集，返回給視圖[V]封裝成Class視圖[V]模型[C]鏈接器：信息表示靜態(tài)信息在一段時間開始時進(jìn)行初始化，并且在這段時間內(nèi)不會變化的信息?？梢允菙?shù)字或文本形式動態(tài)信息在某一時間段內(nèi)會改變，而且這種改變必須要與系統(tǒng)用戶進(jìn)行交流的信息?？梢允菙?shù)字或文本的形式信息表示靜態(tài)信息信息表示要考慮的因素用戶對精確信息或不同數(shù)據(jù)值之間的關(guān)系感興趣嗎？信息值變更的速度如何？數(shù)值的變更需要馬上顯示給用戶嗎？用戶必須根據(jù)信息的變更執(zhí)行某種動作嗎？用戶需要經(jīng)由直接操作界面與顯示的信息進(jìn)行交互嗎？要顯示的信息是文本形式的還是數(shù)字形式的？數(shù)值項的相對值重要嗎？信息表示要考慮的因素用戶對精確信息或不同數(shù)據(jù)值之間的關(guān)系感興兩種信息表示法兩種信息表示法模擬和數(shù)字表示法數(shù)字表示緊湊—占用的屏幕空間小；精確的數(shù)字可以進(jìn)行交流。模擬表示很容易獲得一個相對值的直觀印象；能夠顯示相對值；易于觀察異常數(shù)據(jù)值。模擬和數(shù)字表示法數(shù)字表示動態(tài)變化的數(shù)字信息表達(dá)方法動態(tài)變化的數(shù)字信息表達(dá)方法表示相對值的圖形信息表達(dá)表示相對值的圖形信息表達(dá)數(shù)據(jù)可視化數(shù)據(jù)可視化是顯示大量信息的技術(shù)?？梢暬梢员憩F(xiàn)數(shù)據(jù)中實體和趨勢之間的關(guān)系。數(shù)據(jù)可視化的實例有：從多個地點收集起來的氣象信息；電話網(wǎng)狀態(tài)顯示為相互連接的一組節(jié)點；化工廠狀態(tài)可視化為相互連接的一組反應(yīng)罐和管道，顯示出它們當(dāng)中的壓力和溫度信息；在三維空間中顯示和操縱分子模型；一組網(wǎng)頁顯示為一個擴(kuò)展樹。數(shù)據(jù)可視化數(shù)據(jù)可視化是顯示大量信息的技術(shù)。顏色顯示顏色能夠改善用戶界面，幫助用戶了解并處理系統(tǒng)的復(fù)雜結(jié)構(gòu)。顏色可以應(yīng)用來突出顯示異常事件。在界面設(shè)計中，顏色的應(yīng)用常出現(xiàn)的錯誤有：使用顏色來傳達(dá)意思；在顯示中過度使用顏色。顏色顯示顏色能夠改善用戶界面，幫助用戶了解并處理系統(tǒng)的復(fù)雜結(jié)顏色使用的指導(dǎo)限制使用顏色的數(shù)量，并在如何使用顏色的問題上盡量保守一些；利用顏色的變化說明系統(tǒng)狀態(tài)的變化；使用彩色編碼支持用戶想要完成的任務(wù)；使用彩色編碼要慎重，并且前后一致；注意色彩搭配。顏色使用的指導(dǎo)限制使用顏色的數(shù)量，并在如何使用顏色的問題上盡錯誤消息錯誤消息設(shè)計是非常重要的。錯誤消息設(shè)計不好，可能就意味著用戶拒絕而不是接受一個系統(tǒng)。錯誤消息應(yīng)該是有禮貌的、簡潔的、一致的和有建設(shè)性的。在錯誤消息設(shè)計中，用戶的背景和經(jīng)驗應(yīng)該是一個決定性的因素。錯誤消息錯誤消息設(shè)計是非常重要的。錯誤消息設(shè)計不好，可能就意在消息措詞上的設(shè)計因素在消息措詞上的設(shè)計因素《軟件工程》第16章用戶界面設(shè)計課件用戶錯誤假設(shè)護(hù)士誤拼了一個病人的名字，這個病人的記錄就是護(hù)士極力想恢復(fù)的。用戶錯誤假設(shè)護(hù)士誤拼了一個病人的名字，這個病人的記錄就是護(hù)士好的和不好的錯誤消息設(shè)計好的和不好的錯誤消息設(shè)計用戶界面設(shè)計過程用戶界面設(shè)計（UIdesign）是一個反復(fù)的過程，用戶要與設(shè)計者和界面原型交互，以確定系統(tǒng)用戶界面的特性、構(gòu)成、外表和感受。界面設(shè)計過程的三個核心活動：用戶分析理解用戶所做的任務(wù)。系統(tǒng)原型開發(fā)開發(fā)一系列實驗系統(tǒng)原型。界面評估

收集有關(guān)用戶對界面的真實體驗信息。用戶界面設(shè)計過程用戶界面設(shè)計（UIdesign）是一個反用戶界面設(shè)計過程用戶界面設(shè)計過程用戶分析如果你不理解用戶想與計算機(jī)做什么的話，那你就不會對設(shè)計有效用戶界面有可行的想法。用戶分析一定要描述為其他的用戶和設(shè)計者能夠理解的術(shù)語。腳本描述典型的應(yīng)用，它是描述用戶分析的一種方法。用戶分析如果你不理解用戶想與計算機(jī)做什么的話，那你就不會對設(shè)用戶交互腳本珍妮的專業(yè)是宗教研究，她正在寫一篇有關(guān)印度建筑及其受宗教活動影響方面的論文。為了了解這些方面的東西，她需要翻閱反映一些著名建筑細(xì)節(jié)的圖片，但是她無法在本地圖書館找到這些材料。

于是她找到負(fù)責(zé)此方面的圖書管理員討論她的需求，該圖書管理員給她一些搜索術(shù)語以供使用。同時他也告訴了她位于新德里和倫敦的哪些圖書館有可能收藏此材料，他和珍妮可以登錄到圖書館目錄上用上述搜索術(shù)語進(jìn)行檢索。他們發(fā)現(xiàn)了一些原始資料，對部分有建筑細(xì)節(jié)內(nèi)容的圖片發(fā)出了拷貝請求，這些圖片會直接郵寄給珍妮。

用戶交互腳本珍妮的專業(yè)是宗教研究，她正在寫一篇來自腳本的需求用戶可能不知道恰當(dāng)是搜索短語，他們會需要提供幫助他們選擇搜索短語的入口。用戶要能夠選擇要搜索的集合。用戶要能執(zhí)行搜索并請求相關(guān)資料的副本。來自腳本的需求用戶可能不知道恰當(dāng)是搜索短語，他們會需要提供幫分析技術(shù)任務(wù)分析把所要完成的任務(wù)分為多個步驟。采訪和問卷詢問用戶他們所做的工作。深入實際關(guān)注用戶的工作。分析技術(shù)任務(wù)分析層次化任務(wù)分析（HTA）層次化任務(wù)分析（HTA）采訪基于開放式問題設(shè)計半結(jié)構(gòu)化的采訪。用戶可以提供他們認(rèn)為必需的信息，而不僅僅是你所想到的信息。小組討論或者是小組采訪允許用戶彼此之間討論他們所做的事。采訪基于開放式問題設(shè)計半結(jié)構(gòu)化的采訪。深入實際貼近地觀察人們是如何工作的、如何與其他人進(jìn)行交互的以及如何使用工作場合中的特征來支持他們的工作。深入實際是很有價值的，因為許多用戶任務(wù)都是很直觀的，這些任務(wù)很難描述和解釋。深入實際也可以幫我們理解社會和組織在工作方面的影響所扮演的角色。深入實際貼近地觀察人們是如何工作的、如何與其他人進(jìn)行交互的以深入實際的觀察報告空中交通管