网页设计杂谈

编译

和谐:办公用品与网页呈现同一种设计风格

www.kimballhillhomes.com

你是否曾经留意过一些在视觉上呈现和谐美的室内设计?当你走进一间这样的屋子里,你会发现,无论是线条、形状或颜色,都会在不同的房间里重复出现,从而使整间屋子显得特别舒服悦目。和谐意味着重复:一个地方的构造在另一个地方重复出现。 Kimball Hill 是一家在 1969 年就成立的房屋设计公司,而他们的平面设计也秉承了这种和谐设计之道:该公司的办公用品及网页都有着相同的颜色、形状(矩形)、字体,甚至连那条白色的边框也一样。结果就是:不同媒体的表现形式却让你轻易地感觉到他们整体的和谐美。

信纸、网页、公司名片,虽然三者区别很大,但元素的重复应用却让他们构成了有机的整体。

颜色:颜色能够传达出层次感

网页上有些菜单总会层层深入,利用菜单颜色的明暗度与不同层次的内容配合,使你创造出和谐的颜色系列。越是深入的菜单,颜色明度越高。

一组明暗依次变化的色彩引导着观看的人层层深入,也轻易区分不同的内容。而通常我们采用一种明度较低的颜色作为基色——这种基色包含了很多黑色——这样使你在明暗的使用上留有很大的余地。除非你是在销售芭比娃娃,否则我们要避免选择一些明亮的红色作为基色,因为当红色的明度增强时,它会变成粉红色——这种颜色搭配让人感觉很不舒服!

颜色:颜色也意味着动态链接状态

一个五颜六色的对象放在一个黑白区域上很轻易就传达出动态链接的意味。这种设计对于需要展示各种物品的网站特别适用,特别是当彩色的图片与黑白图片放置在一起时,更能传达出一种漂亮的版面气息。

在 Photoshop 软件里,我们轻轻一按就可以将彩色图片变成灰度图片,然后将彩色图片与黑白图片配合在一起,以达到强调某一样东西的效果。

将一个物品放在一个单纯干净的背景上,就象博物馆里那些展品在展出时的效果一样,在视觉效果上可以让浏览网页的人感觉轻松,注意力容易集中,而且在观看时没有受到其它干扰。采用灰色的字体是为了避免与图片产生冲突。

版面:居中的文字使到幻灯片构成的网页能够快速轻易阅读

对于一些突发的重大新闻,新闻摄影师可以在很短的时间内就抓拍到几十张图片。但如果没有文字配合说明,这些新闻图片也就失去了意义。对于一些时效性很强的图片新闻,路透社网页将其说明文字放在中间,使到每一个人都能方便快捷地阅读。

www.reuters.com

网页的中间区域在视觉上来讲是最强烈的,所以对于这些新闻图片来说,当文字是最重要的组成部分时,这一区域应该毫不保留地留给那些文字。如果将文字放在旁边,那对于很多匆匆浏览网页的人,或许根本就不会去阅读这些文字。而放置在中间的文字还产生了另一个好处:在视觉上平衡了整个网页的构成。

版面:不要形成无谓的空间

一般来说,设计网页涉及到很多小区域的设计,在这些面积不大的地方,内容应该简单明了:一张图片,一个焦点,尽量压缩文字,使到别人瞥上一眼就能注意到你在讲什么。

下面的这个设计从视觉上来说并没有什么不妥,但除了一点:这个构图在中间区域形成了一个没有什么作用的空间。

仅看元素的选择,并没有什么问题。图片很抢眼,粗黑体的标题很容易引起别人的注意。但中间所形成的这个空间却破坏了整个设计。这个空间在这个设计中起不到任何作用,这使到观看人先要看一下左边,然后再看一下上方的文字,再将眼睛转到下方——在这么小的一个区域里,就需要让浏览的人的眼睛在上面转上一圈,累不累啊。

修改后的设计重新组织元素。我们的眼睛从左方开始,然后毫无干扰地转到右边的图片,这样的构成使观看的人感觉舒服。既有动感,又很流畅。

本文所用颜色数值:

原文出处:www.bamagazine.com