优秀网站的设计原则

设计一个网站需要考虑到很多方面,我看过无数网站,有很出色的,也有很拙劣的。总的来说,给我的感觉是国内的网站的设计水平和国外的相差不好,不在一个档次上。中国的网站设计的原则可以说是信息传递为目标,也就是说以发布信息为主。而国外的网站不仅达到传递信息,还达到艺术性。根据我多年的经验,我总结一些优秀网站的设计原则。

色彩 – 主题色

一个网站必须要有主题色,这是一个主题,这种颜色在一个网页中所占的比例最高。可以有其它的辅助颜色,但是只能起点缀作用,当你的网站出现了两种主色,那么就很难达到美观的效果。主题色是网站的主色调,是贯穿于一个网站的所有页面的。辅色不能过多过大,否则就会影响到主题色的老大的地位。

以草绿色为主的主题色,以黄色为辅色。

一咖啡色为主调,只有在Logo的部分才使用了绿色。

对齐

对齐是个很重要的元素排列原则,一般来说,一个网页上使用同一种对齐,比如左对齐或者居中对齐。当然也有特例,当遇到大型的块级的元素可以在页面使用左对齐的原则下部分使用居中对齐。当设计一个网页的时候需要针对不同的显示器的像素宽度,为了照顾到部分群体,一般采取比较小的象素宽度值。当你的显示器的像素宽度超过了网页的宽度时,设计者往往都会使页面居中对齐,因为那样左对齐就比较难看了。

中间的方框是元素的容器,将容器居中对齐后把容器中的元素左对齐。

有对齐是使用相对较少的一种对齐方式,但是对齐方式没有好坏之分。使用对齐原则需要大胆尝试,但是当发布实际作品的时候一定要进行反复测试,以检验页面所使用的对齐是否美观。

对比

对比是一个重要的展示内容的方式。网页内容存在对比才不会让人觉得网页是死气沉沉的。对比可以有多种方式,颜色的对比,形状的对比,大小的对比之类。但是对比和对齐一样,要大胆使用,对比一定要明显。如果两个元素的应用了对比,但是让人看不出来对比,那么这只能是一个失败的对比设计,还会使内容显得混乱。

使用了形状大小的对比,粗体字很明显的让Nite更为突出。相对于细体,粗体更能汇聚观看者的眼光,吸引读者的视线。试想一下,如果想达到对比,但是文字只粗了一点,让人感觉不出对比的效果,那么就会是适得其反,显得很难看。

色彩的对比,突出了Coming Soon。使用色彩对比有一个注意事项。对比不能过于强烈而造成文字或者图案无法辨识,最典型的就是红色与蓝色。当使用#FF0000和#0000FF这两个颜色时候,其中一个颜色作为背景色,而另一个颜色作为前景的文字颜色的时候,强烈的对比让我无法辨识清楚文字,文字越小越显得刺眼。颜色对比没有什么公式,唯一需要做的就是多测试,自己试验一下对比是否看着舒服。在任何时候可读性都是最重要的!

风格统一性

和主题色一样,一个网站必须要有一个主风格。这点国内的大型网站和国外的网站都明白,基本都能遵守。但是一些个人网站,以及BLOG之类的网站,不同的页面之间甚至会存在不同的风格。风格的统一性是贯穿于中各网站的,每个页面都必须符合主风格。可以有各个页面的子风格,但是同样不能影响到网站整体风格的主题地位。也就是说网站的整体风格是老大,其他的小弟都是跟着他混得,不能和老大显得格格不入。

易用性

易用性是比较难做到,而且也是最容易被人忽视的。很多网站,尤其是国内的网站,对于用户来说易用性做的非常差。我曾经上过一个网站,始终找不到需要找的东西,后来还是经过了一番复杂的步骤,经过了“培训”才能顺利过关。

flickr的易用性做的相当好,可以去体验一下。

跨平台性

跨平台主要包括系统平台和浏览器平台。不同的系统上有不同的显示效果,正如早期Windows和Mac上的颜色管理模式的不同导致同一颜色在这两个平台上的不一致,所以才诞生了216色网络安全色。这216色可以说在Windows和Mac上都能显示出同样的效果,随着Windows和Mac的不断发展,这216色逐渐被人们淡忘,因为色彩的显示越来越更一致了。

另外,Windows和Mac以及Linux系统中分别内置了不同的字体,有一部分字体是三个系统都包含的。这一交集的字体包括Courier,Crourier New,Symbol,Times等字体。当你使用了一个系统中没有的字体时,样式表就会调用默认的字体,如果样式表中的默认字体系统中也没有的话就会调用系统默认字体。另外包括像素,pt,inch等单位在不同的系统平台上也有不一样的情况。像素是一个屏幕的指标,这个相对来说是比较稳定的单位。

不同的浏览器之间的显示效果就有很大的变化,最特殊的就是微软的Internet Explorer系列浏览器。IE系列对于标准支持的特殊性导致了它不同于Firefox,Opera,Chrome,Safari。所以作为一个合格的设计师来说,发布页面之前一定要测试页面是否在不同的浏览器上也能显示一致。

细节

细节是考验人耐心的部分,细节不易被人感觉到,但是却能影响整体的效果,但是却是比较花费时间和心思的部分。如果希望网页更具立体感,就要考虑到高光和阴影。如果需要模拟真的效果,那么色彩上就需要稍微参杂一些杂点,这样看起来更具真实感。

猴子脚下的阴影,以及右边方框的高光和阴影是整个网页的整体看上去更自然。

这篇文章总结了优秀网站的设计原则,一共有7条,做好这7点基本就能够设计出一个美观的网站。当然不是这一篇文章就能使你大幅进步,设计网站还需要很多个方面的经验,多上网浏览美观的网站也是一个部分。如果你有什么疑问和需要帮助的,可以和我联系,或者在文章下直接留言。