第12章 Web 设计基础 清华大学出版社

主要内容 Web设计原则 网站结构规划 网页布局 内容设计 色彩设计

12.1 Web设计原则 Web设计师需要研究如何布局、处理字体和颜色以及空白的应用。

12.1.1明确站点类型 新闻资讯类站点，如新浪，搜狐等大型门户网站

12.1.1明确站点类型 一些资讯和形象相结合的网站，如政府网等

12.1.1明确站点类型 形象类网站，比如商业企业的对外宣传网站

12.1.1明确站点类型 除了上述网站类型外，还有一些网站具有更多的专业化设计。例如，瑞丽女性网

12.1.1明确站点类型 迪士尼网站充分考虑了儿童的特别，其设计非常活泼有趣

12.1.2保持站点简洁明确 Web设计要求界面简洁 Web设计要求内容明确 简洁首先是对内容文本进行精炼化，保留关键信息。 使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。 另一种保持简洁的做法是限制所用的字体和颜色的数目。 Web设计要求内容明确 使用清楚的消息标识，确保用户了解此页面的上下文 还可以使导航元素保持一致，并且对访问率最高的区域进行明显的标记，是它们易于被用户找到。 界面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来。 除此之外，还要确保界面上每一个元素都能让浏览者看到。

12.1.3页面设计一致性 页面的结构排版 通过定义一致的页面模板，各个页面使用相同的页边距； 文本和图形之间保持相同的间距； 主要图形、标题或符号旁边留下相同的空白。 如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志， 如果使用图标导航，则各个页面应当使用相同的图标来创造出一种熟悉感。

12.1.3页面设计一致性 当当网的二级栏目图书频道和其首页导航条保持一致。这样使得这些页面呈现出的视觉形象就是相互联系，也使用户感知到正在访问的页面与此前访问的该网站的网页是相互联系的。

12.1.4 注重用户体验 注重用户体验是Web站点设计应考虑的一个重要方面，它要求把用户放在第一位，设计时既要考虑用户的共性，同时也要考虑他们的差异性。

12.1.4 注重用户体验 研究用户 有效的导航和位置设计 保持整个网站一致性的设计 清晰准确的内容设计，便于用户快速的获得所需的任何信息

12.2 网站结构规划 Web 站点由一组 Web 页面组成，而且这些 Web 页面具有一定的分层设计和组织。

12.2.1网站栏目规划 好的栏目规划结构是网站内容的总体概述，它利用导航的形式予以表现，指引浏览者在页面间访问和跳转。 网站栏目的划分需要遵循一些基本的原则。 第一，栏目内容一定要紧扣主题 第二，栏目的目录设计要求简洁，结构层次清晰，以方便网站的管理。 第三，栏目的内容要突出重点，对于用户经常要访问的内容应直接放入主栏目下。 第四，为方便用户使用，一般情况下访问者应能够在3-5次鼠标点击后可查询到相关问题。

12.2.2目录结构规划 下面是建立目录结构的一些建议 另外还有一些需要注意的目录规划原则。如 不要将所有文件都存放在根目录下。 按栏目内容建立子目录 建立一些特定目录存放公共信息。 另外还有一些需要注意的目录规划原则。如 目录的层次不要太深，建议不要超过3层。 不要使用中文目录；使用中文目录可能对网址的正确显示造成困难。 不要使用过长的目录； 尽量使用意义明确的目录，比如可以使用image，css，js，post，bbs等。 首页通常命名为index或者default，并应放在根目录下，而且每个栏目的首页也应遵循这样的规则。

一个班级网站的目录结构规划图

12.3 网页布局 布局设计原则 布局设计类型 布局设计元素 布局设计技术

12.3.1布局设计原则 网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式 网页布局应区分栏目模块的重要程度。 网页布局必须尊重用户习惯。

12.3.2布局设计类型 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

“国”字型网页布局

拐角型

标题正文型 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类型。

框架型 框架型还分为左右框架，上下框架及综合框架等。框架型网站的优势在于可以使网站的维护变的相对容易，但其不易被搜索引擎索引。框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活，通常用于网站后台管理页面的布局；

封面型

Flash型

12.3.4 布局设计技术 table表格布局； DIV+CSS布局； 框架布局。

表格布局技术 表格布局的优点： 表格布局的缺陷： 简单易用 所见即所得 设计速度快 代码可读性差，可维护性差。 网页打开速度较慢。后台代码太多，导致网站打开速度慢。

DIV+CSS布局技术 DIV+CSS布局优点： 存在一定的缺点 提高搜索引擎对网页的索引效率。 缩短改版时间。 大大缩减页面代码，提高页面浏览速度，缩减带宽成本； 强大的字体控制和排版能力。 存在一定的缺点 可观性差 操作繁琐 兼容性较差

框架布局技术 框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常和表格配合使用，先用框架将页面划分为几个区域，然后再用表格实现各区域的精确局部，其常常用在网站系统的后台页面设计中。

12.4内容设计 对于网页来说，最重要的就是信息内容。信息的品质与数量决定了人们对这个网页的评价高低。一般而言，内容通常有两种表现类型：文本和多媒体。

12.4.1文本 文字的格式化 文字的格式化包括字号、字体、字间距、行距等。 字号的大小可以用不同的方式表达，例如磅(Point)或像素(Pixel)。 字体可以被网页设计者用来更充分地体现设计中要表达的情感。 行距就是在两行文字之间间隔距离的大小，是从一行文字基线到另一行文字基线之间的距离。行距本身也是具有强表现力的设计语言。

12.4.1文本 文字的强调 文字的强调一般是对网站内容信息的一个加强手法。通常有以下几种 行首的强调 引文的强调 个别文字的强调

文字的颜色 文字的颜色 在网页设计中，颜色的运用可以强调文字中特别的部分，还可以对整个文字内容的情感表达产生影响。

12.4.2多媒体 图片格式 图片使用原则 GIF格式 JPG格式 PNG格式 要尽可能保证下载速度 在网页中所采用的每一张图片最好加入Width、Height这两个属性，这样会网页数据下载过程更顺畅。 尽量将网站内容进行分类管理，尽量细化管理 将这些大的图片分割一下 网页底图要简单明快

12.4.3内容排版 排版并仅仅做到整齐就足够，还要有明确的分类，以及主题的适当规划。排版包括表格、框架的应用、文字缩排、段落等等。 两端均齐 居中排列 左对齐或右对齐 绕图排列

12.4.3内容排版 在对内容进行排版上，需要注意以下几个问题： 把关联项在视觉上进行分组 创建视觉层次 容易查找和阅读的布局 利用三分法，确定表现重点位置。

12.5色彩设计 色彩是网站最重要的一个部分，色彩能够呈现设计意图、表达个性、对内容进行区分、布局和强调，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。

12.5.1色彩基础 色彩 在电脑显示屏的颜色显示中，RGB是表示红色绿色蓝色又称为三原色光，英文为R(Red)、G(Green)、B(Blue)。这三种颜色的数值都是255。在RGB模式下，每种RGB成分都可使用从0（黑色）到255（白色）的值。例如，亮红色使用数值(R:255, G:0, B:0)，其十六进制表示是(FF0000)。 在色彩中，任何一个色彩都有它特定的色相、明度、纯度，他们被称为色彩的三要素。 色彩的心理感觉 从人对色彩的感觉来分，色彩可以分为冷色、暖色两大类。 冷色系给人以寒冷的感觉，如蓝色。 暖色系给人以温暖的感觉。如橙色。

12.5.1色彩基础 色彩的搭配 近似色的配置 同种色的配置 差异色的配置 对比色的配置 分离配色的配置 色彩面积分布的配置。

12.5.2网页中的色彩设计 网页中的色彩包括网页的底色、文字字型、图片的色系、颜色等。不同的色系体现不同的风格，比如政府网站，其首页的风格应当是沉稳、简明、大方，因此宜于一两种基色的搭配为主色来显示内容信息。同时为了防止由于主色构成相对单一而造成的色彩过淡，还可通过对比鲜明的色彩来强化人们的视觉。 利用色彩确定网站基调 利用色彩划分版面布局 利用色彩进行强调和引导

Thank You !