多媒体软件界面设计课件

多媒体软件界面设计多媒体软件界面设计一、多媒体软件界面的概念二、多媒体软件界面的类型三、多媒体软件界面的整体设计四、编排注意事项五、动态画面设计多媒体软件界面设计一、多媒体软件界面的概念一、多媒体软件界面的概念 多媒体软件界面多媒体软件界面是多媒体软件的视觉表现形式，是多媒体软件的视觉表现形式，是软件背景、交互形象、文字内容、图形图像、动画等是软件背景、交互形象、文字内容、图形图像、动画等各视觉要素的组合，是软件最终的呈现模式和效果。各视觉要素的组合，是软件最终的呈现模式和效果。一、多媒体软件界面的概念 多媒体软件界二、多媒体软件界面的类型 多媒体软件的界面按照功能来划分主要分为多媒体软件的界面按照功能来划分主要分为主界面主界面、目录界面目录界面和和内容界面内容界面三类。三类。二、多媒体软件界面的类型 多媒体软件的界面按照功能来划分主要主界面主界面是呈现在观众面前的第一幅画面。内容信息：软件名是呈现在观众面前的第一幅画面。内容信息：软件名称、制作单位、宣传语。作用：吸引观众注意力，使观众做称、制作单位、宣传语。作用：吸引观众注意力，使观众做好进一步了解软件内容的准备。好进一步了解软件内容的准备。设计主要要求视觉冲击力较设计主要要求视觉冲击力较强，风格个性明显。强，风格个性明显。1.主界面主界面主界面是呈现在观众面前的第一幅画面。内容信息：软件名称、制作2.目录界面目录界面目录界面目录界面是指包含软件目录的界面，内容信息：软件整体目是指包含软件目录的界面，内容信息：软件整体目录结构，以超链接的方式呈现。作用：导航，观众通过它来录结构，以超链接的方式呈现。作用：导航，观众通过它来总体把握软件的结构内容。总体把握软件的结构内容。设计主要要求页面布局有条不紊，设计主要要求页面布局有条不紊，超链接形式清晰明确。超链接形式清晰明确。2.目录界面目录界面是指包含软件目录的界面，内容信息：软件整内容界面内容界面是指传达具体信息的界面，是构成多媒体软件的主是指传达具体信息的界面，是构成多媒体软件的主体，根据不同的软件结构可以有多层次的内容界面。作用：体，根据不同的软件结构可以有多层次的内容界面。作用：传达各种具体信息。传达各种具体信息。设计主要要求突出具体内容，各部分超设计主要要求突出具体内容，各部分超链接明确友好。链接明确友好。3.内容界面内容界面内容界面是指传达具体信息的界面，是构成多媒体软件的主体，根据三、多媒体软件界面的整体设计144 整体编排顺序整体编排顺序：先安排教学内容，再据需要在周围先安排教学内容，再据需要在周围放置所需的按钮、标志和各种装饰等。如果出现装饰物放置所需的按钮、标志和各种装饰等。如果出现装饰物等冗余元素与主体表现冲突的情况，要舍弃装饰元素，等冗余元素与主体表现冲突的情况，要舍弃装饰元素，以主体表现为重。以主体表现为重。控制要素控制要素1.1.内容要素内容要素2.2.其它要素其它要素3.3.三、多媒体软件界面的整体设计14 整体编排顺序控制要素控制要素即交互形象。即交互形象。设计原则：简洁、明了、操作方便、与界面风格设计原则：简洁、明了、操作方便、与界面风格融为一体。融为一体。常见的有常见的有菜单菜单、按钮按钮、热字热字、图形（像）图形（像）等。等。控制要素控制要素1.1.控制要素即交互形象。控制要素1.菜单：菜单：使用简便；一般放置在软件的边缘，或作为使用简便；一般放置在软件的边缘，或作为隐形右键菜单，基本不影响界面整体。隐形右键菜单，基本不影响界面整体。菜单：使用简便；一般放置在软件的边缘，或作为隐形右键菜单，基按钮：按钮：制作简便；一目了然，操作便捷；可以根据界面的整制作简便；一目了然，操作便捷；可以根据界面的整体风格和形象来设计，按钮本身即是界面的装饰。体风格和形象来设计，按钮本身即是界面的装饰。按钮：制作简便；一目了然，操作便捷；可以根据界面的整体风格和热字：热字：突出于其它文字又不影响整体文字的整体性，一般采突出于其它文字又不影响整体文字的整体性，一般采取只对文字颜色进行变化的方法，颜色变化要参照界面的整取只对文字颜色进行变化的方法，颜色变化要参照界面的整体风格和颜色。体风格和颜色。热字：突出于其它文字又不影响整体文字的整体性，一般采取只对文图形（像）交互图形（像）交互的应用有两种：一种是的应用有两种：一种是图形（像）本身即是图形（像）本身即是教学内容教学内容，通过交互操作或可以调出对本图形（像）的解释，通过交互操作或可以调出对本图形（像）的解释，或可以局部放大进行说明，或可以跳转到相关内容。一种是或可以局部放大进行说明，或可以跳转到相关内容。一种是图形（像）只不过图形（像）只不过是交互形象的一种变化是交互形象的一种变化，目的是使界面更，目的是使界面更加完整富有吸引力。加完整富有吸引力。图形（像）交互的应用有两种：一种是图形（像）本身即是教学内容图形图形图像图像标题文字标题文字正文文字正文文字视频与动画视频与动画 内容要素内容要素2.2.图形内容要素2.图形图形包括各种图纸、表格、柱饼图以及其它各种矢量图等。包括各种图纸、表格、柱饼图以及其它各种矢量图等。科学明确性科学明确性是图形的基本属性，其次考虑是图形的基本属性，其次考虑可辨认性可辨认性和和美观性美观性的统一。的统一。图形包括各种图纸、表格、柱饼图以及其它各种矢量图等。图像图像对观众的感官刺激较大，但观众的思维却并不活跃对观众的感官刺激较大，但观众的思维却并不活跃 ；不清楚的画面尽量不要用不清楚的画面尽量不要用 。图像对观众的感官刺激较大，但观众的思维却并不活跃；不清楚的标题文字标题文字：可与整体界面的艺术设计融为一体，富于装饰性；：可与整体界面的艺术设计融为一体，富于装饰性；也可与正文成为一体，突出内容信息。也可与正文成为一体，突出内容信息。标题文字：可与整体界面的艺术设计融为一体，富于装饰性；也可与正文文字正文文字：避免辨认费力，要注意字体、字号以及与背景颜色的反差。：避免辨认费力，要注意字体、字号以及与背景颜色的反差。文字内容尽可能少，简洁明了；文字内容尽可能少，简洁明了；文字面积与整个界面面积之比不要超过黄金分割。文字面积与整个界面面积之比不要超过黄金分割。一般情况不得多于三种字体，文字的颜色也要三种内。一般情况不得多于三种字体，文字的颜色也要三种内。正文文字：避免辨认费力，要注意字体、字号以及与背景颜色的反差动态的物象比静态的物象具有更强的吸引力。动态的物象比静态的物象具有更强的吸引力。动画和视频动画和视频表表现信息灵活方便，自由度大。现信息灵活方便，自由度大。动态的物象比静态的物象具有更强的吸引力。动画和视频表现信息灵背景背景装饰装饰说明文字说明文字其它要素其它要素3.3.背景其它要素3.决定窗口的大小。人们的视觉心理习惯于水平边缘大于竖直决定窗口的大小。人们的视觉心理习惯于水平边缘大于竖直边缘的矩形，在设计中，长宽比可根据具体情况变化。边缘的矩形，在设计中，长宽比可根据具体情况变化。背景背景决定窗口的大小。人们的视觉心理习惯于水平边缘大于竖直边缘的矩背景背景设计原则：设计原则：色彩尽量单一；色彩尽量单一；形象尽量简洁；形象尽量简洁；避免喧宾夺主。避免喧宾夺主。背景背景背景背景可以是图案性的简单排列；可以是某种环境；也可以是可以是图案性的简单排列；可以是某种环境；也可以是根据其它构成要素如标题、主体文字、图形、按钮等的安排根据其它构成要素如标题、主体文字、图形、按钮等的安排适当地突出某种图案，一定程度上起到包围、装饰的效果。适当地突出某种图案，一定程度上起到包围、装饰的效果。背景设计原则：背景背景可以是图案性的简单排列；可以是某种环境装饰装饰物设计原则：物设计原则：与软件主题或内容信息有一定关联性；与软件主题或内容信息有一定关联性；与界面的整体风格统一；与界面的整体风格统一；与背景有某些一致性，如颜色一致；与背景有某些一致性，如颜色一致；不可过于醒目，喧宾夺主。不可过于醒目，喧宾夺主。装饰装饰装饰物设计原则：装饰说明文字说明文字是对软件内容、功能及操作解释说明的文字。一般是对软件内容、功能及操作解释说明的文字。一般可按正文文字处理，体现信息传达的清晰性。对于一些必须可按正文文字处理，体现信息传达的清晰性。对于一些必须出现的即时性说明文字，可以采用隐形方式。出现的即时性说明文字，可以采用隐形方式。说明说明文字文字说明文字是对软件内容、功能及操作解释说明的文字。一般可按正文四、编排注意事项 1.1.内容要素鲜明突出内容要素鲜明突出留白留白对比对比线条线条动态动态2 2.形式与内容相统一形式与内容相统一 3.3.视觉要素不同位置的表现视觉要素不同位置的表现4.4.建构视觉流程建构视觉流程 四、编排注意事项 1.内容要素鲜明突出1.1.内容要素鲜明突出内容要素鲜明突出留白留白留白留白：可为空白，也可为细弱的文字或图形。为强调教学：可为空白，也可为细弱的文字或图形。为强调教学内容视觉要素，可有意将其它部分削弱，内容视觉要素，可有意将其它部分削弱，1.内容要素鲜明突出留白：可为空白，也可为细弱的文字或图形。1.1.内容要素鲜明突出内容要素鲜明突出对比对比对比对比：包括形象、色彩、肌理、动静等对比。规律：面积大的：包括形象、色彩、肌理、动静等对比。规律：面积大的注目度高于面积小的；色彩鲜艳的注目度高于色彩暗淡的；肌注目度高于面积小的；色彩鲜艳的注目度高于色彩暗淡的；肌理复杂的注目度高于肌理简单的；动态的注目度高于静态的。理复杂的注目度高于肌理简单的；动态的注目度高于静态的。1.内容要素鲜明突出对比：包括形象、色彩、肌理、动静等对比。1.1.内容要素鲜明突出内容要素鲜明突出线条（框）限定：线条（框）细，界面轻快有弹性，但引起的注意弱；线条（框）限定：线条（框）细，界面轻快有弹性，但引起的注意弱；条（框）加粗，教学内容有被强调的感觉，诱导视觉注意；条（框）条（框）加粗，教学内容有被强调的感觉，诱导视觉注意；条（框）过粗，界面则变得稳定、呆板，空间封闭。过粗，界面则变得稳定、呆板，空间封闭。间隙大，节奏减慢，视觉流程舒展，但过分增大，则失去了联系，彼间隙大，节奏减慢，视觉流程舒展，但过分增大，则失去了联系，彼此不能呼应，会给学生心理造成拖怠的感觉；间隙小，节奏强而有力，此不能呼应，会给学生心理造成拖怠的感觉；间隙小，节奏强而有力，布局显得紧凑；但间隙过小，会显得紧张而拥挤，造成视觉疲累，教布局显得紧凑；但间隙过小，会显得紧张而拥挤，造成视觉疲累，教学内容传达的清晰度也会被降低。学内容传达的清晰度也会被降低。1.内容要素鲜明突出线条（框）限定：线条（框）细，界面轻快有动态的物体永远比静态的物体注目度高；动态的物体永远比静态的物体注目度高；一幅界面所用的装饰动画不能超过一个；一幅界面所用的装饰动画不能超过一个；在教学内容为动态的界面中尽量不要使用其它动画效果。在教学内容为动态的界面中尽量不要使用其它动画效果。1.内容要素鲜明突出内容要素鲜明突出动态的物体永远比静态的物体注目度高；1.内容要素鲜明突出2.2.形式与内容相统一形式与内容相统一3.3.视觉要素不同位置的表现视觉要素不同位置的表现上部给人轻快、漂浮、积极高昂之感；上部给人轻快、漂浮、积极高昂之感；下部给人以压抑、沉重、消沉、限制、低矮和稳定的印象；下部给人以压抑、沉重、消沉、限制、低矮和稳定的印象；左侧感到轻便、自由舒展，富于活力；左侧感到轻便、自由舒展，富于活力；右侧感觉紧促、局限却又庄重右侧感觉紧促、局限却又庄重;主体居于画面几何中心，庄重、呆板；主体居于画面几何中心，庄重、呆板；主体居于画面视觉中心时，有视觉心理的平衡与舒适感；主体居于画面视觉中心时，有视觉心理的平衡与舒适感；主体偏左或右，产生向心趋势，但过于边置也产生离心的动感；主体偏左或右，产生向心趋势，但过于边置也产生离心的动感；主体在上下边置，有上升或下沉的心理感受。主体在上下边置，有上升或下沉的心理感受。60%40%56%44%33%28%23%16%44%28%17%17%2.形式与内容相统一3.视觉要素不同位置的表现上部给人轻快4.4.建构视觉流程建构视觉流程 让人眼睛先看什么，后看什么，视线多次徘徊于哪些让人眼睛先看什么，后看什么，视线多次徘徊于哪些部分，又对哪些部分一扫而过，它能够造成界面中某一部分部分，又对哪些部分一扫而过，它能够造成界面中某一部分的视觉优势。的视觉优势。色彩视觉注目流程依次为：深色、鲜色、浅色；色彩视觉注目流程依次为：深色、鲜色、浅色；如有整体色调形成对比的颜色，瞩目度最强；如有整体色调形成对比的颜色，瞩目度最强；箭头的元素可构建视觉流程。箭头的元素可构建视觉流程。4.建构视觉流程 让人眼睛先看什么，后看什么，视五、动态画面设计 1.1.总体原则总体原则运动速度快的比速度慢的更吸引注意力；运动速度快的比速度慢的更吸引注意力；面积大的比面积小的更吸引注意力；面积大的比面积小的更吸引注意力；有动态教学内容的界面尽量不要使用动态的其它设计；有动态教学内容的界面尽量不要使用动态的其它设计；融入背景的动画可以较大面积的使用，节奏必须放慢；融入背景的动画可以较大面积的使用，节奏必须放慢；较小的装饰性动画可以起到画龙点睛的作用；较小的装饰性动画可以起到画龙点睛的作用；动态的交互设计（如隐藏菜单等）能够提高软件的趣味动态的交互设计（如隐藏菜单等）能够提高软件的趣味性以及增强界面的统一感。性以及增强界面的统一感。2.2.视频和动画的运动方式视频和动画的运动方式 对象的运动、摄像机的运动和蒙太奇运动对象的运动、摄像机的运动和蒙太奇运动 五、动态画面设计 1.总体原则2.2.视频和动画的运动方式视频和动画的运动方式 蒙太奇运动蒙太奇运动是指画面的剪辑衔接产生的运动，优势在于表现是指画面的剪辑衔接产生的运动，优势在于表现叙事结构，在说明性的为主的教学视频或动画中更多用来丰叙事结构，在说明性的为主的教学视频或动画中更多用来丰富视觉表现，造成某组画面本身的节奏感，避免呆板。富视觉表现，造成某组画面本身的节奏感，避免呆板。三种运动强调一种三种运动强调一种摄像机运动与蒙太奇运动注意静止摄像机运动与蒙太奇运动注意静止3 3秒以上秒以上 剪辑切换不能太多，反映教学主体的画面要在剪辑切换不能太多，反映教学主体的画面要在6 6秒以上秒以上 相对静止的、反映内容相似的画面连续应用不宜过多相对静止的、反映内容相似的画面连续应用不宜过多多媒体课件的过渡与缓出多媒体课件的过渡与缓出2.视频和动画的运动方式 蒙太奇运动是指画面的剪辑衔接产生的n 多媒体画面语言语言：语言：语言是人类的交际工具。狭义的语言是指充语言是人类的交际工具。狭义的语言是指充当人类最重要的交际工具和思维工具的、由音义结当人类最重要的交际工具和思维工具的、由音义结合的词汇和语法构成的一种符号系统。广义的语言合的词汇和语法构成的一种符号系统。广义的语言则包括旗语、形体语言、造型语言、视听语言等。则包括旗语、形体语言、造型语言、视听语言等。多媒体画面：多媒体画面：基于电脑制作并将电脑画面与电视画基于电脑制作并将电脑画面与电视画面合而为一的画面，可以称之为面合而为一的画面，可以称之为“多媒体画面多媒体画面”。多媒体画面语言多媒体画面语言是以基于计算机的多种媒体为表现是以基于计算机的多种媒体为表现形式的，由图、文、声、像及它们的组合所组成的形式的，由图、文、声、像及它们的组合所组成的一套符号系统。一套符号系统。多媒体画面语言语言：语言是人类的交际工具。狭义的语言是指充n 多媒体画面语言学习多媒体画面语言的目的：学习多媒体画面语言的目的：认识多媒体画面语言的内涵、特点和艺术规律的实认识多媒体画面语言的内涵、特点和艺术规律的实质。质。掌握多媒体画面语言语法的语法结构体系，及各部掌握多媒体画面语言语法的语法结构体系，及各部分具体内容。分具体内容。学会运用所学的艺术规律，分析多媒体教学软件。学会运用所学的艺术规律，分析多媒体教学软件。第一章 多媒体画面艺术概论 第二章 静止画面艺术构图第三章 静止画面艺术色彩 第四章 运动画面艺术基础第五章 文本艺术 第六章 声音媒体艺术第七章 运用交互功能的艺术 第八章 多媒体教学软件赏析 多媒体画面语言学习多媒体画面语言的目的：第一章 多媒体画n 多媒体画面语言p多媒体画面语言的语法多媒体画面语言的语法 是从多媒体教材的需求出发，根据四类媒体（图、是从多媒体教材的需求出发，根据四类媒体（图、文、声、像）语言的特点和艺术规律（即语法）进行文、声、像）语言的特点和艺术规律（即语法）进行综合运用的语法系统，旨在准确、完美地表达教学内综合运用的语法系统，旨在准确、完美地表达教学内容。容。p多媒体画面语言的语法包括哪些内容 多媒体画面语言的语法包括静止画面、运动画面、多媒体画面语言的语法包括静止画面、运动画面、画面的文本、声音和交互功能等方面的艺术规律，综画面的文本、声音和交互功能等方面的艺术规律，综合起来，便形成该语言的语法体系。合起来，便形成该语言的语法体系。多媒体画面语言多媒体画面语言的语法l多媒体画面语言的语法包括哪些内容p静静止止画画面面艺艺术术静静止止画画面面的的基基本本元元素素（面面、线线、点点、空空间间、影影调调、肌肌理理和和色色彩彩）的的艺艺术术特特点点及及由由这这些些元元素素构构成成画画面的一些艺术规律面的一些艺术规律 。p运运动动画画面面艺艺术术动动感感的的艺艺术术。形形成成艺艺术术画画面面的的基基本本元元素素是是镜镜头头的的推推、拉拉、摇摇、和和摄摄像像机机位位的的升升降降，移移动动产产生生的的画画面效果，其艺术规律体现在景别变化和画面组接上。面效果，其艺术规律体现在景别变化和画面组接上。p画画面面的的文文本本艺艺术术包包括括文文字字的的构构成成与与呈呈现现、字字体体的的特特点点与应用以及文本在多媒体画面上呈现的一些艺术规律。与应用以及文本在多媒体画面上呈现的一些艺术规律。p画画面面的的声声音音艺艺术术包包括括解解说说词词、音音乐乐和和音音响响效效果果等等三三种种声音形式在多媒体画面上呈现的一些艺术规律。声音形式在多媒体画面上呈现的一些艺术规律。p交交互互功功能能运运用用的的艺艺术术不不同同于于上上述述各各种种媒媒体体呈呈现现艺艺术术，主主要要体体现现在在对对教教学学过过程程的的控控制制。包包括括在在导导航航、互互动动教教学学和和练习等领域上运用的艺术。练习等领域上运用的艺术。多媒体画面语言的语法包括哪些内容静止画面艺术静止画面的基作 业PPT制作题目：路，学，任选其一。要求：主题恰当。材料组织合理；画面和谐美观。作 业PPT制作