軟件工程教學(xué)課件chapter11

1、1第11章 用戶界面設(shè)計(jì) 2界面設(shè)計(jì)3界面設(shè)計(jì)4黃金規(guī)則n用戶操縱控制n減少用戶的記憶負(fù)擔(dān)n保持界面一致5用戶操作控制6減輕用戶記憶負(fù)擔(dān)7保持界面一致8用戶界面設(shè)計(jì)模型n用戶模型 系統(tǒng)所有最終用戶的輪廓n設(shè)計(jì)模型實(shí)現(xiàn)用戶模型的設(shè)計(jì)n心里模型(系統(tǒng)感覺) 用戶腦海里對(duì)界面的想象n實(shí)現(xiàn)模型界面（“看和感覺”）結(jié)合了用來描述系統(tǒng)語法和語義的支撐信息對(duì)用戶進(jìn)行分類n新手n對(duì)系統(tǒng)有了解的間歇用戶n對(duì)系統(tǒng)有了解的經(jīng)常用戶910用戶界面設(shè)計(jì)過程界面確認(rèn)界面分析和建模界面構(gòu)造界面設(shè)計(jì)11界面分析n界面分析意味著了解n(1) 通過界面和系統(tǒng)交互的人(最終用戶)n(2) 最終用戶為完成工作要執(zhí)行的任務(wù)n(3) 作

2、為界面的一部分而顯示的內(nèi)容n(4) 任務(wù)處理的環(huán)境12用戶分析n用戶是經(jīng)過的訓(xùn)練的專業(yè)人員、技術(shù)員、辦事員，還是制造業(yè)工人？n用戶平均正規(guī)教育水平如何？n用戶是否具有學(xué)習(xí)書面資料的能力或者是否渴望接受集中培訓(xùn)？n用戶是否是專業(yè)錄入人員還是鍵盤恐懼者？n用戶群體的年齡范圍如何？n是否需要考慮用戶的性別差異？n如何為用戶完成的工作提供報(bào)酬？n用戶是否在正常的辦公時(shí)間內(nèi)工作或者一直干到工作完成？n軟件是用戶所完成工作中的一個(gè)集成部分，還是偶爾使用一次？n用戶群中使用的主要交流語言是什么？n如果用戶在使用軟件的過程中出錯(cuò)，結(jié)果會(huì)怎么樣？n用戶是否是系統(tǒng)所解決問題領(lǐng)域的專家？n用戶是否想了解界面背后的技

3、術(shù)？13任務(wù)分析和建模n回答以下問題n在指定環(huán)境下用戶將完成什么工作？n當(dāng)用戶工作時(shí)將完成什么任務(wù)和子任務(wù)？n在工作中用戶將處理什么特殊的問題域?qū)ο?？n工作任務(wù)的順序（工作流）如何？n任務(wù)的層次關(guān)系如何？n用例確定基本的交互作用n任務(wù)細(xì)化精化交互任務(wù)n對(duì)象細(xì)化確定界面對(duì)象(類)n工作流分析確定在涉及多個(gè)成員（角色）時(shí)，工作過程是如何完成的。14泳道圖pati entphar m aci stphysi ci anrequests that a prescri pti on be refi l l edno refi l l s rem ai ni ngchecks pati ent recor

4、dsdeterm i nes status of prescri pti onrefi l l s rem ai ni ngrefi l l not al l ow edapproves refi l l eval uates al ternati ve m edi cati onnonerecei ves request to contact physi ci anal ternati ve avai l abl echecks i nventory for refi l l or al ternati veout of stockrecei ves out of stock noti fi

5、 cati onrecei ves ti m e/date to pi ck upi n stockpi cks up prescri pti onfi l l s prescri pti onfi gur e 12. 2 sw i m l ane di agr am f or pr escr i pti on r ef i l l f uncti on重填處方請(qǐng)求病人藥劑師醫(yī)生檢查患者記錄確定處方的狀態(tài)有新補(bǔ)充的藥批準(zhǔn)重填處方不允許評(píng)估可替換的藥物有可替換沒有填寫處方有存貨無存貨檢查庫(kù)存查找新補(bǔ)充的藥或替換藥接到缺貨通知單接收供選擇的時(shí)間/日期選擇處方接收聯(lián)系醫(yī)生的請(qǐng)求沒有新補(bǔ)充的藥處方重填

6、功能的泳道圖15顯示內(nèi)容分析n不同類型的數(shù)據(jù)是否要放置到屏幕上固定的位置（例如，照片一般顯示在右上角）？n用戶能否定制內(nèi)容的屏幕位置？n是否對(duì)所有的內(nèi)容賦予適當(dāng)?shù)钠聊粯?biāo)識(shí)？n為了便于理解，應(yīng)如何劃分長(zhǎng)篇報(bào)告？n對(duì)于大集合的數(shù)據(jù)，是否存在直接移動(dòng)到摘要信息的機(jī)制？n輸出圖形的大小是否需要適合所使用顯示設(shè)備的限制？n如何使用顏色來曾強(qiáng)理解？n出錯(cuò)信息和警告應(yīng)如何呈現(xiàn)給用戶？16界面設(shè)計(jì)步驟n使用界面分析中獲得的信息，定義界面對(duì)象和動(dòng)作（操作）。n定義那些導(dǎo)致用戶界面狀態(tài)發(fā)生變化的事件（用戶動(dòng)作），并對(duì)行為建模。n描述每個(gè)界面狀態(tài)，就像最終用戶實(shí)際看到的那樣。n簡(jiǎn)要說明用戶如何從界面提供的界面信息來

7、解釋系統(tǒng)狀態(tài)。17設(shè)計(jì)問題n響應(yīng)時(shí)間n幫助設(shè)施n錯(cuò)誤處理n菜單和命令標(biāo)識(shí)n應(yīng)用系統(tǒng)的可訪問性n國(guó)際化18webapp 界面設(shè)計(jì)n我在哪里？ 界面應(yīng)該：n為訪問過的webapp提供指示n提示用戶當(dāng)前在內(nèi)容層次中所處的位置n我現(xiàn)在能做什么？ 界面應(yīng)該總是能夠幫助用戶理解當(dāng)前的選項(xiàng)n哪些功能可以使用？n哪些鏈接是可用的？n哪些內(nèi)容是相關(guān)的？n我去過哪里？我將去哪里？界面必須能夠輔助導(dǎo)航。 n提供一張“地圖”（以容易理解的方式實(shí)現(xiàn)），這張地圖顯示了用戶在webapp中去過哪里，還能沿著哪些路徑去webapp的其他地方。19有效的webapp 界面nbruce tognozzi tog01 提出n有效的

8、界面在視覺效果上是明顯的、寬容的，并且慢慢地給用戶灌輸控制感。用戶能夠很快地看到他們的選擇范圍，領(lǐng)會(huì)怎樣達(dá)到他們的目標(biāo)，然后做他們的工作。n有效的界面使用戶不必關(guān)心系統(tǒng)的內(nèi)部操作。工作被謹(jǐn)慎而連續(xù)地保存，從而使用戶有充分的選擇余地，可以在任何時(shí)刻取消任何活動(dòng)。n有效的應(yīng)用和服務(wù)從用戶那里要求最少的信息，而完成最多的工作。20界面設(shè)計(jì)原則-in預(yù)測(cè)對(duì)webapp進(jìn)行設(shè)計(jì)，使其能夠預(yù)測(cè)出用戶的下一個(gè)步驟。 n傳達(dá)界面應(yīng)該能夠傳達(dá)由用戶啟動(dòng)的任何活動(dòng)的狀態(tài)。n一致導(dǎo)航控制、菜單、圖標(biāo)和美學(xué)風(fēng)格（例如，顏色、形狀和布局）。n自律界面應(yīng)該輔助用戶在整個(gè)webapp中移動(dòng)，但是應(yīng)該堅(jiān)持使用已經(jīng)為應(yīng)用系統(tǒng)建

9、立起來的導(dǎo)航習(xí)慣，以這樣的方式來輔助用戶。n效率 webapp的設(shè)計(jì)和界面應(yīng)該優(yōu)化用戶的工作效率，而不是優(yōu)化設(shè)計(jì)與構(gòu)造webapp的web工程師的效率，也不是優(yōu)化運(yùn)行webapp的客戶/服務(wù)器環(huán)境的效率。21界面設(shè)計(jì)原則-iin關(guān)注點(diǎn) webapp界面（及界面表示的內(nèi)容）應(yīng)該關(guān)注在用戶正完成的任務(wù)上。n人機(jī)界面對(duì)象對(duì)于webapp，已經(jīng)開發(fā)了大量可復(fù)用的人機(jī)界面對(duì)象庫(kù)。n縮短等待時(shí)間 webapp應(yīng)該利用多任務(wù)處理方式，從而使用戶繼續(xù)他的處理工作，看起就像前面的操作已經(jīng)完成一樣。n學(xué)習(xí)能力應(yīng)該設(shè)計(jì)webapp的界面，將學(xué)習(xí)時(shí)間減到最少，并且一旦已經(jīng)學(xué)習(xí)過了，當(dāng)再次訪問此webapp時(shí)，將所需要

10、的再學(xué)習(xí)時(shí)間減到最少。22界面設(shè)計(jì)原則-iiin保持工作產(chǎn)品的完整性工作產(chǎn)品（例如用戶填寫的表單，用戶專用數(shù)據(jù)清單）必須自動(dòng)保存，使得在有錯(cuò)誤發(fā)生時(shí)數(shù)據(jù)不會(huì)丟失。n易讀性界面展示的所有信息對(duì)于老人和年輕人都應(yīng)該是易讀的。n跟蹤狀態(tài)在合適的時(shí)候，應(yīng)該跟蹤和保存用戶狀態(tài)，使得用戶能夠退出系統(tǒng)，稍后返回系統(tǒng)時(shí)又能回到退出的地方。n可見的導(dǎo)航設(shè)計(jì)合理的webapp界面提供了這樣的設(shè)想，“即用戶呆在同一個(gè)地方，工作被帶到他們面前”。23界面設(shè)計(jì)工作流-in對(duì)需求模型中的信息進(jìn)行評(píng)審，并根據(jù)需要進(jìn)行優(yōu)化。n開發(fā)webapp界面布局的草圖。n將用戶目標(biāo)映射到特定的界面行為。n定義與每個(gè)行為相關(guān)的一組用戶任務(wù)

11、。n為每個(gè)界面行為設(shè)計(jì)情節(jié)故事板屏像。n利用從美學(xué)設(shè)計(jì)中的輸入來優(yōu)化界面布局和情節(jié)故事板。24映射用戶目標(biāo)obj ecti ve #1obj ecti ve #2obj ecti ve #3obj ecti ve #4obj ecti ve #5obj ecti ve #nli st of user obj ecti veshome page text copygraphicgraphic, logo, and company namenavigation menumenu bar major functions用戶目標(biāo)列表目標(biāo)#1目標(biāo)#2目標(biāo)#3目標(biāo)#4目標(biāo)#5圖像 徽標(biāo)和公司名稱主要功能菜單條圖像主頁(yè)文本拷貝目標(biāo)#n導(dǎo)航菜單25界面設(shè)計(jì)工作流-iin明確實(shí)現(xiàn)界面功能的界面對(duì)象。n開發(fā)用戶與界面交互的過程表示。n開發(fā)界面的行為表示法。n描