web设计原则

12.4.1文本

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

12.2.2目录结构规划

下面是建立目录结构的一些建议

不要将所有文件都存放在根目录下。 按栏目内容建立子目录 建立一些特定目录存放公共信息。 目录的层次不要太深，建议不要超过3层。 不要使用中文目录；使用中文目录可能对网址的正确显示造成 困难。 不要使用过长的目录； 尽量使用意义明确的目录，比如可以使用image，css，js， post，bbs等。 首页通常命名为index或者default，并应放在根目录下，而且 每个栏目的首页也应遵循这样的规则。
12.1.4 注重用户体验
研究用户 有效的导航和位置设计 保持整个网站一致性的设计 清晰准确的内容设计，便于用户快速的获得所需的 任何信息

12.2 网站结构规划
Web 站点由一组 Web 页面组成，而且这些 Web 页面具有一定的分层设计和组织。 结构设计要做的事情就是如何将内容划分为清 晰合理的层次体系，建立起组成 Web 站点的 各个页面相互关联关系，构建一个组织优良的 网站整体。
– – –
利用色彩确定网站基调 利用色彩划分版面布局 利用色彩进行强调和引导
网页设计与开发
Company name

12.3.2布局设计类型

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

这种类型即最上面是标题或类似的一些东西，下 面是正文，比如一些文章页面或注册页面等就是 这种类型。
框架型
源自文库
12.1.1明确站点类型

迪士尼网站充分考虑了儿童的特别，其设计非常 活泼有趣
12.1.2保持站点简洁明确

Web设计要求界面简洁



简洁首先是对内容文本进行精炼化，保留关键信息。 使用一个醒目的标题，这个标题常常采用图形来表示，但 图形同样要求简洁。 另一种保持简洁的做法是限制所用的字体和颜色的数目。
12.4.1文本

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



行首的强调 引文的强调 个别文字的强调
文字的颜色

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

图片格式
–
– –
GIF格式 JPG格式 PNG格式
框架型还分为左右框架，上下框架及综合框架等。 框架型网站的优势在于可以使网站的维护变的相 对容易，但其不易被搜索引擎索引。框架结构的 一个共同特点就是浏览方便，速度快，但结构变 化不灵活，通常用于网站后台管理页面的布局；
封面型
Flash型
12.3.4 布局设计技术
table表格布局； DIV+CSS布局； 框架布局。

12.2.1网站栏目规划
好的栏目规划结构是网站内容的总体概述，它利用 导航的形式予以表现，指引浏览者在页面间访问和 跳转。 网站栏目的划分需要遵循一些基本的原则。

第一，栏目内容一定要紧扣主题 第二，栏目的目录设计要求简洁，结构层次清晰，以 方便网站的管理。 第三，栏目的内容要突出重点，对于用户经常要访问 的内容应直接放入主栏目下。 第四，为方便用户使用，一般情况下访问者应能够在 3-5次鼠标点击后可查询到相关问题。

另外还有一些需要注意的目录规划原则。如




一个班级网站的目录结构规划图
12.3 网页布局
布局设计原则 布局设计类型 布局设计元素 布局设计技术

12.3.1布局设计原则
网页布局的内容应来源于需求，栏目的重要程度 决定了网页布局的形式 网页布局应区分栏目模块的重要程度。 网页布局必须尊重用户习惯。
要尽可能保证下载速度 在网页中所采用的每一张图片最好加入Width、Height 这两个属性，这样会网页数据下载过程更顺畅。 尽量将网站内容进行分类管理，尽量细化管理 将这些大的图片分割一下 网页底图要简单明快

图片使用原则
– – – – –
12.4.3内容排版

排版并仅仅做到整齐就足够，还要有明确的分类， 以及主题的适当规划。排版包括表格、框架的应 用、文字缩排、段落等等。


12.1.3页面设计一致性

页面的结构排版




通过定义一致的页面模板，各个页面使用相同 的页边距； 文本和图形之间保持相同的间距； 主要图形、标题或符号旁边留下相同的空白。 如果在第一页的顶部放置了公司标志，那么在 其他各页面都放上这一标志， 如果使用图标导航，则各个页面应当使用相同 的图标来创造出一种熟悉感。
使用清楚的消息标识，确保用户了解此页面的上下文 还可以使导航元素保持一致，并且对访问率最高的区域进 行明显的标记，是它们易于被用户找到。 界面上所有的元素都应当有明确的含义和用途，不要试图 用无关的图片把界面装点起来。 除此之外，还要确保界面上每一个元素都能让浏览者看到。

Web设计要求内容明确

– – – –
两端均齐 居中排列 左对齐或右对齐 绕图排列
12.4.3内容排版

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

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

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

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

色彩的心理感觉
– – –
12.5.1色彩基础

色彩的搭配
近似色的配置 – 同种色的配置 – 差异色的配置 – 对比色的配置 – 分离配色的配置 – 色彩面积分布的配置。
–
12.5.2网页中的色彩设计

网页中的色彩包括网页的底色、文字字型、图片 的色系、颜色等。不同的色系体现不同的风格， 比如政府网站，其首页的风格应当是沉稳、简明、 大方，因此宜于一两种基色的搭配为主色来显示 内容信息。同时为了防止由于主色构成相对单一 而造成的色彩过淡，还可通过对比鲜明的色彩来 强化人们的视觉。
网页设计与开发
清华大学出版社
第12章 Web 设计基础
Company name
主要内容
• Web设计原则 • 网站结构规划 • 网页布局 • 内容设计 • 色彩设计
12.1 Web设计原则
Web设计师需要研究如何布局、处理字体 和颜色以及空白的应用。 Web站点所要实现的目标是设计的最终方 向，而页面的制作仅仅是设计的具体实现。 Web站点的设计并不是通常认为的网页制 作，而是一个融合了多种设计原则和设计过程 的系统工程。
12.5.1色彩基础

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

表格布局技术

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

表格布局的缺陷：
– –
DIV+CSS布局技术

DIV+CSS布局优点：
– – – – –
Div 用于搭建网站结构、css 用于创建网站表现，将表 现与内容分离，便于大型网站的协作开发和维护。 提高搜索引擎对网页的索引效率。 缩短改版时间。 大大缩减页面代码，提高页面浏览速度，缩减带宽成本； 强大的字体控制和排版能力。 可观性差 操作繁琐 兼容性较差
12.1.1明确站点类型
新闻资讯类站点，如新浪，搜狐等大型门户网 站

12.1.1明确站点类型

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

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

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

存在一定的缺点
–
– –
框架布局技术

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

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