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