第五章人機(jī)界面與交互設(shè)計(jì)

1、 第五章第五章 人機(jī)界面與交互設(shè)計(jì)人機(jī)界面與交互設(shè)計(jì) 人機(jī)界面是用戶與產(chǎn)品相互傳遞信息的媒人機(jī)界面是用戶與產(chǎn)品相互傳遞信息的媒介，交互設(shè)計(jì)是指為用戶與產(chǎn)品間的交流和互介，交互設(shè)計(jì)是指為用戶與產(chǎn)品間的交流和互動(dòng)進(jìn)行設(shè)計(jì)。交互設(shè)計(jì)是界面設(shè)計(jì)的延伸，所動(dòng)進(jìn)行設(shè)計(jì)。交互設(shè)計(jì)是界面設(shè)計(jì)的延伸，所有的有的“交互問(wèn)題交互問(wèn)題”都是在都是在“界面界面”上發(fā)生的，上發(fā)生的，“界面界面”是交互行為產(chǎn)生的基礎(chǔ)，是交互行為產(chǎn)生的基礎(chǔ)，“交互交互”是是界面設(shè)計(jì)的最終目的。界面設(shè)計(jì)的最終目的。 本章主要講述了人機(jī)界面設(shè)計(jì)與交互設(shè)計(jì)的相關(guān)內(nèi)容，本章主要講述了人機(jī)界面設(shè)計(jì)與交互設(shè)計(jì)的相關(guān)內(nèi)容，要求學(xué)生理解兩者的具體含義以及相

2、互之間的關(guān)系；了解人要求學(xué)生理解兩者的具體含義以及相互之間的關(guān)系；了解人機(jī)界面與交互技術(shù)的發(fā)展?fàn)顩r與應(yīng)用前景；熟練掌握產(chǎn)品交機(jī)界面與交互技術(shù)的發(fā)展?fàn)顩r與應(yīng)用前景；熟練掌握產(chǎn)品交互設(shè)計(jì)的程序與方法，這也是本章的重點(diǎn)和難點(diǎn)?；ピO(shè)計(jì)的程序與方法，這也是本章的重點(diǎn)和難點(diǎn)。 學(xué)習(xí)目的與要求學(xué)習(xí)目的與要求本章的內(nèi)容本章的內(nèi)容 5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)1 5.2交互設(shè)計(jì)交互設(shè)計(jì)2 5.3人機(jī)界面與交互技術(shù)的發(fā)展及應(yīng)用人機(jī)界面與交互技術(shù)的發(fā)展及應(yīng)用 3 習(xí)題與討論習(xí)題與討論45.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)15.1.1人機(jī)界面的含義人機(jī)界面的含義2 5.1.2 硬件人機(jī)界面與軟件人機(jī)界面硬件人機(jī)界面與軟件

3、人機(jī)界面3 5.1.3人機(jī)界面設(shè)計(jì)的測(cè)試與評(píng)價(jià)人機(jī)界面設(shè)計(jì)的測(cè)試與評(píng)價(jià) 4 5.1.4顯示與操控界面設(shè)計(jì)顯示與操控界面設(shè)計(jì) 5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)5.1.1人機(jī)界面的含義人機(jī)界面的含義 廣義：廣義： 人機(jī)界面（人機(jī)界面（human-machine interface），是用戶與機(jī)器相），是用戶與機(jī)器相互傳遞信息的媒介，其中包括信息的輸入與輸出，是人與機(jī)器之互傳遞信息的媒介，其中包括信息的輸入與輸出，是人與機(jī)器之間相互作用的方式。間相互作用的方式。 狹義：狹義： 人機(jī)界面是指計(jì)算機(jī)系統(tǒng)中的人機(jī)界面（人機(jī)界面是指計(jì)算機(jī)系統(tǒng)中的人機(jī)界面（human-computer interface,HC

4、I），也稱(chēng)為人機(jī)接口、用戶界面，它是計(jì)算機(jī)科學(xué)），也稱(chēng)為人機(jī)接口、用戶界面，它是計(jì)算機(jī)科學(xué)中的一個(gè)新興的分支。中的一個(gè)新興的分支。 5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)5.1.2 硬件人機(jī)界面與軟件人機(jī)界面硬件人機(jī)界面與軟件人機(jī)界面 1.硬件人機(jī)界面硬件人機(jī)界面 硬件人機(jī)界面是界面中與人直接接觸、有形的部分，它與工業(yè)設(shè)計(jì)緊密相關(guān)，早期工業(yè)設(shè)計(jì)的發(fā)展，主要是圍繞硬件所展開(kāi)的。 2.軟件人機(jī)界面軟件人機(jī)界面 軟件人機(jī)界面是人機(jī)之間的信息界面，他的發(fā)展首先應(yīng)歸功于計(jì)算機(jī)技術(shù)的迅速發(fā)展。計(jì)算機(jī)和信息技術(shù)的觸角已經(jīng)深人到現(xiàn)代社會(huì)的每一個(gè)角落，軟件人機(jī)界面也伴隨著硬件成為人機(jī)界面的重要內(nèi)容，甚至在一定程度上，人

5、們對(duì)軟件界面的關(guān)注，已經(jīng)超過(guò)了硬件界面。 5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)5.1.2硬件、軟件人機(jī)界面硬件、軟件人機(jī)界面 在軟件界面設(shè)計(jì)開(kāi)發(fā)中，要遵循幾個(gè)基本的原則：在軟件界面設(shè)計(jì)開(kāi)發(fā)中，要遵循幾個(gè)基本的原則：1.保持信息的一致性；保持信息的一致性；2.為操作提供信息反饋；為操作提供信息反饋；3.合理利用空間，保持界面的簡(jiǎn)潔；合理利用空間，保持界面的簡(jiǎn)潔；4.合理利用顏色、顯示效果來(lái)實(shí)現(xiàn)內(nèi)容與形式的統(tǒng)一；合理利用顏色、顯示效果來(lái)實(shí)現(xiàn)內(nèi)容與形式的統(tǒng)一；5.使用圖形和比喻；使用圖形和比喻；6.對(duì)用戶出錯(cuò)的寬容性和提供良好的幫助（對(duì)用戶出錯(cuò)的寬容性和提供良好的幫助（help）功能；）功能；7.盡量使用

6、快捷方式；盡量使用快捷方式；8.允許動(dòng)作可逆性（提供允許動(dòng)作可逆性（提供undo功能）；功能）；9.盡量減少用戶的記憶要求；盡量減少用戶的記憶要求；10.快速的系統(tǒng)響應(yīng)和低系統(tǒng)成本?？焖俚南到y(tǒng)響應(yīng)和低系統(tǒng)成本。5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)5.1.3人機(jī)界面設(shè)計(jì)的測(cè)試與評(píng)價(jià)人機(jī)界面設(shè)計(jì)的測(cè)試與評(píng)價(jià) 人機(jī)界面設(shè)計(jì)的評(píng)價(jià)方法主要有以下幾種：人機(jī)界面設(shè)計(jì)的評(píng)價(jià)方法主要有以下幾種：1.經(jīng)驗(yàn)性評(píng)價(jià)方法經(jīng)驗(yàn)性評(píng)價(jià)方法2.數(shù)學(xué)分析類(lèi)評(píng)價(jià)方法數(shù)學(xué)分析類(lèi)評(píng)價(jià)方法3.試驗(yàn)評(píng)價(jià)方法試驗(yàn)評(píng)價(jià)方法4.虛擬仿真評(píng)價(jià)方法虛擬仿真評(píng)價(jià)方法5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)5.1.3人機(jī)界面設(shè)計(jì)的測(cè)試與評(píng)價(jià)人機(jī)界面設(shè)計(jì)的測(cè)試與評(píng)價(jià)

7、 對(duì)用戶界面的測(cè)試和評(píng)價(jià)可以起到以下作用：對(duì)用戶界面的測(cè)試和評(píng)價(jià)可以起到以下作用： 1.降低產(chǎn)品或者系統(tǒng)技術(shù)支持的費(fèi)用，縮短最終用戶的訓(xùn)練時(shí)降低產(chǎn)品或者系統(tǒng)技術(shù)支持的費(fèi)用，縮短最終用戶的訓(xùn)練時(shí)間；間； 2.減少由于用戶界面問(wèn)題而引起的修改和改版問(wèn)題；減少由于用戶界面問(wèn)題而引起的修改和改版問(wèn)題； 3.使產(chǎn)品的可用性增強(qiáng)，用戶易于使用；使產(chǎn)品的可用性增強(qiáng)，用戶易于使用； 4.幫助產(chǎn)品和系統(tǒng)設(shè)計(jì)者更深刻的領(lǐng)會(huì)以幫助產(chǎn)品和系統(tǒng)設(shè)計(jì)者更深刻的領(lǐng)會(huì)以“用戶為中心用戶為中心”的設(shè)的設(shè)計(jì)原則；計(jì)原則； 5.在界面測(cè)試與評(píng)價(jià)過(guò)程中形成的一些評(píng)價(jià)標(biāo)準(zhǔn)和設(shè)計(jì)原則對(duì)在界面測(cè)試與評(píng)價(jià)過(guò)程中形成的一些評(píng)價(jià)標(biāo)準(zhǔn)和設(shè)計(jì)原則對(duì)

8、界面設(shè)計(jì)有直接的指導(dǎo)作用。界面設(shè)計(jì)有直接的指導(dǎo)作用。5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)5.1.4顯示與操控界面設(shè)計(jì)顯示與操控界面設(shè)計(jì)1.顯示界面設(shè)計(jì)顯示界面設(shè)計(jì)（1）儀表顯示界面）儀表顯示界面 數(shù)字式顯示界面數(shù)字式顯示界面 刻度指針式顯示界面刻度指針式顯示界面 （2）信號(hào)顯示界面）信號(hào)顯示界面（3）屏幕顯示界面）屏幕顯示界面5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)5.1.4顯示與操控界面設(shè)計(jì)顯示與操控界面設(shè)計(jì)2.操控界面設(shè)計(jì)操控界面設(shè)計(jì)（1）操控界面的分類(lèi)）操控界面的分類(lèi) 按操控方式按操控方式 按操控功能按操控功能 按操控運(yùn)動(dòng)軌跡按操控運(yùn)動(dòng)軌跡 旋轉(zhuǎn)式操控界面旋轉(zhuǎn)式操控界面 移動(dòng)式操控界面移動(dòng)式操控界面 按

9、壓式操控界面按壓式操控界面 5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)5.1.4顯示與操控界面設(shè)計(jì)顯示與操控界面設(shè)計(jì)（2）操控器編碼）操控器編碼 形狀編碼形狀編碼 尺寸編碼尺寸編碼 色彩編碼色彩編碼 材質(zhì)編碼材質(zhì)編碼 位置編碼位置編碼 標(biāo)志編碼標(biāo)志編碼5.1人機(jī)界面設(shè)計(jì)人機(jī)界面設(shè)計(jì)5.1.4顯示與操控界面設(shè)計(jì)顯示與操控界面設(shè)計(jì)3.顯控協(xié)調(diào)性設(shè)計(jì)顯控協(xié)調(diào)性設(shè)計(jì)（1）概念協(xié)調(diào)性：）概念協(xié)調(diào)性：這是指顯示與控制在概念上要保持統(tǒng)一，同時(shí)與人的期望相一致； （2）空間協(xié)調(diào)性：）空間協(xié)調(diào)性：指顯示與操控在空間位置上的關(guān)系與人的期望的一致性；（3）運(yùn)動(dòng)協(xié)調(diào)性：）運(yùn)動(dòng)協(xié)調(diào)性：根據(jù)人的生理和心理特性，人對(duì)顯示界面與操控界面

10、的運(yùn)動(dòng)方向有一定的習(xí)慣定式； （4）量比協(xié)調(diào)性：）量比協(xié)調(diào)性：在人機(jī)界面設(shè)計(jì)中，通過(guò)操控界面對(duì)產(chǎn)品進(jìn)行定量調(diào)節(jié)或連續(xù)控制，操控量通過(guò)顯示界面反映出來(lái)，兩者的量比變化要保持一定的協(xié)調(diào)關(guān)系。 5.2交互設(shè)計(jì)交互設(shè)計(jì)15.2.1交互設(shè)計(jì)的含義交互設(shè)計(jì)的含義 2 5.2.2人機(jī)交互的含義人機(jī)交互的含義 3 5.2.3交互設(shè)計(jì)的目標(biāo)和程序交互設(shè)計(jì)的目標(biāo)和程序 45.2.4交互設(shè)計(jì)的原則、技能和方法交互設(shè)計(jì)的原則、技能和方法5.2交互設(shè)計(jì)交互設(shè)計(jì)5.2.1交互設(shè)計(jì)的含義交互設(shè)計(jì)的含義 關(guān)于交互設(shè)計(jì)，目前還沒(méi)有一個(gè)明確的定義，為了便于更好地理解這個(gè)概念，我們?cè)谶@里給出一個(gè)關(guān)于交互設(shè)計(jì)的粗淺定義。 交互設(shè)計(jì)（

11、交互設(shè)計(jì)（interaction design）是指為用戶與產(chǎn)品或系統(tǒng)之）是指為用戶與產(chǎn)品或系統(tǒng)之間的交流和互動(dòng)進(jìn)行設(shè)計(jì)，以更好地滿足人們?nèi)粘５墓ぷ魃钚枨?。間的交流和互動(dòng)進(jìn)行設(shè)計(jì)，以更好地滿足人們?nèi)粘５墓ぷ魃钚枨蟆?界面設(shè)計(jì)與交互設(shè)計(jì)的區(qū)別：界面設(shè)計(jì)與交互設(shè)計(jì)的區(qū)別： 交互設(shè)計(jì)是界面設(shè)計(jì)的延伸，所有的“交互問(wèn)題”都是在“界面”上發(fā)生的，“界面”是交互行為產(chǎn)生的基礎(chǔ)，“交互”是界面設(shè)計(jì)的最終目的。 界面更強(qiáng)調(diào)靜態(tài)的呈現(xiàn)，而交互則更強(qiáng)調(diào)交流與互動(dòng)的動(dòng)態(tài)過(guò)程。 5.2交互設(shè)計(jì)交互設(shè)計(jì)5.2.1交互設(shè)計(jì)的含義交互設(shè)計(jì)的含義 美國(guó)設(shè)計(jì)師美國(guó)設(shè)計(jì)師Dan Saffer在在為交互的設(shè)計(jì)：創(chuàng)造智能化的應(yīng)用

12、程為交互的設(shè)計(jì)：創(chuàng)造智能化的應(yīng)用程序和聰明的設(shè)備序和聰明的設(shè)備一書(shū)中列出了交互設(shè)計(jì)所涉及的相關(guān)學(xué)科：一書(shū)中列出了交互設(shè)計(jì)所涉及的相關(guān)學(xué)科： 信息構(gòu)架（信息構(gòu)架（IA） 工業(yè)設(shè)計(jì)（工業(yè)設(shè)計(jì)（ID） 傳達(dá)設(shè)計(jì)（傳達(dá)設(shè)計(jì)（CD） 用戶體驗(yàn)設(shè)計(jì)（用戶體驗(yàn)設(shè)計(jì)（UED） 用戶界面工程（用戶界面工程（UIE） 人機(jī)交互（人機(jī)交互（HCI） 可用性工程（可用性工程（UE） 人因工程（人因工程（HF） 5.2交互設(shè)計(jì)交互設(shè)計(jì)5.2.2人機(jī)交互的含義人機(jī)交互的含義 交互設(shè)計(jì)與人機(jī)界面設(shè)計(jì)一樣，有廣義和狹義之分：交互設(shè)計(jì)與人機(jī)界面設(shè)計(jì)一樣，有廣義和狹義之分： 一般我們所說(shuō)的“人機(jī)交互”特指狹義的交互設(shè)計(jì)，事實(shí)上，

13、廣義 的交互設(shè)計(jì)的概念正是在對(duì)人機(jī)交互問(wèn)題的研究基礎(chǔ)上發(fā)展起來(lái)的。 人機(jī)交互是指用戶與計(jì)人機(jī)交互是指用戶與計(jì) 算機(jī)系統(tǒng)之間的通信。美國(guó)計(jì)算機(jī)學(xué)會(huì)算機(jī)系統(tǒng)之間的通信。美國(guó)計(jì)算機(jī)學(xué)會(huì)（ACM）對(duì)人機(jī)交互學(xué)的定義）對(duì)人機(jī)交互學(xué)的定義 是是“關(guān)于設(shè)計(jì)、評(píng)價(jià)和實(shí)現(xiàn)供人們使用關(guān)于設(shè)計(jì)、評(píng)價(jià)和實(shí)現(xiàn)供人們使用的交互式計(jì)算機(jī)系統(tǒng)，是研究圍的交互式計(jì)算機(jī)系統(tǒng)，是研究圍 繞這些方面主要現(xiàn)象的科學(xué)繞這些方面主要現(xiàn)象的科學(xué)”。 5.2交互設(shè)計(jì)交互設(shè)計(jì)5.2.2人機(jī)交互的含義人機(jī)交互的含義 人機(jī)交互的過(guò)程需要利用交互設(shè)備作為媒體，交互設(shè)備一般包括： 1.輸入設(shè)備輸入設(shè)備 輸入設(shè)備是完成人向計(jì)算機(jī)傳送信息的媒體，常用的輸入

14、設(shè)備有鍵輸入設(shè)備是完成人向計(jì)算機(jī)傳送信息的媒體，常用的輸入設(shè)備有鍵盤(pán)、鼠標(biāo)、光筆、跟蹤球、觸摸式屏幕、操縱桿、圖形輸入板、聲音輸盤(pán)、鼠標(biāo)、光筆、跟蹤球、觸摸式屏幕、操縱桿、圖形輸入板、聲音輸入設(shè)備、視線跟蹤器和數(shù)據(jù)手套等。入設(shè)備、視線跟蹤器和數(shù)據(jù)手套等。 2.輸出設(shè)備輸出設(shè)備 輸出設(shè)備是完成計(jì)算機(jī)向人傳送信息的媒體，常用的輸出設(shè)備有輸出設(shè)備是完成計(jì)算機(jī)向人傳送信息的媒體，常用的輸出設(shè)備有CRT屏幕顯示器、平板顯示設(shè)備、投影儀、頭盔顯示器、電視眼鏡、聲屏幕顯示器、平板顯示設(shè)備、投影儀、頭盔顯示器、電視眼鏡、聲音輸出設(shè)備、打印輸出設(shè)備等。音輸出設(shè)備、打印輸出設(shè)備等。 5.2交互設(shè)計(jì)交互設(shè)計(jì)5.2.

15、3交互設(shè)計(jì)的目標(biāo)和程序交互設(shè)計(jì)的目標(biāo)和程序 產(chǎn)品交互設(shè)計(jì)的目標(biāo)主要有兩個(gè)方面：產(chǎn)品交互設(shè)計(jì)的目標(biāo)主要有兩個(gè)方面： 可用性目標(biāo)可用性目標(biāo) 用戶體驗(yàn)?zāi)繕?biāo)用戶體驗(yàn)?zāi)繕?biāo) 可用性目標(biāo)側(cè)重于產(chǎn)品的物理功能，而用戶體驗(yàn)?zāi)繕?biāo)則側(cè)重可用性目標(biāo)側(cè)重于產(chǎn)品的物理功能，而用戶體驗(yàn)?zāi)繕?biāo)則側(cè)重于產(chǎn)品的精神功能，兩者的共同宗旨是于產(chǎn)品的精神功能，兩者的共同宗旨是“以人為本以人為本”。 5.2交互設(shè)計(jì)交互設(shè)計(jì)5.2.3交互設(shè)計(jì)的目標(biāo)和程序交互設(shè)計(jì)的目標(biāo)和程序 交互設(shè)計(jì)系統(tǒng)是由人（交互設(shè)計(jì)系統(tǒng)是由人（people）、人的行為（）、人的行為（activity）、產(chǎn)）、產(chǎn)品使用的情境（品使用的情境（context）和產(chǎn)品所融合的技

16、術(shù)（）和產(chǎn)品所融合的技術(shù)（technology）以及最終完成的產(chǎn)品（以及最終完成的產(chǎn)品（product）五個(gè)基本元素（簡(jiǎn)稱(chēng)）五個(gè)基本元素（簡(jiǎn)稱(chēng)PACT-P）組成的系統(tǒng)，即交互系統(tǒng)（組成的系統(tǒng)，即交互系統(tǒng)（interactive system）。）。 5.2交互設(shè)計(jì)交互設(shè)計(jì)5.2.3交互設(shè)計(jì)的目標(biāo)和程序交互設(shè)計(jì)的目標(biāo)和程序 產(chǎn)品交互設(shè)計(jì)的程序：產(chǎn)品交互設(shè)計(jì)的程序：1.用戶（人）分析用戶（人）分析 （1）用戶類(lèi)型的界定）用戶類(lèi)型的界定 （2）用戶分析）用戶分析 （3）用戶的具體化（設(shè)定人物角色）用戶的具體化（設(shè)定人物角色）2.用戶行為分析用戶行為分析 （1）交互行為的類(lèi)型）交互行為的類(lèi)型 （2）交

17、互方式的選擇）交互方式的選擇3.交互情境分析交互情境分析4.技術(shù)分析技術(shù)分析5.產(chǎn)品分析產(chǎn)品分析5.2交互設(shè)計(jì)交互設(shè)計(jì)5.2.4交互設(shè)計(jì)的原則、技能和方法交互設(shè)計(jì)的原則、技能和方法 產(chǎn)品交互設(shè)計(jì)產(chǎn)品交互設(shè)計(jì)需要掌握必要的技能。1.數(shù)據(jù)分析手段的表達(dá)數(shù)據(jù)分析手段的表達(dá) （1）線性流程圖 （2）循環(huán)流程圖 （3）網(wǎng)狀圖 （4）維恩圖 （5）矩陣圖 2.情節(jié)的構(gòu)思情節(jié)的構(gòu)思3.故事板的繪制故事板的繪制4.情緒板的創(chuàng)建情緒板的創(chuàng)建5.2交互設(shè)計(jì)交互設(shè)計(jì)5.2.4交互設(shè)計(jì)的原則、技能和方法交互設(shè)計(jì)的原則、技能和方法 交互設(shè)計(jì)的典型方法：交互設(shè)計(jì)的典型方法：1.迭代方法迭代方法2.原型方法原型方法3.場(chǎng)景方法場(chǎng)景方法4.目標(biāo)導(dǎo)向法目標(biāo)導(dǎo)向法5.橫向思維方法與創(chuàng)意橫向思維方法與創(chuàng)意5.3人機(jī)界面與交互技術(shù)的發(fā)展及應(yīng)用人機(jī)界面與