人機交互技術03

人機交互技術第3講界面設計王艷ywang94@主要內(nèi)容

界面設計原則

用戶研究

任務分析

以用戶為中心的界面設計用戶界面軟件界面用戶界面分類命令行界面可以看作是第一代人機界面人被看成操作員，機器只做出被動的反應，人用手操作鍵盤，輸入數(shù)據(jù)和命令信息，通過視覺通道獲取信息，界面輸出只能為靜態(tài)的文本字符。圖形界面可看作是第二代人機界面基于圖形方式的人機界面。由于引入了圖標、按鈕和滾動條技術，大大減少了鍵盤輸入，提高了交互效率。多通道用戶界面進一步綜合采用視覺、語音、手勢等新的交互通道、設備和交互技術，使用戶利用多個通道以自然、并行、協(xié)作的方式進行人機對話，通過整合來自多個通道的、精確的或不精確的輸入來捕捉用戶的交互意圖，提高人機交互的自然性和高效性。桌面隱喻桌面隱喻是指在用戶界面中用人們熟悉的桌面上的圖例清楚地表示計算機可以處理的能力。所見即所得在WYSIWYG交互界面中，其所顯示的用戶交互行為與應用程序最終產(chǎn)生的結果是一致的。直接操縱直接操縱是指可以把操作的對象、屬性、關系顯式地表示出來，用光筆、鼠標、觸摸屏或數(shù)據(jù)手套等指點設備直接從屏幕上獲取形象化命令與數(shù)據(jù)的過程。圖形用戶界面的主要思想桌面隱喻桌面隱喻是指在用戶界面中用人們熟悉的桌面上的圖例清楚地表示計算機可以處理的能力圖例可以代表對象、動作、屬性或其他概念好的圖例比文本更易于辨識與文本相比圖例占據(jù)較少的屏幕空間有的圖例還可以獨立于語言——因其具有一定的文化和語言獨立性，可以提高目標搜索的效率隱喻表現(xiàn)方法：靜態(tài)圖標、動畫、視頻等三種隱喻直接隱喻工具隱喻過程隱喻缺點需要占用屏幕資源，并且難以表達和支持比較抽象的信息所見即所得WhatYouSeeIsWhatYouGet它使得用戶在視圖中所看到文檔與該文檔的最終產(chǎn)品具有相同的樣式，也允許用戶在視圖中直接編輯文本、圖形、或文檔中的其他元素。WYSIWYG語言常常比標簽語言容易使用，因為標簽語言并沒有對各種改變提供即時的視覺上的反饋。在WYSIWYG交互界面中，其所顯示的用戶交互行為與應用程序最終產(chǎn)生的結果是一致的。缺點屏幕空間或顏色配置方案與硬件設備

所提供的配置不一樣，在兩者之間就

很難產(chǎn)生正確匹配完全的WYSIWYG可能不適合某些用戶需要直接操縱直接操縱是指可以把操作的對象、屬性、關系顯式地表示出來，用光筆、鼠標、觸摸屏或數(shù)據(jù)手套等指點設備直接從屏幕上獲取形象化命令與數(shù)據(jù)的過程。對象是動作或數(shù)據(jù)的形象隱喻用戶指點和選擇代替鍵盤輸入操作結果立即可見支持逆向操作缺點更加容易出現(xiàn)操作錯誤，必須提供逆向操作功能更多地借助物理的、空間的或形象的表示，而不是單純的文字或數(shù)字的表示。在抽象的、復雜的應用中，具有局限性界面要具有一致性常用操作要有快捷方式提供必要的錯誤處理功能提供信息反饋允許操作可逆設計良好的聯(lián)機幫助合理劃分并高效地使用顯示屏幕圖形用戶界面設計的一般原則主要內(nèi)容

界面設計原則

用戶研究

任務分析

以用戶為中心的界面設計定義用戶用戶的含義簡單的說，用戶是使用某種產(chǎn)品的人，其包含兩層含義：1）用戶是人類的一部分；2）用戶是產(chǎn)品的使用者。產(chǎn)品的設計只有以用戶為中心，才能得到更多用戶的青睞。衡量一個以用戶為中心的設計的好壞，關鍵點是強調(diào)產(chǎn)品的最終使用者與產(chǎn)品之間的交互質(zhì)量，它包括三方面特性：產(chǎn)品在特定使用環(huán)境下為特定用戶用于特定用途時所具有的有效性（Effectiveness）、效率（Efficiency）和用戶主觀滿意度（Satisfaction）。延伸開來，還包括對特定用戶而言，產(chǎn)品的易學程度、對用戶的吸引程度、用戶在體驗產(chǎn)品前后時的整體心理感受等。用戶體驗用戶體驗（UserExperience，UX）通常是指用戶在使用產(chǎn)品或系統(tǒng)時的全面體驗和滿意度。用戶體驗主要有下列四個元素組成：品牌（Branding）使用性（Usability）功能性（Functionality）內(nèi)容（Content）品牌用來衡量網(wǎng)站品牌的描述包括：

1、用戶為訪問都提供了有吸引力的難忘的體驗

2、網(wǎng)站的視覺效果與品牌一致

3、圖片，附加內(nèi)容，多媒體內(nèi)容提供了體驗過程的價值

4、網(wǎng)站傳達了品牌設定的程度。

5、網(wǎng)站充分運用了這個體能力，加強了或延伸了品牌。使用性使用性包括一般意義上的對所有網(wǎng)站的內(nèi)容和特點的易用性。在可能之下的二級主題還包括導航的友好性。他們包括：

1．網(wǎng)站防止錯誤發(fā)生，并幫助使用都從錯誤中恢復。

2．整體頁面?zhèn)戎貞槍χ饕繕耸鼙妰?yōu)化。

3．網(wǎng)站幫助其訪問都達成一般性目標和任務。

4．網(wǎng)站保持其一致性和標準。

5．網(wǎng)站能為有殘疾用戶提供特定內(nèi)容。功能性功能性包括所有技術上的及屏幕之后的流程及應用，它伴隨著為所有最終用戶提供互動服務，而且有時對公眾和管理員都有意義。用來衡量功能性的描述包括：

1．用戶及時獲得對其查詢和提交信息的反饋。

2．深晰的任務過程的告知（比如成功頁面或郵件更新提示）

3．網(wǎng)站和應用加上了一般的安全及個人隱私的標準

4．在線功能與離線業(yè)務結合

5．網(wǎng)站包含管理工具，加強管理員的效率。內(nèi)容內(nèi)容指網(wǎng)站的實際內(nèi)容，文本，圖片，多媒體等到，以及其結構，信息體結構。

我們考慮信息和內(nèi)容是如果根據(jù)用戶需要和客戶業(yè)務要求而組織的。

1．連接密度帶來的清晰度和簡單的網(wǎng)站瀏覽。

2．內(nèi)容組織方便了用戶實現(xiàn)他們的目標

3．內(nèi)容及時準確

4．內(nèi)容與用戶需要和商務目標相切合。

5．多語言的綜合性內(nèi)容。用戶研究方法背景調(diào)查類（間接資料搜集、現(xiàn)有流程分析、競爭對手分析）觀察類（影子跟隨法、視頻觀察法）訪談類（面談法、焦點小組、問卷調(diào)查）用戶研究數(shù)據(jù)的整理卡片法虛擬角色編寫故事板主要內(nèi)容

界面設計原則

用戶研究

任務分析

以用戶為中心的界面設計任務分析任務分析是交互設計至關重要的環(huán)節(jié)，在以用戶為中心的設計中，關心的是如何從用戶那里理解和獲取用戶的思維模式，進行充分、直觀的表達，并用于交互設計。描述用戶行為的工具有很多，目前經(jīng)常提到的是通用標識語言UML（UnifiedMarkupLanguage）。任務分析UML2.0共有10種圖示，分別為組合結構圖、用例圖、類圖、序列圖、對象圖、協(xié)作圖、狀態(tài)圖、活動圖、組件圖和部署圖，它們分別用以表現(xiàn)不同的視圖。在任務分析中使用UML工具，可以清晰地表達一個交互任務諸多方面的內(nèi)容，包括交互中的使用行為、交互順序、協(xié)作關系、工序約束等等。使用行為分析使用行為分析就是要理解系統(tǒng)中每個參與者及其所需完成的任務，即分析系統(tǒng)所涉及的問題領域和系統(tǒng)運行的主要任務，分析使用該系統(tǒng)主要功能部分的是哪些人，誰將需要該系統(tǒng)的支持以完成其工作。使用行為分析一般使用用例圖描述，它從參與者的角度出發(fā)來描述一個系統(tǒng)的功能，主要目的是幫助開發(fā)團隊以一種可視化的方式理解系統(tǒng)的功能需求。蘇軾三國的“國際形勢”曹操占領荊州，決定乘勝東進，企圖八十萬水軍占領東吳，東吳一時文臣主降，武將主戰(zhàn)，孫權舉棋不定，諸葛亮到來給東吳主戰(zhàn)派帶來希望。經(jīng)過諸葛亮、周瑜等人的分析，堅定了孫權的抗曹決心，乃與劉備訂立盟約共同抗曹。29曹操發(fā)動赤壁之戰(zhàn)……引發(fā)西蜀流程：赤壁之戰(zhàn)，其它流程OOAD最關心流程與元件任務：西蜀的劇情和演員？描述流程（劇情）——分析安排主/配角（元件）演出——設計把西蜀看成黑箱!!用例敘述曹操舉兵南下,西蜀就擬定策略,展開布署,并聯(lián)絡孫權,鼎力對抗曹操大軍.把西蜀黑箱打開元件有哪些？劉備關羽張飛孔明把西蜀黑箱打開曹操舉兵南下,劉備請孔明擬定策略.派遣關羽和張飛防守荊州,

同時請孔明連絡孫權,共同對抗曹操.

孔明聯(lián)合孫權,借東風,火燒曹軍于赤壁.

劉備孔明關羽求戰(zhàn)請擬策略張飛請防守荊州請防守荊州前線孫權曹操請聯(lián)絡孫權請孫權領兵相助借東風火攻火攻曹軍用順序圖敘述故事劉備的職責……劉備求戰(zhàn)請擬策略請防守荊州請聯(lián)絡孫權我劉備必須迎戰(zhàn)曹操?。?！用類圖表示劉備……劉備求戰(zhàn)劉備迎戰(zhàn)曹操用類圖表示孔明……孔明請擬策略請聯(lián)絡孫權請孫權領兵相助借東風火攻火攻曹軍孔明擬定策略聯(lián)絡孫權借東風火攻用類圖表示關、張二人……關羽張飛請防守荊州請防守荊州前線關羽防守荊州張飛防守荊州前線UML版：故事情節(jié)曹操向西蜀發(fā)送請戰(zhàn)的消息，起動了西蜀迎戰(zhàn)的流程西蜀流程執(zhí)行的結果，返回曹操的是火攻西蜀流程執(zhí)行過程中，調(diào)用了孫權的幫助，園滿完成了流程UML版：人物刻畫流程執(zhí)行中，西蜀各成員之間通過發(fā)送消息協(xié)作，各成員的作用劉備：迎戰(zhàn)曹操孔明：擬定策略，聯(lián)絡孫權，借東風火攻關羽：防守荊州張飛：防守荊州前線曹操發(fā)起動作：起兵獲得結果：火攻孫權獲得的消息：聯(lián)合抗曹返回動作：聯(lián)盟、協(xié)作主要內(nèi)容

界面設計原則

用戶研究

任務分析

以用戶為中心的界面設計以用戶為中心的界面設計Gould、Boies和Lewis于1991年提出了以用戶為中心設計的四個重要原則。及早以用戶為中心：設計人員應當在設計過程的早期就致力于了解用戶的需要。綜合設計：設計的所有方面應當齊頭并進發(fā)展，而不是順次發(fā)展，使產(chǎn)品的內(nèi)部設計與用戶界面的需要始終保持一致。及早并持續(xù)性地進行測試：當前對軟件測試的唯一可行的方法是根據(jù)經(jīng)驗總結出的方法，即若實際用戶認為設計是可行的，它就是可行的。通過在開發(fā)的全過程引入可用性測試，可以使用戶有機會在產(chǎn)品推出之前就設計提供反饋意見。反復式設計：大問題往往會掩蓋小問題的存在。設計人員和開發(fā)人員應當在整個測試過程中反復對設計進行修改。圖形用戶界面設計與評估

（GraphicalUserInterfaceDesignandEvaluation，GUIDE）以用戶為中心的邏輯交互設計

（LogicalUser-CentredInteractionDesign，LUCID）用于交互優(yōu)化的結構化用戶界面設計

（StructuredUser-InterfaceDesignforInteractionOptimisation，STUDIO）以使用為中心的設計

（Usage-CenteredDesign）對象、視圖、交互設計(Object,View,Interaction,Design,OVID)以用戶為中心的設計方法OVID的三個模型設計者模型編程者模型用戶界面用戶概念模型設計者用戶細化實現(xiàn)交互OVID中的活動圖任務分析對象視圖任務交互對象建模分析是將系統(tǒng)和用戶任務分析的結果轉化為用戶界面設計的第一步建模是將系統(tǒng)任務的某些概念及其關系用圖的方式直觀綜合地表達出來分析是將系統(tǒng)的對象抽象為類，列出對象或類的屬性、行為、以及對象間的關系對象建模分析在線機票訂購例子交互的視圖可能包括：用戶查詢航班視圖航班信息列表視圖用戶選中的某個具體航班的信息視圖訂購信息填寫視圖支付視圖交易成功反饋和出票視圖等。視圖抽象設計通過組合概念模型中的對象和對象操作，提供系統(tǒng)運行的方法和方式，為具體的設計提供指導，并要為系統(tǒng)的不同實施方案提供靈活的界面選擇。系統(tǒng)的對象模型系統(tǒng)狀態(tài)每個視圖涉及的對象對象屬性和行為視圖抽象設計在線機票訂購例子訂機票的過程基本上由用戶登錄、查詢航班、預訂機票、支付、出票等交互過程組成。商戶交互的視圖可能包括：用戶查詢航班視圖、航班信息列表視圖、用戶選中的某個具體航班的信息視圖、訂購信息填寫視圖、支付視圖、交易成功反饋和出票視圖等。針對特定的操作系統(tǒng)或交互方式，對抽象的視圖設計做進一步的具體設計，產(chǎn)生視圖的概要設計。實際設計中，這些視圖通常是用鉛筆畫在紙上，這樣做速度快，而且修改起來也比較方便。概要設計查詢條件航班號起飛城市到達城市起飛時間到達時間全票票價剩余票額CA1100濟南北京17：3519：1050020…………………………………