网页界面设计

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