多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)省公開(kāi)課一等獎(jiǎng)全國(guó)示范課微課金獎(jiǎng)?wù)n件

學(xué)習(xí)目標(biāo)1.了解人機(jī)交互界面設(shè)計(jì)2.掌握設(shè)計(jì)多媒體教學(xué)軟件主界面方法3.掌握設(shè)計(jì)多媒體教學(xué)軟件子界面方法4.掌握交互界面設(shè)計(jì)普通方法第10章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)1/2310.1.1交互界面基本概念第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述1．交互設(shè)計(jì)交互設(shè)計(jì)（InteractionDesign）作為一門(mén)關(guān)注交互體驗(yàn)新學(xué)科于上個(gè)世紀(jì)八十年代產(chǎn)生，它由比爾莫格里奇在1984年一次設(shè)計(jì)會(huì)議上提出，并將交互設(shè)計(jì)命名為“軟面（SoftFace）”，以后更名為“InteractionDesign”（交互設(shè)計(jì)）。2．界面設(shè)計(jì)用戶(hù)界面（UI）本意是UserInterface也就是用戶(hù)與界面關(guān)系。近年來(lái)，因?yàn)閳D形化界面軟件普及，用戶(hù)對(duì)軟件界面可操作性以及操作舒適性等方面提出了更高要求，友好人機(jī)界面設(shè)計(jì)已經(jīng)成為教學(xué)軟件開(kāi)發(fā)一個(gè)主要組成部分。2/2310.1.1交互界面基本概念第十章多媒體教學(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)布局，格調(diào)特征等，界面作用是支撐有效交互。反之，交互行為是界面設(shè)計(jì)約束與參考，當(dāng)交互設(shè)計(jì)完成時(shí)，就提出了對(duì)界面設(shè)計(jì)要求。在進(jìn)行界面設(shè)計(jì)時(shí)需要明確界面是為交互行為服務(wù)，不能夠妨礙交互行為。3/2310.1.2界面設(shè)計(jì)工作流程第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述1．結(jié)構(gòu)設(shè)計(jì)StructureDesign結(jié)構(gòu)設(shè)計(jì)也成概念設(shè)計(jì)（ConceptualDesign），是界面設(shè)計(jì)骨架。經(jīng)過(guò)對(duì)用戶(hù)研究和任務(wù)分析，制訂出產(chǎn)品整體架構(gòu)。結(jié)構(gòu)設(shè)計(jì)類(lèi)似與教學(xué)軟件中界面腳本設(shè)計(jì)，能夠經(jīng)過(guò)基于紙質(zhì)設(shè)計(jì)方案供集體討論與修改。在結(jié)構(gòu)設(shè)計(jì)中，需要完成目錄體系設(shè)計(jì)以及邏輯分類(lèi)和語(yǔ)詞定義工作，并力爭(zhēng)不在之后工作中進(jìn)行修改。4/2310.1.2界面設(shè)計(jì)工作流程第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述2．交互設(shè)計(jì)InteractiveDesign交互設(shè)計(jì)基本標(biāo)準(zhǔn)以下：●有清楚錯(cuò)誤提醒?！褡層脩?hù)用盡可能少操作控制界面，需要同時(shí)在畫(huà)面上出現(xiàn)多個(gè)層次目錄結(jié)構(gòu)?！駷橥粋€(gè)交互提供各種操作可能性?！裨试S中止。●使用學(xué)習(xí)者易懂文字與圖示，防止技術(shù)術(shù)語(yǔ)。●提升交互反饋速度，防止學(xué)習(xí)者等候。5/2310.1.2界面設(shè)計(jì)工作流程第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述●方便退出?！耢`活實(shí)用導(dǎo)航功效，既可讓用戶(hù)知道自己當(dāng)前位置，又方便其自由跳轉(zhuǎn)。3．視覺(jué)設(shè)計(jì)VisualDesign標(biāo)準(zhǔn)概括以下：（1）界面清楚簡(jiǎn)約●在技術(shù)允許情況下可讓用戶(hù)選擇或定制界面。●完善視覺(jué)清楚度。圖片、文字布局和隱喻不要讓用戶(hù)去猜。

6/2310.1.2界面設(shè)計(jì)工作流程第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.1人機(jī)交互界面概述（2）使用圖形化設(shè)計(jì)●提供圖形符號(hào)，盡可能降低文字交互提醒?！駡D形符號(hào)使用盡可能符合日常生活習(xí)慣?！褚粯庸πв靡粯訄D形。（3）界面協(xié)調(diào)一致●界面布局設(shè)計(jì)協(xié)調(diào)一致（如退出按鈕位置設(shè)計(jì)等）?！裆逝c內(nèi)容。整體軟件不超出5個(gè)色系，近似顏色表示近似意思。7/2310.1.3教學(xué)軟件交互界面設(shè)計(jì)標(biāo)準(zhǔn)第十章多媒體教學(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）美觀(guān)大方，前后一致8/2310.1.3教學(xué)軟件交互界面設(shè)計(jì)標(biāo)準(zhǔn)第十章多媒體教學(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ī)律9/2310.2.1教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)特點(diǎn)第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)包含界面對(duì)話(huà)設(shè)計(jì)，數(shù)據(jù)輸入界面設(shè)計(jì)，屏幕設(shè)計(jì)和控制界面設(shè)計(jì)等。在教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)中，因?yàn)榻缑嬖O(shè)計(jì)與程序設(shè)計(jì)分工，可將界面分為主界面與子界面。主界面設(shè)計(jì)是為了處理多媒體教學(xué)軟件不一樣畫(huà)面（教學(xué)內(nèi)容）之間連接與跳轉(zhuǎn)方式，子界面是主界面中一個(gè)區(qū)域（如功效區(qū)）交互界面設(shè)計(jì)。10/2310.2.2主界面結(jié)構(gòu)設(shè)計(jì)第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)一、分屏式設(shè)計(jì)在這里制作一個(gè)向前和向后翻頁(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è)。經(jīng)過(guò)這個(gè)程序主要掌握顯示圖標(biāo)使用方法，擦除圖標(biāo)使用方法，交互圖標(biāo)、框架圖標(biāo)以及導(dǎo)航圖標(biāo)使用方法及其它們屬性對(duì)話(huà)框設(shè)置。11/2310.2.2主界面結(jié)構(gòu)設(shè)計(jì)第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)二、分區(qū)式設(shè)計(jì)下面介紹一個(gè)使用分區(qū)式交互編寫(xiě)程序，這個(gè)程序主要時(shí)依據(jù)用戶(hù)填寫(xiě)數(shù)據(jù)進(jìn)行畫(huà)線(xiàn)，這些數(shù)據(jù)包含線(xiàn)長(zhǎng)度，線(xiàn)寬度和線(xiàn)顏色（這里演示使用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à)線(xiàn)顏色和是否畫(huà)線(xiàn)和從新畫(huà)線(xiàn)。經(jīng)過(guò)本程序掌握顯示圖標(biāo)使用方法，交互圖標(biāo)使用，文本響應(yīng)、按鈕響應(yīng)屬性設(shè)置，以及系統(tǒng)變量使用等。12/2310.2.2主界面結(jié)構(gòu)設(shè)計(jì)第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)三、分屏分區(qū)混合式設(shè)計(jì)在本例中點(diǎn)擊對(duì)應(yīng)按鈕話(huà)，將在整個(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è)向下滾屏效果。這個(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ù)使用等。13/2310.2.3子界面結(jié)構(gòu)設(shè)計(jì)第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)一、子界面彈出式平時(shí)在使用一些程序時(shí)候經(jīng)常會(huì)碰到彈出對(duì)話(huà)框情況，那么假如在編寫(xiě)程序種也能夠彈出對(duì)話(huà)框話(huà)，那么會(huì)使編寫(xiě)程序更含有實(shí)用性。怎樣使程序彈出一個(gè)對(duì)話(huà)框呢？在下面例子中將向大家介紹。這里主要使用是Authorware中自帶Winapi.u32中Messagebox（）這個(gè)外部函數(shù)。經(jīng)過(guò)本例學(xué)習(xí)掌握顯示圖標(biāo)使用方法，按鈕交互響應(yīng)使用，quit（）等系統(tǒng)函數(shù)使用和Messagebox（）等外部函數(shù)加載和使用。14/2310.2.3子界面結(jié)構(gòu)設(shè)計(jì)第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)二、子界面伸出式在使用軟件時(shí)候都已經(jīng)接觸過(guò)了下拉菜單，下面就像大家介紹一個(gè)利用外部函數(shù)在A(yíng)uthorware中制作以下菜單例子。過(guò)本例掌握顯示圖標(biāo)使用方法，交互圖標(biāo)中熱區(qū)響應(yīng)方式使用方法，暫時(shí)庫(kù)創(chuàng)建和使用方法，外部菜單編寫(xiě)方法以及控制下拉菜單外部函數(shù)使用方法及其格式、功效。15/2310.2.3子界面結(jié)構(gòu)設(shè)計(jì)第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.2教學(xué)軟件界面結(jié)構(gòu)設(shè)計(jì)三、子界面拖出式這是一個(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)使用等。16/2310.3.1教學(xué)軟件中人機(jī)交互發(fā)展第十章多媒體教學(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ì)技巧17/2310.3.2菜單型交互設(shè)計(jì)技巧第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)因?yàn)锳uthorware軟件下拉菜單僅支持一層菜單，想要實(shí)現(xiàn)第子菜單功效則需要使用程序設(shè)計(jì)實(shí)現(xiàn)，本例就怎樣實(shí)現(xiàn)實(shí)現(xiàn)多層菜單交互進(jìn)行討論。因?yàn)槠邢?，本例僅討論使用熱區(qū)交互設(shè)計(jì)三層菜單中一個(gè)分支情況，讀者能夠推廣到普通情況，靈活利用編輯理想復(fù)雜菜單。18/2310.3.3輸入型交互設(shè)計(jì)技巧第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)在A(yíng)uthorware中，主要經(jīng)過(guò)文本輸入和按鍵交互兩種交互方式實(shí)現(xiàn)信息輸入，使用文本輸入交互方式能夠利用系統(tǒng)變量NumEntry、NumEntry2、NumEntry3、EntryText分別統(tǒng)計(jì)輸入數(shù)字和文本。使用鍵盤(pán)輸入交互則更為靈活，需要進(jìn)行程序設(shè)計(jì)。19/2310.3.4觸動(dòng)型交互設(shè)計(jì)技巧第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)所謂觸動(dòng)式交互是指在教學(xué)軟件設(shè)計(jì)中，因?yàn)閮?nèi)容較多，需要分成若干部分，因?yàn)榻缑嬖O(shè)計(jì)需要，將多個(gè)部分內(nèi)容使用某一能夠觸動(dòng)場(chǎng)景中（如書(shū)架中書(shū)籍、抽屜等），本例經(jīng)過(guò)一個(gè)旋轉(zhuǎn)站柜設(shè)計(jì)，使用觸動(dòng)方式使其旋轉(zhuǎn)，完成交互界面設(shè)計(jì)。20/2310.3.5拖動(dòng)型交互設(shè)計(jì)技巧第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)在第五章中已經(jīng)討論了利用拖動(dòng)型交互設(shè)計(jì)畫(huà)面顏色改變，本節(jié)中經(jīng)過(guò)透鏡成像實(shí)例給出了邊拖動(dòng)邊繪圖方法，很多課件制作者使用這種方法時(shí)碰到了“繪圖速度太慢，一跟不上拖動(dòng)速度”難題，其實(shí)這并不是“繪圖速度太慢”造成，而是過(guò)早地再次進(jìn)入永久條件響應(yīng)造成，處理方法是讓繪圖慢一些（而不是快一些），詳細(xì)做法是在繪圖程序中插入一個(gè)等候圖標(biāo)（或透顯著示圖標(biāo)）。21/2310.3.6自然型交互設(shè)計(jì)技巧第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.3教學(xué)軟件交互設(shè)計(jì)技巧與實(shí)現(xiàn)自然型交互是一個(gè)仿真界面下交互設(shè)計(jì)，實(shí)現(xiàn)自然型交互，能夠經(jīng)過(guò)在A(yíng)uthorware中實(shí)現(xiàn)虛擬現(xiàn)實(shí)自然使用ActiveX技術(shù)實(shí)現(xiàn)（嚴(yán)格說(shuō)不是Authorware編程技巧），同時(shí)還能夠提升素材設(shè)計(jì)水平和程序編輯水平實(shí)現(xiàn)仿真界面，本節(jié)經(jīng)過(guò)播放器界面設(shè)計(jì)，探討自然型交互設(shè)計(jì)技巧。本例中交互設(shè)計(jì)嚴(yán)格來(lái)說(shuō)既屬于自然型交互又屬于拖動(dòng)型交互（曲線(xiàn)拖拽交互）。22/23第十章多媒體教學(xué)軟件交互界面與交互形式設(shè)計(jì)10.4本章小結(jié)以學(xué)習(xí)者為中心人