网页设计课件.ppt

网页设计 主讲 秦旭剑 2020 4 9 1 一 网络概述1 网页设计的载体 网络媒体的诞生与发展连接世界不同国家 领域 行业的INTERNET国际计算机分组交换网络是迄今为止世界最为成功和覆盖面最大的国际网络 它始于1980年的美国 采用了TCP IP协议 目前 网络已把世界上150个国家和地区 数万个区域网连接在一起 网络用户达数亿 网页设计 2020 4 9 2 2 网络的表现形式 网站之设计 二维设计的新舞台 随着网络工具的迅速普及和入网用户的不断增多 上网已成为一种时尚 2020 4 9 3 2020 4 9 4 二 网页艺术设计的特性1 交互性与持续性网页不同于传统媒体之处 就在于信息的动态更新和即时交互性 2 多维性多维性源于超级链接 主要体现在网页设计中对导航的设计上 2020 4 9 5 3 多种媒体的综合性随着网络带宽的增加 芯片处理速度的提高以及跨平台的多媒体文件格式的推广 必将促使设计者综合运用多种媒体元素来设计网页 以满足和丰富浏览者对网络信息传输质量提出的更高要求 典型的有在线音乐 在线广播 网上电影 网上直播等 4 版式的不可控性网页版式设计与传统印刷版式设计有着极大的差异 1 印刷品设计者可以指定使用的纸张和油墨 而网页设计者却不能要求浏览者使用什么样的电脑或浏览器 2 网络正处于不断发展之中 不象印刷那样基本具备了成熟的印刷标准 3 网页设计过程中有关Web的每一件事都可能随时发生变化 2020 4 9 6 这一切说明 网络应用尚处在发展之中 关于网络应用也很难在各个方面都制订出统一的标准 这必然导致网页版式设计的不可控制性 其具体表现为 1 网页页面会根据当前浏览器窗口大小自动格式化输出 2 网页的浏览者可以控制网页页面在浏览器中的显示方式 3 不同种类 版本的浏览器观察同一个网页页面 效果会有所不同 4 用户的浏览器工作环境不同 显示效果也会有所不同 把所有这些问题归结为一点 即网页设计者无法控制页面在用户端的最终显示效果 但这也正是网页设计的吸引人之处 2020 4 9 7 5 技术与艺术结合的紧密性网络技术主要表现为客观因素 艺术创意主要表现为主观因素 网页设计者应该积极主动地掌握现有的各种网络技术规律 注重技术和艺术紧密结合 这样才能穷尽技术之长 实现艺术想象 满足浏览者对网页信息的高质量需求 2020 4 9 8 2020 4 9 9 三 建立网站1 认识网页和网站网站是由网页集合而成 而大家通过浏览器看到的画面就是网页 网页说具体了是一个html文件 浏览器是用来解读这份文件的 2 建立一个网站就像建造一幢高楼大厦 有一个详细的程式和诸多细节 网站设计策划是把具体的要求和设计的表现从意念到具体的过程 2 1 网站总策划2 2 网站的基本功能描述2 3 用户界面与设计风格意念的纲要 2020 4 9 10 3 网页设计3 1 定位网站的主题题材的选择美国 个人电脑 杂志 PCMagazine评出的2001年度排名前100位的全美知名网站的十类题材 这对于读者进行网站设计 提供了一些参考价值 第一类 网上求职第二类 网上聊天 即时信息 ICQ第三类 网站社区 讨论邮件列表第四类 计算机技术第五类 网页 网站开发第六类 娱乐网站第七类 旅行第八类 参考 资讯第九类 家庭 教育第十类 生活 时尚 2020 4 9 11 走迷宫只是在做游戏时才会首生乐趣 但如果在日常生活中我们陷入迷宫 那则是最烦恼的事情 如果受众在点击WEB的具体内容和深层页面时不易找到顺畅的路径和导航标识 不明确或不易懂就如同步入迷宫 其结果是受众只有放弃进入 因此 在网络广告中创建大家公认且熟知 清晰 简洁 易懂的网站导航系统是十分重要的 3 2 网页结构层次上的设计艺术 2020 4 9 12 进入图书馆 是否询问 否 是 找人询问 回答是否可靠 是 找书室 再问人 找书架 浏览 找个更好的服务员 还有信心吗 还有 没有 找出口 找示意图 找书架区域 寻找书架标识 找架层 浏览 是否找到 是 否 自已在正确的位置吗 否 是 还有 还有信心吗 几乎没有 找服务员 是 是否找到 否 彻底没信心了 1 在图书馆查找图书的情景 2020 4 9 13 进入网站 是否习惯搜索 否 是 找搜索框 输入词汇 结果是否可靠 是 从中找出你的目标 逐项查找 改进提问的方式 是否还有信心 还有 没有 离去 点击某个栏目 点击某个子栏目 寻找所需要的信息 是否找到 是 否 认为自已在正确的栏目吗 否 是 还有 还有信心吗 几乎没有 购买 是 是否找到 否 彻底没信心了 否 2 在网上购书的情景 2020 4 9 14 3 别让我动脑 的概念美国著名的网页优化设计大师斯蒂夫 克鲁格说过 他推崇的第一原则就是 别让我动脑 电子商务网站这个概念很明确 就是要体现商务 可以是网上购物的 可以是在线票务的 可以是网上的交易平台 总之就是让用户在网络上实现商务目的 现在电子商务网站大体会有两个部分B2B 商家对商家 B2C 商家对普通零散用户 B2C是电子商务网站设计的最高境界 如果能够做出成功的B2C网站那么别的什么企业展示网站或者B2B的商务网站等等就都不算什么了 原因也很简单 就是因为上边所提过的人和人的差异 下面是一个用户浏览一个网站的过程图 这张图有助于我们了解用户浏览网站的整个过程 我们可以根据这张图列出的步骤细心观察测试时候用户在网站上完成一个工作时候在每一个步骤里所用的时间 都做了些什么 并记录下来认真分析这些数据 这些数据也是我们优化动作的依据 2020 4 9 15 2020 4 9 16 4 确定网站的目录结构和链接结构 网站的目录结构建立目录结构的一些建议 1 不要将所有文件都存放在根目录下2 按栏目内容建立子目录在设置网站的目录结构时 需要注意的问题有 1 不要使用中文名字的目录名 2 不要使用过长的目录名 3 尽量使用意义明确的目录名 尽量做到 见名知意 4 目录的层次不要太多 建议不要超过3层 3 网页制作的基本步骤 网站的链接结构一般情况下 建立网站的链接结构有以下三种基本方式 树状链接结构层状结构 如图2 1所示 类似于目录系统的树型结构 由网站文件的主页开始 依次划分为一级标题 二级标题等等 逐级细化 直至提供给浏览者具体信息 2020 4 9 17 2020 4 9 18 线性链接结构线性结构 如图2 2所示 类似于数据结构中的线性表 用于组织本身的线性顺序形式存在的信息 可以引导浏览者按部就班地浏览整个网站文件 这种结构一般都用在意义是平行的页面上 链接结构的设计 在实际的网页制作中是非常重要的一环 采用什么样的链接结构将直接影响到版面的布局 通常情况下 网站文件的结构是层状结构和线性结构相结合的 也就产生了第三种情况 Web结构Web结构 如图2 3所示 类似于Internet的组成结构 各网页之间形成网状连接 允许用户随意浏览 2020 4 9 19 2020 4 9 20 5 网络导航的惯例导航的设计是否遵循人们的日常习惯是网络广告作用大小的关键所在 任何事物都有它的惯例 楼宇空间的示意图总是在进楼的入口的两侧 街道的路牌总是在路的拐角处 书的目录总是在书的前面 而页码总是在上角或下角 人们知道找什么东西到哪儿去找 如果找不到也很少到别处乱找 因而 我们要懂得和遵守惯例 如果打破某一事项的惯例就会出现许多烦心事 在网络广告中就会使信息的传播中断 2020 4 9 21 固定导航固定导航在网站的主页上战有显著的位置 一般在设计上会采用比较规正的形式 且在这一网站中的每个页面上占据同样的位置 固定导航应包含最常见的五种元素 网站标识 栏目 公共服务 返回主页和搜索功能 做好导航每个页面都要有导航按钮 应当避免强迫用户使用工具栏中的向前和向后按钮 你的设计应当使用户能够很快地找到他们所要的东西 绝大多数好的站点在每一页同样的位置上都有相同的导航条 使浏览者能够从每一页上访问网站的任何部分 固定导航如应如同业务熟练且服务周到的导游 随时告知你现在在哪 你可以到何处去 并应该怎样走和东南西北各有什么精彩的景点 2020 4 9 22 以下分别介绍这五种元素的常规设计和注意事项 1 网络标识设计网络标识无论是图形 文字或文字缩写 它都代表着一个区域或一个大空间的名称 在网络这个虚拟的空间中人往往没有位置感 在逻辑上网站的标识应处于整个网站设计的最高层面 网站的层次依此排序示意如下 某网站 网站栏目 子栏目 子子栏 某页面 页面某个区 区域内不同内容 2020 4 9 23 在设计形式上使网站标识居于可视层次结构的最高层面有多种方法 将标识设计在页面最显著 最上端的构图区域 使其居于明度反差最高的层面 在色彩上使用最高的统一计划 标识的字号最大或阴影面积较大 把其他内容框在网站标识之内 另外 网站标识的外观造型设计和平面设计的标志标识的规律相同 标志可以是中文 英文字母 可以是符号 图案等等要求醒目 简洁 易读 易记忆 比如 YAHOO是用YAHOO的英文作为标志 新浪用SINA加眼睛作为标志 标志的设计创意来自你的网站的名称和内容 2020 4 9 24 2 网络栏目设计栏目一词借用于报纸 本是一栏或多栏内固定内容的归纳与界定 随着报纸内容的增多又出现了不同的版块 而在空间无限的网络中栏目的标题可以具体颁在主页当中 而更需在首页的开始 标识的次一级层次上出现 通过它可以连接不同页面 2020 4 9 25 内容多的广告或大型集团公司 社会服务机构 大型市场的WEB广告还可设计出在每一栏目下的子栏目 这样层次分明 使用方便 需注意的是 栏目标题下的背景需有颜色块 以示可以点击 这一层次的底色不宜与整体版面底色的明度反差过大 3 公共服务设计公共服务同样是网络的重要链接 它并不具备目录的功能 而是连接网络的一些必不可少的重要元素尤其是商业性网站 商业广告 电子商务等网站这一公共服务的设置更是不可缺少 2020 4 9 26 返回主页在主页的不同层次的页面上必须存在的固定导航是 返回主页 的链接 它可使用户随时重新快捷地返回到原来的地方 给用户一种归属感和安全感 不至于迷失方向 目前有许多网站在各页面的层面上将网站标识与返回主页合二为一 这时一个有效的方法 既明确又节省空间 值得借鉴 4 搜索设计由于一些网站或主页的信息量会很大 因此 WEB上每一个页面上都应设有搜索框或是一个搜索页面的链接 这样可以极大地提高用户的使用效率 为那些惯于使用搜索的上网者提供方便 2020 4 9 27 5 检索凸舌设计检索凸舌是网络中的又一种链接方式 它是从现实生活中提炼出来的一种有效的检索方法 它能把众多的内容分区管理并作出明显标识 使人容易方便地找到和打开相应的栏目 在网站不同层次的页面中 凸舌 可以提出供给予我们需要查找的目录 并通过点击迅速地打开相应的页面找到所需的信息 检索凸舌的优势如下 1 一目了然2 凸舌既整齐又生动3 生动地表现受众的选择 2020 4 9 28 6 网站的色彩色彩是艺术表现的重要要素之一 它是光刺激眼睛传导到大脑中枢而产生的一种感觉 色调及黑 白 灰的三色空间关系不论在设计还是在绘画方面都起着重要的作用 网站给人的第一印象来自其视觉效果 确定网站的标准色彩是相当重要的一步 不同的色彩搭配产生不同的效果 并能影响到浏览者的情绪 标准色彩 是指能体现网站形象和延伸内涵的色彩 2020 4 9 29 如IBM的深蓝色 肯德基的红色 windows视窗标志上的红蓝黄绿色块 都是我们觉得很贴切 很和谐 如果将IBM改用绿色或者黄金色 我们会有什么感觉 一般来说 一个网站的标准色彩不超过三种 太多则令人眼花缭乱 标准色彩要用于网站的标志 标题 主菜单和主色块 给人以整体统一的感觉 至于其他色彩也可以使用 只是作为点缀和衬托 绝不能喧宾夺主 色彩总的应用原则应该是 总体协调 局部对比 也就是 主页的整体色彩效果应该是和谐的 只有局部的 小范围的地方可以有一些强烈色彩的对比 在色彩的运用上 可以根据主页内容的需要 分别采用不同的主色调 2020 4 9 30 2020 4 9 31 7 网站的标准字体和图片和标准色彩一样 标准字体是指用于标志 标题 菜单的特有字体 一般我们网页默认的字体是宋体和12px 图片问题主要存在size过大的问题 网页中一般应用两种格式的图片jpeg和gif 动画不要用太多大家都喜欢用GIF动画来装饰网页 但是太多太乱的动画会使浏览者注意力分散 视觉疲劳 有很多网站都在使用记数器 最好不用记数器 2020 4 9 32 2020 4 9 33 8 网站的版式设计网站的最终表现集中在他的视觉界面上 网页作为一种视觉语言 其非常讲究视觉元素编排和布局 虽然网页的设计不同于平面设计 但它们有许多相近之处 版式设计通过诸多视觉要素的视觉空间组合 表达和谐统一视觉体验 1 主次分明 中心突出 在一个页面上 必然考虑视觉的中心 这个中心一般在屏幕的中央 或者在中间偏上的部位 因此 一些重要的文章和图片一般可以安排在这个部位 在视觉中心以外的地方就可以安排那些稍微次要的内容 这样在页面上就突出了重点 做到了主次有别 2020 4 9 34 2 大小搭配 相互呼应 较长的文章或标题 不要编排在一起 要有一定的距离 同样 较短的文章 也不能编排在一起 对待图片的安排也是这样 要互相错开 造成大小之间有一定的间隔 这样可以使页面错落有致 避免重心的偏离 2020 4 9 35 3 图文并茂 相得益彰 文字和图片具有一种相互补充的视觉关系 页面上文字太多 就显得沉闷 缺乏生气 页面上图片太多 缺少文字 必然就会减少页面的信息容量 因此 最理想的效果是文字与图片的密切配合 互为衬托 既能活跃页面 又使主页有丰富的内容 2020 4 9 36 4 表格是网页页面中最重要的排版方式网页的适应性就是在不同系统 不同浏览器和不同分辨率的适应能力 要注意的是分辨率 应该最低照顾到800 600的用户 分辨率800 600的显示尺寸780 428 分辨率1024 768的显示尺寸1007 600 所以页面最宽不要超过780 一定不要让用户横向拖页面 2020 4 9 37 9 使用著名的插件如果网站上有声音或视频 要保证使用者通过使用某个知名的插件 能够听到或看到 如果访问者没有所要求的插件 将不得不到其它站点去下载 这样访问者有可能就不会返回了 许多站点使QuickTime RealPlay和Shockwave插件 因为 许多访问者并不愿意浪费很多时间和金钱去下载可能仅使用一次的插件 2020