學(xué)習(xí)目標(biāo)1.了解人機(jī)交互界面設(shè)計(jì)2.掌握設(shè)計(jì)多媒體教學(xué)軟件主界面的方法3.掌握設(shè)計(jì)多媒體教學(xué)軟件子界面的方法4.掌握交互界面設(shè)計(jì)的一般方法第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)學(xué)習(xí)目標(biāo)1.了解人機(jī)交互界面設(shè)計(jì)第10章多媒體教學(xué)110.1.1交互界面基本概念第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述1．交互設(shè)計(jì)交互設(shè)計(jì)（InteractionDesign）作為一門(mén)關(guān)注交互體驗(yàn)的新學(xué)科于20世紀(jì)80年代產(chǎn)生，它由比爾莫格里奇在1984年一次設(shè)計(jì)會(huì)議上提出，并將交互設(shè)計(jì)命名為“軟面（SoftFace）”，后來(lái)更名為“InteractionDesign”（交互設(shè)計(jì)）。2．界面設(shè)計(jì)用戶(hù)界面（UI）的本意是UserInterface也就是用戶(hù)與界面的關(guān)系。近年來(lái)，由于圖形化界面軟件的普及，用戶(hù)對(duì)軟件界面可操作性以及操作的舒適性等方面提出了更高的要求，友好的人機(jī)界面設(shè)計(jì)已經(jīng)成為教學(xué)軟件開(kāi)發(fā)的一個(gè)重要組成部分。10.1.1交互界面基本概念第10章多媒體教學(xué)軟件交210.1.1交互界面基本概念第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述3．交互設(shè)計(jì)與界面設(shè)計(jì)交互設(shè)計(jì)不等同與界面設(shè)計(jì)。交互設(shè)計(jì)更加注重教學(xué)軟件和學(xué)習(xí)者行為上的交互以及交互的過(guò)程，這一過(guò)程可以不倚賴(lài)于界面（聲音指令也是交互）。界面主要指畫(huà)面的素材組成，結(jié)構(gòu)布局，風(fēng)格特征等，界面的作用是支撐有效的交互。反之，交互行為是界面設(shè)計(jì)的約束與參照，當(dāng)交互設(shè)計(jì)完成時(shí)，就提出了對(duì)界面設(shè)計(jì)的要求。在進(jìn)行界面設(shè)計(jì)時(shí)需要明確界面是為交互行為服務(wù)的，不可以阻礙交互行為。10.1.1交互界面基本概念第10章多媒體教學(xué)軟件交310.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述1．結(jié)構(gòu)設(shè)計(jì)（StructureDesign）結(jié)構(gòu)設(shè)計(jì)也成概念設(shè)計(jì)（ConceptualDesign），是界面設(shè)計(jì)的骨架。通過(guò)對(duì)用戶(hù)研究和任務(wù)分析，制定出產(chǎn)品的整體架構(gòu)。結(jié)構(gòu)設(shè)計(jì)類(lèi)似與教學(xué)軟件中的界面腳本設(shè)計(jì)，可以通過(guò)基于紙質(zhì)的設(shè)計(jì)方案供集體討論與修改。在結(jié)構(gòu)設(shè)計(jì)中，需要完成目錄體系設(shè)計(jì)以及邏輯分類(lèi)和語(yǔ)詞定義工作，并力求不在之后的工作中進(jìn)行修改。10.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件410.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述2．交互設(shè)計(jì)（InteractiveDesign）交互設(shè)計(jì)的基本原則如下：●有清楚的錯(cuò)誤提示。●讓用戶(hù)用盡可能少的操作控制界面，需要同時(shí)在畫(huà)面上出現(xiàn)多個(gè)層次的目錄結(jié)構(gòu)。●為同一種交互提供多種操作可能性。●允許中斷。●使用學(xué)習(xí)者易懂的文字與圖示，避免技術(shù)術(shù)語(yǔ)。●提高交互反饋速度，避免學(xué)習(xí)者等待。10.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件510.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述●方便退出。●靈活實(shí)用的導(dǎo)航功能，既可讓用戶(hù)知道自己當(dāng)前的位置，又方便其自由跳轉(zhuǎn)。3．視覺(jué)設(shè)計(jì)(VisualDesign)原則概括如下：（1）界面清晰簡(jiǎn)約●在技術(shù)允許的情況下可讓用戶(hù)選擇或定制界面。●完善視覺(jué)的清晰度。圖片、文字的布局和隱喻不要讓用戶(hù)去猜。

10.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件610.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述（2）使用圖形化設(shè)計(jì)●提供圖形符號(hào)，盡量減少文字交互提示。●圖形符號(hào)的使用盡量符合日常生活的習(xí)慣。●同樣功能用同樣的圖形。（3）界面協(xié)調(diào)一致●界面布局設(shè)計(jì)的協(xié)調(diào)一致（如退出按鈕的位置設(shè)計(jì)等）。●色彩與內(nèi)容。整體軟件不超過(guò)5個(gè)色系，近似的顏色表示近似的意思。10.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件710.1.3教學(xué)軟件交互界面設(shè)計(jì)原則第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述1．操作簡(jiǎn)便（1）安裝運(yùn)行簡(jiǎn)便（2）菜單簡(jiǎn)明合理（3）內(nèi)容簡(jiǎn)潔明了（4）提供幫助信息2．布局合理前后一致（1）恰當(dāng)布置，主體突出（2）重點(diǎn)集中，視點(diǎn)明確（3）美觀大方，前后一致10.1.3教學(xué)軟件交互界面設(shè)計(jì)原則第10章多媒體810.1.3教學(xué)軟件交互界面設(shè)計(jì)原則第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述3．色彩搭配協(xié)調(diào)（1）需要表現(xiàn)對(duì)比的顏色搭配（2）需要表現(xiàn)調(diào)和的顏色搭配（3）使用配色技巧4．界面組接流暢（1）界面切換自然（2）增加畫(huà)面間的過(guò)渡（3）界面間的組接設(shè)計(jì)應(yīng)遵循學(xué)習(xí)規(guī)律10.1.3教學(xué)軟件交互界面設(shè)計(jì)原則第10章多媒體910.2.1教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)特點(diǎn)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)教學(xué)軟件界面的結(jié)構(gòu)設(shè)計(jì)包括界面對(duì)話設(shè)計(jì)，數(shù)據(jù)輸入界面設(shè)計(jì)，屏幕設(shè)計(jì)和控制界面設(shè)計(jì)等。在教學(xué)軟件的界面結(jié)構(gòu)設(shè)計(jì)中，由于界面設(shè)計(jì)與程序設(shè)計(jì)的分工，可將界面分為主界面與子界面。主界面設(shè)計(jì)是為了解決多媒體教學(xué)軟件的不同畫(huà)面（教學(xué)內(nèi)容）之間的連接與跳轉(zhuǎn)方式，子界面是主界面中的一個(gè)區(qū)域（如功能區(qū)）的交互界面設(shè)計(jì)。10.2.1教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)特點(diǎn)第10章多媒體教1010.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)1.分屏式設(shè)計(jì)在這里制作一種向前和向后翻頁(yè)的效果，當(dāng)點(diǎn)擊鼠標(biāo)左鍵的時(shí)候?qū)⒗^續(xù)向下翻頁(yè)，當(dāng)點(diǎn)擊鼠標(biāo)右鍵的時(shí)候?qū)⒑笸朔?yè)。在程序的開(kāi)始先用一個(gè)顯示圖標(biāo)顯示說(shuō)明性的文字，然后用按鈕交互制作一個(gè)開(kāi)始按鈕，最后用框架圖標(biāo)來(lái)實(shí)現(xiàn)翻頁(yè)。通過(guò)這個(gè)程序主要掌握顯示圖標(biāo)的使用方法，擦除圖標(biāo)的使用方法，交互圖標(biāo)、框架圖標(biāo)以及導(dǎo)航圖標(biāo)的使用方法及其它們屬性對(duì)話框的設(shè)置。10.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互1110.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)2.分區(qū)式設(shè)計(jì)下面介紹一種使用分區(qū)式交互編寫(xiě)的程序，這個(gè)程序主要時(shí)根據(jù)用戶(hù)填寫(xiě)的數(shù)據(jù)進(jìn)行畫(huà)線，這些數(shù)據(jù)包括線的長(zhǎng)度，線的寬度和線的顏色（這里演示使用RGB值表示）。程序的開(kāi)始使用一個(gè)顯示圖標(biāo)來(lái)顯示程序的背景，然后用文本響應(yīng)交互來(lái)輸入數(shù)值，并且應(yīng)用讀取數(shù)字的系統(tǒng)變量來(lái)將輸入的數(shù)字賦值給自定義的變量。在這個(gè)過(guò)程中用按鈕交互來(lái)控制是否改變畫(huà)線的顏色和是否畫(huà)線和從新畫(huà)線。通過(guò)本程序掌握顯示圖標(biāo)的使用方法，交互圖標(biāo)的使用，文本響應(yīng)、按鈕響應(yīng)的屬性的設(shè)置，以及系統(tǒng)變量的使用等。10.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互1210.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)3.分屏分區(qū)混合式設(shè)計(jì)在本例中點(diǎn)擊相應(yīng)按鈕的話，將在整個(gè)屏幕中出現(xiàn)和這個(gè)按鈕相關(guān)的下一級(jí)選項(xiàng)。當(dāng)需要進(jìn)入另一層菜單的時(shí)候需要返回上一層的菜單后在點(diǎn)擊要進(jìn)入項(xiàng)的按鈕。在整個(gè)界面變換的過(guò)程中還要出現(xiàn)一種向下滾屏的效果。這個(gè)程序主要使用顯示圖標(biāo)來(lái)實(shí)現(xiàn)內(nèi)容的顯示，用交互圖標(biāo)來(lái)控制進(jìn)入的二級(jí)菜單等一系列用戶(hù)可以執(zhí)行的操作。主要掌握顯示圖標(biāo)的使用方法，按鈕交互的使用方法，顯示過(guò)渡效果和擦除過(guò)渡效果的設(shè)置，等待圖標(biāo)的設(shè)置和quit（）函數(shù)的使用等。10.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互1310.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)1.子界面彈出式平時(shí)在使用一些程序的時(shí)候經(jīng)常會(huì)遇到彈出對(duì)話框的情況，那么如果在編寫(xiě)的程序種也可以彈出對(duì)話框的話，那么會(huì)使編寫(xiě)的程序更具有實(shí)用性。怎樣使程序彈出一個(gè)對(duì)話框呢？在下面的例子中將向大家介紹。這里主要使用的是Authorware中自帶的Winapi.u32中的Messagebox（）這個(gè)外部函數(shù)。通過(guò)本例的學(xué)習(xí)掌握顯示圖標(biāo)的使用方法，按鈕交互響應(yīng)的使用，quit（）等系統(tǒng)函數(shù)的使用和Messagebox（）等外部函數(shù)的加載和使用。10.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交1410.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)2.子界面伸出式在使用軟件的時(shí)候都已經(jīng)接觸過(guò)了下拉菜單，下面就像大家介紹一種利用外部函數(shù)在Authorware中制作下列菜單的例子。過(guò)本例掌握顯示圖標(biāo)的使用方法，交互圖標(biāo)中的熱區(qū)響應(yīng)方式的使用方法，臨時(shí)庫(kù)的創(chuàng)建和使用方法，外部菜單的編寫(xiě)方法以及控制下拉菜單的外部函數(shù)的使用方法及其格式、功能。10.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交1510.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)3.子界面拖出式這是一個(gè)模擬浮動(dòng)面板的例子，主要使用了條件響應(yīng)的方式。來(lái)偵測(cè)鼠標(biāo)的動(dòng)作，然后根據(jù)鼠標(biāo)的動(dòng)作來(lái)執(zhí)行一些效果，包括拖動(dòng)、交互和將浮動(dòng)面板轉(zhuǎn)換乘固定菜單欄等。主要掌握條件響應(yīng)的使用方法，與鼠標(biāo)動(dòng)作有關(guān)的一些系統(tǒng)函數(shù)與變量的使用，移動(dòng)圖標(biāo)的使用等。10.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交1610.3.1教學(xué)軟件中人機(jī)交互的發(fā)展第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)1．命令語(yǔ)言用戶(hù)界面2．圖形用戶(hù)界面3．多媒體用戶(hù)界面4．多通道用戶(hù)界面5．虛擬現(xiàn)實(shí)技術(shù)6．教學(xué)軟件中人機(jī)交互的發(fā)展7．使用Authorware開(kāi)發(fā)教學(xué)軟件中的交互設(shè)計(jì)技巧10.3.1教學(xué)軟件中人機(jī)交互的發(fā)展第10章多媒體1710.3.2菜單型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)由于Authorware軟件的下拉菜單僅支持一層菜單，想要實(shí)現(xiàn)第子菜單功能則需要使用程序設(shè)計(jì)實(shí)現(xiàn)，本例就如何實(shí)現(xiàn)實(shí)現(xiàn)多層菜單交互進(jìn)行討論。由于篇幅有限，本例僅討論使用熱區(qū)交互設(shè)計(jì)三層菜單中一個(gè)分支的情況，讀者可以推廣到一般情況，靈活運(yùn)用編輯理想的復(fù)雜菜單。10.3.2菜單型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟1810.3.3輸入型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)在Authorware中，主要通過(guò)文本輸入和按鍵交互兩種交互方式實(shí)現(xiàn)信息的輸入，使用文本輸入交互方式可以運(yùn)用系統(tǒng)變量NumEntry、NumEntry2、NumEntry3、EntryText分別記錄輸入的數(shù)字和文本。使用鍵盤(pán)輸入交互則更為靈活，需要進(jìn)行程序設(shè)計(jì)。10.3.3輸入型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟1910.3.4觸動(dòng)型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)所謂觸動(dòng)式交互是指在教學(xué)軟件設(shè)計(jì)中，由于內(nèi)容較多，需要分成若干部分，由于界面設(shè)計(jì)的需要，將多個(gè)部分的內(nèi)容使用某一可以觸動(dòng)的場(chǎng)景中（如書(shū)架中的書(shū)籍、抽屜等），本例通過(guò)一個(gè)旋轉(zhuǎn)的站柜設(shè)計(jì)，使用觸動(dòng)的方式使其旋轉(zhuǎn)，完成交互界面的設(shè)計(jì)。10.3.4觸動(dòng)型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟2010.3.5拖動(dòng)型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)在第5章中已經(jīng)討論了利用拖動(dòng)型交互設(shè)計(jì)畫(huà)面顏色的改變，本節(jié)中通過(guò)透鏡成像的實(shí)例給出了邊拖動(dòng)邊繪圖的方法，很多課件制作者使用這種方法時(shí)遇到了“繪圖速度太慢，一跟不上拖動(dòng)速度”的難題，其實(shí)這并不是“繪圖速度太慢”造成，而是過(guò)早地再次進(jìn)入永久條件響應(yīng)造成的，解決的方法是讓繪圖慢一些（而不是快一些），具體做法是在繪圖程序中插入一個(gè)等待圖標(biāo)（或透明顯示圖標(biāo)）。10.3.5拖動(dòng)型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟2110.3.6自然型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)自然型交互是一種仿真界面下的交互設(shè)計(jì)，實(shí)現(xiàn)自然型交互，可以通過(guò)在Authorware中實(shí)現(xiàn)虛擬現(xiàn)實(shí)自然使用ActiveX技術(shù)實(shí)現(xiàn)（嚴(yán)格說(shuō)不是Authorware編程技巧），同時(shí)還可以提高素材的設(shè)計(jì)水平和程序編輯的水平實(shí)現(xiàn)仿真界面，本節(jié)通過(guò)播放器的界面設(shè)計(jì)，探討自然型交互設(shè)計(jì)的技巧。本例中的交互設(shè)計(jì)嚴(yán)格來(lái)說(shuō)既屬于自然型交互又屬于拖動(dòng)型交互（曲線拖拽交互）。10.3.6自然型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟22第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.4本章小結(jié)以學(xué)習(xí)者為中心的人機(jī)交互系統(tǒng)應(yīng)具備以下特點(diǎn)： 1．適應(yīng)性 2．個(gè)性化 3．智能性 4．隱含性在以學(xué)習(xí)者為中心的個(gè)性化教學(xué)軟件交互界面設(shè)計(jì)中，首先要對(duì)學(xué)習(xí)者進(jìn)行分析，建立起完整的學(xué)習(xí)者模型，學(xué)習(xí)者模型包括學(xué)習(xí)者靜態(tài)模型和認(rèn)知模型以及動(dòng)態(tài)操作模型。在遠(yuǎn)程學(xué)習(xí)中，學(xué)生的個(gè)體學(xué)習(xí)多數(shù)是通過(guò)鼠標(biāo)和鍵盤(pán)進(jìn)行的，操作的過(guò)程會(huì)產(chǎn)生大量的操作數(shù)據(jù)，包括學(xué)習(xí)者學(xué)習(xí)活動(dòng)過(guò)程中的交互性信息、反饋性信息、自主學(xué)習(xí)活動(dòng)信息，對(duì)這些信息采集、分類(lèi)、組織、處理，構(gòu)成學(xué)生的操作數(shù)據(jù)庫(kù)。5．高效性6．導(dǎo)向性7．經(jīng)濟(jì)性8．一致性第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)以23學(xué)習(xí)目標(biāo)1.了解人機(jī)交互界面設(shè)計(jì)2.掌握設(shè)計(jì)多媒體教學(xué)軟件主界面的方法3.掌握設(shè)計(jì)多媒體教學(xué)軟件子界面的方法4.掌握交互界面設(shè)計(jì)的一般方法第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)學(xué)習(xí)目標(biāo)1.了解人機(jī)交互界面設(shè)計(jì)第10章多媒體教學(xué)2410.1.1交互界面基本概念第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述1．交互設(shè)計(jì)交互設(shè)計(jì)（InteractionDesign）作為一門(mén)關(guān)注交互體驗(yàn)的新學(xué)科于20世紀(jì)80年代產(chǎn)生，它由比爾莫格里奇在1984年一次設(shè)計(jì)會(huì)議上提出，并將交互設(shè)計(jì)命名為“軟面（SoftFace）”，后來(lái)更名為“InteractionDesign”（交互設(shè)計(jì)）。2．界面設(shè)計(jì)用戶(hù)界面（UI）的本意是UserInterface也就是用戶(hù)與界面的關(guān)系。近年來(lái)，由于圖形化界面軟件的普及，用戶(hù)對(duì)軟件界面可操作性以及操作的舒適性等方面提出了更高的要求，友好的人機(jī)界面設(shè)計(jì)已經(jīng)成為教學(xué)軟件開(kāi)發(fā)的一個(gè)重要組成部分。10.1.1交互界面基本概念第10章多媒體教學(xué)軟件交2510.1.1交互界面基本概念第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述3．交互設(shè)計(jì)與界面設(shè)計(jì)交互設(shè)計(jì)不等同與界面設(shè)計(jì)。交互設(shè)計(jì)更加注重教學(xué)軟件和學(xué)習(xí)者行為上的交互以及交互的過(guò)程，這一過(guò)程可以不倚賴(lài)于界面（聲音指令也是交互）。界面主要指畫(huà)面的素材組成，結(jié)構(gòu)布局，風(fēng)格特征等，界面的作用是支撐有效的交互。反之，交互行為是界面設(shè)計(jì)的約束與參照，當(dāng)交互設(shè)計(jì)完成時(shí)，就提出了對(duì)界面設(shè)計(jì)的要求。在進(jìn)行界面設(shè)計(jì)時(shí)需要明確界面是為交互行為服務(wù)的，不可以阻礙交互行為。10.1.1交互界面基本概念第10章多媒體教學(xué)軟件交2610.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述1．結(jié)構(gòu)設(shè)計(jì)（StructureDesign）結(jié)構(gòu)設(shè)計(jì)也成概念設(shè)計(jì)（ConceptualDesign），是界面設(shè)計(jì)的骨架。通過(guò)對(duì)用戶(hù)研究和任務(wù)分析，制定出產(chǎn)品的整體架構(gòu)。結(jié)構(gòu)設(shè)計(jì)類(lèi)似與教學(xué)軟件中的界面腳本設(shè)計(jì)，可以通過(guò)基于紙質(zhì)的設(shè)計(jì)方案供集體討論與修改。在結(jié)構(gòu)設(shè)計(jì)中，需要完成目錄體系設(shè)計(jì)以及邏輯分類(lèi)和語(yǔ)詞定義工作，并力求不在之后的工作中進(jìn)行修改。10.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件2710.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述2．交互設(shè)計(jì)（InteractiveDesign）交互設(shè)計(jì)的基本原則如下：●有清楚的錯(cuò)誤提示。●讓用戶(hù)用盡可能少的操作控制界面，需要同時(shí)在畫(huà)面上出現(xiàn)多個(gè)層次的目錄結(jié)構(gòu)。●為同一種交互提供多種操作可能性。●允許中斷。●使用學(xué)習(xí)者易懂的文字與圖示，避免技術(shù)術(shù)語(yǔ)。●提高交互反饋速度，避免學(xué)習(xí)者等待。10.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件2810.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述●方便退出。●靈活實(shí)用的導(dǎo)航功能，既可讓用戶(hù)知道自己當(dāng)前的位置，又方便其自由跳轉(zhuǎn)。3．視覺(jué)設(shè)計(jì)(VisualDesign)原則概括如下：（1）界面清晰簡(jiǎn)約●在技術(shù)允許的情況下可讓用戶(hù)選擇或定制界面。●完善視覺(jué)的清晰度。圖片、文字的布局和隱喻不要讓用戶(hù)去猜。

10.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件2910.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述（2）使用圖形化設(shè)計(jì)●提供圖形符號(hào)，盡量減少文字交互提示。●圖形符號(hào)的使用盡量符合日常生活的習(xí)慣。●同樣功能用同樣的圖形。（3）界面協(xié)調(diào)一致●界面布局設(shè)計(jì)的協(xié)調(diào)一致（如退出按鈕的位置設(shè)計(jì)等）。●色彩與內(nèi)容。整體軟件不超過(guò)5個(gè)色系，近似的顏色表示近似的意思。10.1.2界面設(shè)計(jì)的工作流程第10章多媒體教學(xué)軟件3010.1.3教學(xué)軟件交互界面設(shè)計(jì)原則第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述1．操作簡(jiǎn)便（1）安裝運(yùn)行簡(jiǎn)便（2）菜單簡(jiǎn)明合理（3）內(nèi)容簡(jiǎn)潔明了（4）提供幫助信息2．布局合理前后一致（1）恰當(dāng)布置，主體突出（2）重點(diǎn)集中，視點(diǎn)明確（3）美觀大方，前后一致10.1.3教學(xué)軟件交互界面設(shè)計(jì)原則第10章多媒體3110.1.3教學(xué)軟件交互界面設(shè)計(jì)原則第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述3．色彩搭配協(xié)調(diào)（1）需要表現(xiàn)對(duì)比的顏色搭配（2）需要表現(xiàn)調(diào)和的顏色搭配（3）使用配色技巧4．界面組接流暢（1）界面切換自然（2）增加畫(huà)面間的過(guò)渡（3）界面間的組接設(shè)計(jì)應(yīng)遵循學(xué)習(xí)規(guī)律10.1.3教學(xué)軟件交互界面設(shè)計(jì)原則第10章多媒體3210.2.1教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)特點(diǎn)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)教學(xué)軟件界面的結(jié)構(gòu)設(shè)計(jì)包括界面對(duì)話設(shè)計(jì)，數(shù)據(jù)輸入界面設(shè)計(jì)，屏幕設(shè)計(jì)和控制界面設(shè)計(jì)等。在教學(xué)軟件的界面結(jié)構(gòu)設(shè)計(jì)中，由于界面設(shè)計(jì)與程序設(shè)計(jì)的分工，可將界面分為主界面與子界面。主界面設(shè)計(jì)是為了解決多媒體教學(xué)軟件的不同畫(huà)面（教學(xué)內(nèi)容）之間的連接與跳轉(zhuǎn)方式，子界面是主界面中的一個(gè)區(qū)域（如功能區(qū)）的交互界面設(shè)計(jì)。10.2.1教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)特點(diǎn)第10章多媒體教3310.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)1.分屏式設(shè)計(jì)在這里制作一種向前和向后翻頁(yè)的效果，當(dāng)點(diǎn)擊鼠標(biāo)左鍵的時(shí)候?qū)⒗^續(xù)向下翻頁(yè)，當(dāng)點(diǎn)擊鼠標(biāo)右鍵的時(shí)候?qū)⒑笸朔?yè)。在程序的開(kāi)始先用一個(gè)顯示圖標(biāo)顯示說(shuō)明性的文字，然后用按鈕交互制作一個(gè)開(kāi)始按鈕，最后用框架圖標(biāo)來(lái)實(shí)現(xiàn)翻頁(yè)。通過(guò)這個(gè)程序主要掌握顯示圖標(biāo)的使用方法，擦除圖標(biāo)的使用方法，交互圖標(biāo)、框架圖標(biāo)以及導(dǎo)航圖標(biāo)的使用方法及其它們屬性對(duì)話框的設(shè)置。10.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互3410.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)2.分區(qū)式設(shè)計(jì)下面介紹一種使用分區(qū)式交互編寫(xiě)的程序，這個(gè)程序主要時(shí)根據(jù)用戶(hù)填寫(xiě)的數(shù)據(jù)進(jìn)行畫(huà)線，這些數(shù)據(jù)包括線的長(zhǎng)度，線的寬度和線的顏色（這里演示使用RGB值表示）。程序的開(kāi)始使用一個(gè)顯示圖標(biāo)來(lái)顯示程序的背景，然后用文本響應(yīng)交互來(lái)輸入數(shù)值，并且應(yīng)用讀取數(shù)字的系統(tǒng)變量來(lái)將輸入的數(shù)字賦值給自定義的變量。在這個(gè)過(guò)程中用按鈕交互來(lái)控制是否改變畫(huà)線的顏色和是否畫(huà)線和從新畫(huà)線。通過(guò)本程序掌握顯示圖標(biāo)的使用方法，交互圖標(biāo)的使用，文本響應(yīng)、按鈕響應(yīng)的屬性的設(shè)置，以及系統(tǒng)變量的使用等。10.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互3510.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)3.分屏分區(qū)混合式設(shè)計(jì)在本例中點(diǎn)擊相應(yīng)按鈕的話，將在整個(gè)屏幕中出現(xiàn)和這個(gè)按鈕相關(guān)的下一級(jí)選項(xiàng)。當(dāng)需要進(jìn)入另一層菜單的時(shí)候需要返回上一層的菜單后在點(diǎn)擊要進(jìn)入項(xiàng)的按鈕。在整個(gè)界面變換的過(guò)程中還要出現(xiàn)一種向下滾屏的效果。這個(gè)程序主要使用顯示圖標(biāo)來(lái)實(shí)現(xiàn)內(nèi)容的顯示，用交互圖標(biāo)來(lái)控制進(jìn)入的二級(jí)菜單等一系列用戶(hù)可以執(zhí)行的操作。主要掌握顯示圖標(biāo)的使用方法，按鈕交互的使用方法，顯示過(guò)渡效果和擦除過(guò)渡效果的設(shè)置，等待圖標(biāo)的設(shè)置和quit（）函數(shù)的使用等。10.2.2主界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互3610.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)1.子界面彈出式平時(shí)在使用一些程序的時(shí)候經(jīng)常會(huì)遇到彈出對(duì)話框的情況，那么如果在編寫(xiě)的程序種也可以彈出對(duì)話框的話，那么會(huì)使編寫(xiě)的程序更具有實(shí)用性。怎樣使程序彈出一個(gè)對(duì)話框呢？在下面的例子中將向大家介紹。這里主要使用的是Authorware中自帶的Winapi.u32中的Messagebox（）這個(gè)外部函數(shù)。通過(guò)本例的學(xué)習(xí)掌握顯示圖標(biāo)的使用方法，按鈕交互響應(yīng)的使用，quit（）等系統(tǒng)函數(shù)的使用和Messagebox（）等外部函數(shù)的加載和使用。10.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交3710.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)2.子界面伸出式在使用軟件的時(shí)候都已經(jīng)接觸過(guò)了下拉菜單，下面就像大家介紹一種利用外部函數(shù)在Authorware中制作下列菜單的例子。過(guò)本例掌握顯示圖標(biāo)的使用方法，交互圖標(biāo)中的熱區(qū)響應(yīng)方式的使用方法，臨時(shí)庫(kù)的創(chuàng)建和使用方法，外部菜單的編寫(xiě)方法以及控制下拉菜單的外部函數(shù)的使用方法及其格式、功能。10.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交3810.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)3.子界面拖出式這是一個(gè)模擬浮動(dòng)面板的例子，主要使用了條件響應(yīng)的方式。來(lái)偵測(cè)鼠標(biāo)的動(dòng)作，然后根據(jù)鼠標(biāo)的動(dòng)作來(lái)執(zhí)行一些效果，包括拖動(dòng)、交互和將浮動(dòng)面板轉(zhuǎn)換乘固定菜單欄等。主要掌握條件響應(yīng)的使用方法，與鼠標(biāo)動(dòng)作有關(guān)的一些系統(tǒng)函數(shù)與變量的使用，移動(dòng)圖標(biāo)的使用等。10.2.3子界面結(jié)構(gòu)設(shè)計(jì)第10章多媒體教學(xué)軟件交3910.3.1教學(xué)軟件中人機(jī)交互的發(fā)展第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)1．命令語(yǔ)言用戶(hù)界面2．圖形用戶(hù)界面3．多媒體用戶(hù)界面4．多通道用戶(hù)界面5．虛擬現(xiàn)實(shí)技術(shù)6．教學(xué)軟件中人機(jī)交互的發(fā)展7．使用Authorware開(kāi)發(fā)教學(xué)軟件中的交互設(shè)計(jì)技巧10.3.1教學(xué)軟件中人機(jī)交互的發(fā)展第10章多媒體4010.3.2菜單型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)由于Authorware軟件的下拉菜單僅支持一層菜單，想要實(shí)現(xiàn)第子菜單功能則需要使用程序設(shè)計(jì)實(shí)現(xiàn)，本例就如何實(shí)現(xiàn)實(shí)現(xiàn)多層菜單交互進(jìn)行討論。由于篇幅有限，本例僅討論使用熱區(qū)交互設(shè)計(jì)三層菜單中一個(gè)分支的情況，讀者可以推廣到一般情況，靈活運(yùn)用編輯理想的復(fù)雜菜單。10.3.2菜單型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟4110.3.3輸入型交互設(shè)計(jì)技巧第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)在Authorware中，主要通過(guò)文本輸入和按鍵交互兩種交互方式實(shí)現(xiàn)信息的輸入，使用文本輸入交互方式可以運(yùn)用系統(tǒng)變量NumEntry、NumEn