设计在线网站群:中国工业设计在线 | 中国平面设计在线 | 中国环境设计在线 | 中国数码设计在线 ......
   
 
设计资讯设计视角设计长廊设计引擎设计沙龙设计书局设计商会
您现在的位置: » 简体版 » 设计视角 » 设计随笔 » 数码设计 » WEB页面设计中的空间处理
所有文章快捷检索 WEB页面设计中的空间处理

[高级检索] 提示: 关键词间使用空格
Google
Web dolcn.com
特别推荐
相关旧文快速搜索
» None.
发布时间: 2003-11-28 » 原人供稿
[ 未经书面授权,严禁转载任何内容!][www.DOLCN.com]
 

空间的意义:有之以为利,无之以为用 - 《 老子·道德经 》

对空间的关注和经营永远是设计师的一项重要任务,在WEB页面设计中尤其如此。网络的潜在空间是无限的,但WEB设计师创作页面时所面对的实际空间却是相当有限的。与印刷媒体不同,这一实际空间不仅受到用户所用显示器的尺寸、显示分辨率大小及浏览器窗口的严格限制,而且它还是不确定和多变的。同一页面,在不同的用户显示空间中,可能会呈现出不同的效果。因此,学会怎样处理这一局限而又多变的空间,对一名WEB页面设计师来说显得尤为重要。

屏幕及浏览器窗口空间

屏幕空间的实际大小决定于显示器的实际尺寸及显卡所能支持的分辨率大小。绝大多数用户使用15到17英寸的显示器来访问WEB,分辨率大多为800*600,有的低一点,如640*480,有的高一点,达到1024*768,或更高。浏览器的窗口是WEB页面真正的显示空间,它的大小决定于屏幕空间的大小。正常状态下,由于WEB浏览器的工具条、状态栏及滚动条要占用屏幕的一部分空间,所以WEB页面实际的显示空间要小于屏幕空间。

WEB页面可在水平及垂直方向上滚动显示,所以实际的页面空间可大于浏览器窗口。此时,浏览器的窗口就象一个矩形视框,或者说是一个取景框,通过水平或垂直的滚动,页面逐渐地展现在浏览者面前。需要注意的是,不能因为页面可通过滚动来浏览,我们就无限增加页面尺寸。相反,我们要小心地确定页面尺寸的大小。WEB页面一般都是垂直的,长度可以变化,从一屏到三屏不等,有时更多,但超过三屏一般会使浏览者产生厌倦感。

由于WEB页面不同于传统媒体的特殊浏览方式,我们需要同时注意在水平方向和垂直方向进行设计,整体上,设计的重点在垂直方向,而每屏的重心在水平方向而非垂直方向。因此,在具体设计时,既要注意页面的整体平衡,又要注意每屏的显示效果。

另外,在同一时间只在一个方向上滚动屏幕是可取的,应避免在两个方向上滚动屏幕。一般应尽量避免在水平方向上的滚动,但有时为产生特殊效果(如宽荧幕效果,以展示一宏大场面等),可在水平方向上滚动,以出奇致胜。

为了适应这一局限而又多变的空间,按照最低标准设计 - 永远按照 640*480 的屏幕分辨率来设计 - 是WEB设计的一条基本原则,同时要照顾到高分辨率的用户,因此适应多变的WEB设计环境,已成为WEB设计师的必备本领。如:平铺背景图象时,要考虑到高分辨率的访问者,避免背景图象的平铺影响页面效果,另外应注意背景图象的宽度,避免在低分辨率下浏览时产生水平滚动条。要经常测试自己的页面,在变换莫测的WEB环境中进行设计,这是一条永恒的真理。

营造整洁、宽敞的视觉空间

我们对空间的感知,不仅取决于物理空间的实际大小,更取决于我们对空间的心理感受。我们都有这样的生活经历,同一大小的空间因门窗的位置、大小、形状而给人不同的感觉。因此,虽然屏幕的实际空间是有限的,但可以通过设计,精心安排页面元素,营造出宽敞的视觉心理空间,以改变局促的屏幕物理空间给我们带来的拥挤和压抑感。

1. 合理构图,避免杂乱

一个杂乱无章的房间会使人感到窒息,同样,一个拥挤无序的页面使空间显得更加狭窄。避免杂乱的最重要的原则是:少即是多( Less is more ),保持页面的条理及秩序。首先,应尽量避免在一张页面上安排太多的内容,如果一定要安排很多的内容,则须注意页面内容在形态、色彩及字体上的呼应,使众多的内容相互之间形成联系,求得画面的统一,以免由于页面元素的纷繁无序造成混乱和压抑的感觉。另外,为了布置更多的内容,可以使用动态页面技术,进行动态地展现,以节省空间。其次,应注意页面元素间轻重、大小的比例关系,以实现页面的整体和谐与平衡,防止由于比例失衡带来压抑和不安的感觉。如:文本与媒体(非文本元素),两者如果靠得过近,会产生狭小、压抑的感觉,过远,会破坏页面布局的整体平衡。

分割是一种重要的构图方法。利用分割,可使页面主题清晰,层次分明,是规划空间和避免杂乱的一个重要手段。分割可分为水平分割、垂直分割及混合分割。分割时应注意注意在比例、虚实、方向及色彩上求得变化,以避免呆板与沉闷。网页设计技术中,表格和FRAME就是用来进行页面分割的。INTERNET上有很多利用分割规划空间的精彩设计。

取消限制.WEB空间由于受到显示器边框和浏览器窗口的重重限制,已经显得很狭小。如果对页面元素添加边框,则再一次限制了它的空间,显得很不专业。有的设计师喜欢给图形加上边框,希望获得良好的效果,结果却适得其反,使空间显得更加局促。生活中,我们经常给画裱上画框,但那是指墙上挂的画,因为有足够的背景空间。表格边框及 FRAME 边框的设置同样如此,应该将它们的边框宽度值设为零。取消限制的WEB页面给访问者一种视觉空间更宽广、更开阔的感觉。

2.空白

空白可以定义为页面中没有安排内容的地方。在一般情况下,读者只对页面上的文字和图形感兴趣,至于空白,好象认为没有必要去关注,甚至连一些设计师也常常忽视空白的存在。有一种设计倾向,认为留白是一种浪费,将整个页面塞得满满当当的。这是对空白的意义无知的表现。

空白是整个设计的有机组成部分,有无、虚实相生,没有空白也就没有了图形和文字。因此,空白作为一种页面元素,其重要性比色彩、图形和文字有过之而无不及。在设计中,要敢于留空,善于留空,这是由空白本身的巨大作用所决定的。空白可以平衡页面,有与无、虚与实的空间对比,有助于形成充满活力的空间关系和画面效果,设计时必须注意空白的形状、大小、及其与图形、文字的渗透关系。 空白可以引导视线,强化页面信息,所谓"孤独而清楚”,只有孤独才能清楚,周围留有大片空白的页面元素容易成为视觉焦点,使人过目不忘,印象深刻。这一点从很多大公司的报纸、杂志的广告中可得到证明。另外,空白还是一种重要的休闲空间,可以使我们的眼睛在紧张的阅读过程中得到休息,使其变得轻松。因此留白并不是一种奢侈,它是设计的需要,是信息传递的需要。

空白空间并不一定是白色的,可以是环境空间的颜色或图案。在WEB页面设计中,空白一般分为以下三种类型。

边空:在页面的左侧、右侧及顶部所留的空白,即页面内容与浏览器边框的间距。它可以极大地提高可读性,并给眼睛留下宝贵的休息的空间。

间距:页面元素之间的距离,如文本与媒体之间的距离,文字间的行距、字距及段落之间的距离等。页面元素间的距离对页面的可读性起着决定性的作用。

背景:围绕着页面元素的大片空间,可被看作是背景空间,它使图形和文字更加醒目,起着烘托和加强主题的作用。

3.创造深度空间

在绘画中,一般都可以看到前景、中景、背景的层次划分,它使两维的画面取得了三维的空间效果,并使画面的各部分协调一致。在页面设计中,为制造三度空间效果,同样可以利用字、形、色等页面元素的大小、形状的对比关系及它们间黑、白、灰的明度关系创造出明晰的空间层次。前景(如一行标题)可以对比强烈,中景(如一段正文)用中度对比,背景(如页码和注释)应该对比柔和轻淡)。实践证明,这种清晰、和谐的层次关系,可以极大地提高页面整体的艺术效果。

利用图形的透视及光影效果创造第三度空间。我们可以将浏览器看成一个透视深邃、无垠的广阔空间的窗口。

利用图形的遮挡及重叠关系同样可以创造出迷人而饶有趣味的三度空间。

利用图与地的有无相生可创造充满张力的空间,增加页面的情趣和吸引力。可借鉴中国画"疏可跑马,密不透风”的空间处理方法,计白当黑,创造出深远的意境空间。

小 结

在视觉艺术设计中,空间始终是一个重要的设计要素。我们可以从物理和心理的角度去考察空间。物理空间虽然重要,但更关键的是创造宜人的视觉和心理空间,以利于信息的传递。本文只涉及了单个页面设计的空间处理。WEB是新型的互动媒体,我们还可以从整个WEB站点的角度出发,考察页面间的空间关系,以创造迷人的四维互动心理空间。这是个值得进一步的研究的课题。

相关链接
» None

责任编辑: dolcn

设计在线链接代码
链接图标及代码
1997-2005 DesignOnLine
设为首页 关于我们 中国数码设计在线 设计在线·综合 中国数码设计在线