5网站页面设计共54页文档

从图中我们可以 看出，处于右边 的暗色就是加上 黑色，而左边的 明色则是加上白 色。五个圆环已 经清楚表示了颜 色如何由暗到亮 的过程。但这种 明色及暗色的关 系只是相对而言。
下面我们列出六种基本的颜色关系。每一 种颜色关系都可以有无数种搭配的可能， 当你掌握它们时，你对颜色的视野才会显 得开阔。
5.2.1 栏目设计
栏目设计应紧扣网站主题 设计一个最近更新或网站指南栏目 设计一个可以双向交流的栏目 设计一个下载或常见问题解答栏目 大型网站可根据需要设置子栏目 联系及版权信息等辅助信息不要放在主栏
目
5.2.2 版面设计
版面布局原则
主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得益彰
共4同.颜4色网是黄页色及中红色的色彩
补色搭配（ Complement ）
在色轮上直线相对的两种颜色称为补色。补色形成 强列的对比效果，传达出活力、能量、兴奋等意义。 补色要达到最佳的效果，最好是其中一种面积比较 小，另一种比较大。比如在一个蓝色的区域里搭配 橙色的小圆点。
4橙.色4与网蓝色色页互为中补 的色彩
在这七种颜色中，都共同拥 有蓝色。越远的颜色（如草 绿色）含有的蓝色就越少。 绿色及紫色这两种二次色都
含有蓝色。
4.4 网页中的色彩
在这七种颜色中，都拥有黄色。 同样的，离得越远的颜色，拥 有的黄色就越少。绿色及橙色
这两种二次色都含有黄色。
4.在红4这色网七 。种向页颜两色边中中散，开的都 时拥，色有红彩
分裂补色（Split complement）
如果我们同时用补色及类比色的方法来确定的颜色 关系，就称为分裂补色。这种颜色搭配既具有类比 色的低对比度的美感，又具有补色的力量感。形成 了一种既和谐又有重点的颜色关系。
4.4 网页中的色彩
这样的搭配使红色 显得更突出
原色搭配（Primary）
除了在一些儿童的产品中，三原色同时使用是比较 少见的。但是，无论是在中国还是在美国的文化中， 红黄搭配都是非常受欢迎。红黄搭配应用的范围很 广——从快餐店到加油站，我们都可以看见这两种 颜色同时在一起。蓝红搭配也很常见，但只有当两 者的区域是分离时，才会显得吸引人，如果是紧邻 在一起，则会产生冲突感。
页尾
5.2 栏目与版面设计
设计版面的最好方法是：找一张白纸、一 支笔，先将理想中的草图勾勒出来，然后 再用网页制作软件实现。
设计人员要了解企业的CIS，熟悉企业标志、 吉祥物、字体及用色标准，以便在网站的 局部将之体现出来，于平淡之中勾画出一 个优美的符合企业特点的曲线，Leabharlann Baidu而将企 业印在浏览者的脑海里。
色就含得越少。橙色及紫 色这两种二次色都含有红
色。
颜色有明暗之分——或者称为颜色数值。 为了显示颜色的明暗，所以色轮有多个环。 两个外围的大环是暗色（Shadow colors），里面两个小环是明色 (tint colors) 。
色轮有五个同心环组成，从暗到亮——暗 色处于大环，明色处于小环，而中间是颜 色的基本色相。
主页版面设计
勾画草图→软件实现
处理技术上的细节
风格、链接、图形、动画、文字、速度
企业的名称、标语、
广告条
徽号或图像
通常应体现出企业网站的主题
页头
主 菜 单
视觉兴趣点—通常 是一幅图片、表示 企业最新的产品、
最新的服务等
最新消息搜索
内
友情链接
邮件列表
容
计数器 用户登录
页
……
版权信息、联络信息、电子邮件地址
版面布局常用方法
正常平衡 异常平衡 对比 凝视 空白 图片解说
正常平衡
异常平衡
对比
凝视
空白
图片说明
版面布局步骤
轮廓设计 布局设计 细节设计
版面布局形式
“T”形结构布局 “口”形布局 “三”形布局 对称对比布局 “国”或“同”字形 拐角形 框架布局 Flash动画型，封面型
主页
栏目首页
内容网页
5.3 页面可视化设计
网页可视化设计要确保命名简洁、导览性 好、易读、视觉效果设计合理、下载速度 快等原则。
5.3.1 色彩设计
色彩的基本知识
三原色原理 色彩搭配 色彩的心理感觉 色彩的对比 色彩的区域大小和形状 色彩的位置
网页色彩设计
网页配色的基本方法
底色和图形色 整体色彩 颜色的平衡 配色时要有重点色 渐变色的调和 统调配色 分割配色
网页色彩设计
网页内容的色彩 网页标题色 导航菜单色 侧栏色 页脚色
网页色彩搭配的技巧
暖色调 冷色调 对比色调
透视色轮
色轮是我们认识颜色关系的工具。 没有某一种颜色是所谓的“好”或“坏”。
只有当与其它颜色搭配作为一个整体时， 我们才能说，是协调或者不协调。色轮告 诉我们颜色之间的相互的关系。
色轮由12种基本的颜色组成。首先包含的 是三原色（Primary colors），即蓝、黄、 红。原色混合产生了二次色（Secondary colors），用二次色混合，产生了三次色 （tertiary colors）。
单色搭配（Monochromatic）
一种色相由暗、中、明三种色调组成。这就是单色。 单色搭配上并没有形成颜色的层次，但形成了明暗 的层次。这种搭配在设计中应用时，出来的效果永 远不错，其重要性也可见一斑。
类比色搭配（ Analogous ）
相邻的颜色我们称为类比色。类比色都拥有共同的 颜色。这种颜色搭配产生了一种令人悦目、低对比 度的和谐美感。类比色非常丰富，在设计时应用这 种搭配同样让你轻易产生不错的视觉效果。
第五章 网站页面设计
5.1 主页设计 5.2 栏目与版面设计
5.2.1 栏目设计 5.2.2 版面设计
5.3 页面可视化设计
5.3.1 色彩设计 5.3.2 字体设计 5.3.3 导航设计
第五章 网站页面设计
5.3.4 图像设计 5.3.5 动画设计
5.1 主页设计
确定主页的功能模块
网站名称、广告条、主菜单 新闻、搜索、友情链接 联系及版权信息等
原色是色轮中所有颜色的“父母”。在色 轮中，只有这三种颜色不是由其它颜色调 合而成。从后面的图可以看出，三原色在 色环中的位置是平均分布的。
二次色所处的位置是位于两种三原色一半 的地方。每一种二次色都是由离它最近的 两种原色等量调合而成的颜色。
三次色是由相邻的两种二次色调合而成。
每一种颜色都拥有部分相邻的颜色，如此 循环成一个色环。共同的颜色是颜色关系 的基本要点，必须对此有深入的了解。