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

1、主要內(nèi)容主要內(nèi)容 黃金規(guī)則 用戶界面的分析與設(shè)計(jì) 界面分析 界面設(shè)計(jì)步驟 設(shè)計(jì)評(píng)估概述人機(jī)界面（Human-Computer Interface，HCI）是計(jì)算機(jī)直接與人打交道的途徑，是計(jì)算機(jī)系統(tǒng)的重要組成部分，它的開發(fā)工作量占系統(tǒng)開發(fā)工作量的40-60%。界面設(shè)計(jì)中美的需求與導(dǎo)向作用 軟件開發(fā)者要設(shè)計(jì)美，用戶要享受美，所以界面的美是開發(fā)者與用戶的共同需求。 美的界面能消除用戶由感覺引起的乏味、緊張和疲勞（情緒低落），大大提高用戶的工作效率，從而進(jìn)一步為發(fā)揮用戶技能和為用戶完成任務(wù)作出貢獻(xiàn)。界面設(shè)計(jì)的兩個(gè)階段 第一代是以文本為基礎(chǔ)的簡(jiǎn)單交互，如常見的命令行，字符菜單等。由于第一代界面考慮人的因

2、素太少，用戶興趣不高。 第二代直接操縱的界面。它大量使用圖形、語音和其它交互媒介，充分地考慮了人對(duì)美的需求。直接操縱的界面使用視聽、觸摸等技術(shù)，讓人可以憑借生活常識(shí)、經(jīng)歷和推理來操縱軟件，愉快地完成任務(wù)。黃金規(guī)則 置用戶于控制之下置用戶于控制之下 減少用戶的記憶負(fù)擔(dān)減少用戶的記憶負(fù)擔(dān) 保持界面一致保持界面一致界面美的內(nèi)涵 一、界面的合適性界面的合適性是指界面是否與軟件功能相融洽。既提倡外美內(nèi)秀，又強(qiáng)調(diào)恰如其分。 二、界面的風(fēng)格界面的風(fēng)格有兩類，一是“一致性”，二是“個(gè)性化”。 三、界面的廣義美一切有利于人機(jī)交互的界面設(shè)計(jì)因素都具有廣義美。Know the user. Know the task

3、s.界面分析人員人員(最終用戶最終用戶)任務(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ù)用戶分析了解用戶了解用戶用戶訪談零售輸入市場(chǎng)輸入支持輸入也稱用戶工作分析是系統(tǒng)內(nèi)部活動(dòng)的分解分析方法：自頂向下，逐步進(jìn)行功能分解注意：與常規(guī)的功能分解不同的是，主要考慮與人相關(guān)的活動(dòng)，也就是考慮用戶需要輸入數(shù)據(jù)的步驟和計(jì)算機(jī)如何提示或者反饋給用戶信息。任務(wù)分析和建模用例用例 define basic i

4、nteraction任務(wù)細(xì)化任務(wù)細(xì)化refines interactive tasks對(duì)象細(xì)化對(duì)象細(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ì)算機(jī)的任務(wù)：重復(fù)檢查、計(jì)算、數(shù)據(jù)處理 兩者混合任務(wù)：數(shù)據(jù)錄入、數(shù)據(jù)恢復(fù)、決策支持任務(wù)分析和建模任務(wù)分配步驟： 檢查數(shù)據(jù)流圖，標(biāo)出哪些是單獨(dú)由計(jì)算機(jī)完成的任務(wù)、哪些是由兩者共同

5、完成的任務(wù)。 對(duì)于共同完成的任務(wù)，將任務(wù)的每一個(gè)動(dòng)作分配給計(jì)算機(jī)或人。 細(xì)化計(jì)算機(jī)與人的協(xié)同動(dòng)作，以確定人和計(jì)算機(jī)如何交互。任務(wù)分析和建模對(duì)象細(xì)化： 通過對(duì)對(duì)象上面動(dòng)作的評(píng)估為設(shè)計(jì)師提供一個(gè)操作列表 如家具模板Furniture類，包括size ,shape, location屬性，任務(wù)“選擇”、“移動(dòng)”“拖拽”等操作，隨著設(shè)計(jì)的不斷細(xì)化，每個(gè)操作的細(xì)節(jié)都將被定義出來。任務(wù)分析和建模工作流分析 可以使軟件工程師很好地理解在包含多個(gè)成員時(shí)，一個(gè)工作過程是如何完成的。 可通過分析泳道圖完成任務(wù)分析和建模 層次分析 細(xì)化過程。如：請(qǐng)求重新填寫處方 的用戶任務(wù)，開發(fā)后得到如下任務(wù)層：重新填寫處方請(qǐng)求提

6、供辨識(shí)信息提供姓名指定用戶的ID指定PIN和密碼指定處方序號(hào)指定重新填寫處方所需要的日期134201020Dial with needlePie chartThermometerHorizontal bar 01002003004000255075100PressureTemperature.OK使用將前面分析中獲得的信息，定義界面對(duì)象和行為定義那些導(dǎo)致用戶界面狀態(tài)發(fā)生變化的事件（用戶動(dòng)作），對(duì)這個(gè)行為建模描述每一個(gè)界面狀態(tài)，就像最終用戶實(shí)際看到的那樣。簡(jiǎn)要說明用戶如何從界面提供的界面信息來解釋系統(tǒng)狀態(tài)。例：SafeHome高級(jí)版本SafeHome 高級(jí)版本：使用計(jì)算機(jī)或筆記本電腦，通過mod

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

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

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

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

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

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

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

14、關(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)生有意義的出錯(cuò)信息產(chǎn)生有意義的出錯(cuò)信息使用大小寫、縮進(jìn)和文本分組以幫助理解使用大小寫、縮進(jìn)和文本分組以幫助理解使用窗口分隔不同類型的信息使用窗口分隔不同類型的信息使用使用“模擬模擬”顯示方式表示信息，以使信息更容易被用戶吸取顯示方式表示信息，以使信息更容易被用戶吸取高效率地使用顯示屏高效率地使用顯示

15、屏3 數(shù)據(jù)輸入指南盡量減少用戶的輸入動(dòng)作盡量減少用戶的輸入動(dòng)作保持信息顯示和數(shù)據(jù)輸入之間的一致性保持信息顯示和數(shù)據(jù)輸入之間的一致性允許用戶自定義輸入允許用戶自定義輸入交互應(yīng)該是靈活的，并且可調(diào)整成用戶最喜歡的輸入方式交互應(yīng)該是靈活的，并且可調(diào)整成用戶最喜歡的輸入方式使在當(dāng)前動(dòng)作語境中不適用的命令不起作用使在當(dāng)前動(dòng)作語境中不適用的命令不起作用讓用戶控制交互流讓用戶控制交互流對(duì)所有輸入動(dòng)作都提供幫助對(duì)所有輸入動(dòng)作都提供幫助消除冗余的輸入。消除冗余的輸入。設(shè)計(jì)問題（續(xù)） 其他： 應(yīng)用的可訪問性 很多可訪問指南，為界面設(shè)計(jì)提供了指導(dǎo) 國際性 國際化指導(dǎo)方針設(shè)計(jì)評(píng)估初步設(shè)計(jì)初步設(shè)計(jì)建立原型建立原型 #1界面界面設(shè)計(jì)者研究設(shè)計(jì)者研究評(píng)估結(jié)果評(píng)估結(jié)果需要進(jìn)行的需要進(jìn)行的設(shè)計(jì)修改設(shè)計(jì)修改用戶評(píng)估用戶評(píng)估界面界面建立原型建立原型#n 界面界面界面設(shè)計(jì)完成界面設(shè)計(jì)完成 設(shè)設(shè)計(jì)計(jì)評(píng)評(píng)估估周周期期設(shè)計(jì)評(píng)