第二节 网站的结构与编排

第二节 网站的结构与编排 1 网站的结构2 网站的创意设计3 网页的编排设计

_ 学习目标第二节

网站的结构与编排

2006.12.1.xi’

an

知识目标：了解建立网站结构的原则，掌握网站的几种常见结构方式；了解网站的创意设计的基本原则和创意设计中的相关要素；了解网页编排设计的基本原则。 能力目标：能够根据网站定位的实际需要，运用网站结构、网站的创意设计和网页编排设计的知识与技能，创造性地分析与解决网站创意和网页编排设计中的实际问题。

_ 网站的结构与编排

2006.12.1.xi’

an

－－－网站美化工程

网站作为一种视觉媒体，现代设计理念中的有关内容同样适用于网站设计。

人性化界面设计 人机互动设计

本章学习的主要内容就是这两个方面在网站中具体应用。

第二节

网站的结构与编排

_ 网站的结构

2006.12.1.xi’

an

一、网站结构的设计1 、常见的几种结构模型：

网页 1 网页 2 网页 3 网页 4

线状结构

主页

网页 网页网页

网页 网页 网页

树状结构

第二节

网站的结构与编排

_ 网站的结构

2006.12.1.xi’

an

网站的结构指某一网站的信息组合的基本框架，它显示该网站中各个网页之间的逻辑关系。

在网站的发展过程中，为了容纳海量信息，网站的结构越来越复杂，有时为了使网站的内容更加条理，在形式上常常采用几种结构混合的模式。

网页

网页

主页

网页

网页

网状结构

第二节

网站的结构与编排

_ 网站的结构

2006.12.1.xi’

an

网站结构设计的人性化体现：

网站结构如果不合理，网站就变成了迷宫，使访问者迷失在大堆的信息中；对于网站工作人员来说，日常的更新或对网站结构的调整也比较麻烦。因此，要建立一个简单、有序、合理的网站结构需要遵循一些基本的原则。

(1) 网站结构层次适当 (2) 网站结构拓展性广

第二节

网站的结构与编排

_ 网站的结构

2006.12.1.xi’

an

2 、网页间的链接方式 大量的信息通过各种链接联系到一起，构成网络世界的

高速通道。目前主要的链接方式有以下几种：

导航条

超链接

超文本

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网站的结构

导航条

超链接 超文本

网站地图

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网站的创意设计

网站创意设计 网站创意设计，重在“创意”二字。通过人性化的

创意设计，使网站定位的核心理念能够在网站的各个视觉点上充分体现。

基本原则： （ 1）、统一性原则 （ 2）、互动性原则 （ 3）、适用性原则

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网站的创意设计

网站创意设计的具体要素

VI 设计

内容模块设计

按照网站的定位，将信息有序的组合在一起，既体现出网站的内容特色，又能方便访问者迅速找到所需要的信息。

即视觉识别，是 CIS 企业形象识别系统中最具传播力和感染力的层面。

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网站的创意设计

网站作为一个以视觉为主的媒介，其视觉识别系统的建立可以将网站的定位、内容在更广泛的层面上，进行更形象直接的传播。

对于网站来说，表现在版面上能给访问者以强烈视觉印象的主要是网站的 Logo 和标准色。

第二节

网站的结构与编排

_ 网站的创意设计

2006.12.1.xi’

an

Logo 的表现形式及特点

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网站的创意设计

色调 虚拟世界是个色彩缤

纷的天地，许多现实中没有的色彩都可以通过计算机合成，给人以不同的美感。

基于人的视觉享受，

和保证网站整体整体风格的统一，网站通常会确定一至三种主色调。

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网站的创意设计

影响内容模块设计的因素：

网站的定位 访问者的阅读习惯和兴趣

通过网站的具体内容设计体现网站定位中的核心内容，从而实现网站经营主体创办网站的最

终目的。

通过喜闻乐见的内容方式满足访问者的各种需求，是网站吸引和留住访问者的主要方法。

第二节

网站的结构与编排

_ 网站的创意设计

2006.12.1.xi’

an

三、首页的编排设计 真正承载网站内容的是网页，而网页中又以首页

为重要。几乎所有的网站都会把最重要、最吸引人的内容放在首页，而首页也会是展现网站特色的重地。

基本原则： （ 1）逻辑性原则 （ 2）平衡性原则 （ 3）对比性原则

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网页的编排设计

政府网站

个人网站

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网页的编排设计

• 商业网站

• 企业网站

第二节

网站的结构与编排

_ 网页的编排设计

2006.12.1.xi’

an

首页构成要素

文字

图片

表格

音视频

超连接

线条

色彩

空白

……

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网页的编排设计

• 文字的美

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网页的编排设计

• 首页的框架

首页框架样式众多，没有固定的标准或模式 ，一般集中为横向划分、竖向划分和横竖结合划分三大形

式粗框架。

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网页的编排设计

• 横版结构

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网页的编排设计

• 竖版结构

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网页的编排设计

• 横竖结合式结构

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 网页的编排设计

• 首页的内容组织

特点：（ 1）突出网站特色 （ 2）突出网络信息的新 （ 3）内容编排忌凌乱 （ 4）重视首页的网民户动渠道

第二节

网站的结构与编排

2006.12.1.xi’

an

_ 本节小结

本节主要是从整体上对网站的框架结构、色调、内容等方面的设计进行学习。网站主要是视觉媒体，要通过人性化的设计、通过内在逻辑性将各种信息组合在一起，将其装入科学设计的网站框架内，通过友好的界面和各种交互性的功能与用户之间沟通交流，方便用户对网站的使用。本节从视觉方面入手，首先介绍了网站的组织框架设计及主要的链接方式，在此基础上，对网站创意设计的细节要素进行深入分析。之后，从整体进入个体，对单个网页的创意设计进行学习，重点是网站首页的编排与设计，涉及到首页的各种视觉要素和内容安排

第二节

网站的结构与编排