《Web艺术设计》PPT课件.ppt

第4章Web艺术设计 内容简介 本章主要介绍Web设计所需的美学原理和设计法则 具体涉及到影响网页观感的色彩 文字 图像 导航元件以及版面设计等方面的知识 学习目标 1 掌握 技术和艺术之间的限制关系 网页色彩设计的一般原则 网页设计流程 网页元素的基本知识及基本制作方法 网页创意设计的原则以及设计要点 导航设计的原则 版式设计的基础知识 2 理解 网页设计中应用到的网络技术与传播特点 与传统媒体设计的区别 版式设计和平面设计的基本法则 色彩 文字 图像 版面设计中的一些概念 3 了解 不同的制作软件 视听语言基础和网页设计的未来趋势 4 1Web设计环境 在进行网页设计和制作的过程中 了解网络的相关技术以及访问者的外在条件 如访问者的访问速度 计算机平台 使用何种浏览器等 是十分重要的 这些因素将影响你设计的Web文件大小和设计复杂程度 了解技术和媒体因素是网页艺术设计的前提 技术和艺术的结合是网页设计的最高境界 4 1 1Web的技术环境 1 从技术为人服务的观念出发 应尽可能地从用户的角度来进行Web设计 要想有更多的人能很好地访问你所设计的站点 就应使Web站点适应不同的浏览器 操作系统和计算机平台访问的技术环境 4 1 1Web的技术环境 2 1 关于浏览器的技术网页设计者首先面临的问题是如何使网页在不同浏览器中都能正常显示 由于每种浏览器对HTML文件标签的解释都不同 导致对HTML文件的显示方式的解释存在差异 因此设计者应尽量在多种浏览器环境中测试自己的工作 以便对用户使用的浏览器提出要求或说明 4 1 1Web的技术环境 3 为适合不同浏览器 可以采用以下几种方式 1 采用可兼容的技术尽量使设计的网页可以在各种浏览器中使用 不使用最新版本的HTML规范编码 便于与各种版本的浏览器兼容 2 采用最新的技术设计这就要求用户采用最新的浏览器 还要有能够显示特殊媒体类型的增强插件 这样才能跟上设计者的步伐 3 采用对用户指定特定浏览器的方式 4 1 1Web的技术环境 4 总之 在对浏览器的选择上 可以采用一种能促进渐进开发的策略 例如 在创建站点时使用前一个旧版本的HTML来编码 然后慢慢向其中加入一些增强特性 不断向最新版本靠近 使用户使用新旧版本的浏览器都可访问 若要加入一些需要插件支持的动画或特殊效果 则要使用大多数浏览器都支持的开发工具 4 1 1Web的技术环境 5 2 关于屏幕分辨率的技术显示器的屏幕分辨率 是指显示器屏幕所能显示的象素总数 这一指标是由显示器和显示卡的性能决定的 通常用水平和垂直方向的象素数目的乘积表示 如 800 600 随着计算机显示器和显示卡性能的提高 在网页设计中 很多人已经将800 600作为基本的分辨率 4 1 1Web的技术环境 6 3 关于宽带的技术网站设计者要考虑用户的低带宽连接 如果由于页面包含庞大的 详细的图形或复杂的动画而导致下载速度缓慢 用户就会在页面内容显示之前改去访问别的站点 因此网站设计者应在不同的连接速度下进行浏览测试 以获得在不同的连接速度下浏览网页的真实情况 在设计时应尽量简化页面 少使用图形或将图形大小限制在10 15KB范围之内 4 1 2Web的媒体环境 1 考虑到计算机屏幕是网页的最终目的地 与传统的基于纸张的媒体完全不同 故在规划Web站点时应考虑以下几点 1 计算机屏幕的形状2 要有足够的对比度以利于用户阅读3 屏幕分辨率比印刷品低得多由于信息显示的载体是计算机屏幕 因此必须针对屏幕进行设计 即应考虑布局 字体和颜色 以及它们如何显示 还应考虑超文本的非线性特点 把合适的链接与相关内容有机地结合起来 4 1 2Web的媒体环境 2 4 Web站点的观感观感 指用户必须接触到的Web站点界面 由于用户访问站点的过程 就是观看并感觉站点的过程 他们可以根据站点允许的自由度 自主选择信息的访问路径 因此站点的观感就是站点的运行方式以及传达站点给用户的个性化设计 4 1 3Web的设计流程 1 1 Web设计的两个阶段Web的设计流程通常包含两个阶段 第一阶段 了解客户需求 然后根据不同的网站类型进行创意 同时与技术人员沟通 了解设计所需的技术难度 确定方案 第二阶段 制作出页面样例 与客户交流征求意见 然后修改 直到确认 由制作人员协助完成设计 应该注意 制作前进行完整详尽的规划是十分必要的 4 1 3Web的设计流程 2 2 Web设计的一般步骤Web站点的设计一般有如下步骤 但为了达到用户所希望的观感 实践中还需要灵活掌握 1 首先要明确网站的性质和目的 这样才能针对不同类型的网站进行创意 2 要分析网站的用户 使设计者的目标与用户目标尽量和谐统一 3 确定页面的结构和框架 有时可根据好的创意来决定页面结构 4 应在不同机器 浏览器和不同速度下测试网页 及早查处所出现的问题 4 1 3Web的设计流程 3 3 Web站点的主要类型了解Web站点的类型可在设计网站时进行更好的创意 目前网上主要的Web站点类型有 1 公告牌2 出版物3 虚拟画廊4 产品支持5 电子商务和在线购物6 内联网和外联网7 特殊兴趣 大众兴趣及非盈利性组织 4 2Web的设计元素 4 2 1色彩网页的色彩选择和搭配在网页制作中起到非常重要的作用 也是网页设计的重点之一 因为它将决定浏览者对网站的第一印象 好的色彩搭配可以使网页独具魅力 相反则提不起浏览者的兴趣 网页色彩的选择包括 色调 背景 文字 图表 边框 链接应采用何种色彩 如何搭配等内容 4 2 1色彩 1 1 网页设计的色彩基础 1 颜色的产生色彩感觉 当光照射在物体上时 物体的反射光刺激人的视觉细胞 并作用到大脑 从而引起彩色感觉 物体色是由于其反射特性引起的 2 色彩的属性 或三要素 任何一种色彩都具有三个要素 色相 饱和度 亮度 或明度 4 2 1色彩 2 1 网页设计的色彩基础色相 Hue 指颜色的种类 它反映了颜色的基本面貌和性质 如 红 绿 蓝等各种颜色 饱和度 Saturation 指颜色的深浅程度或浓淡程度 一般鲜艳的色彩其饱和度都比较高 较刺眼 故饱和度高的颜色一般不用作网页背景 亮度 Brightness 指颜色的明暗程度 如白色亮度高 黑色亮度低 黄色亮度最高 紫色亮度最低 非彩色 指黑色 白色和各种深浅不一的灰色 只有亮度特征 没有色相和饱和度的区别 4 2 1色彩 3 1 网页设计的色彩基础 续 3 色彩的三原色和色环三基色 任何色彩都是由三种基色 或原色 混合而成 根据物体是否发光有两种基色系统 发光物体的三基色 RGB 系统 红 R 绿 G 蓝 B 等量的三基色混合成白光 适合发光的物体 如显示器 不发光物体的三基色 CMYK 系统 青 Cyan 紫或洋红 Magenta 黄 Yellow 等量的三基色混合成黑色 适合不发光的物体 如颜料 4 2 1色彩 4 1 网页设计的色彩基础 续 3 色彩的三原色和色环色环 将色彩按 红 黄 绿 青 蓝 紫 红 依次过渡渐变 就可以得到一个色环 在色环中 可以将颜色分为 暖色 中性色和冷色几种 色彩的色环 4 2 1色彩 5 1 网页设计的色彩基础 续 在24色色环中 根据位置的不同 可以构成4种关系 它们分别是 同类色 色环中相隔45 的两个色相 属较弱的对比效果 是极为协调和单纯的色调 临近色 色环中相隔90 的两个色相 色彩倾向近似 色调统一和谐 感情特征一致 对比色 色环中相隔135 的两个色相 属中强对比效果 互补色 色环中相隔180 的两个色相 是对比最强的色组 富于刺激性 有强烈的视觉冲击力和热烈感 4 2 1色彩 6 2 色彩感觉 1 心理感受人们在面对色彩时 心理会受到颜色的影响而变化 这种变化虽然有个人的差异 但大多数会有冷暖 轻重 软硬 华丽朴素 积极消极等几方面的心理效果 虽然色彩本身不带任何含义 但人的心理感觉将它们分成不同的类别 4 2 1色彩 7 2 色彩感觉 续 2 颜色的联想色彩的联想作用虽然是属于心理学的问题 但它的适用性在设计上是很重要的 由于色彩与人的情绪有着微妙的联系 因此利用不同的色调设计网页会给浏览者不同的心理感受 4 2 1色彩 8 2 色彩感觉 续 一般认为 不同的色调对浏览者的感觉有如下规律 红色 是一种激奋的色彩 代表热情 奔放 喜悦 庆典 有刺激效果 能使人产生冲动 有愤怒 热情和活力的感觉 绿色 介于冷暖色之间 代表植物 生命 生机 蓬勃向上 和睦 宁静 健康 安全的感觉 橙色 具有轻快 欢欣 热烈 温馨 时尚的效果 黄色 代表高贵 富有 具有快乐 希望 智慧和轻快的个性 它的亮度最高 4 2 1色彩 9 2 色彩感觉 续 蓝色 是最具凉爽 清新 专业的色彩 代表天空 清爽 深远的感觉 能体现柔顺 淡雅 浪漫的气氛 紫色 代表浪漫 爱情 并给人以神秘 压迫的感觉 棕色 代表土地 白色 代表纯洁 单纯 简单 具有洁白 明快 纯真 清洁的感受 黑色 代表严肃 庄严 夜晚 沉着 具有深沉 神秘 寂静 悲哀 压抑的感觉 灰色 代表阴暗 消极 具有中庸 平凡 温和 谦让 中立和高雅的感觉 4 2 1色彩 10 2 色彩感觉 续 有些色彩有双重的意义 此外不同的国家 民族 年龄层次的人对色彩有不同的理解 因此设计者必须根据使用对象的特点来选择色彩 以便尽量符合人们普遍接受的意义 4 2 1色彩 11 3 色调和色彩的搭配 1 色调 在颜色三要素中 色相容易区别 但饱和度和亮度有时不易区别 因此将亮度和饱和度合在一起称为色调 色调是色彩作品的总倾向和总特征 是直接传达设计意念的关键 色彩的主色调分为以色相关系为主的调子 如 冷色调 暖色调 红色调 绿色调等 也可分为以灰色 明暗关系为主的调子 如 明灰调 暗色调等 4 2 1色彩 12 3 色调和色彩的搭配 2 配色 指对两种以上的颜色进行组合和搭配 以便产生更美的效果 主要有以下几种方式 色相搭配 分为类似色搭配和补色搭配两种 主要利用了 当两种颜色放在一起时 会产生相互反衬的对比效应 并各自走向自己的极端 亮度搭配 分为高亮度 中亮度 低亮度和明暗对比 暗色与高亮色对比 会给人清晰强烈的刺激 中性色与低亮度色对比 给人模糊 朦胧 深奥的感觉 纯色与高亮度色的对比 给人跳跃 舞动的感觉 纯色与低亮度色对比 给人以强硬和不可改变的感觉 4 2 1色彩 13 2 配色 续 饱和度搭配 分为高饱和度 中饱和度 低饱和度的搭配 纯色或三基色之间的对比给人的视觉刺激最强烈 使色彩的效果更明确和肯定 通常可通过加入黑色 白色或灰色来降低饱和度 整体色调搭配 设计作品给观众的感受是由整体配色效果决定的 作品的最终的配色效果都由整体的色调而定 并取决于配色的色相 亮度 饱和度的关系和色彩面积大小的关系 4 2 1色彩 14 4 计算机色彩计算机显示器显示的任意一种色彩都是由RGB 红 绿 蓝 三种基色光混合而成的 在HTML语言或其它图像处理软件中 色彩的表达是用这三种颜色的数值来表示的 如 红色 255 0 0 十进制 或 FF0000 十六进制 十六进制颜色值为6位数字 前2位定义红色 之间2位定义绿色 最后2位定义蓝色 4 2 1色彩 15 4 计算机色彩在计算机显示中有关色彩的概念有 1 色彩模式 主要有三种 RGB模式 任意色彩由RGB三基色构成适合于本身发光的物体的颜色 如显示器 CMYK模式 图像由青 C 洋红 M 黄 Y 和黑 K 四种颜色混合而成 适合于不发光的物体颜色 如 彩色印刷及绘画领域 Lab模式 Photoshop的标准模式 也是RGB向CMYK转换的中间模式 4 2 1色彩 16 4 计算机色彩 2 色深色深是指显示卡的数模转换器的位数 是决定显示卡所能输出的颜色数的重要参数 显示卡所能输出的颜色数与色深的关系为 颜色数 2色深位数通常见到的GIF图像的色深为8位 可以显示256种颜色 32位色深能显示1677万种颜色 称为真彩色 TrueColor 4 2 1色彩 17 4 计算机色彩 3 混色当在低色深的显示器上显示高色深的图像时 将丢失很多颜色信息 这时图像看上去成立颗粒状 这种现象称为混色 4 网络安全色当色深为8位时 显示的颜色数为28 256种 一般可在各种显示器上显示 并称这种具有256种颜色显示的情况称为网络安全色 4 2 1色彩 18 5 网页色彩搭配的原则色彩搭配应以大众欣赏习惯为标准 同时兼顾网站专业特点和艺术规律 一般应遵循以下原则 1 色彩的合理性 网页的色彩要引人注目 同时还要兼顾人眼的生理特点 不要用大面积的高纯度色相 这样容易使人疲劳 2 色彩的艺术性 色彩应服务于网站内容 和网站的气氛和主要内容相适应 3 色彩的独特性 要有与众不同的色彩搭配 突出网站的个性 4 2 1色彩 19 6 搭配技巧从人的记忆效果看 对彩色的记忆是黑白的3 5倍 因此彩色页面比完全的黑白页面更吸引人 1 非彩色的搭配 黑白是最简单 最基本的搭配 灰色是万能色 可以和任何色彩搭配 也可帮助两种对立的色彩和谐过渡 2 彩色的搭配 由同类色 指同一颜色的变淡或加深 搭配出来的页面看起来比较统一 和谐 有层次感 比较适合技术性和专业性站点 而临近色的搭配可使整个页面色彩丰富而不花哨 对比色搭配时 应以一种颜色为主调 占有较大面积 同时辅以对比色 起到丰富点缀的作用 4 2 1色彩 20 6 搭配技巧 3 网页色彩掌握的过程随着网页制作经验的积累 颜色使用有这样一个趋势 单色 五彩缤纷 标准色 单色总之 不要将所有颜色都用到 要保持主色调的一致 初学者最好将颜色控制在三种以内 4 2 2文本 1 虽然网络上可承载的元素越来越多 但文字一直是很重要的部分 在同一语言环境中 文字的传达是比较准确的 因此文字是任何出版物 包括网络 的核心 网页中的文本有两种状态 HTML文本和图形文件格式的文字图像 4 2 2文本 2 1 字体文本构成的因素是字体和字号 它们都是由汉字软件自动生成的 字体是一种灵活的媒介 对不同字体的选择可以表达感情 语调及结构 字体也是网页的主要组成部分 是信息的重要载体 正确选择字体不但关系到网页的美观 还对浏览者的阅读及信息的传达有直接的影响 计算机能不能显示某种字体 主要取决于计算机内的字库里是否安装了这种字体 4 2 2文本 3 2 字体的分类字体基本上可分为英文字体和中文字体两大类 1 英文字体 种类很多 大体上可分为有衬线字体和无衬线字体两大类 2 中文字体 常见的中文字体有 宋体 黑体 楷体 仿宋体 此外还有各种美术体 如 圆体 综艺体 幼圆体 琥珀体 彩云体 小姚体 长美黑等 各种手写体 如 隶书体 新魏体 行楷体 古印体 广告体 海报体 新潮体等 4 2 2文本 4 2 字体的分类 续 3 衬线和字族衬线 Serif 指加在字母主笔画上两端的修饰性元素 其形态差异反映了不同时代字体风格的变化 字族 在计算机图形软件中 字体一般包含字的长扁 粗细 斜直等变化的多款变体 组成字的家族 我们称为字族 4 2 2文本 5 3 字体在网页中的使用据研究 有衬线的字体读起来更快 更易识别 因此 报刊 杂志等读物的正文往往采用宋体 字体及其大小决定了文本的可读性 一般在一个页面中 最好不要使用超过三种以上的字体 否则显得杂乱 没有主题 此外在纸张上易于阅读的字体 可能在屏幕上却很难阅读 最后 应确保文本的颜色与背景的颜色有足够的对比度以利于阅读 4 2 2文本 6 4 字号和字距 1 字号计算机中的字号是指字体在显示器上的显示尺寸大小 网页的字号大小直接关系到阅读效果和页面容量 字号的大小有以下三种标定方法 号数制 从初号 一号到八号 有16种之多 号数越大 字体越小 级数制 从8级到96级 级数越大 字体越大 点数制 从5磅到72磅 有21种之多 磅数越大 字体越大 点数制是世界流行的计算字体的标准单位 4 2 2文本 7 4 字号和字距 2 字号在网页设计中的使用网页文字的字号变化宜少不宜多 一般用9磅或11磅 相当于WORD的五号宋体字 9磅以下的字体不易辨认 12磅以上则浪费页面空间 选择少量的字体和字号会使页面看起来显得更干净 一般可选三种字号 14磅用于标题 12磅用于副标题 9磅用于正文 如果在网页设计中使用了一种用户没有安装的字体 则浏览器将用缺省字体显示 PC中的英文缺省字体是 TimeNewRoman 4 2 2文本 8 4 字号和字距 3 字距和行距字距 字与字之间的距离 行距 行与行之间的距离 字距与行距之间的比例关系 行距至少要大于字距 加宽字距和行距有轻松 疏朗之感 行与行之间要考虑适当增加空白 以便阅读 4 2 2文本 9 4 字号和字距 4 文本的编排方式文字块的形状由编排形式决定 在版面设计中 主要有如下编排方式 两边对齐 文字组成的字群从左至右长度均齐 显得端庄严谨 左 或右 对齐 文字组成的字群以左 或右 边界对齐 中间对齐 以中心为轴 两端距离相等 图文绕排 文字绕图形边缘自由出入 产生生动随意之感 4 2 2文本 10 4 字号和字距 5 网页中文本使用的注意事项网页中每一页的文字应尽量完整每一页应有清晰的标题尽量少用闪烁字在文字使用上要特别注意易读性和趣味性一般网页文字字体是稳定的 阅读要求识别轻松 浓淡适宜 而标题字部分则相当于广告用字 参与表现的尺度是无限的 但必须积极参与信息传达和内容表现 4 2 3图像和VI设计 1 图像也是传达信息的重要方法之一 和文本相比 图像更加直观 生动 易于理解和接受 图像可以将那些文字无法表达的信息传达出来 文字的精确性和图像的模糊性结合 使得信息的传达更加完整 4 2 3图像和VI设计 2 1 网页图像的文件格式 1 数字图像的类型根据计算机对图像的处理方式及应用软件的使用环境不同 可以将图像分为两大类 位图图像和矢量图形 位图图像 又称为栅格图像 是用小方形栅格 即象素 组成的图像 与分辨率有关 矢量图像 由矢量定义的直线或曲线组成的图像 矢量图形与分辨率无关 4 2 3图像和VI设计 3 1 网页图像的文件格式 续 2 图像文件格式基础图像是以文件的形式存储在计算机上的 这些文件有各种各样的格式 每种都有自己的特点 下面介绍一些常见的图像文件格式 1 GIF格式文件 GIF是为网络图形传送而设计的 采用了无损压缩技术 色深为8位 GIF还有两个重要特点 透明和交错显示 2 JPG格式文件 JPG是适合于照片和连续灰度图像的最佳格式 色深24位 真彩色 适合具有丰富细节的图片 4 2 3图像和VI设计 4 1 网页图像的文件格式 续 2 图像文件格式基础知识以上两种图像格式主要用于网页设计中的 此外 还有以下几种图像格式 3 PNG格式文件 PortableNetworkGraphics PNG 便携式网络图形格式 是专为Web设计 但由于缺乏浏览器支持 一直未能普及 PNG采用了无损压缩技术 支持8位索引颜色 16位灰度级和24位真彩色 透明和交错 可将8位图像压缩为比GIF更小的文件格式 4 2 3图像和VI设计 5 1 网页图像的文件格式 续 4 BMP格式文件 Bitmap 位图 BMP格式是Windows中的标准图像文件格式 有压缩和不压缩两种形式 BMP以独立于设备的方法描述位图 有黑白 16色 256色 真彩色等多种形式 能被多种Windows应用程序支持 4 2 3图像和VI设计 6 1 网页图像的文件格式 续 5 TIF格式文件 TagImageFileFormat TIF最早是为了存储扫描仪图像而设计 也是PC中使用最广泛的图像文件格式 TIF支持24位真彩色 有压缩 无损压缩 和非压缩两种形式 其变体很多 兼容性较差 4 2 3图像和VI设计 7 1 网页图像的文件格式 续 6 TGA格式文件 TaggedGraphics TGA是Truevision公司为其显卡开发的一种图像文件格式 现已成为数字化图像 以及运用光线跟踪算法所产生的高质量图像的常用格式 其结构比较简单 是一种图形 图像通用的格式 大部分为24位或32位真彩色 4 2 3图像和VI设计 8 1 网页图像的文件格式 续 3 Web图像的应用Web中的图像并不像传统媒体 只要越清晰越好 网络上的图形图像 为了方便计算机进行存储 交换和处理 必须要有统一的格式 而且还要受到网络传输速度的限制 因此 如何减少图像大小并保证一定的质量 是Web设计的一个重要问题 为了使浏览者尽快看到图像 Web图像采用交替或顺次显示图像文件的方法 如交错显示可以使图像边下载边显示 图像逐渐变清晰 不必等图像全部下载完毕才看到图像 4 2 3图像和VI设计 9 2 选择图形图像设计工具目前流行的Web图形图像制作工具软件主要有 Adobe公司的Photoshop 这是网页设计中常用的图像处理工具 Adobe的ImageReady是一个微型的Photoshop版本 后来被集成到了Photoshop中 Adobe的Illustrator是一个高端的绘图工具 Macromedia公司的Firework是一款集图形处理和文本处理于一体的功能强大的应用软件 4 2 3图像和VI设计 10 3 网页中的图像就形式而言 网页中的图像大体上可分为两大类型 照片类和绘画类 照片类图像 是指由数码相机 扫描照片得到的图像 它们属于全色调图像 可全方位地表现事物的形态 结构 空间 体积 质感等视觉属性 绘画类图像 一般来自于手工绘画或软件制作 如 卡通图画 装饰图案 文字图形以及用图形图像软件加工过的照片等 4 2 3图像和VI设计 11 4 网页版面中图像的编排图像在吸引读者的注意力 传递信息 美化版面等方面具有独特的魅力 图像的编排主要体现在以下几方面 1 图像的选择与剪裁 2 图像形状的变化 3 虚实的变化 4 2 3图像和VI设计 12 5 视觉标识 VI 设计视觉标识 VI VisualIdentity 是指通过视觉语言的运用来树立形象和传播信息 其应用一直是CIS CorporateIdentitySystem 企业识别系统 的基础和最直接的表现形式 CIS的策划和运作往往以VI来表现 是CIS的一部分 当一个网站在主题和数据信息 图文材料具备之后 下一个问题就是网站的VI策划和形象设计 它主要包括以下几方面 4 2 3图像和VI设计 13 5 视觉标识 VI 设计 续 1 设计网站的标志网站标志设计和创意可从以下几种思路开始 选用能代表公司形象的人物 动物 花草等 对于专业性网站 用本专业有代表性的物品作为标志 最常用和简单的方式是用本网站名称的英文字母作标志 4 2 3图像和VI设计 14 5 视觉标识 VI 设计 续 2 选择网站的标准色彩网站给人的第一印象是来自视觉的色彩感受 因此确定网站的标准色彩是网站建设的重要一步 这项工作又称为定色调 色调不同的色彩及色彩搭配所产生的效果是不同的 每个企业网站一般都有自己的标准色 这种标准色一方面要能体现企业的形象 另一方面要有自己的特点 标准色一般只能是一种 并以此为中心 利用它的明度变化产生不同的色彩 标准色要广泛运用于网站的标志 标题 主菜单和背景色块 给人以整体统一的感觉 其它色彩只是作为对比和衬托 4 2 3图像和VI设计 15 5 视觉标识 VI 设计 续 3 选择网站的标准字体网站的标准字体是指网站用于标志 标题 主菜单的特有字体 由于字体也具有它的性格和表情特征 因此 为了体现站点与众不同的特有风格 可以根据设计的需要 选择一些特别字体 应该注意的是 使用各种特殊字体一般只能用图形图像的形式出现 因为浏览者的计算机字库中若没有这种特殊字体 则这种效果就无法显示出来 4 2 3图像和VI设计 1 5 视觉标识 VI 设计 续 4 构思网站的广告词网站设计者应努力用一句话 一个词来高度概括网站的性质特点和网站目标 用简练的句子来传达信息 综上所述 标志 色彩 字体和广告词四个方面是一个网站树立VI形象的关键 是网站的门面工作 4 2 4动画 1 网页中的插图可以像电视动画一样真实生动 有人用情景化设计来描绘将来的网页设计 无论人或动物的视觉 总是先注意到运动着的东西 因此 很多广告公司都将自己的网络广告做成动画的形式 以便获得最大的宣传效果 4 2 4动画 2 1 Web动画的发展状况 1 动画的初级阶段 2 无处不在的GIF89a 3 动画的新贵 Shockware 4 用Java来实现动画 5 Flash动画和Streaming技术 4 2 4动画 3 2 动画制作的工具GIFAnimation 网页中较早采用的动画软件就是GIFAnimation 其原理类似于播放幻灯片 AdobeImageReady 其原理和制作效果都和GIFAnimation一样 Flash 这是Macromedia公司专为网络设计的交互式矢量动画设计软件 但播放Flash动画时必须在浏览器中安装插件 4 2 4动画 4 3 动画原理传统的动画是由很多静态画面序列连续地播放形成的 计算机的动画和传统的动画原理基本上是一样的 只是有些名词叫法不同 在计算机上 每个动画单元称为帧 Frame 帧速率 fps Framepersecond 指一秒钟动画所包含的帧数 是动画概念的一项重要指标 如 录像带的帧速率为 30fps 电影为 24fps 计算机上的动画一般达到15fps时 播放就很流畅了 4 2 4动画 5 4 网页中的动画广告广告的任务是在最短的时间内传达一个简洁明了的信息或意念 因此网络动画广告的创作比一般意义上的故事情节动画更为自由 其次 网页上放置的动画应少而精 一帧网页上一般放一幅动画为宜 若超过两幅 则会相互影响 整个网页会令人眼花缭乱 反而干扰阅读 或者设计 跳过 Flash动画的按钮 使不想看的人可以选择 4 2 5视频和音频 1 Web多媒体在信息的传递中扮演着重要和独特的角色 因此一个网页设计师要时刻跟踪这些技术的发展状态 对多媒体的应用应有比较理智的认识 音频 视频和动画都是多媒体技术的一部分 由于网络速度的限制 目前视频和音频基本上是被作为单独的一部分链接进页面的 还不能成为页面布局的有机部分 故很难从设计角度进行总结 目前主要还是考虑下载和播放的技术 并介绍一些概念性的知识 以便对视频和音频知识有进一步的了解 4 2 5视频和音频 2 1 音频 1 概述声音是多媒体的一个重要方面 可最大限度地增强展示效果 刺激观众的兴趣 除了可通过互联网直接播放的音乐 采用所谓的 音频流 技术 外 还有那些通过网上下载传播的流行音乐格式 如MP3 VQF等 数字音频文件是声波的数字化表示 可以通过不同的平台 以不同的格式使用 常见的AIF和WAV格式的标准数字音频文件并未经过压缩 有时不太适合在网上使用 4 2 5视频和音频 3 1 音频 2 网上常见的音乐格式网上使用的音频格式文件大部分经过了压缩 主要有 MIDI MusicalInstrumentDigitalInterface 格式 RA RealAudio 格式 MP3 MPEG1Player3 格式 MP4格式 VQF格式 WMA格式 WAV WaveFromAudioFile 格式 AIF格式 AU格式 4 2 5视频和音频 4 1 音频 3 相关概念数字音乐 多媒体中的音乐有两类 音乐和音效音频流 一种专门的音乐压缩技术 可实现下载与播放同步 典型的有RA 还有微软的WMA 音乐的编辑 一般的音乐格式 可利用各种音乐编辑软件进行剪辑 回声 反相 格式转换等编辑功能 音乐的网上发布 常用的网页制作工具可以简单地把诸如MIDI WAV等格式文件作为网站的背景音乐 通过一些专门软件 其它格式的文件也可以较容易地在网上进行播放或发布 4 2 5视频和音频 5 2 视频计算机上使用的是数字视频 电视电影视频是模拟信号 它是将传统的模拟视频片断捕捉并进行转换而成 如 VCD 下面介绍有关视频格式和视频嵌入技术方面的知识 4 2 5视频和音频 5 1 数字视频的主要格式MOV格式 这是Apple公司推出的视频格式 相应的播放软件为QuickTime 1991 现在 也可以在PC上使用 目前已成为桌面视频产品的工业标准 QuickTime在 视频流 技术方面取得了不少成果 能在Internet上播放和存储相当清晰的视频 音频流 AVI格式 这是在Windows上使用的视频文件格式 为Windows95以后的操作平台开发 1992 现在 目前AVI已成为PC上最常用的视频数据格式 原始的AVI格式的视频 音频部分均未经过压缩处理 故一般体积较大 但图像和声音质量都很好 AVI和MOV都是跨平台兼容的 只需各自安装相应的播放软件即可 4 2 5视频和音频 6 1 数字视频的主要格式RM RealMedia 格式 这是RealNetwork公司制定的音频 视频压缩规范 它包括了流文件格式的RealAudio和RealVideo文件 主要用于低速率的网络上实实时传输视频 音频信息的压缩格式 ASF格式 ASF是微软公司为了和RealMedia竞争而开发出来的一种可以直接在网上播放视频节目的视频文件格式 其视频部分采用了先进的MPEG 4压缩算法 音频部分采用了微软的WMA压缩格式 其压缩率和图像质量都不错 4 2 5视频和音频 7 2 将视频 音频文件嵌入到HTML的方法链接 这种方式就像放置任何其它链接一样 嵌入 采用这种方法可以对网络上的视频文件边下载边播放 或者可以让视频信息与其它内容出现在同一页面 但是这要求用户端有相应的插件 Plugin 才能播放 4 2 5视频和音频 8 3 虚拟现实 VR 虚拟现实 VirtualReality 是一项与多媒体技术密切相关的边缘技术 它通过综合应用计算机图像处理 模拟与仿真 传感技术 显示系统等技术设备 以模拟仿真的方式给用户提供一个真实反映操作对象变化与相应作用的三维图像环境 从而构成虚拟世界 并通过特殊设备 如头盔和数据手套 给用户提供一个与该虚拟世界相互作用的三维交互式用户界面 HTML是面向二维的 而VRML VirtualRealityModelingLanguage 虚拟现实建模语言 是一个开放的 面向三维的 可扩充的三维场景描述语言 4 2 6导航和交互设计 1 1 概述与传统媒体相比 网络媒体最大的特点在于它的交互性 交互式设计就是在无序且繁琐的信息之间创造一个具有吸引力的 高效的浏览路线 给人以极大的自由度去创造和选择他们想要的信息 并轻易地了解整个系统与组织的内容 对浏览者而言 网页是杂乱无序的 要在大量的网站和网站的各部分中找到自己想要的信息 优秀的导航和交互设计是十分重要的 4 2 6导航和交互设计 2 2 人机交互的常用方式人机交互的常用方式主要有 1 问答式对话交互这是最简单的人机交互方式 该交互功能使用自然语言提示用户进行回答 用户通过键盘输入字符串来进行回答 这种方式的对话 简单的采用单选或多选方式 将答案限制在很小的范围内 再根据用户的回答去执行相应的功能 或将使用者的信息记录保存 放入数据库或资源库中 4 2 6导航和交互设计 3 2 菜单交互这是使用较早 最广泛的人机交互方式 其特点是让用户在一组多个可能对象中进行选择 各种功能的选择项以菜单形式显示在屏幕上 若选择项目较少 可以将菜单项按线性或顺序排列 若选择项过多 且选择项对应功能本身又有逻辑上的层次结构 则可分层次来组织和安排菜单交互功能 菜单的深度 即菜单的层数 和宽度 指同一层中各菜单项的总数 的组织安排将直接影响用户对菜单的记忆 操作和选择速度 因此应综合考虑 4 2 6导航和交互设计 4 3 功能键使用键盘上的功能键可以代替输入命令或选取功能菜单 同样可以完成交互功能 常见的功能键有 Insert Delete Enter Esc Ctrl C Ctrl V等 功能键的好处是可以减少记忆负担 加快操作 减少输入和出错率等 4 图符使用图符可以形象 逼真地反映各种操作功能 使理解和操作变得更加容易 图符的优点是具体形象 缺点是无法明确表达语义 必须用文字辅以说明 4 2 6导航和交互设计 5 5 查询语言界面查询语言是用户与数据库的交互媒介 是用户定义 检索 修改和控制数据的工具 很多网站的搜索功能就是查询的一种方式 数据库查询语言分为数据认定 数据操作和数据控制三部分 6 自然语言界面指直接用人的自然语言 汉语或英语 来与计算机进行交互和通讯 这是最理想和方便的 在这种交互中 计算机能理解用户自然语言 包括键盘输入文本 手写输入 语音输入等 表达的请求 并转换成交互功能语言 然后提供相应的功能 实现自然语言界面必须解决语音输入识别 人工智能等方面的技术 4 2 6导航和交互设计 6 3 人机交互的特性 1 简易性在进行人机交互设计时 应尽量让计算机更主动 做更多的工作 而让操作者尽量少做 2 友好性指用户操作交互功能时的复杂性 操作复杂性越低 说明交互功能越容易使用 用户感觉使用过程是轻松愉快的 则用户友好性越强 4 2 6导航和交互设计 7 3 灵活性灵活性包含以下含义 交互功能应完全适应各类用户 初级 高级或专家型用户 用户可根据需要制定或修改交互方式 4 明确性指交互的功能和行为对用户是明确清楚的 即不管交互功能本身如何复杂 用户对交互功能是清楚的 并可随时预测交互功能的行为 4 2 6导航和交互设计 8 5 一致性一致性主要体现在指示 反馈方面的一致性 具体是指网站的不同部分 甚至不同页面之间 具有相似的交互处理布局 相似的人机交互方法及相似的信息显示格式等 6 容错性容错性是指交互式设计应能够对可能出现的错误进行检测和处理 如用户的密码发生错误是应能给出友好帮助提示 帮用户找回密码 4 2 6导航和交互设计 9 7 反馈性反馈性是指用户从界面一方获得的信息 表示网络对用户动作作出的反应 若交互功能没有反馈 用户就无法判断他的操作是否为计算机所接受 是否正确以及操作的结果如何 8 图形化图形具有直观形象 信息量大的优点 因此使用图形和形象的比喻手法来表示交互和操作时 会使用户的操作和反馈更直接 可视和逼真 在交互式设计中常用到图标和按钮有形式简洁清晰 强调共性和个性的特点 4 2 6导航和交互设计 10 4 超链接设计 1 超文本超文本是一个编写和组织信息的丰富环境 有了超文本链接 用户可以按自己的顺序和方式去浏览信息 随心所欲地从一个感兴趣的地方跳到另一处 并立即找到所需的信息 2 友好交互设计超文本链接可以呈现给用户一种全新的阅读方式 链接可以使用户迅速回到页面的导航部分 站点地图或主页 应尽量安排体贴的链接 不要让用户穿越太多的页面层次来寻找所需的信息 4 2 6导航和交互设计 11 4 超链接设计 2 友好交互设计友好的交互设计还应能让用户知道他在网站中所处的位置 应提供足够的位置信息 使用户清楚地知道 我在哪 提供当前所处页面与站点其它页面的关系 我能去哪 提供当前页面及内容类型我怎样去哪 提供一致的 易于理解的链接我如何回到起点 提供可实现返回的功能 4 2 6导航和交互设计 12 4 超链接设计 3 组织网页上的信息信息设计是决定一个网站成功与否的重要因素 如何使链接 按钮与网页有机地结合起来 既醒目 又和谐统一 是网页设计师的重要任务 A 安排链接结构的原则要符合浏览者的思维习惯和浏览习惯要使网站中最重要的信息有更多的机会与浏览者见面 4 2 6导航和交互设计 10 3 组织网页上的信息B 组织网页信息的常用方法建立易于管理的信息段 可将内容分成小的文件用超链接将它们组织在一起 控制页面的长度 若某页面的显示超过三屏 则应进行页面分割 使用超文本 提供承前启后的链接将概念 事实或定义连接起来 并尽力预料用户的信息需求 最后 对所提供的信息应采用方便的阅读方式 4 2 6导航和交互设计 10 4 超链接设计 4 增加合理的导航链接导航栏 导航栏就像网站的目录一样 通过它可知道网站有那些栏目 每个栏目的内容如何 导航栏的每部分都与站点的其它页面相链接 其它链接设计 导航栏可以使用户访问站点的各个页面 目录页面可以使用户准确地找到所需的内容 对于较长的页面可以在该页面建立若干个书签 便于阅读 总之 应根据需要采用尽可能多的链接形式 4 2 6导航和交互设计 11 5 网站目录和链接结构对页面设计的影响设计原则与目的 设计网站目录结构的原则是方便网站的管理与维护 设计链接结构的原则是方便浏览者的阅读 对页面的影响 采用何种链接结构将直接影响到版面的布局 总之 设计链接结构的目的在于用最少的链接得到最高的浏览效率 4 3Web页面设计 虽然Web网页设计不同于传统的平面或版式设计 但从其表现形式来看 还是以图像 文字为主的静态设计 因此与传统的平面和版式设计有一定的类似 4 3 1版式设计基础 1 1 概述版面 指页面编排所具有的外在形式 是各种内容编排布局的整体表现形式 版面设计的任务 吸引读者的视线 增强阅读的饿兴趣 帮助读者理解信息 版面设计的基本原则 主题鲜明 形象突出 便于阅读 形式美观 编排有序 布局合理 4 3 1版式设计基础 2 2 平面构成基础 1 抽象的概念 指在造型活动中 不以现实形态为依据 而专门研究点 线 面 体在空间的相对排列关系及形成的一定表现力 版面设计要受到抽象美术的新的审美观念的影响 如将版面中的万物归纳为点 线 面 体 空间 色彩等基本要素的构成 2 版面设计结构组织的目的通过各种运动现状 激发阅读的兴趣 传达一种心声 唤起读者的想象 达到信息与情感的沟通 从而使版面结构产生特有的生命力 将主题意义 力感运动 情感表现 通过形状 数量 方向 大小等转化为版面组织 版面结构的变化 研究它们的形式关系 将有助于对版面的理解与分析 4 3 1版式设计基础 3 2 潜在的结构版面中一些潜在的线与点 可衍生出各种各样的结构 使版面的布局更清晰和合理 这些版面结构往往与视觉流程的设计和形式法则的运用有密切的联系 3 点的结构点是版面设计中一个最灵活的要素 其大小 形态 色彩 空间位置等的变化 常使版面产生不同的视觉效果 单一的点具有放射力 起集中或凝固视线的作用 在版面中形成紧张的力点感觉 两点或更多点时 在视觉上会产生动感 它们之间产生的力线起着互相制约的作用 三点以上形成面 点与点的角度产生力的方向 4 3 1版式设计基础 4 4 线的结构线是点移动的轨迹 线有长度和宽度 有方向及空间场的作用 在版面中起连接 咬合 支撑 聚合 加固以及构筑版面骨架的作用 线有直线 曲线 虚线 实线等各种 1 直线 直线坚硬 明确 具有男性的气质 如坚定的头脑 理性的思考 顽强的意志 果断的行为等 具有明确的方向性 此外 不同粗细的直线往往起到分割空间的作用 2 曲线 曲线在版面设计中优雅 柔和 细腻 有感性 与直线相比 曲线富于变化 动感强而富有活力 具有多变性和含蓄性 是女性的象征 曲线大体上可分为几何曲线和自由曲线两种 4 3 1版式设计基础 5 5 面的结构面是点的密集与放大 是线的加强与重复 面具有几何形态 严谨圆满 和不规则的自由形态 活泼浪漫 在空间中产生层次性的美感 面的表现主要是依据线的表情而定 直线形的面 简洁 单纯 折线形的面 含有痛苦与紧张之感 曲线形的面 柔软 富有弹性 圆和椭圆的面 完美又显温暖 4 3 1版式设计基础 6 3 版面设计的形式法则一个页面要设计得具有美感 令人赏心悦目 对眼睛具有吸引力 能引起人潜意识的注意 快速准确地传递信息 否则会带来误导甚至思维混乱 大量的研究发现 能引发视觉愉悦效果的规则是 比例 均衡 对称 统一 简洁与力度 节奏韵律 虚实空白等等 版面中的图文编排并不是一门严谨的科学 不可能有绝对的法则可循 也不可能用定量分析来描述 只有在大量的设计实践中才能熟练掌握 4 3 2Web综合设计 1 1 网页的布局布局 指的是在一个限定的面积范围内 合理安排布置图形 图像和文字的位置 把文章的信息按照轻重缓急得秩序排列的同时 将页面美化装饰起来 网页的版面 是指从浏览器看到的完整的一个页面 页面的结构是由所选用的框架或页面模板所决定的 4 3 2Web综合设计 2 1 网页的布局网页的布局主要包括以下内容 1 构思与勾画草图 草图的目的是将脑海里朦胧的想法具体化 2 细部设计 3 量化描述 4 2 6导航和交互设计 12 4 超链接设计 3 组织网页上的信息信息设计是决定一个网站成功与否的重要因素 如何使链接 按钮与网页有机地结合起来 既醒目 又和谐统一 是网页设计师的重要任务 A 安排链接结构的原则要符合浏览者的思维习惯和浏览习惯要使网站中最重要的信息有更多的机会与浏览者见面 4 2 6导航和交互设计 10 3 组织网页上的信息B 组织网页信息的常用方法建立易于管理的信息段 可将内容分成小的文件用超链接将它们组织在一起 控制页面的长度 若某页面的显示超过三屏 则应进行页面分割 使用超文本 提供承前启后的链接将概念 事实或定义连接起来 并尽力预料用户的信息需求 最后 对所提供的信息应采用方便的阅读方式 4 2 6导航和交互设计 10 4 超链接设计 4 增加合理的导航链接导航栏 导航栏就像网站的目录一样 通过它可知道网站有那些栏目 每个栏目的内容如何 导航栏的每部分都与站点的其它页面相链接 其它链接设计 导航栏可以使用户访问站点的各个页面 目录页面可以使用户准确地找到所需的内容 对于较长的页面可以在该页面建立若干个书签 便于阅读 总之 应根据需要采用尽可能多的链接形式 4 2 6导航和交互设计 11 5 网站目录和链接结构对页面设计的影响设计原则与目的 设计网站目录结构的原则是方便网站的管理与维护 设计链接结构的原则是方便浏览者的阅读 对页面的影响 采用何种链接结构将直接影响到版面的布局 总之 设计链接结构的目的在于用最少的链接得到最高的浏览效率