5_网站页面的设计.ppt

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