日期:2014-04-27  浏览次数:22791 次

  Web作为出版物的一种,同其他出版物如报纸,杂志等在设计上有许多共同之处,也要遵照一些设计的基本准绳,不同之处在于每章提到的Web的“非所见即所得”特性和交互性。因此,熟悉一些设计的基本准绳,再对Web的特殊性作一些考虑,便不难设计出美观大方的页面来。如果有美术设计基础,对Web页面的设计会很有协助。如果不具备这方面的背景知识,那么下面的一些准绳将会对有所协助。

设计的3C准绳

所谓3C准绳是指简约、分歧性、好的对比度。Web页面设计需求遵照这三条准绳。

简约

    设计并不再现具体的物象和特征,它要表达的是一定的意图和要求,在适当的环境里 为人们所理解和接受。它与绘图有内在联系,但又不同于绘画,它以满足人们的实用和需求为目标,因此它比绘画更单纯,清晰和精确。页面设计属于设计的一种,同样要求简练,精确。

    从人记忆能力角度来说,由于人的大脑一次最多可记忆五到七条信息,因此如果希望人们在看完你的Web后能留下印象,最好也应该用一个简单的关键词语或图像吸引他们的留意力,如天极网的的“YESKY”.,醒目易记。

    保持简约的常用做法是使用一个醒目的标题,这个标题常常采用图形来表示,但图形同样要求简约。另一种保持简约的做法是限制所用的字体和颜色的数目。普通每页使用的字体不超过三种,一个页面中使用的颜色少于256种。页面上所有的元素都该当有明确的含义和用途,不要试图用无关的图片把页面点缀起来,初学者容易犯的一个错误是把页面搞的花里呼哨,却不能让别人明白他到底要突出表达的是什么内容,主题和意念。

分歧性

分歧性是表现一个丫点的独特风格的重要手段之一。

    要保持分歧性,可以从页面的排版下手,各个页面使用相反的页边距,文本,图形之间保持相反的间距;次要图形,标题或符号旁边留下相反的空白;如果在第一页的顶部放置了公司标志,那么在其他各页面都放上这一标志;如果使用图标导航,则各个页面该当使用相反的图标。

    分歧性还包括:页面中的每个元素与整个页面以及站点的色彩和风格上的分歧性。所有的图标都该当彩相反的设计风格,比如全部采用图象的线条剪辑画或全部使用写实的照片等。

    另一个保持分歧性的办法是字体和颜色的使用。文字的颜色要同图像的颜色保持分歧并留意色彩搭配的和谐。一个站点通常只使用一到两种标准色,为了保持颜色上的分歧性,标准色分歧或相近。比如,站点的主题色彩如果为红色,可能就需求将链接的色彩也改为红色。

对比度

    使用对比是强调突出某些内容的最无效的办法之一。好的对比度使内容更易于辨认和接受。实现对比的方法很多,最常用的是使用颜色的对比,比如,内容提要和注释使用不同颜色的字体,内容提要使用蓝色,而注释采用黑色;也可以使用大的标题,也即是面积上的对比;还可以使用图像现对比,题头的图像明确的向浏览者传达本页的主题,这里同样需求留意的是链接的色彩,在设计页面时我们常常会只留意到未被访问的链接的色彩,而容易忽视访问过的链接色彩将使得链接的文字难地辨认。

    还有一种实现对比的方法是使用学体变化。在文字排版中,可以使用斜体和黑体实出关键内容,但是留意不要滥用,否则就达不到应有的强调效果。

    使用对比的关键是强调突出关键内容,以吸引浏览者,鼓励他去发掘更深层次的内容。

    为了对3C准绳上有直观的认识,可以到————等优秀的站点上看看,体会一下这些站点对简约,分歧性和对度等准绳的把握。

页面设计要点

    WebWebWeb上的内容包罗万象,版式丰富多彩,但无论怎样的变化,好的Web站点总是有许多共同之处,例如:

精心组织的内容;

格式美观的注释;

和谐的色彩搭配;

较好的对比度,使得文字具有较强的可读性;

生动背景图案;

页面元素大小适中,规划匀称;

不同元素之间留有足够空白,给人视觉上休息的机会;

各元素之间保持平衡;

文字精确无误,无错别字、无拼写错误;

总的来说评价一个页面设计的好坏基本上要考虑以下几个方面的要素。

组织内容

    设计Web页面时,所发布的材料必须经过精心组织,比如说按逻辑、按时间顺序或按地理位置等等进行组织,而且这种内容组织该当是易于理解的。

    材料组织好后,下一步就是在Web页面上布置文本、图片等内容,目的是引导浏览者在页内浏览。我们应该控制页面上的元素的放置顺序和它们互相之间的空隙。比如,可以把与一段文字相关的图形放在段落旁边或嵌入段落中,但不要把与段落无关的图形放在段落边上,以免惹起浏览者的误解。把相关的内容放在一同,而不相关的内容用空白,水平线或其他图形分隔开,最好是浏览者看完一页之后可以选择继续读下去或通过链接跳到其他合适的主题上去。

    由于人们阅读材料习惯于从左到右,从上到下进行,因此他们眼睛首先看到的是页面的左上角,然后逐渐往下看。依据这一习惯。我们在组织内容时可以把希望浏览者最先看到的内容放在页面的左上角和页面顶部,如公司的标记,最新音讯以及其他一些重要内容等等;然后按重要性递减的顺序,由上而下放轩其他一些内容。重要的内容该当是浏览者最容易发现,而不是放在很深 的链接之后的,页面上的广告为了达到宣传效果,通常也放在页面顶部明显位置。在段落中不宜放入过多的链接,否则会惹起浏览者浏览上的混乱,最好的办法是按逻辑关系选择放置,而不是随便乱放。如果可能的话,应该把链接放在一些相关的说明性文字旁边。比如,在一列放置文本,在另一列放置链接。这样就可以提示浏览者去使用这些链接。

设计时可用的一些元素

    在确定Web站点的基本组织结构之后,就可以着手设计页面了。下面是设计时可供使用的一些元素:

    文本格式化:Web本身对文本和字体的格式化能力并不强,在Web页面中,可以指定文本尺寸、陈列和其他的一些格式化属性(序号列表和无序号列表),但建议不要改变这体而该当使用缺省字体,以确保页面的平以无关必画面为浏览器是用本地机器上的字体显示示页面内容的,你指定的字体在浏览者那里并不一定能够找到,如果确实有必要少量使用某种特殊字体,可以把这些字画在图片上,然后将图片插入到页面中;

按钮、图标和其他导航工具,协助浏览者在Web内导航。

背景:给页面添加背景,包括纹理填充、水印式背景和长条状背景等等,可以使得页面愈加美观,给浏览者留下深刻的映象;

图形:可加入图片、图表和图形等;

表格:用来显示按行和列组织的信息,比如产品价格表,客户名单等;

颜色:包括图片的色彩、文本和背景的色彩等;

多媒体元素:包括声音、动画、视频片断、背说音乐等。

页面规划:在页面上放置文本、图形等元素,在元素间添加横线条,空白等,并用表格、杠架进行排版。

在后面的章节我们将陆续引见这些元素的使用。

选择文本和背景的色彩

    色彩可以使页面愈加生动。首先,使用色彩可以产生强烈的视觉效果,使你的页面在浏览者心中留下很深的映象;色彩还可以传递设计者的思想情感。但是必留意慎重的使用色彩,否则很可能弄巧成拙。滥用色彩容易形成视觉上的混乱。普通情况下不要过多的使用效果太强烈的色彩,对于大面积的文字来说,白底黑字或黑底白字总是最佳选择。

    通常还应该选择相近的色彩。多数的页面背景为白色、黑色或灰色,其他一些次要的元素,如背景图片、线条适宜采用不抢眼的色彩。在数量无限的情况下,只要少量精心选择的元素为了突出强调的需求,才彩用明亮的色彩。在数量有奶的情况下,这惹起彩色亮点会产生强烈的视觉冲击,但如果用得太多了,就会构成一种均匀的噪声,而达不到强调的效果。

    在选择背景和注释颜色时,最重要的一点是留意易读性。实现易读性的关键在于提供足够的明暗对比。由于黑白之间有最强烈的对比度,因此大多数网页都采用黑底折字显示文本,但是,也不必拘泥于黑白两色实现对比,可以选择一对颜色,其中一个是亮的,一个量暗的,只需它们保持足够的对比度,比如说,灰底黑字也是很好的选择。

大面积的适宜采用低对比度。因此,对于大的外形或粗体字最好采用低对比度的色彩组合。

    除了亮度上的对比之外,还要考虑颜色上的对比。互补色具有最强的颜色对比两种有较强的色彩对