人機交互技術(shù)03

1、2014 CUIT School of software人機交互技術(shù)人機交互技術(shù)2014 CUIT 人機交互技術(shù)2主要內(nèi)容l 界面設(shè)計原則l 用戶研究l 任務(wù)分析l 以用戶為中心的界面設(shè)計2014 CUIT 人機交互技術(shù)3用戶界面2014 CUIT 人機交互技術(shù)4軟件界面2014 CUIT 人機交互技術(shù)5用戶界面分類 人被看成操作員，機器只做出被動的反應(yīng)，人用手操作鍵盤，輸入數(shù)據(jù)和命令信息，通過視覺通道獲取信息，界面輸出只能為靜態(tài)的文本字符。命令行界面可以看作是第一代人機界面 基于圖形方式的人機界面。由于引入了圖標(biāo)、按鈕和滾動條技術(shù)，大大減少了鍵盤輸入，提高了交互效率。圖形界面可看作是第二代人

2、機界面 進(jìn)一步綜合采用視覺、語音、手勢等新的交互通道、設(shè)備和交互技術(shù)，使用戶利用多個通道以自然、并行、協(xié)作的方式進(jìn)行人機對話，通過整合來自多個通道的、精確的或不精確的輸入來捕捉用戶的交互意圖，提高人機交互的自然性和高效性。多通道用戶界面2014 CUIT 人機交互技術(shù)6 桌面隱喻是指在用戶界面中用人們熟悉的桌面上的圖例清楚地表示計算機可以處理的能力。桌面隱喻 在WYSIWYG交互界面中，其所顯示的用戶交互行為與應(yīng)用程序最終產(chǎn)生的結(jié)果是一致的。所見即所得 直接操縱是指可以把操作的對象、屬性、關(guān)系顯式地表示出來，用光筆、鼠標(biāo)、觸摸屏或數(shù)據(jù)手套等指點設(shè)備直接從屏幕上獲取形象化命令與數(shù)據(jù)的過程。直接操

3、縱圖形用戶界面的主要思想2014 CUIT 人機交互技術(shù)7桌面隱喻 桌面隱喻是指在用戶界面中用人們熟悉的桌面上的圖例清楚地表示計算機可以處理的能力 圖例可以代表對象、動作、屬性或其他概念 好的圖例 比文本更易于辨識 與文本相比圖例占據(jù)較少的屏幕空間 有的圖例還可以獨立于語言因其具有一定的文化和語言獨立性，可以提高目標(biāo)搜索的效率2014 CUIT 人機交互技術(shù)8隱喻 表現(xiàn)方法：靜態(tài)圖標(biāo)、動畫、視頻等 三種隱喻 直接隱喻 工具隱喻 過程隱喻 缺點 需要占用屏幕資源，并且難以表達(dá)和支持比較抽象的信息2014 CUIT 人機交互技術(shù)92014 CUIT 人機交互技術(shù)10所見即所得 What You S

4、ee Is What You Get 它使得用戶在視圖中所看到文檔與該文檔的最終產(chǎn)品具有相同的樣式，也允許用戶在視圖中直接編輯文本、圖形、或文檔中的其他元素。 WYSIWYG 語言常常比標(biāo)簽語言容易使用，因為標(biāo)簽語言并沒有對各種改變提供即時的視覺上的反饋。 在WYSIWYG交互界面中，其所顯示的用戶交互行為與應(yīng)用程序最終產(chǎn)生的結(jié)果是一致的。 缺點 屏幕空間或顏色配置方案與硬件設(shè)備所提供的配置不一樣，在兩者之間就很難產(chǎn)生正確匹配 完全的WYSIWYG可能不適合某些用戶需要2014 CUIT 人機交互技術(shù)11直接操縱 直接操縱是指可以把操作的對象、屬性、關(guān)系顯式地表示出來，用光筆、鼠標(biāo)、觸摸屏或數(shù)

5、據(jù)手套等指點設(shè)備直接從屏幕上獲取形象化命令與數(shù)據(jù)的過程。 對象是動作或數(shù)據(jù)的形象隱喻 用戶指點和選擇代替鍵盤輸入 操作結(jié)果立即可見 支持逆向操作 缺點 更加容易出現(xiàn)操作錯誤，必須提供逆向操作功能 更多地借助物理的、空間的或形象的表示，而不是單純的文字或數(shù)字的表示。 在抽象的、復(fù)雜的應(yīng)用中，具有局限性2014 CUIT 人機交互技術(shù)12 界面要具有一致性 常用操作要有快捷方式 提供必要的錯誤處理功能 提供信息反饋 允許操作可逆 設(shè)計良好的聯(lián)機幫助 合理劃分并高效地使用顯示屏幕圖形用戶界面設(shè)計的一般原則2014 CUIT 人機交互技術(shù)13主要內(nèi)容l 界面設(shè)計原則l 用戶研究l 任務(wù)分析l 以用戶為

6、中心的界面設(shè)計2014 CUIT 人機交互技術(shù)14定義用戶 用戶的含義 簡單的說，用戶是使用某種產(chǎn)品的人，其包含兩層含義：1）用戶是人類的一部分；2）用戶是產(chǎn)品的使用者。產(chǎn)品的設(shè)計只有以用戶為中心，才能得到更多用戶的青睞。 衡量一個以用戶為中心的設(shè)計的好壞，關(guān)鍵點是強調(diào)產(chǎn)品的最終使用者與產(chǎn)品之間的交互質(zhì)量，它包括三方面特性：產(chǎn)品在特定使用環(huán)境下為特定用戶用于特定用途時所具有的有效性（Effectiveness）、效率（Efficiency）和用戶主觀滿意度（Satisfaction）。延伸開來，還包括對特定用戶而言，產(chǎn)品的易學(xué)程度、對用戶的吸引程度、用戶在體驗產(chǎn)品前后時的整體心理感受等。201

7、4 CUIT 人機交互技術(shù)15用戶體驗 用戶體驗（User Experience，UX）通常是指用戶在使用產(chǎn)品或系統(tǒng)時的全面體驗和滿意度。 用戶體驗主要有下列四個元素組成：品牌（Branding）使用性（Usability）功能性（Functionality） 內(nèi)容（Content）2014 CUIT 人機交互技術(shù)16品牌 用來衡量網(wǎng)站品牌的描述包括： 1、用戶為訪問都提供了有吸引力的難忘的體驗 2、網(wǎng)站的視覺效果與品牌一致 3、圖片，附加內(nèi)容，多媒體內(nèi)容提供了體驗過程的價值 4、網(wǎng)站傳達(dá)了品牌設(shè)定的程度。 5、網(wǎng)站充分運用了這個體能力，加強了或延伸了品牌。2014 CUIT 人機交互技術(shù)17

8、使用性 使用性包括 一般意義上的對所有網(wǎng)站的內(nèi)容和特點的易用性。在可能之下的二級主題還包括導(dǎo)航的友好性。他們包括：1 網(wǎng)站防止錯誤發(fā)生，并幫助使用都從錯誤中恢復(fù)。2 整體頁面?zhèn)戎貞?yīng)針對主要目標(biāo)受眾優(yōu)化。3 網(wǎng)站幫助其訪問都達(dá)成一般性目標(biāo)和任務(wù)。4 網(wǎng)站保持其一致性和標(biāo)準(zhǔn)。5 網(wǎng)站能為有殘疾用戶提供特定內(nèi)容。2014 CUIT 人機交互技術(shù)18功能性 功能性包括所有技術(shù)上的及屏幕之后的流程及應(yīng)用，它伴隨著為所有最終用戶提供互動服務(wù)，而且有時對公眾和管理員都有意義。用來衡量功能性的描述包括：1 用戶及時獲得對其查詢和提交信息的反饋。2 深晰的任務(wù)過程的告知（比如成功頁面或郵件更新提示）3 網(wǎng)站和應(yīng)

9、用加上了一般的安全及個人隱私的標(biāo)準(zhǔn)4 在線功能與離線業(yè)務(wù)結(jié)合5 網(wǎng)站包含管理工具，加強管理員的效率。2014 CUIT 人機交互技術(shù)19內(nèi)容 內(nèi)容指網(wǎng)站的實際內(nèi)容，文本，圖片，多媒體等到，以及其結(jié)構(gòu)，信息體結(jié)構(gòu)。我們考慮信息和內(nèi)容是如果根據(jù)用戶需要和客戶業(yè)務(wù)要求而組織的。1連接密度帶來的清晰度和簡單的網(wǎng)站瀏覽。2內(nèi)容組織方便了用戶實現(xiàn)他們的目標(biāo)3內(nèi)容及時準(zhǔn)確4內(nèi)容與用戶需要和商務(wù)目標(biāo)相切合。5多語言的綜合性內(nèi)容。2014 CUIT 人機交互技術(shù)20用戶研究方法 背景調(diào)查類（間接資料搜集、現(xiàn)有流程分析、競爭對手分析） 觀察類（影子跟隨法、視頻觀察法） 訪談類（面談法、焦點小組、問卷調(diào)查）2014

10、 CUIT 人機交互技術(shù)21用戶研究數(shù)據(jù)的整理 卡片法 虛擬角色 編寫故事板2014 CUIT 人機交互技術(shù)22主要內(nèi)容l 界面設(shè)計原則l 用戶研究l 任務(wù)分析l 以用戶為中心的界面設(shè)計2014 CUIT 人機交互技術(shù)23任務(wù)分析 任務(wù)分析是交互設(shè)計至關(guān)重要的環(huán)節(jié)，在以用戶為中心的設(shè)計中，關(guān)心的是如何從用戶那里理解和獲取用戶的思維模式，進(jìn)行充分、直觀的表達(dá)，并用于交互設(shè)計。 描述用戶行為的工具有很多，目前經(jīng)常提到的是通用標(biāo)識語言UML（Unified Markup Language）。2014 CUIT 人機交互技術(shù)24任務(wù)分析 UML 2.0共有10種圖示，分別為組合結(jié)構(gòu)圖、用例圖、類圖、序

11、列圖、對象圖、協(xié)作圖、狀態(tài)圖、活動圖、組件圖和部署圖，它們分別用以表現(xiàn)不同的視圖。 在任務(wù)分析中使用UML工具，可以清晰地表達(dá)一個交互任務(wù)諸多方面的內(nèi)容，包括交互中的使用行為、交互順序、協(xié)作關(guān)系、工序約束等等。2014 CUIT 人機交互技術(shù)25使用行為分析 使用行為分析就是要理解系統(tǒng)中每個參與者及其所需完成的任務(wù)，即分析系統(tǒng)所涉及的問題領(lǐng)域和系統(tǒng)運行的主要任務(wù)，分析使用該系統(tǒng)主要功能部分的是哪些人，誰將需要該系統(tǒng)的支持以完成其工作。 使用行為分析一般使用用例圖描述，它從參與者的角度出發(fā)來描述一個系統(tǒng)的功能，主要目的是幫助開發(fā)團(tuán)隊以一種可視化的方式理解系統(tǒng)的功能需求。2014 CUIT 人機交

12、互技術(shù)262014 CUIT 人機交互技術(shù)272014 CUIT 人機交互技術(shù)28三國的“國際形勢”曹操占領(lǐng)荊州，決定乘勝東進(jìn)，企圖八十萬水軍占領(lǐng)東吳，東吳一時文臣主降，武將主戰(zhàn)，孫權(quán)舉棋不定，諸葛亮到來給東吳主戰(zhàn)派帶來希望。經(jīng)過諸葛亮、周瑜等人的分析，堅定了孫權(quán)的抗曹決心，乃與劉備訂立盟約共同抗曹。 292014 CUIT 人機交互技術(shù)30曹操發(fā)動赤壁之戰(zhàn)引發(fā)西蜀流程：引發(fā)西蜀流程：赤壁之戰(zhàn)，其它流程赤壁之戰(zhàn)，其它流程2014 CUIT 人機交互技術(shù)31OOAD最關(guān)心流程與元件 任務(wù)：西蜀的劇情和演員？西蜀的劇情和演員？ 描述流程（劇情）分析 安排主/配角（元件）演出設(shè)計2014 CUIT

13、人機交互技術(shù)32把西蜀看成黑箱 ! 用例敘述曹操舉兵南下曹操舉兵南下, 西蜀就擬定策略西蜀就擬定策略,展開布展開布署署,并聯(lián)絡(luò)孫權(quán)并聯(lián)絡(luò)孫權(quán),鼎力對抗曹操大軍鼎力對抗曹操大軍.2014 CUIT 人機交互技術(shù)33把西蜀黑箱打開 元件有哪些？元件有哪些？劉備劉備關(guān)羽關(guān)羽張飛張飛孔明孔明2014 CUIT 人機交互技術(shù)34把西蜀黑箱打開 2014 CUIT 人機交互技術(shù)35劉備孔明關(guān)羽張飛孫權(quán)曹操用順序圖敘述故事2014 CUIT 人機交互技術(shù)36劉備的職責(zé)劉備我劉備必須迎我劉備必須迎戰(zhàn)曹操！戰(zhàn)曹操！2014 CUIT 人機交互技術(shù)37用類圖表示劉備劉備劉備劉備迎戰(zhàn)曹操迎戰(zhàn)曹操2014 CUIT

14、人機交互技術(shù)38用類圖表示孔明孔明孔明孔明擬定策略擬定策略聯(lián)絡(luò)孫權(quán)聯(lián)絡(luò)孫權(quán)借東風(fēng)火攻借東風(fēng)火攻2014 CUIT 人機交互技術(shù)39用類圖表示關(guān)、張二人關(guān)羽張飛關(guān)羽關(guān)羽防守荊州防守荊州張飛張飛防守荊州前線防守荊州前線2014 CUIT 人機交互技術(shù)40UML版：故事情節(jié)曹操向西蜀發(fā)送請戰(zhàn)的消息，起動了西蜀迎戰(zhàn)的流程西蜀流程執(zhí)行的結(jié)果，返回曹操的是火攻西蜀流程執(zhí)行過程中，調(diào)用了孫權(quán)的幫助，園滿完成了流程2014 CUIT 人機交互技術(shù)41UML版：人物刻畫 流程執(zhí)行中，西蜀各成員之間通過發(fā)送消息協(xié)作，各成員的作用 劉備：迎戰(zhàn)曹操 孔明：擬定策略，聯(lián)絡(luò)孫權(quán)，借東風(fēng)火攻 關(guān)羽：防守荊州 張飛：防守荊州

15、前線 曹操 發(fā)起動作：起兵 獲得結(jié)果：火攻 孫權(quán) 獲得的消息：聯(lián)合抗曹 返回動作：聯(lián)盟、協(xié)作2014 CUIT 人機交互技術(shù)42主要內(nèi)容l 界面設(shè)計原則l 用戶研究l 任務(wù)分析l 以用戶為中心的界面設(shè)計2014 CUIT 人機交互技術(shù)43以用戶為中心的界面設(shè)計 Gould、Boies和Lewis于1991年提出了以用戶為中心設(shè)計的四個重要原則。 及早以用戶為中心：設(shè)計人員應(yīng)當(dāng)在設(shè)計過程的早期就致力于了解用戶的需要。 綜合設(shè)計：設(shè)計的所有方面應(yīng)當(dāng)齊頭并進(jìn)發(fā)展，而不是順次發(fā)展，使產(chǎn)品的內(nèi)部設(shè)計與用戶界面的需要始終保持一致。 及早并持續(xù)性地進(jìn)行測試：當(dāng)前對軟件測試的唯一可行的方法是根據(jù)經(jīng)驗總結(jié)出的方

16、法，即若實際用戶認(rèn)為設(shè)計是可行的，它就是可行的。通過在開發(fā)的全過程引入可用性測試，可以使用戶有機會在產(chǎn)品推出之前就設(shè)計提供反饋意見。 反復(fù)式設(shè)計：大問題往往會掩蓋小問題的存在。設(shè)計人員和開發(fā)人員應(yīng)當(dāng)在整個測試過程中反復(fù)對設(shè)計進(jìn)行修改。2014 CUIT 人機交互技術(shù)44圖形用戶界面設(shè)計與評估（Graphical User Interface Design and Evaluation，GUIDE）以用戶為中心的邏輯交互設(shè)計（Logical User-Centred Interaction Design，LUCID）用于交互優(yōu)化的結(jié)構(gòu)化用戶界面設(shè)計（Structured User-Interfa

17、ce Design for Interaction Optimisation，STUDIO）以使用為中心的設(shè)計（Usage-Centered Design）對象、視圖、交互設(shè)計(Object, View, Interaction, Design,OVID)以用戶為中心的設(shè)計方法2014 CUIT 人機交互技術(shù)45OVID的三個模型設(shè)計者模型編程者模型用戶界面用戶概念模型設(shè)計者設(shè)計者用戶用戶細(xì)化實現(xiàn)交互2014 CUIT 人機交互技術(shù)46OVID中的活動圖2014 CUIT 人機交互技術(shù)47 是將系統(tǒng)和用戶任務(wù)分析的結(jié)果轉(zhuǎn)化為用戶界面設(shè)計的第一步對象建模分析 是將系統(tǒng)任務(wù)的某些概念及其關(guān)系用圖的

18、方式直觀綜合地表達(dá)出來建模 是將系統(tǒng)的對象抽象為類，列出對象或類的屬性、行為、以及對象間的關(guān)系分析對象建模分析2014 CUIT 人機交互技術(shù)48在線機票訂購例子 交互的視圖可能包括：用戶查詢航班視圖航班信息列表視圖用戶選中的某個具體航班的信息視圖訂購信息填寫視圖支付視圖交易成功反饋和出票視圖等。2014 CUIT 人機交互技術(shù)49 視圖抽象設(shè)計 通過組合概念模型中的對象和對象操作，提供系統(tǒng)運行的方法和方式，為具體的設(shè)計提供指導(dǎo)，并要為系統(tǒng)的不同實施方案提供靈活的界面選擇。 系統(tǒng)的對象模型 系統(tǒng)狀態(tài) 每個視圖 涉及的對象 對象屬性和行為視圖抽象設(shè)計2014 CUIT 人機交互技術(shù)50在線機票訂購例子 訂機票的過程基本上由用戶登錄、查詢航班、預(yù)訂機票、支付、出票等交互過程組成。 商戶交互的視圖可能包括：用戶查詢航班視圖、航班信息列表視圖、用戶選中的某個具體航班的信息視圖、訂購信息填寫視圖、支付視圖、交易成功反饋和出票視圖等。2014 CUIT 人機交互技術(shù)51 針對特定的操作系統(tǒng)或交互方式，對抽象的視圖設(shè)計做進(jìn)一步的具體設(shè)計，產(chǎn)生視圖的概要設(shè)計。實際設(shè)計中，這些視圖通常是用鉛筆畫在紙上，這樣做速度快，而且修改起來也比較方便。概要設(shè)計查詢條件航班號起飛城市到達(dá)城市起飛時間到達(dá)時間全票票價剩余票額CA1100濟南北京17：3519：1