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