多媒體軟件界面設(shè)計課件

多媒體軟件界面設(shè)計一、多媒體軟件界面的概念二、多媒體軟件界面的類型三、多媒體軟件界面的整體設(shè)計四、編排注意事項五、動態(tài)畫面設(shè)計多媒體軟件界面設(shè)計一、多媒體軟件界面的概念一、多媒體軟件界面的概念

多媒體軟件界面是多媒體軟件的視覺表現(xiàn)形式，是軟件背景、交互形象、文字內(nèi)容、圖形圖像、動畫等各視覺要素的組合，是軟件最終的呈現(xiàn)模式和效果。

一、多媒體軟件界面的概念多媒體軟件界二、多媒體軟件界面的類型

多媒體軟件的界面按照功能來劃分主要分為主界面、目錄界面和內(nèi)容界面三類。二、多媒體軟件界面的類型多媒體軟件的界面按照功能來劃分主要主界面是呈現(xiàn)在觀眾面前的第一幅畫面。內(nèi)容信息：軟件名稱、制作單位、宣傳語。作用：吸引觀眾注意力，使觀眾做好進一步了解軟件內(nèi)容的準(zhǔn)備。設(shè)計主要要求視覺沖擊力較強，風(fēng)格個性明顯。

1.主界面主界面是呈現(xiàn)在觀眾面前的第一幅畫面。內(nèi)容信息：軟件名稱、制作2.目錄界面目錄界面是指包含軟件目錄的界面，內(nèi)容信息：軟件整體目錄結(jié)構(gòu)，以超鏈接的方式呈現(xiàn)。作用：導(dǎo)航，觀眾通過它來總體把握軟件的結(jié)構(gòu)內(nèi)容。設(shè)計主要要求頁面布局有條不紊，超鏈接形式清晰明確。2.目錄界面目錄界面是指包含軟件目錄的界面，內(nèi)容信息：軟件整內(nèi)容界面是指傳達(dá)具體信息的界面，是構(gòu)成多媒體軟件的主體，根據(jù)不同的軟件結(jié)構(gòu)可以有多層次的內(nèi)容界面。作用：傳達(dá)各種具體信息。設(shè)計主要要求突出具體內(nèi)容，各部分超鏈接明確友好。3.內(nèi)容界面內(nèi)容界面是指傳達(dá)具體信息的界面，是構(gòu)成多媒體軟件的主體，根據(jù)三、多媒體軟件界面的整體設(shè)計14

整體編排順序：先安排教學(xué)內(nèi)容，再據(jù)需要在周圍放置所需的按鈕、標(biāo)志和各種裝飾等。如果出現(xiàn)裝飾物等冗余元素與主體表現(xiàn)沖突的情況，要舍棄裝飾元素，以主體表現(xiàn)為重?？刂埔?.內(nèi)容要素2.其它要素3.三、多媒體軟件界面的整體設(shè)計14整體編排順序控制要素即交互形象。設(shè)計原則：簡潔、明了、操作方便、與界面風(fēng)格融為一體。常見的有菜單、按鈕、熱字、圖形（像）等。

控制要素1.控制要素即交互形象?？刂埔?.菜單：使用簡便；一般放置在軟件的邊緣，或作為隱形右鍵菜單，基本不影響界面整體。

菜單：使用簡便；一般放置在軟件的邊緣，或作為隱形右鍵菜單，基按鈕：制作簡便；一目了然，操作便捷；可以根據(jù)界面的整體風(fēng)格和形象來設(shè)計，按鈕本身即是界面的裝飾。按鈕：制作簡便；一目了然，操作便捷；可以根據(jù)界面的整體風(fēng)格和熱字：突出于其它文字又不影響整體文字的整體性，一般采取只對文字顏色進行變化的方法，顏色變化要參照界面的整體風(fēng)格和顏色。熱字：突出于其它文字又不影響整體文字的整體性，一般采取只對文圖形（像）交互的應(yīng)用有兩種：一種是圖形（像）本身即是教學(xué)內(nèi)容，通過交互操作或可以調(diào)出對本圖形（像）的解釋，或可以局部放大進行說明，或可以跳轉(zhuǎn)到相關(guān)內(nèi)容。一種是圖形（像）只不過是交互形象的一種變化，目的是使界面更加完整富有吸引力。

圖形（像）交互的應(yīng)用有兩種：一種是圖形（像）本身即是教學(xué)內(nèi)容圖形圖像標(biāo)題文字正文文字視頻與動畫

內(nèi)容要素2.圖形內(nèi)容要素2.圖形包括各種圖紙、表格、柱餅圖以及其它各種矢量圖等?？茖W(xué)明確性是圖形的基本屬性，其次考慮可辨認(rèn)性和美觀性的統(tǒng)一。

圖形包括各種圖紙、表格、柱餅圖以及其它各種矢量圖等。圖像對觀眾的感官刺激較大，但觀眾的思維卻并不活躍；不清楚的畫面盡量不要用。圖像對觀眾的感官刺激較大，但觀眾的思維卻并不活躍；不清楚的標(biāo)題文字：可與整體界面的藝術(shù)設(shè)計融為一體，富于裝飾性；也可與正文成為一體，突出內(nèi)容信息。

標(biāo)題文字：可與整體界面的藝術(shù)設(shè)計融為一體，富于裝飾性；也可與正文文字：避免辨認(rèn)費力，要注意字體、字號以及與背景顏色的反差。文字內(nèi)容盡可能少，簡潔明了；文字面積與整個界面面積之比不要超過黃金分割。一般情況不得多于三種字體，文字的顏色也要三種內(nèi)。正文文字：避免辨認(rèn)費力，要注意字體、字號以及與背景顏色的反差動態(tài)的物象比靜態(tài)的物象具有更強的吸引力。動畫和視頻表現(xiàn)信息靈活方便，自由度大。

動態(tài)的物象比靜態(tài)的物象具有更強的吸引力。動畫和視頻表現(xiàn)信息靈背景裝飾說明文字其它要素3.背景其它要素3.決定窗口的大小。人們的視覺心理習(xí)慣于水平邊緣大于豎直邊緣的矩形，在設(shè)計中，長寬比可根據(jù)具體情況變化。

背景決定窗口的大小。人們的視覺心理習(xí)慣于水平邊緣大于豎直邊緣的矩背景設(shè)計原則：色彩盡量單一；形象盡量簡潔；避免喧賓奪主。背景背景可以是圖案性的簡單排列；可以是某種環(huán)境；也可以是根據(jù)其它構(gòu)成要素如標(biāo)題、主體文字、圖形、按鈕等的安排適當(dāng)?shù)赝怀瞿撤N圖案，一定程度上起到包圍、裝飾的效果。

背景設(shè)計原則：背景背景可以是圖案性的簡單排列；可以是某種環(huán)境裝飾物設(shè)計原則：與軟件主題或內(nèi)容信息有一定關(guān)聯(lián)性；與界面的整體風(fēng)格統(tǒng)一；與背景有某些一致性，如顏色一致；不可過于醒目，喧賓奪主。裝飾裝飾物設(shè)計原則：裝飾說明文字是對軟件內(nèi)容、功能及操作解釋說明的文字。一般可按正文文字處理，體現(xiàn)信息傳達(dá)的清晰性。對于一些必須出現(xiàn)的即時性說明文字，可以采用隱形方式。

說明文字說明文字是對軟件內(nèi)容、功能及操作解釋說明的文字。一般可按正文四、編排注意事項

1.內(nèi)容要素鮮明突出留白對比線條動態(tài)2.形式與內(nèi)容相統(tǒng)一3.視覺要素不同位置的表現(xiàn)4.建構(gòu)視覺流程

四、編排注意事項1.內(nèi)容要素鮮明突出1.內(nèi)容要素鮮明突出留白：可為空白，也可為細(xì)弱的文字或圖形。為強調(diào)教學(xué)內(nèi)容視覺要素，可有意將其它部分削弱，

1.內(nèi)容要素鮮明突出留白：可為空白，也可為細(xì)弱的文字或圖形。1.內(nèi)容要素鮮明突出對比：包括形象、色彩、肌理、動靜等對比。規(guī)律：面積大的注目度高于面積小的；色彩鮮艷的注目度高于色彩暗淡的；肌理復(fù)雜的注目度高于肌理簡單的；動態(tài)的注目度高于靜態(tài)的。

1.內(nèi)容要素鮮明突出對比：包括形象、色彩、肌理、動靜等對比。1.內(nèi)容要素鮮明突出線條（框）限定：線條（框）細(xì)，界面輕快有彈性，但引起的注意弱；條（框）加粗，教學(xué)內(nèi)容有被強調(diào)的感覺，誘導(dǎo)視覺注意；條（框）過粗，界面則變得穩(wěn)定、呆板，空間封閉。

間隙大，節(jié)奏減慢，視覺流程舒展，但過分增大，則失去了聯(lián)系，彼此不能呼應(yīng)，會給學(xué)生心理造成拖怠的感覺；間隙小，節(jié)奏強而有力，布局顯得緊湊；但間隙過小，會顯得緊張而擁擠，造成視覺疲累，教學(xué)內(nèi)容傳達(dá)的清晰度也會被降低。

1.內(nèi)容要素鮮明突出線條（框）限定：線條（框）細(xì)，界面輕快有動態(tài)的物體永遠(yuǎn)比靜態(tài)的物體注目度高；一幅界面所用的裝飾動畫不能超過一個；在教學(xué)內(nèi)容為動態(tài)的界面中盡量不要使用其它動畫效果。

1.內(nèi)容要素鮮明突出動態(tài)的物體永遠(yuǎn)比靜態(tài)的物體注目度高；1.內(nèi)容要素鮮明突出2.形式與內(nèi)容相統(tǒng)一

3.視覺要素不同位置的表現(xiàn)上部給人輕快、漂浮、積極高昂之感；下部給人以壓抑、沉重、消沉、限制、低矮和穩(wěn)定的印象；左側(cè)感到輕便、自由舒展，富于活力；右側(cè)感覺緊促、局限卻又莊重;主體居于畫面幾何中心，莊重、呆板；主體居于畫面視覺中心時，有視覺心理的平衡與舒適感；主體偏左或右，產(chǎn)生向心趨勢，但過于邊置也產(chǎn)生離心的動感；主體在上下邊置，有上升或下沉的心理感受。60%40%56%44%33%28%23%16%44%28%17%17%2.形式與內(nèi)容相統(tǒng)一

3.視覺要素不同位置的表現(xiàn)上部給人輕快4.建構(gòu)視覺流程讓人眼睛先看什么，后看什么，視線多次徘徊于哪些部分，又對哪些部分一掃而過，它能夠造成界面中某一部分的視覺優(yōu)勢。

色彩視覺注目流程依次為：深色、鮮色、淺色；如有整體色調(diào)形成對比的顏色，矚目度最強；箭頭的元素可構(gòu)建視覺流程。4.建構(gòu)視覺流程讓人眼睛先看什么，后看什么，視五、動態(tài)畫面設(shè)計

1.總體原則運動速度快的比速度慢的更吸引注意力；面積大的比面積小的更吸引注意力；有動態(tài)教學(xué)內(nèi)容的界面盡量不要使用動態(tài)的其它設(shè)計；融入背景的動畫可以較大面積的使用，節(jié)奏必須放慢；較小的裝飾性動畫可以起到畫龍點睛的作用；動態(tài)的交互設(shè)計（如隱藏菜單等）能夠提高軟件的趣味性以及增強界面的統(tǒng)一感。

2.視頻和動畫的運動方式對象的運動、攝像機的運動和蒙太奇運動

五、動態(tài)畫面設(shè)計1.總體原則2.視頻和動畫的運動方式

蒙太奇運動是指畫面的剪輯銜接產(chǎn)生的運動，優(yōu)勢在于表現(xiàn)敘事結(jié)構(gòu)，在說明性的為主的教學(xué)視頻或動畫中更多用來豐富視覺表現(xiàn)，造成某組畫面本身的節(jié)奏感，避免呆板。三種運動強調(diào)一種攝像機運動與蒙太奇運動注意靜止3秒以上

剪輯切換不能太多，反映教學(xué)主體的畫面要在6秒以上

相對靜止的、反映內(nèi)容相似的畫面連續(xù)應(yīng)用不宜過多多媒體課件的過渡與緩出2.視頻和動畫的運動方式蒙太奇運動是指畫面的剪輯銜接產(chǎn)生的

多媒體畫面語言語言：語言是人類的交際工具。狹義的語言是指充當(dāng)人類最重要的交際工具和思維工具的、由音義結(jié)合的詞匯和語法構(gòu)成的一種符號系統(tǒng)。廣義的語言則包括旗語、形體語言、造型語言、視聽語言等。多媒體畫面：基于電腦制作并將電腦畫面與電視畫面合而為一的畫面，可以稱之為“多媒體畫面”。多媒體畫面語言是以基于計算機的多種媒體為表現(xiàn)形式的，由圖、文、聲、像及它們的組合所組成的一套符號系統(tǒng)。

多媒體畫面語言語言：語言是人類的交際工具。狹義的語言是指充

多媒體畫面語言學(xué)習(xí)多媒體畫面語言的目的：

認(rèn)識多媒體畫面語言的內(nèi)涵、特點和藝術(shù)規(guī)律的實質(zhì)。掌握多媒體畫面語言語法的語法結(jié)構(gòu)體系，及各部分具體內(nèi)容。學(xué)會運用所學(xué)的藝術(shù)規(guī)律，分析多媒體教學(xué)軟件。第一章多媒體畫面藝術(shù)概論第二章靜止畫面藝術(shù)—構(gòu)圖

第三章靜止畫面藝術(shù)—色彩第四章運動畫面藝術(shù)基礎(chǔ)

第五章文本藝術(shù)第六章聲音媒體藝術(shù)

第七章運用交互功能的藝術(shù)第八章多媒體教學(xué)軟件賞析多媒體畫面語言學(xué)習(xí)多媒體畫面語言的目的：第一章多媒體畫

多媒體畫面語言多媒體畫面語言的語法

是從多媒體教材的需求出發(fā)，根據(jù)四類媒體（圖、文、聲、像）語言的特點和藝術(shù)規(guī)律（即語法）進行綜合運用的語法系統(tǒng)，旨在準(zhǔn)確、完美地表達(dá)教學(xué)內(nèi)容。多媒體畫面語言的語法包括哪些內(nèi)容

多媒體畫面語言的語法包括靜止畫面、運動畫面、畫面的文本、聲音和交互功能等方面的藝術(shù)規(guī)律，綜合起來，便形成該語言的語法體系。多媒體畫面語言多媒體畫面語言的語法多媒體畫面語言的語法包括哪些內(nèi)容靜止畫面藝術(shù)——靜止畫面的基本元素（面、線、點、空間、影調(diào)、肌理和色彩）的藝術(shù)特點及由這些元素構(gòu)成畫面的一些藝術(shù)規(guī)律。運動畫面藝術(shù)——動感的藝術(shù)。形成藝術(shù)畫面的基本元素是鏡頭的推、拉、搖、和攝像機位的升降，移動產(chǎn)生的畫面效果，其藝術(shù)規(guī)律體現(xiàn)在景別變化和畫面組接上。畫面的文本藝術(shù)