多媒体软件界面设计PPT课件

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