+ -
当前位置:首页 → 问答吧 → 让网页设计的专业,漂亮,好看的窍门

让网页设计的专业,漂亮,好看的窍门

时间:2008-09-20

来源:互联网

我们浏览任何一个网页,仅从界面上就可以轻易的识别出专业和非专业的区别,那么怎么才能让网页设计的专业、漂亮、好看?这就要涉及到美术的一些基本常识。首先网页风格的形成主要依赖于网页的版式设计,页面的色调处理,还有图片与文字的组合形式等。
  一、版面编排
  网页设计首先涉及到的是页面的版面编排问题。"版面编排"实际上就是中国古代画论中的"经营位置"。网页作为一种版面,既有文字,又有图片。文字有大有小,还有标题和正文之分;图片也有大小,而且有横有竖之别。图片和文字都需要同时展示给观众,不能简单地罗列在一个页面上,这样往往会搞得杂乱无章。必须根据内容的需要,将这些图片和文字按照一定的次序进行合理的编排和布局,使它们组成一个有机的整体,展现给广大的观众。  
  1.主次分明,中心突出。在一个页面上,必然考虑视觉的中心,这个中心一般在屏幕的中央,或者在中间偏上的部位。因此,一些重要的文章和图片一般可以安排在这个部位,在视觉中心以外的地方就可以安排那些稍微次要的内容,这样在页面上就突出了重点,做到了主次有别。
  2.大小搭配,相互呼应。较长的文章或标题,不要编排在一起,要有一定的距离,同样,较短的文章,也不能编排在一起。对待图片的安排也是这样,要互相错开,造成大小之间有一定的间隔,这样可以使页面错落有致,避免重心的偏离。  
  3.图文并茂,相得益彰。文字和图片具有一种相互补充的视觉关系,页面上文字太多,就显得沉闷,缺乏生气。页面上图片太多,缺少文字,必然就会减少页面的信息容量。因此,最理想的效果是文字与图片的密切配合,互为衬托,既能活跃页面,又使网页有丰富的内容。
  二、线条和形状
  文字、标题、图片等的组合,会在页面上形成各种各样的线条和形状。这些线条与形状的组合,构成了网页的总体艺术效果。必须注意艺术地搭配好这些线条和形状,才能增强页面的艺术魅力。
  1.直线(矩形)的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐,所谓有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的网页题材。  
  2.曲线(弧形)的应用。曲线的效果是流动、活跃,具有动感。曲线和弧形在页面上的重复组合可以呈现流畅、轻快,富有活力的视觉效果。一般应用于青春、活泼的网页题材。
  3.曲、直线(矩形、弧形)的综合应用。把以上两种线条和形状结合起来运用,可以大大丰富网页的表现力,使页面呈现更加丰富多彩的艺术效果。这种形式的网页,适应的范围更大,各种主题的网页都可以应用。但是,在页面的编排处理上,难度也会相应大一些,处理得不好会产生凌乱的效果。最简单的途径是,在一个页面上以一种线条(形状)为主,只在局部的范围内适当用一些其它线条(形状)。
  三、色彩处理
  色彩是人的视觉最敏感的东西。网页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是"总体协调,局部对比",也就是:网页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据网页内容的需要,分别采用不同的主色调。因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性,可以使我们的网页具有深刻的艺术内涵,从而提升网页的文化品位。下面介绍几种常用的配色方案:  
  1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用,可使网页呈现温馨、和煦、热情的氛围。
  2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用,可使网页呈现宁静、清凉、高雅的氛围。
  3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如:红与绿、黄与紫、橙与蓝等。
    这种色彩的搭配,可以产生强烈的视觉效果,给人亮丽、鲜艳、喜庆的感觉。当然,对比色调如果用得不好,会适得其反,产生俗气、刺眼的不良效果。这就要把握"大调和,小对比"这一个重要原则,即总体的色调应该是统一和谐的,局部的地方可以有一些小的强烈对比。
  最后,还要考虑网页底色(背景色)的深、浅,这里借用摄影中的一个术语,就是"高调"和"低调"。底色浅的称为高调;底色深的称为低调。底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡的,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。这种深浅的变化在色彩学中称为"明度变化"。有些网页,底色是黑的,但文字也选用了较深的色彩,由于色彩的明度比较接近,读者在阅览时,眼睛就会感觉很吃力,影响阅读效果。
转载:网页设计教程

[ 本帖最后由 凌志 于 2008-10-21 14:44 编辑 ]

作者: wxr9999   发布时间: 2008-09-20

恩,认真看了,受教了。顶!

作者: woshifuyun   发布时间: 2008-09-20

先收藏 ,有时间再拜读

作者: 53ke   发布时间: 2008-09-20

写的很好!学习了

作者: zhang5171291   发布时间: 2008-10-21

我也收藏了,有空再来详细Look!~

作者: shengrui   发布时间: 2008-10-21

8错的文章

作者: fuguojian1988   发布时间: 2008-10-21

先收着,有时间慢慢细读·····

作者: yingyue   发布时间: 2008-10-21

恩  学习了!

作者: frontnetwork   发布时间: 2008-10-22

受益了,谢谢分享!!

作者: jianmei   发布时间: 2008-10-23

学习一下,不错
对大家很有帮助
谢谢lz

作者: liuleihai   发布时间: 2008-10-24

恩,有道理...

作者: hyx121191   发布时间: 2008-10-24

这类文章看了很多了 但是还是无头绪

作者: ExplorQQ   发布时间: 2008-10-25

先顶后看

作者: wsb2008   发布时间: 2008-11-04

又看了,太漂亮了。

作者: gary722   发布时间: 2008-11-06

写得不错

作者: bluehuya   发布时间: 2008-11-06

哈哈,先收藏,等有时间慢慢体会,

作者: jinadelove   发布时间: 2008-11-07

仔细的看了看,也仔细的想了想,对以后的自己很有帮助。非常感谢啊!
支持!

作者: muyuyu   发布时间: 2008-11-08

收藏了,慢慢看,

作者: tyhjxc   发布时间: 2008-11-14

写的很好!学习了

作者: shishuikai   发布时间: 2008-12-14

学习了..
并收藏了.

作者: zz0434   发布时间: 2008-12-16

收藏了,慢慢学习

作者: nyszyz   发布时间: 2008-12-16

在一个页面上,必然考虑视觉的中心,这个中心一般在屏幕的中央,或者在中间偏上的部位。
LZ,建议你去了解一下网页设计中的黄金分割点和九宫格的应用是怎样的,然后再来理解下视觉中心点是在页面的哪个部分!

作者: sagil123   发布时间: 2008-12-17

学习了,唉,还是没有运用到实际当中

作者: wylwdb   发布时间: 2009-02-07

非常感谢LZ 分享

作者: andrea08   发布时间: 2009-02-09

终于让我读完拉

作者: woyantian   发布时间: 2009-02-09

谢谢楼主

作者: angle0052001   发布时间: 2009-03-03

好文章,先收藏下,慢慢消化!

作者: zhjjnh   发布时间: 2009-03-03

楼主辛苦

作者: gsy2007   发布时间: 2009-03-03

受教啦!
22楼的不要太激动,这篇东东是转的,所以呢,嘿嘿.
LZ也是的,转的东东也不认真看一下!..(好像我两面不是人了 )

[ 本帖最后由 avangle 于 2009-3-4 11:22 编辑 ]

作者: avangle   发布时间: 2009-03-04

可以看看那本《Don't make me think》

作者: shally2   发布时间: 2009-03-04

有点帮助

作者: boboba   发布时间: 2009-03-08

我晕,不知道LS的各位都有没有仔细看呀!。。。。

作者: sagil123   发布时间: 2009-03-09

收藏,存档。应该有用。

作者: loky5719   发布时间: 2009-03-09

同意12楼,文章看的不少,可是实践为什么总是很差的呀

作者: gsy2007   发布时间: 2009-03-09

学习了,不错

作者: lixiao1201   发布时间: 2009-04-22

阅。好文章都要支持下。

作者: m173   发布时间: 2009-04-22

学习了。。如果有图片一起说明就更好了。。

作者: lfy511   发布时间: 2009-04-22

受教了,转载!

作者: maoge8274   发布时间: 2009-05-06

仔细看看,受益ing

作者: leijiang354   发布时间: 2009-05-06

因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。

作者: deepfok   发布时间: 2009-06-17

继续学习

作者: pftzl   发布时间: 2009-07-05

顶!!

作者: zhangyue0212   发布时间: 2009-08-10

这个帖子发的一点 用户体验的技术含量都没有
这么大一大串
看什么?
看古文啊!

作者: shawnchow   发布时间: 2010-02-05

呵呵 是啊 很不错

作者: cielkong   发布时间: 2010-02-10

学习了

作者: wuhaiping730   发布时间: 2010-02-22

已经记录了我想要的东西 学习了

作者: littie254   发布时间: 2010-06-13

写的有道理

作者: m173   发布时间: 2010-06-14

收藏了

作者: yanglin840304   发布时间: 2010-06-15

学习了,慢慢消化中,感谢楼主的分享。

作者: 39205045   发布时间: 2010-06-19

好文章!

作者: 86longer   发布时间: 2010-06-24

主次
冷暖
细节

作者: cyhscg   发布时间: 2010-09-01

收藏起来了,不错的.

作者: dfedf   发布时间: 2010-09-01

写得很不错

作者: szera   发布时间: 2010-09-03

很适合我们新人

作者: hailongwangno1   发布时间: 2010-09-14

有点意思

作者: jqzheng   发布时间: 2010-09-20

似乎是简单的总结了一下,几乎都知道了,所以看完并没有收藏

作者: bluexiaoleidea   发布时间: 2010-10-11