页面设计原则

页面设计原则 Web作为出版物的一种，同其他出版物如报纸，杂志等在设计 上有许多共同之处，也要遵循一些设计的基本原则，不同之处在于 Web的“非所见即所得”特性和交互性。因此，熟悉一些设计的基本 原则，再对Web的特殊性作一些考虑，便不难设计出美观大方的页 面来。如果有美术设计基础，对Web页面的设计会很有帮助。如果 不具备这方面的背景知识，那么下面的一些原则将会对你有点帮助。 设计的3C原则 所谓3C原则是指：简洁、一致性、好的对比度。 Web页面设计需要遵循这三条原则。 简洁 设计并不再现具体的物象和特征，它要达的是一定的意图和要求， 在适当的环境里为人们所理解和接受。它与绘画有内在联系，但又不 同于绘画，它以满足人们的实用和需求为目标，因而它比绘画更单纯， 清晰和精确。页面设计属于设计的一种，同样要求简练，准确。 从人记忆能力的角度来说，由于人的大脑一次最多可记忆五到七条信 息，因此如果希望人们在看完你的Web页后能留下印象，最好也应该用一个简单的关键词语或图像吸引他们的注意力，如天极网的的 “YESKY”.，醒目易记。 保持简洁的通常做法是使用一个醒目的标，这个标题常常采用图形 来表示，但图形同样要求简洁。另一种保持简洁的做法是限制所用的 字体和颜色的数目。一般每页使用的字体不超过三种，一个页面中使 用的颜色少于256种。页面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把页面装点起来，初学者容易犯的一个错 误是把页面搞的花里呼哨，却不能让别人明白他到底要突出表达的是 什么内容，主题和意念。 一致性 一致性是表现一个站点的独特风格的重要手段之一。 要保持一致性，可以从页面的排版下手，各个页面使用相同的页边距。 文本，图形之间保持相同的间距。主要图形，标题或符号旁边留下相 同的空白。如果在第一页的顶部放置了公司标志，那么在其他各页面 都放上这一标志。如果使用图标导航，则各个页面应当使用相同的图 标。 一致性还包括：页面中的每个元素与整个页面以及站点的色彩和风格 上的一致性。所有的图标都应当具有相同的设计风格，比如全部采用 图象的线条剪辑画或全部使用写实的照片等。 另一种保持一致性的办法是字体和颜色的使用。文字的颜色要同图像 的颜色保持一致并注意色彩搭配的和谐。一个站点通常只使用一到两 种色，为了保持颜色上的一致性，标准色一致或相近。比如，站 点的主题色彩如果为红色，可能就需要将链接的色彩也改为红色。 对比度 使用对比是强调突出某些内容的最有效的办法之一。好的对比度使内 容更易于辨认和接受。实现对比的很多，最常用的是使用颜色的 对比。比如，内容提要和正文使用不同颜色的字体，内容提要使用蓝 色，而正文采用黑色；也可以使用大的标题，也即是面积上的对比； 还可以使用图像对比，题头的图像明确的向浏览者传达本页的主题， 这里同样需要注意的是链接的色彩，在设计页面时我们常常会只注意 到未被访问的链接的色彩，而容易忽视访问过的链接色彩将使得链接 的文字难地辨认。 还有一种实现对比的方法是使用字体变化。在文字排版中，可以使用 斜体和黑体实出关键内容，但是注意不要滥用，否则就达不到应有的 强调效果。 使用对比的关键是强调突出关键内容，以吸引浏览者，鼓励他去发掘 更深层次的内容。 为了对3C原则上有直观的认识，可以去优秀的站点看看，体会一下 这些站点对简洁，一致性和对度等原则的把握。 页面设计要点 Web上的内容包罗万象，版式丰富多彩，但无论怎样的变化，好的 Web站点总是有许多共同之处，例如： 精心组织的内容； 美观的正文； 和谐的色彩搭配； 较好的对比度，使得文字具有较强的可读性； 生动背景图案； 页面元素大小适中，布局匀称； 不同元素之间留有足够空白，给人视觉上休息的机会； 各元素之间保持平衡； 文字准确无误，无错别字、无拼写错误； 总的来说评价一个页面设计的好坏基本上要考虑以下几个方面的因 素： 组织内容 设计Web页面时，所发布的材料必须经过精心组织，比如说按逻辑、 按时间顺序或按地理位置等等进行组织，而且这种内容组织应当是易 于理解的。 材料组织好后，下一步就是在Web页面上布置文本、图片等内容，目的是引导浏览者在页内浏览。我们应该控制页面上的元素的放置顺 序和它们相互之间的空隙。比如，可以把与一段文字相关的图形放在 段落旁边或嵌入段落中，但不要把与段落无关的图形放在段落边上， 以免引起浏览者的误解。把相关的内容放在一起，而不相关的内容用 空白，水平线或其他图形分隔开，最好是浏览者看完一页之后可以选 择继续读下去或通过链接跳到其他合适的主题上去。 由于人们阅读材料习惯于从左到右，从上到下进行，因此他们眼睛首 先看到的是页面的左上角，然后逐渐往下看。根据这一习惯。我们在 组织内容时可以把希望浏览者最先看到的内容放在页面的左上角和 页面顶部，如公司的标志，最新消息以及其他一些重要内容等等；然 后按重要性递减的顺序，由上而下放其他一些内容。重要的内容应当 是浏览者最容易发现，而不是放在很深的链接之后的，页面上的广告 为了达到宣传效果，通常也放在页面顶部显著位置。在段落中不宜放 入过多的链接，否则会引起浏览者浏览上的混乱，最好的办法是按逻 辑关系选择放置，而不是随便乱放。如果可能的话，应该把链接放在 一些相关的说明性文字旁边。比如，在一列放置文本，在另一列放置 链接。这样就可以提示浏览者去使用这些链接。 设计时可用的一些页面元素 在确定Web站点的基本组织结构之后，就可以着手设计页面了。下 面是设计时可供使用的一些元素： 文本格式化：Web本身对文本和字体的格式化能力并不强，在Web页面中，可以指定文本尺寸、排列和其他的一些格式化属性（序号列 表和无序号列表），但建议不要改变字体，而应当使用缺省字体，你 指定的字体在浏览者那里并不一定能够找到，如果确实有必要少量使 用某种特殊字体，可以把这些字体象素化变为图像，然后将图像插入 到页面中； 按钮、图标和其他导航工具，帮助浏览者在Web内导航。 背景：给页面添加背景，包括纹理填充、水印式背景和长条状背景等 等，可以使得页面更加美观，给浏览者留下深刻的映象； 图形：可加入图片、图表和图形等； 表格：用来显示按行和列组织的信息，比如产品价格表，客户名单等； 颜色：包括图片的色彩、文本和背景的色彩等； 多媒体元素：包括声音、动画、视频片断、背说音乐等。 页面布局：在页面上放置文本、图形等元素，在元素间添加横线条， 空白等，并用表格、杠架进行排版。 在后面的章节我们将陆续介绍这些元素的使用。 选择文本和背景的色彩 色彩可以使页面更加生动。首先，使用色彩可以产生强烈的视觉效果， 使你的页面在浏览者心中留下很深的印象；色彩还可以传递设计者的 思想情感。但是必注意慎重的使用色彩，否则很可能弄巧成拙。滥用 色彩容易造成视觉上的混乱。一般情况下不要过多的使用效果太强烈 的色彩，对于大面积的文字来说，白底黑字或黑底白字总是最佳选择。 通常还应该选择相近的色彩。多数的页面背景为白色、黑色或灰色， 其他一些次要的元素，如背景图片、线条适宜采用不抢眼的色彩。在 数量有限的情况下，只有少量精心选择的元素为了突出强调的需要， 才彩用明亮的色彩。在数量有限的情况下，这引起彩色亮点会产生强 烈的视觉冲击，但如果用得太多了，就会形成一种均匀的噪声，而达 不到强调的效果。 在选择背景和正文颜色时，最重要的一点是注意易读性。实现易读性 的关键在于提供足够的明暗对比。由于黑白之间有最强烈的对比度， 因此大多数网页都采用黑底白字显示文本，但是，也不必拘泥于黑白 两色实现对比，可以选择一对颜色，其中一个是亮的，一个量暗的， 只要它们保持足够的对比度，比如说，灰底黑字也是不错的选择。 大面积的适宜采用低对比度。因此，对于大的形状或粗体字最好采用 低对比度的色彩组合。 除了亮度上的对比之外，还要考虑颜色上的对比。互补色具有最强的 颜色对比，两种有较强的色彩对比度的颜色组合在一起时，很难区分 它们的边界。颜色对比同样可以产生强烈的视觉效果。运用强的色彩 对比，可以制造紧张，激动等感觉。但是，在文本和它的背景之间不 宜采用太强的颜色对比，否则文字看起来会显示得模糊。特别是，文 本切忌放在使用其的互补色的背景上。 在选择颜色时，还要注意冷暖色的问题。冷色调（蓝、绿）会产生收 缩感，而暖色调（红、橙、黄）则有向前突出的感觉。深蓝色和深绿 色适合作为背景色，而明亮的黄色适合于那些希望引起注意的东西。 事实上，只要我们平时稍加观察，就会发现许多商店的招牌，广告或 其他商业图形展示都采用深蓝色背景加黄色文字，标记的组合。这种 组合非常醒目，最适合商业领域使用。黑色和黄色也是另一种常用的 颜色组合。 在Web页面上，大多采用明亮的背景色衬以深颜色的文字这样的一种颜色组合。 除了色彩的对比、冷暖感觉之外，还需要考虑色彩带给人心理上的感 觉。比如，冷的颜色使人平静，而暖色使人激动；强的色彩对比造成 紧张感；暗的颜色给人以沉重感和压迫感。亮的颜色给人轻松、开放 的感觉。我们可以根据所要表达的主题，选择合适的色彩。 色彩除了带给人心理上的感觉之外，有些颜色实际上已经有了社会意 义。比如，红色代表停止，绿色代表通行，灰色和深蓝色代表保守， 稳重等。恰当运用色彩可以调动浏览者心理上的感受。比如，在许多 饮食店中，采用蓝色，给人轻松愉快的感觉，这同样也适合于网页， 在网页中使用颜色时，就要尽量使得色彩搭配与这些习俗相吻合。 考虑到大多数人使用256色显示模式，因此一个页面显示的颜色不宜 过多，连页面内的图像在内应当控制在256色以内。主题颜色通常只 需要两到三种，并采用一种标准色。 以下是使用色彩的一些建议： 对多数网页特别是有大面积文字的网页来说，应采用白色或浅色的背 景，如浅灰色、淡黄色、浅蓝色或浅绿色，文字采用黑色或深颜色； 避免在浅色背景使用明亮颜色的文字，因为这样文字会很难辨认； 深颜色背景上使用浅色的文字是一种很好的组合，但是如果不是特别 需要，应留作那些需要引起浏览者特别注意的小块区域和场合，比如 标题图形等； 使用黑色背景许多时候显得太沉重，可以考虑使用深灰色、深蓝、粟 色等； 白色、浅灰色、浅蓝色、浅绿色、浅褐色很适合作为深色背景上的文 字颜色； 大的、粗体的文字比常规尺寸的文字更适合使用；交强的颜色，可考 虑鲜红色，橙色，明亮的蓝色，但注意不要滥用。