网页界面设计.

欢乐谷主题公园网
首 页 上一页 下一页
美国政府的官方网站www.firstgov.gov
首 页 上一页 下一页
世纪风商务网站www.centurytrend.com
首 页 上一页 下一页
第二节
网页的版式设计 版式设计的造型
标题、内容、主体图形、色调、视觉中心、背景 和留白都是造型的最基本元素，
• 宁静、朴素的配色 宁静、朴素的氛围要以整洁的环境为基础，所 以在创造这种环境时要避免运用过多的颜色，尽量 运用浅淡清爽的色调，才能得到较好的效果。
首 页 返 回 上一页 下一页
• 亲切的配色
首 页 返 回 上一页 下一页
• 柔和、女性的配色 女性带给人的感觉多是柔美、典雅的，粉质的色 彩用来表现女性的温柔和典雅魅力再合适不过了。
首 页 上一页 下一页
版式设计的构成形式
• 分割与比例
首 页 上一页 下一页
•
黄金分割比及画法
黄金分割画法
首 页 上一页 下一页
金星女神维纳斯具体比例标准
首 页 上一页 下一页
•
重复与渐变
重复的图案有序的排列，并作淡化处理作为背景图案
首 页 上一页 下一页
•Байду номын сангаас
重复与渐变
运用色块儿见画面 分割成马赛克状，并作 淡如淡出处理，突出了 图片主体部分，使画面 层次鲜明，秩序感强。
首 页 上一页 下一页
• 对称与均衡
对 称
均 衡
绝对对称
相对对称
首 页 上一页 下一页
故宫紫禁城在对称的造型中有一种威严的宏伟气势
首 页 返 回 上一页 下一页
相对对称具有对称的稳定性，同时又富于变化
首 页 返 回 上一页 下一页
均衡既是平衡，能使设计版面更具和谐的生命力
首 页 返 回 上一页 下一页
页面中的点、线、面及留白的处理
• 点的作用
www2.coca-cola.com
首 页 上一页 下一页
•
线与面的作用
首 页 上一页 下一页
•
留白的运用
版面的大面积的空白给人以无限的想象空间
首 页 上一页 下一页
•
点、线、面关系的处理
首 页 上一页 下一页
由文字构成的点、线、面关系的标题与导航按钮
首 页 返 回 上一页 下一页
• 使用同类色、类似色 同类色、类似色适合凝造整齐统一的气氛，但 是应注意避免缺少对比，而使画面不够响亮。
首 页 返 回 上一页 下一页
• 非彩色与有彩色结合 深浅不同的灰色与较单一的有彩色搭配是比较 安全的配色方案。非彩色与彩色搭配时，可以起到 突出色彩的效果。
首 页 返 回 上一页 下一页
水平分割的页面具有较强的视觉稳定性，给人平 静、安定的感觉
首 页 返 回 上一页 下一页
垂直分割强调的是垂线的视觉冲击力，体现坚强、 理智与秩序的感觉
首 页 返 回 上一页 下一页
曲线、弧线、曲线形状的应用能够产生运动、韵 律的动感，形成富有活力的视觉效果。
首 页 返 回 上一页 下一页
曲形与直形的综合应用是将以上两种线条和形状 结合起来运用，不仅能够丰富网页的表现力，还能使 网页更富于变化，艺术效果更丰富多彩。
首 页 上一页 下一页
1．运用自适应宽度技术。
1024*768像素环境下的页面效果
800*600像素环境下的页面效果
首 页 上一页 下一页
2． 运用背景来适应不同分辨率的版面效果。
1024*768像素环境下 运用背景填充空白部分
800*600像素环境下
3． 使版面保持固定尺寸，禁止滚动出现，
首 页 上一页 下一页
网页色彩搭配方案
奔放、激情的配色 自然、静寂的配色
宁静、朴素的配色 亲切的配色
柔和、女性的配色 神秘的配色 职业的配色
首 页 上一页 下一页
• 奔放、激情的配色 动态效果强烈的鲜明对比色彩赋于站点奔放、 激情的个性。
首 页 返 回 上一页 下一页
• 自然的、静寂的配色
首 页 返 回 上一页 下一页
• 同一色彩的不同明度 首先确定运用一种色彩，然后调整透明度或者饱 和度，将网页背景、文字、边框等元素都控制在此 色彩中，只是在明度上有所变化 。
首 页 返 回 上一页 下一页
• 使用对比色 需要你熟悉色环，准备一个色环参考。首先选 定一种色彩，然后选择它的对比色。影响对比色配 色效果的重要因素在于使用的色调。
• 节奏与韵律
不规则的流动式排列形成一种律动的美感，给画面增 添了动态效果。
首 页 上一页 下一页
•
多样与统一
形式统一
色调统一
首 页 上一页 下一页
版式设计的构成类型
在网页设计中较常见的网页版式构成类型主要有： 水平分割式、垂直分割式、水平与垂直分割交叉式、斜 线式、“S”曲线式、重复式等。
首 页 上一页 下一页
首 页 返 回 上一页 下一页
• 神秘的配色 蓝紫色、金色等能营造神秘的高层感觉。
首 页 返 回 上一页 下一页
• 职业的配色
首 页 返 回 上一页 下一页
鲜艳的色彩容易引人注目 • 色彩的独特性
与众不同的色彩，人印象强烈 • 色彩的适合性 所选色彩和表达的内容气氛适合
• 色彩的联想性 不同色彩会产生不同的联想
首 页 上一页 下一页
网页色彩配置的方法
• 同一色彩的不同明度
• 使用对比色
• 使用同类色、类似色
• 非彩色与有彩色结合
首 页 上一页 下一页
第八章
网页界面设计
重点与难点
第一节
第二节 第三节
网页的风格定位
网页的版式设计 网页界面的色彩设计
首 首页 页 上一页 下一页
重点与难点 • • 网页的版式设计 网页的色彩设计
首 页 上一页 下一页
第一节
网页的风格定位 电脑艺术平面设计的特点
• •
根据主题的内容决定其风格与形式 网页的应用范围
首 页 上一页 下一页
首 页 返 回 上一页 下一页
第三节
网页界面的色彩设计
非彩色的搭配 色彩的搭配 网页色彩配置的方法 网页色彩搭配方案
首 页 上一页 下一页
第三节
网页界面的色彩设计 非彩色的搭配
黑白两色是最 简单基本的搭配， 黑底白字，白字黑 底都能清晰明了表 现网页内容
首 页 上一页 下一页
色彩的搭配
• 色彩的鲜明性