网站推广之网页优化篇/网页设计—平衡、对比、连贯和留白优化
网页中的平衡、对比、连贯和留白
网页设计中需要把握好很多原则和细节,今天我们来谈谈网页设计中的平衡、对比、连贯和留白。
一、平衡
如果你的页面是平衡的,当用户浏览这个页面的时候就会感觉它们是一个整体,看得时候目光的跳转也会很自然。同时,构成页面的元素仍然是彼此独立(注意不是孤立)的,你不需要用线用颜色将它们直接地串接起来,这是为什么呢?因为它们彼此之间是平衡的。这就好比跷跷板,即便你看不到连接两端的人的木板,你也能感觉到他们是一个整体,因为“平衡”!
1、对称平衡
对称是最常见、最自然的平衡手段,这种方式通常用来设计比较正式的页面,不过也还需要和下面介绍的多种方式结合起来使用。比如图 1所示的网站,如果你在页面正中间划一条垂直向下的直线,你会发现页面的两边的布局是基本对称。
2、非对称平衡
非对称其实并不是真正的“不对称”,而是一种层次更高的“对称”,如果把握不好页面就会显得乱,因此使用起来要慎重,更不可用的过滥。比如这个网站http://www.graphic.com.cn(图 2)就打破了常见的对称。但是如果仔细看的话还是能够感到某种“对称”的影子。
3、辐射平衡
页面中的元素以某一个点为中心展开就可以构成辐射平衡。比如图3就是典型的例子,页面的正中是一个大大的LOGO,外侧环绕着多个链接 。
4、实战平衡
下面我们通过一个LOGO设计实例来看一看平衡的多种变化。
二、对比
如果说平衡搭起了一个稳定的页面框架,那么对比就是这个框架中的动态点缀。这里说动态并不是说要真的让元素动起来,而是要有“变化”。可以变化的因素包括:大小、颜色、字体、重心、形状、纹理等等。 我们还是通过简单的例子来介绍一下对比的应用,图 9是我们设计的底版,字体一样、大小一样、颜色一样,单调枯燥。
三、连贯
前面谈到了对比,对比离不开变化,然而如果对比太多,变化也会太多,页面就会显得零乱,因此我们现在来谈“连贯”。在一个成功的页面设计中,有很多要素是必须保持一致的,这些要素通常包括:
1、布局
页面的上下、左右,页面与页面中间要保持布局一致。比如如果页面上方的表格居中对齐而页面下方的表格却左对齐,那么整个页面就会很难看。
2、字体
字体的大小、颜色应当基本保持一致。
3、导航栏
导航栏应当保持完全一样,通常应单单独为导航栏建立一个框架页,这样就可以保证更新导航栏的时候,所有网页都会被自动更新。
四、留白
国画中“画鱼不画水”的妙处就是留白的妙处。留白可以让访问者有更大的想象空间,就好像就如一个没有过多摆设的房间一样。上上下下、里里外外都塞得满满当当就是很糟糕的设计。
留白的原则包括:
1、元素之间的留白不能太大 这是基本的原则,留白过多,叶面会变得零碎。
2、文本中间的间隔不能太大 文本应当紧凑,尤其汉字文本,如果字与字之间或者行与行之间空白太大页面就会非常难看。
总的来说平衡、对比、连贯和留白设四条原则是在网页设计中必须始终牢记,但绝不是教条,应当结合自己的实际需要灵活的应用。
- 网站推广之网页优化篇/网页设计—网页分辨率设置优化2006-3-4
- 网站推广之网页优化篇/网页设计—网页优化之关键词的运用技巧2006-3-4
- 网站推广之网页优化篇/网页设计—优化关键字征服Google搜索2006-3-4
- 网站推广之网页优化篇/创建有意义链接人气度链接数2006-3-4
- 网站推广/百度给站长的建站指南2006-3-4
- 网站推广之网页优化篇/网页设计—平衡、对比、连贯和留白优化2006-3-4
- 网站推广之网页优化篇/网页设计—网页导航设计优化2006-3-4
- 网站推广之网页优化篇/网页设计—网页的排版与布局优化2006-3-4
- 网站推广之网页优化篇/网页设计—文字的格式化2006-3-4
- alt 中的注释文字换行的方法[图]2006-3-4
- 网站推广--网页针对搜索引擎的加注技巧
- Google发布在线网页制作工具[图]
- 粉可爱的韩国插画欣赏(一) [图]
- 粉可爱的韩国插画欣赏(二)[图]
- 粉可爱的韩国插画欣赏(三)[图]
- 粉可爱的韩国插画欣赏(四)[图]
- 苹果NANA的精彩插画作品欣赏[图]
- 苹果NANA的精彩插画作品2[图]
- 王华精彩平面设计欣赏:《白光系列》1[图]
- 王华精彩平面设计欣赏2[图]
- 王华精彩平面设计欣赏:《白光系列》3[图]
- 王华精彩平面设计欣赏4[图]
- 风里面的白嫁衣-漂亮新娘! [图]
- 王华设计欣赏3[图]
- 王华设计欣赏《夜精灵》4[图]
- 韩国Q版插画欣赏<三>[图]
- 韩国Q版插画欣赏<二>[图]
- 韩国Q版插画欣赏<一>[图]
- asp图片验证码
- blog的rss2.0
- 利用ASP打造站内搜索引擎
- 用ASP建立站内搜索
- asp程序错误详细说明例表
- 一套韩国壁纸设计[图]
- 香港经典插画作品[图]
- 时尚插画家—梁毅作品展[图]
![清风楼书(一)[图]--平面广告](http://www.fansart.com/uploadfile/200642868655905.gif)
清风楼书(一)
![painter超级可爱的上色过程(韩国)[图]--CG插画](http://www.fansart.com/uploadfile/200641150378565.jpg)
painter超级可爱的上色过程(韩国)
![古典楼书(精品欣赏)(1)[图]--平面广告](http://www.fansart.com/uploadfile/200641153842877.jpg)
古典楼书(精品欣赏)(1)
![美国插画师kevindart作品(1)[图]--CG插画](http://www.fansart.com/uploadfile/200641156499109.jpg)
美国插画师kevindart作品(1)
![美国插画师kevindart作品[图]--CG插画](http://www.fansart.com/uploadfile/200641156355093.jpg)
美国插画师kevindart作品

荷兰著名画家Anton Pieck插画
![非常可爱的儿童插画(1)[图]--CG插画](http://www.fansart.com/uploadfile/200641157447221.jpg)
非常可爱的儿童插画(1)
![回忆紫禁城里那些逝去的[图]--中国艺术](http://www.fansart.com/uploadfile/200641159463469.jpg)
回忆紫禁城里那些逝去的
![国粹京剧脸谱表情[图]--界面设计](http://www.fansart.com/uploadfile/200641164370797.jpg)
国粹京剧脸谱表情
![高傲的玫瑰-温碧霞[图]--摄影艺术](http://www.fansart.com/uploadfile/200641232299455.jpg)
高傲的玫瑰-温碧霞
![北邦插画欣赏(1)[图]--CG插画](http://www.fansart.com/uploadfile/200641335800545.jpg)
北邦插画欣赏(1)
![yashasi插画作品欣赏[图]--CG插画](http://www.fansart.com/uploadfile/200641366906025.jpg)
yashasi插画作品欣赏
![cg插画欣赏[图]--CG插画](http://www.fansart.com/uploadfile/200641433658593.jpg)
cg插画欣赏
![溯源居广告欣赏--小红人[图]--平面广告](http://www.fansart.com/uploadfile/200641453136345.jpg)
溯源居广告欣赏--小红人
![房地产广告设计-之水墨风格1[图]--平面广告](http://www.fansart.com/uploadfile/200641457308753.jpg)
房地产广告设计-之水墨风格1
![泊林花园推广故事绘本(1)[图]--CG插画](http://www.fansart.com/uploadfile/200642041664949.jpg)
泊林花园推广故事绘本(1)
![泊林花园推广故事绘本(2)[图]--CG插画](http://www.fansart.com/uploadfile/200642042197577.jpg)
泊林花园推广故事绘本(2)
![万科西山庭院.格.沉.尊[图]--平面广告](http://www.fansart.com/uploadfile/200642133015939.jpg)
万科西山庭院.格.沉.尊
![2006夏日流行时尚,创意无限街头华丽[图]--时装魅影](http://www.fansart.com/uploadfile/200642261089093.jpg)
2006夏日流行时尚,创意无限街头华丽
![水木清华地产广告欣赏[图]--平面广告](http://www.fansart.com/uploadfile/200642634295921.jpg)
水木清华地产广告欣赏