軟件工程完成用戶界面設(shè)計課件

1、主要內(nèi)容主要內(nèi)容 黃金規(guī)則 用戶界面的分析與設(shè)計 界面分析 界面設(shè)計步驟 設(shè)計評估概述人機(jī)界面（Human-Computer Interface，HCI）是計算機(jī)直接與人打交道的途徑，是計算機(jī)系統(tǒng)的重要組成部分，它的開發(fā)工作量占系統(tǒng)開發(fā)工作量的40-60%。和和消消費(fèi)費(fèi)者者的的接接口口設(shè)設(shè)計計n人人與與計計算算機(jī)機(jī)間間的的界界面面設(shè)設(shè)計計q族族群群差差異異對對界界面面設(shè)設(shè)計計的的影影響響n文文化化問問題題n用用戶戶偏偏愛愛界面設(shè)計中美的需求與導(dǎo)向作用 軟件開發(fā)者要設(shè)計美，用戶要享受美，所以界面的美是開發(fā)者與用戶的共同需求。 美的界面能消除用戶由感覺引起的乏味、緊張和疲勞（情緒低落），大大提高用

2、戶的工作效率，從而進(jìn)一步為發(fā)揮用戶技能和為用戶完成任務(wù)作出貢獻(xiàn)。界面設(shè)計的兩個階段 第一代是以文本為基礎(chǔ)的簡單交互，如常見的命令行，字符菜單等。由于第一代界面考慮人的因素太少，用戶興趣不高。 第二代直接操縱的界面。它大量使用圖形、語音和其它交互媒介，充分地考慮了人對美的需求。直接操縱的界面使用視聽、觸摸等技術(shù)，讓人可以憑借生活常識、經(jīng)歷和推理來操縱軟件，愉快地完成任務(wù)。黃金規(guī)則 置用戶于控制之下置用戶于控制之下 減少用戶的記憶負(fù)擔(dān)減少用戶的記憶負(fù)擔(dān) 保持界面一致保持界面一致r in controlq不不強(qiáng)強(qiáng)迫迫用用戶戶進(jìn)進(jìn)入入不不必必要要或或不不希希望望的的交交互互模模式式q提提供供靈靈活活的

3、的交交互互q允允許許用用戶戶交交互互被被中中斷斷和和撤撤銷銷n對對破破壞壞性性操操作作的的確確認(rèn)認(rèn)n設(shè)設(shè)置置撤撤銷銷功功能能q當(dāng)當(dāng)技技能能級級別別增增長長時時可可以以使使交交互互流流線線化化并并允允許許定定制制交交互互q使使用用戶戶與與內(nèi)內(nèi)部部技技術(shù)術(shù)細(xì)細(xì)節(jié)節(jié)隔隔離離q建建立立有有意意義義的的缺缺省省q定定義義直直觀觀的的快快捷捷方方式式q界界面面視視覺覺布布局局應(yīng)應(yīng)該該基基于于真真實實世世界界的的象象征征q以以不不斷斷進(jìn)進(jìn)展展的的方方式式揭揭示示信信息息的的環(huán)環(huán)境境中中q在在應(yīng)應(yīng)用用系系統(tǒng)統(tǒng)家家族族內(nèi)內(nèi)保保持持一一致致性性q如如果果已已經(jīng)經(jīng)建建立立起起用用戶戶期期望，望，輕輕易易不不要要改改

4、變變它它界面美的內(nèi)涵 一、界面的合適性界面的合適性是指界面是否與軟件功能相融洽。既提倡外美內(nèi)秀，又強(qiáng)調(diào)恰如其分。 二、界面的風(fēng)格界面的風(fēng)格有兩類，一是“一致性”，二是“個性化”。 三、界面的廣義美一切有利于人機(jī)交互的界面設(shè)計因素都具有廣義美。軟軟件件工工程程師師建建立立n設(shè)設(shè)計計模模型型q用用戶戶模模型型在在設(shè)設(shè)計計中中的的實實現(xiàn)現(xiàn)q軟軟件件工工程程師師建建立立n心心理理模模型型q用用戶戶在在腦腦海海里里對對界界面面產(chǎn)產(chǎn)生生的的印印象象n實實現(xiàn)現(xiàn)模模型型q計計算算機(jī)機(jī)系系統(tǒng)統(tǒng)的的外外在在表表現(xiàn)現(xiàn)q由由系系統(tǒng)統(tǒng)實實現(xiàn)現(xiàn)者者建建立立Know the user. Know the tasks.界面分

5、析人員人員(最終用戶最終用戶)任務(wù)任務(wù)內(nèi)容內(nèi)容環(huán)境環(huán)境作為界面的作為界面的一部分而顯一部分而顯示的內(nèi)容示的內(nèi)容任務(wù)處理任務(wù)處理的環(huán)境的環(huán)境理解問題意味著了解以下：理解問題意味著了解以下：通過界面和通過界面和系統(tǒng)交互的系統(tǒng)交互的人人最終用戶為最終用戶為完成工作要完成工作要做的任務(wù)做的任務(wù)析）析）q用用戶戶的的任任務(wù)務(wù)（任任務(wù)務(wù)分分析析和和建建模）模）q作作為為界界面面一一部部分分而而顯顯示示的的內(nèi)內(nèi)容容（顯顯示示內(nèi)內(nèi)容容分分析）析）q任任務(wù)務(wù)處處理理的的環(huán)環(huán)境境（工工作作環(huán)環(huán)境境分分析）析）用戶分析了解用戶了解用戶用戶訪談零售輸入市場輸入支持輸入是是制制造造業(yè)業(yè)工工人人?n用用戶戶平平均均正正規(guī)

6、規(guī)教教育育水水平平如如何何?n用用戶戶是是否否具具有有學(xué)學(xué)習(xí)習(xí)書書面面資資料料的的能能力力?n用用戶戶是是專專業(yè)業(yè)錄錄入入人人員員還還是是鍵鍵盤盤恐恐懼懼者者?n用用戶戶群群體體的的年年齡齡范范圍圍如如何何?用用戶戶群群體體能能力力有有關(guān)關(guān)q用用戶戶使使用用的的頻頻度度q用用戶戶是是否否能能夠夠自自由由選選用用界界面面q用用戶戶對對計計算算機(jī)機(jī)的的熟熟悉悉程程度度q用用戶戶知知識識q用用戶戶思思維維能能力力q用用戶戶的的生生理理能能力力和和技技能能（使使用用系系統(tǒng)統(tǒng)的的頻頻度度很很高）高）。他他們們以以前前幾幾乎乎沒沒有有人人使使用用過過計計算算機(jī)機(jī)，他他們們的的絕絕大大多多數(shù)數(shù)的的智智力力水

7、水平平在在中中等等以以上上。也稱用戶工作分析是系統(tǒng)內(nèi)部活動的分解分析方法：自頂向下，逐步進(jìn)行功能分解注意：與常規(guī)的功能分解不同的是，主要考慮與人相關(guān)的活動，也就是考慮用戶需要輸入數(shù)據(jù)的步驟和計算機(jī)如何提示或者反饋給用戶信息。義義了了基基本本的的交交互互q用用戶戶工工作作時，時，將將完完成成什什么么任任務(wù)務(wù)和和子子任任務(wù)務(wù)?任任務(wù)務(wù)細(xì)細(xì)化化精精化化了了交交互互任任務(wù)務(wù)q在在工工作作中，中，用用戶戶將將處處理理什什么么特特殊殊的的問問題題域域?qū)ο笙?對對象象細(xì)細(xì)化化識識別別交交互互對對象象（類）類）q工工作作任任務(wù)務(wù)的的順順序序如如何何?工工作作流流分分析析定定義義了了在在包包含含多多個個成成員

8、員時，時，一一個個工工作作過過程程是是如如何何完完成成的的q任任務(wù)務(wù)的的層層次次關(guān)關(guān)系系如如何何?層層次次表表示示任務(wù)分析和建模用例用例 define basic interaction任務(wù)細(xì)化任務(wù)細(xì)化refines interactive tasks對象細(xì)化對象細(xì)化identifies interface objects (classes)工作流分析工作流分析defines how a work process is completed when several people (and roles) are involved 任務(wù)分析和建模 任務(wù)分配 用戶的任務(wù)：創(chuàng)造、判斷、探索 計算機(jī)的任

9、務(wù)：重復(fù)檢查、計算、數(shù)據(jù)處理 兩者混合任務(wù)：數(shù)據(jù)錄入、數(shù)據(jù)恢復(fù)、決策支持任務(wù)分析和建模任務(wù)分配步驟： 檢查數(shù)據(jù)流圖，標(biāo)出哪些是單獨(dú)由計算機(jī)完成的任務(wù)、哪些是由兩者共同完成的任務(wù)。 對于共同完成的任務(wù)，將任務(wù)的每一個動作分配給計算機(jī)或人。 細(xì)化計算機(jī)與人的協(xié)同動作，以確定人和計算機(jī)如何交互。任務(wù)分析和建模對象細(xì)化： 通過對對象上面動作的評估為設(shè)計師提供一個操作列表 如家具模板Furniture類，包括size ,shape, location屬性，任務(wù)“選擇”、“移動”“拖拽”等操作，隨著設(shè)計的不斷細(xì)化，每個操作的細(xì)節(jié)都將被定義出來。任務(wù)分析和建模工作流分析 可以使軟件工程師很好地理解在包含多個

10、成員時，一個工作過程是如何完成的。 可通過分析泳道圖完成任務(wù)分析和建模 層次分析 細(xì)化過程。如：請求重新填寫處方 的用戶任務(wù)，開發(fā)后得到如下任務(wù)層：重新填寫處方請求提供辨識信息提供姓名指定用戶的ID指定PIN和密碼指定處方序號指定重新填寫處方所需要的日期置？置？n用用戶戶能能否否定定制制內(nèi)內(nèi)容容的的屏屏幕幕位位置？置？n為為了了便便于于理理解，解，應(yīng)應(yīng)如如何何劃劃分分長長篇篇報報告？告？n如如何何使使用用顏顏色色來來增增強(qiáng)強(qiáng)理理解？解？n輸輸出出圖圖形形的的大大小小是是否否需需要要適適合合所所使使用用顯顯示示設(shè)設(shè)備備的的限限制？制？n出出錯錯信信息息和和警警告告應(yīng)應(yīng)如如何何呈呈現(xiàn)現(xiàn)給給用用戶？

11、戶？134201020Dial with needlePie chartThermometerHorizontal bar 01002003004000255075100PressureTemperature.OK是是否否正正確、確、合合理理n三三個個結(jié)結(jié)果：果：q致致命命錯錯誤誤：引引起起處處理理混混亂亂的的錯錯誤。誤。此此時時用用戶戶要要么么重重新新輸輸入入一一個個正正確確的的數(shù)數(shù)據(jù)，據(jù)，要要么么退退出出輸輸入。入。q警警告告：由由很很不不可可信信的的數(shù)數(shù)據(jù)據(jù)引引起起的的錯錯誤。誤。此此時時應(yīng)應(yīng)停停止止處處理理并并提提請請用用戶戶重重新新輸輸入入數(shù)數(shù)據(jù)。據(jù)。q建建議議：由由不不大大可可信信

12、的的數(shù)數(shù)據(jù)據(jù)引引起起的的錯錯誤。誤。此此時，時，處處理理不不必必停停止，止，但但要要發(fā)發(fā)出出一一個個警警告告信信息，息，使使得得用用戶戶中中止止運(yùn)運(yùn)行行以以便便檢檢查，查，或或是是在在處處理理結(jié)結(jié)束束時時進(jìn)進(jìn)行行檢檢查。查。分離的設(shè)計和實現(xiàn)策略 通過更換皮膚，可在一定程度上反映使用者的個人喜好，以及對于顏色、形狀、風(fēng)格等因素的個人傾向。使用將前面分析中獲得的信息，定義界面對象和行為定義那些導(dǎo)致用戶界面狀態(tài)發(fā)生變化的事件（用戶動作），對這個行為建模描述每一個界面狀態(tài)，就像最終用戶實際看到的那樣。簡要說明用戶如何從界面提供的界面信息來解釋系統(tǒng)狀態(tài)。例：SafeHome高級版本SafeHome 高級

13、版本：使用計算機(jī)或筆記本電腦，通過modem從Internet遠(yuǎn)程訪問，檢查房子狀態(tài)、重新設(shè)置系統(tǒng)、啟動或關(guān)閉系統(tǒng)，以及通過預(yù)先安置的攝像機(jī)監(jiān)控房間的局部位置。 問題陳述： 為了遠(yuǎn)程訪問SafeHome，房主提供一個標(biāo)識符和一個密碼。這些定義了訪問的級別（如并非所有用戶均可以重新配置系統(tǒng)）并提供安全保證。一旦確認(rèn)身份，用戶（具有全部訪問權(quán)限）檢查系統(tǒng)狀態(tài)并通過啟動或關(guān)閉系統(tǒng)改變狀態(tài)。用戶通過顯示房子的建筑平面圖、觀察每個安全傳感器、顯示每個當(dāng)前配置區(qū)域以及必要時修改區(qū)域而重新配置系統(tǒng)。用戶通過策略地放置的攝像頭觀察房子內(nèi)部。用戶可以搖動和變焦每個攝像頭而提供房子內(nèi)部的不同視角。 確定屏幕對象屏

14、幕布局用戶界面設(shè)計模式完整用戶界面。為高層結(jié)構(gòu)和導(dǎo)航提供設(shè)計指導(dǎo) 模式：高層導(dǎo)航 簡要描述：提供高層菜單，通常帶有一個圖像，能夠直接掉轉(zhuǎn)到任一個系統(tǒng)主要功能用戶界面設(shè)計模式頁面布局。負(fù)責(zé)頁面概括組織（用于站點）或者清楚的屏幕顯示（用于需要進(jìn)行交互的應(yīng)用系統(tǒng)） 模式：層疊 簡要描述：呈現(xiàn)層疊狀的標(biāo)簽卡，伴隨著鼠標(biāo)每一下點擊的選擇，顯示指定的子功能或者分類內(nèi)容。用戶界面設(shè)計模式表格和輸入?？紤]了完成表格級輸入的各種設(shè)計方法。 模式：填充空格 簡要描述：允許在“文本框”中填寫文字與數(shù)字?jǐn)?shù)據(jù)。表。為創(chuàng)建和操作各種列表數(shù)據(jù)提供設(shè)計指導(dǎo)。 模式：有序表 簡要描述：用來顯示長記錄列表，可以在任何一列上選擇排

15、序機(jī)制進(jìn)行排序。用戶界面設(shè)計模式直接數(shù)據(jù)操作。解決數(shù)據(jù)編輯、數(shù)據(jù)修改和數(shù)據(jù)轉(zhuǎn)換問題。 模式：現(xiàn)場編輯 簡要描述：為顯示位置上的特定類型內(nèi)容提供簡單的文本編輯能力。導(dǎo)航。輔助用戶在層級菜單、Web頁面和交互顯示屏幕上航行。 模式：面包屑 簡要描述：當(dāng)用戶工作于復(fù)雜層次結(jié)構(gòu)的頁面或者屏幕顯示時，提供完全的導(dǎo)航路徑。用戶界面設(shè)計模式搜索。對于網(wǎng)站上的信息或保存在可以通過交互應(yīng)用訪問的持久存儲中的數(shù)據(jù)，能夠進(jìn)行特定內(nèi)容的搜索。 模式：簡單搜索 簡要描述：提供在網(wǎng)站或者持久數(shù)據(jù)源中搜索由字符串描述的簡單數(shù)據(jù)項的能力。 頁面元素。實現(xiàn)Web頁面或者顯示屏的特定元素 模式：向?qū)?簡要描述：通過一系列的簡單窗

16、口顯示來指導(dǎo)完成任務(wù)，使得用戶能夠一次一步地完成某個復(fù)雜的任務(wù)。用戶界面設(shè)計模式電子商務(wù)。主要針對于站點，這些模式實現(xiàn)了電子商務(wù)應(yīng)用中的重現(xiàn)元素。 模式：購物車 簡要描述：提供一個要購買的項目清單。 其它。模式不能簡單地歸類到前面所述的任一類中，在某些情況下，這些模式具有領(lǐng)域的依賴性或者只對特定類別的用戶適用。 模式：進(jìn)展指示器 簡要描述：為某一正在進(jìn)行的操作提供進(jìn)展指示。設(shè)計問題 界面設(shè)計時，總會遇到以下四個問題： 系統(tǒng)響應(yīng)時間 用戶幫助設(shè)施 出錯信息處理 命令標(biāo)記1. 系統(tǒng)響應(yīng)時間系統(tǒng)響應(yīng)時間有兩個重要屬性，分別是長度和易變性。原則 響應(yīng)時間的長度應(yīng)符合用戶及應(yīng)用的特點，避免太慢和太快；

17、盡量減少易變性，原因，響應(yīng)時間的變化易使用戶擔(dān)心軟件系統(tǒng)工作異常2.用戶幫助設(shè)施 常見的幫助設(shè)施可分為兩類： 集成式 求助一般都與軟件設(shè)計同時考慮，上下文敏感，即可供用戶選擇的求助詞與正在執(zhí)行的動作密切相關(guān)，整個求助過程快捷而友好； 附加式 附加式求助一般是軟件完成后附上一個受限的聯(lián)機(jī)用戶手冊，用戶為查找某項指南時不得不瀏覽大量無關(guān)信息。2.用戶幫助設(shè)施必須考慮的一系列問題： 是否在任何時候都能獲得關(guān)于系統(tǒng)任何功能的幫助信息？（部分/全部） 用戶怎樣請求幫助？（幫助菜單/特殊功能鍵/HELP命令） 怎樣顯示幫助信息？（在獨(dú)立的窗口中/指出參考某個文檔/在屏幕固定位置顯示簡短提示） 怎樣返回到正

18、常的交互方式中？（屏幕上的返回按鈕/功能鍵） 怎樣組織幫助信息？（平面結(jié)構(gòu)/信息的層次結(jié)構(gòu)/超文本結(jié)構(gòu)）3.出錯信息處理一般，交互式系統(tǒng)給出的出錯信息或警告信息，應(yīng)該具有下述屬性： 信息應(yīng)該用用戶可以理解的術(shù)語描述問題。 信息應(yīng)該提供有助于從錯誤中恢復(fù)的建設(shè)性意見。 信息應(yīng)該指出錯誤可能導(dǎo)致哪些負(fù)面后果（例如，破壞文件），以便用戶檢查是否出現(xiàn)了這些問題，并在確實出現(xiàn)問題時及時解決。 信息應(yīng)該伴隨著聽覺上或視覺上的提示。 信息不能帶有指責(zé)色彩。4. 菜單和命令標(biāo)記許多高級用戶仍然偏愛面向命令行的交互方式。在提供命令行交互時，必須考慮下列設(shè)計問題： 是否每個菜單選項都有對應(yīng)的命令？ 采用何種命令形

19、式？有3種選擇：控制序列（例如ctrl+P），功能鍵和輸入命令 學(xué)習(xí)和記憶命令的難度有多大？忘記了命令怎么辦？ 用戶是否可以定制或縮寫命令？ 在界面環(huán)境中菜單標(biāo)簽是否是自解釋性的？ 子菜單是否與主菜單項所指功能項一致？人機(jī)界面設(shè)計指南 用戶界面設(shè)計主要依靠設(shè)計者的經(jīng)驗。 三類人機(jī)界面設(shè)計指南： 一般交互指南 信息顯示指南 數(shù)據(jù)輸入指南1 一般交互指南保持一致性提供有意義的反饋在執(zhí)行有較大破壞性的動作之前要求用戶確認(rèn)允許取消絕大多數(shù)操作減少在兩次操作之間必須記憶的信息量提高對話、移動和思考的效率允許犯錯誤按功能對動作分類，并據(jù)此設(shè)計屏幕布局提供對工作內(nèi)容敏感的幫助設(shè)施用簡單動詞或動詞短語作為命令

20、名2 信息顯示指南只顯示與當(dāng)前工作內(nèi)容有關(guān)的信息只顯示與當(dāng)前工作內(nèi)容有關(guān)的信息不要用數(shù)據(jù)淹沒用戶，應(yīng)該用便于用戶迅速地吸取信息的方式不要用數(shù)據(jù)淹沒用戶，應(yīng)該用便于用戶迅速地吸取信息的方式來表示數(shù)據(jù)來表示數(shù)據(jù)使用一致的標(biāo)記、標(biāo)準(zhǔn)的縮寫和可預(yù)知的顏色使用一致的標(biāo)記、標(biāo)準(zhǔn)的縮寫和可預(yù)知的顏色允許用戶保持可視化的語境。允許用戶保持可視化的語境。產(chǎn)生有意義的出錯信息產(chǎn)生有意義的出錯信息使用大小寫、縮進(jìn)和文本分組以幫助理解使用大小寫、縮進(jìn)和文本分組以幫助理解使用窗口分隔不同類型的信息使用窗口分隔不同類型的信息使用使用“模擬模擬”顯示方式表示信息，以使信息更容易被用戶吸取顯示方式表示信息，以使信息更容易被用戶吸取高效率地使用顯示屏高效率地使用顯示屏3 數(shù)據(jù)輸入指南盡量減少用戶的輸入動作盡量減少用戶的輸入動作保持信息顯示和數(shù)據(jù)輸入之間的一致性保持信息顯示和數(shù)據(jù)輸入之間的一致性允許用戶自定義輸入允許用戶自定義輸入交互應(yīng)該是靈活的，并且可調(diào)整成用戶最喜歡的輸入方式交互應(yīng)該是靈活的，并且可調(diào)整成用戶最喜歡的輸入方式使在當(dāng)前動作語境中不適用的命令不起作用使在當(dāng)前動作語境中不適用的命令不起作用讓用戶控制交互流讓用戶控制交互流對所有輸入動作都提供幫助對所有輸入動作都提供幫助消除冗余的輸入。消除冗余的輸入。設(shè)計問題（續(xù)）