多媒體教學(xué)軟件交互界面與交互形式設(shè)計課件

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

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

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