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

2、素太少，用戶興趣不高。 第二代直接操縱的界面。它大量使用圖形、語音和其它交互媒介，充分地考慮了人對美的需求。直接操縱的界面使用視聽、觸摸等技術(shù)，讓人可以憑借生活常識、經(jīng)歷和推理來操縱軟件，愉快地完成任務(wù)。黃金規(guī)則 置用戶于控制之下置用戶于控制之下 減少用戶的記憶負(fù)擔(dān)減少用戶的記憶負(fù)擔(dān) 保持界面一致保持界面一致界面美的內(nèi)涵 一、界面的合適性界面的合適性是指界面是否與軟件功能相融洽。既提倡外美內(nèi)秀，又強(qiáng)調(diào)恰如其分。 二、界面的風(fēng)格界面的風(fēng)格有兩類，一是“一致性”，二是“個性化”。 三、界面的廣義美一切有利于人機(jī)交互的界面設(shè)計因素都具有廣義美。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ù)用戶分析了解用戶了解用戶用戶訪談零售輸入市場輸入支持輸入也稱用戶工作分析是系統(tǒng)內(nèi)部活動的分解分析方法：自頂向下，逐步進(jìn)行功能分解注意：與常規(guī)的功能分解不同的是，主要考慮與人相關(guān)的活動，也就是考慮用戶需要輸入數(shù)據(jù)的步驟和計算機(jī)如何提示或者反饋給用戶信息。任務(wù)分析和建模用例用例 define basic i

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

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

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

7、em從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)部的不同視角。 確定屏幕對象屏幕布局用戶界面設(shè)計模式完整用戶界面。為高

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

9、操作。解決數(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àng)的能力。 頁面元素。實(shí)現(xiàn)Web頁面或者顯示屏的特定元素 模式：向?qū)?簡要描述：通過一系列的簡單窗口顯示來指導(dǎo)完成任務(wù)，使得用戶能夠一次一

10、步地完成某個復(fù)雜的任務(wù)。用戶界面設(shè)計模式電子商務(wù)。主要針對于站點(diǎn)，這些模式實(shí)現(xiàn)了電子商務(wù)應(yīng)用中的重現(xiàn)元素。 模式：購物車 簡要描述：提供一個要購買的項(xiàng)目清單。 其它。模式不能簡單地歸類到前面所述的任一類中，在某些情況下，這些模式具有領(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)用的特點(diǎn)，避免太慢和太快； 盡量減少易變性，原因，響應(yīng)時間的變化易使

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

12、鍵） 怎樣組織幫助信息？（平面結(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)了這些問題，并在確實(shí)出現(xiàn)問題時及時解決。 信息應(yīng)該伴隨著聽覺上或視覺上的提示。 信息不能帶有指責(zé)色彩。4. 菜單和命令標(biāo)記許多高級用戶仍然偏愛面向命令行的交互方式。在提供命令行交互時，必須考慮下列設(shè)計問題： 是否每個菜單選項(xiàng)都有對應(yīng)的命令？ 采用何種命令形式？有3種選擇：控制序列（例如ctrl+

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

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