第12章web设计原则

1、第12章 Web 设计(shj)基础 清华大学出版社共四十三页主要(zhyo)内容Web设计(shj)原则 网站结构规划网页布局内容设计 色彩设计 共四十三页12.1 Web设计(shj)原则 Web设计师需要研究如何布局、处理字体和颜色(yns)以及空白的应用。 Web站点所要实现的目标是设计的最终方向，而页面的制作仅仅是设计的具体实现。 Web站点的设计并不是通常认为的网页制作，而是一个融合了多种设计原则和设计过程的系统工程。共四十三页12.1.1明确(mngqu)站点类型 新闻资讯类站点，如新浪，搜狐等大型(dxng)门户网站 共四十三页12.1.1明确(mngqu)站点类型一些资讯(z

2、 xn)和形象相结合的网站，如政府网等 共四十三页12.1.1明确(mngqu)站点类型形象(xngxing)类网站，比如商业企业的对外宣传网站 共四十三页12.1.1明确(mngqu)站点类型除了上述网站类型(lixng)外，还有一些网站具有更多的专业化设计。例如，瑞丽女性网 共四十三页12.1.1明确(mngqu)站点类型迪士尼网站(wn zhn)充分考虑了儿童的特别，其设计非常活泼有趣 共四十三页Web设计要求界面简洁简洁首先是对内容文本进行精炼化，保留关键信息。使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。另一种保持简洁的做法是限制所用的字体和颜色的数目。 Web

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

4、标来创造出一种熟悉感。 12.1.3页面(y min)设计一致性 共四十三页12.1.3页面(y min)设计一致性当当网的二级栏目(ln m)图书频道和其首页导航条保持一致。这样使得这些页面呈现出的视觉形象就是相互联系，也使用户感知到正在访问的页面与此前访问的该网站的网页是相互联系的。 共四十三页注重用户体验是Web站点设计应考虑的一个重要(zhngyo)方面，它要求把用户放在第一位，设计时既要考虑用户的共性，同时也要考虑他们的差异性。12.1.4 注重(zhzhng)用户体验共四十三页12.1.4 注重用户(yngh)体验研究用户 有效的导航和位置设计 保持(boch)整个网站一致性的设计

5、 清晰准确的内容设计，便于用户快速的获得所需的任何信息 共四十三页Web 站点由一组 Web 页面组成(z chn)，而且这些 Web 页面具有一定的分层设计和组织。结构设计要做的事情就是如何将内容划分为清晰合理的层次体系，建立起组成 Web 站点的各个页面相互关联关系，构建一个组织优良的网站整体。12.2 网站(wn zhn)结构规划共四十三页12.2.1网站(wn zhn)栏目规划好的栏目规划结构是网站内容的总体概述，它利用导航的形式予以表现，指引浏览者在页面间访问和跳转。 网站栏目的划分需要遵循一些基本的原则。第一(dy)，栏目内容一定要紧扣主题 第二，栏目的目录设计要求简洁，结构层次清

6、晰，以方便网站的管理。 第三，栏目的内容要突出重点，对于用户经常要访问的内容应直接放入主栏目下。 第四，为方便用户使用，一般情况下访问者应能够在3-5次鼠标点击后可查询到相关问题。 共四十三页12.2.2目录结构(jigu)规划下面是建立目录结构的一些建议不要将所有文件都存放在根目录下。 按栏目内容建立子目录 建立一些特定目录存放公共信息。 另外还有一些需要注意(zh y)的目录规划原则。如目录的层次不要太深，建议不要超过3层。不要使用中文目录；使用中文目录可能对网址的正确显示造成困难。不要使用过长的目录；尽量使用意义明确的目录，比如可以使用image，css，js，post，bbs等。首页通

7、常命名为index或者default，并应放在根目录下，而且每个栏目的首页也应遵循这样的规则。共四十三页一个班级(bnj)网站的目录结构规划图 共四十三页12.3 网页(wn y)布局布局设计原则(yunz)布局设计类型 布局设计元素 布局设计技术 共四十三页12.3.1布局(bj)设计原则网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式 网页布局应区分栏目模块(m kui)的重要程度。 网页布局必须尊重用户习惯。 共四十三页12.3.2布局(bj)设计类型网页布局大致可分为“国”字型、拐角型、标题正文型、左右(zuyu)框架型、上下框架型、综合框架型、封面型、Flash型、变化

8、型。 共四十三页“国”字型网页(wn y)布局 共四十三页拐角(guijio)型 共四十三页标题(biot)正文型 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面(y min)或注册页面(y min)等就是这种类型。 共四十三页框架(kun ji)型框架型还分为左右框架，上下框架及综合框架等。框架型网站的优势在于(ziy)可以使网站的维护变的相对容易，但其不易被搜索引擎索引。框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活，通常用于网站后台管理页面的布局； 共四十三页封面(fngmin)型共四十三页Flash型 共四十三页12.3.4 布局(bj)设计技术ta

9、ble表格(biog)布局；DIV+CSS布局；框架布局。共四十三页表格(biog)布局技术表格(biog)布局的优点：简单易用 所见即所得 设计速度快 表格布局的缺陷：代码可读性差，可维护性差。网页打开速度较慢。后台代码太多，导致网站打开速度慢。共四十三页DIV+CSS布局(bj)技术DIV+CSS布局优点：Div 用于搭建网站结构、css 用于创建网站表现，将表现与内容分离，便于大型网站的协作开发和维护。 提高搜索引擎对网页的索引效率。 缩短改版时间。 大大缩减页面代码，提高页面浏览速度，缩减带宽成本； 强大的字体控制和排版能力。存在(cnzi)一定的缺点 可观性差 操作繁琐 兼容性较差

10、共四十三页框架(kun ji)布局技术框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常和表格配合使用，先用框架将页面划分为几个区域，然后再用表格实现各区域的精确局部，其常常用在网站(wn zhn)系统的后台页面设计中。共四十三页12.4内容(nirng)设计对于网页来说，最重要(zhngyo)的就是信息内容。信息的品质与数量决定了人们对这个网页的评价高低。一般而言，内容通常有两种表现类型：文本和多媒体。共四十三页12.4.1文本(wnbn)文字的格式化 文字的格式化包括字号、字体、字间距、行距等。字号的大小可以用不同的方式表达，例如磅(Point)或像素(Pixel)。 字体

11、可以被网页设计者用来更充分地体现设计中要表达的情感。 行距就是在两行文字之间间隔距离的大小，是从一行文字基线到另一行文字基线之间的距离。行距本身(bnshn)也是具有强表现力的设计语言。 共四十三页12.4.1文本(wnbn)文字的强调 文字的强调一般是对网站内容信息的一个加强手法(shuf)。通常有以下几种行首的强调引文的强调个别文字的强调共四十三页文字(wnz)的颜色文字的颜色在网页设计中，颜色的运用可以强调文字中特别的部分，还可以对整个(zhngg)文字内容的情感表达产生影响。 共四十三页12.4.2多媒体图片格式GIF格式(g shi) JPG格式 PNG格式 图片使用原则要尽可能保证

12、下载速度 在网页中所采用的每一张图片最好加入Width、Height这两个属性，这样会网页数据下载过程更顺畅。尽量将网站内容进行分类管理，尽量细化管理 将这些大的图片分割一下 网页底图要简单明快 共四十三页12.4.3内容(nirng)排版排版并仅仅做到整齐就足够，还要有明确的分类，以及主题的适当规划。排版包括表格(biog)、框架的应用、文字缩排、段落等等。 两端均齐 居中排列 左对齐或右对齐 绕图排列 共四十三页12.4.3内容(nirng)排版在对内容进行排版上，需要注意以下几个问题：把关联项在视觉上进行分组创建视觉层次容易查找和阅读(yud)的布局利用三分法，确定表现重点位置。 共四十

13、三页12.5色彩(sci)设计色彩是网站(wn zhn)最重要的一个部分，色彩能够呈现设计意图、表达个性、对内容进行区分、布局和强调，一个网站(wn zhn)设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。共四十三页12.5.1色彩(sci)基础色彩在电脑显示屏的颜色显示中，RGB是表示红色绿色蓝色又称为三原色光，英文为R(Red)、G(Green)、B(Blue)。这三种颜色的数值(shz)都是255。在RGB模式下，每种RGB成分都可使用从0（黑色）到255（白色）的值。例如，亮红色使用数值(R:255, G:0, B:0)，其十六进制表示是(FF0000)。在色彩中，任何一个色

14、彩都有它特定的色相、明度、纯度，他们被称为色彩的三要素。 色彩的心理感觉从人对色彩的感觉来分，色彩可以分为冷色、暖色两大类。冷色系给人以寒冷的感觉，如蓝色。暖色系给人以温暖的感觉。如橙色。共四十三页12.5.1色彩(sci)基础色彩的搭配近似(jn s)色的配置 同种色的配置 差异色的配置 对比色的配置分离配色的配置 色彩面积分布的配置。 共四十三页12.5.2网页中的色彩(sci)设计网页中的色彩包括网页的底色、文字字型、图片的色系、颜色等。不同的色系体现不同的风格，比如政府网站，其首页的风格应当是沉稳、简明、大方，因此宜于一两种基色的搭配为主色来显示内容信息。同时为了防止由于主色构成相对单一而造成的色彩过淡，还可通过对比(dub)鲜明的色彩来强化人们的视觉。利用色彩确定网站基调利用色彩划分版面布局利用色彩进行强调和引导共四十三页Thank You !共四十三页内容摘要第12章 Web 设计基础。另一种保持简洁的做法是限制所用的字体和颜色的数目。使用清楚的消息标识，确保用户了解此页面的上下文。界面上所有的元素都应当有明确的含义和用途，不