网页设计与页面编排原则.doc

网页设计与页面编排原则(一)、网页设计经常面对的问题原则上，一个 HTML 网页页面的配置，能够加强作者所企图表达的概念与目的。页面上的每一个元素，都会影响读者对页面上其它元素的解读，在看一个页面时，我们应该把整个组合看做是一个统一的整体，而非许多小单位的集合。在进行版面配置时，应把焦点放在版面的平衡与留白空间的处理，设计者应该根据图像与背景的关系、对比的关系、类似的原理、以及比例的关系，将整个空间以最有效的方式加以分配、组织。1、版面留白量 设计者可以很容易地改变背景颜色，因此，当我们提到空白时，所指的就是背景颜色，或是所谓图像与背景的关系的背景部分。在一个页面的组合中，留白的部分和被置于其上的元素同样重要。就像乐章中的休止符，让听者能据知对音乐达成理解与鉴赏一样，留白的空间让页面有了格式，因此，千万不要忽略留白的重要性。在早期的 HTML 版本中，要随心所欲地安排版面配置还很困难，由于在处理行列与对齐上的技术困难，使得版面常常陷入一种不平衡的局面。你必须考虑到所有的留白，这并不是说你得填满所有的空白，而是，你必须把这些留白也一起纳入考虑，达成页面的平衡。 2、视觉平衡的考虑 在安排页面上的诸元素时，你应该考虑每个元素之间的视觉比重，这个比重可以由对象的大小、亮度深色对象比浅色对象重、以及纹路或内文的密度。视觉对比也很重要，如果加以有效地运用，对比可以很快地抓住读者的注意力。但是如果元素之间的对比过大，则容易造成反效果，使整体失去和谐与平衡。另外，视觉上的谐调和对比一样重要，你必须考虑对象之间大小比例的关系，将每一个元素对其他元素作相对的评估，比如说，一个很大的对象如果跟一个小对象放在一起，它会显得更大，而影响到整体的平衡。 3、对称式的平衡 在设计一个 HTML 页面时，有许多方法可以达成平衡，其中最简单的就是那种规规矩矩或是对称的版面，比如说左右两半或是上下部分彼此相似，甚至有些设计者把页面上的每个元素向中央对齐。在某些情况下，这种设计方式可以有不错的效果，但是通常内文的易读性就会大大地降低。一般而言，一个对称式的平衡是属于静态的，而无法引导读者的目光去搜寻页面上的其它元素。另外还有一种平衡的方式则是非制式且不对称的。 4、不对称的平衡 一个不对称的页面结构必须藉由技巧性地安排不同视觉比重的各种元素来达成。例如，一段很长的文字就可以用一个深色的图形来平衡，一系列的小元素可以用一个大的元素来平衡。其变化的可能性是有很多的。一个不对称的平衡页面有时是经由设计者的天赋巧思所设计出来的，有时则是经过仔细的计算。初学者可藉由网格线的辅助来设计页面的平衡。一个不对称或是非制式的组合方式可以使页面在视觉上显得较生动活泼。 5、缺乏平衡的问题 一般而言，一个页面会出现不平衡的情况，若不是因为技术上的限制，就是因为设计者缺乏慨念。目前软件的技术已能符合大部分格式设计的要求，因此很快地，设计者就必须为失败的设计负起全责。有时候设计者的意图是要制造出一种让人感到不安、不稳定的感觉，这时一个不平衡的页面也许就可以适当地传达出这种概念或感觉，但如果这种不平衡不是出于故意的安排，那么，这样一个页面会让你的网站功效大打折扣。 6、网页设计前后的一致性 一般而言，你不会只设计一页网页，而是将许多页面以一个主题为中心相互连结起来，因此，在开始设计时，你必须将整个 WWW 网站的方案做全盘考虑。由于超媒体的便利性，我们都习惯只需用鼠标轻轻一点，就能从某一页跳到另一页，而在这种情形下，视觉上的改变可能会让读者认为我们已从一个网站跳到另一个网站，通常我们当然不希望读者在我们的网站中，从一页跳到另一页时产生这种错觉。因此，你就得在你的页面之间建立一个统一性，例如使用一个固定的标题图示、一种特别的版面安排、或是一组特定的色系。记住，在考虑如何让你的页面具有一致性时，对这一致性做一点点的变化，会使你的网站更具有视觉趣味，并且使读者更有兴趣去浏览它。有时你也许会想要对你的页面设计作变化，让它不那么枯燥无聊，有时你也可能想要建立一个版面规格让每一页的内容配置都能保有一致性。 7、纸上设计与网页设计的比较 在设计 WWW 时，我们应记住的是，计算机的屏幕通常是宽大于高，这使得我们很难同时在计算机上和纸上作设计，几年前，有人预言一个无纸的时代即将来临，但到了今日，看起来我们的用纸量比过去有过之而无不及，无论计算机多么方便，人们还是习惯把网页打印出来看，如果你是以水平而非垂直的方向在扩展你的网页，那就会有些打印上的问题。有些浏览器会在打印前先把页面重新安排过，但是通常这也会破坏所有有趣的页面设计。因此，你必须了解，有些材料最好是以垂直的格式来表现，这样比较便于打印。 8、使用设计参考网格线 在设计版面时，利用网格线来安置对象的位置是一个蛮不错的建议。网格线就像是隐形的路标，有助于在网站的页面中建立组织化的单元。许多的桌面排版软件中都附有标线以便于对象的对齐，有些编写网页的工具也会提供这类的工具，但一般的文书编辑器则没有。在这种情况下，你可以为你的页面画一个草图，一但你决定了所依据的网格线，你就可以用这个架构去对齐你的图像与文字，让你的页面达到平衡。HTML 的分割页框的功能，则可以让你在页面上定义出不同的区 块，这使你只需更新有改变的元素即可，而不用每次都重新修改一整页。有些人可能会觉得使用网格线会让画面的整体设计变得单调无趣，但其实如果运用得当的话，并不会如此。一但你建立了网页的架构，你就可以在这个网格线架构下衍生出许多种安排对象的方式，并且每页之间在元素排列上的变化是非常重要的。一个元素可以占据一个或两个、甚至更多个区域，文字也可以放在一块本来被拿来放图像的区块，你可以为一个网站准备两个或以上的网格线，然后依照每一页的内容做不同的应用，通常当一个网站中使用多个网格线模式时，是为了要在页面转换之间，创造出视觉上的韵律感。 9、视觉焦点的安排 在完成了一个页面的编写之后，用浏览器开启它，往后站一步来看。不要读内文的文字，把你的眼睛闭上几秒钟，然后打开，看着你的 WWW 网页。页面上的哪个部分最吸引你的眼光？你目光的下一个目标又是哪里？试着去追溯你的眼睛浏览整个页面的轨迹。作为一个设计者，也许你会有些偏见，所以你可以找别人来帮你看看你的焦点与浏览路径是否适当。如果你的焦点在颜色对比、大小、密度或是色值上太过强势，那么读者的目光就会很难从上面移开，而其它的部份就会被认为是不重要的。但如果页面上的所有元素看起来都差不多，那们读者就很容易被搞胡涂，不知道该从哪里看起，也不知道下一步要看哪一项。无论如何，不管设计者是否是有意识地考虑到读者的目光，你都要记得，目光浏览的路径，也会影响到读者对这个网页的满意度与阅读经验。（二）、关于整体版面 1、标题的呈现方式 1.标题宜以包括图像及文字的综合设计表现之。 2.台湾地区使用者喜欢色彩较丰富的标题。 3.标题宜居于版面中间位置，并以长方形方式呈现。 4.标题宜突显于背景之上。 图一：YAHOO 全球信息网 2、版面的留白的呈现方式 1.版面留白量以 50% 为宜。 2.背景色彩纯度过高会造成版面空白量感觉消失。 图二：Communication Arts 杂志的首页 3、连结点的呈现方式 1.横列式较长的文字连结点以单字段，向左对齐的呈现方式为宜。 2.横列式较短的文字连结点以双字段，位置居中的呈现方式为宜；文字则向左对齐为宜。 3.直列式的图文连结点，它们之间距宜加宽，以利区分。 4.连结点之前用小图像或小色球以指引强调连结的功能，能方便读者搜寻。 图三：US News & World Reports 全球信息网 4、重要信息呈现方式 1.重要信息应置于标题之后，首页连结点或内文之前。 2.重要信息可以配合运用置于前端明显的位置或突出的图像以强调之。 3.重要信息可以运用不同颜色区块以强调之。 5、讯息的连贯性 1.保持固定的版式，求取统一感，方便读者阅读与搜寻。 （三）、配合网页主题的颜色 在设计一个网页时，你应该对所有颜色的使用做一个全盘的考虑，而不是只注重个别元素的配色。你应该把背景颜色、每个元素的色彩、内文的颜色、以及超级链接选项的颜色包括已连结及未连结过的项目都纳入考虑。你应该建立起一个统一的基本色调架构，并且依据此架构来决定每一项元素的配色。 色彩对于加强你的网页内容是很重要的，一般而言，我们建立一个网站的目的就是要让大家来读它的内容，而大部分的网络使用者都是很快地在网页与网页之间点选跳接，不会仔细地每页都看，这时候，如果你能有效地运用色彩的配置，那么，无论你的内文是否真的吸引了它们，你都能吸引读者对你的网页多看一眼。 1、色彩过多与不及 我们生活在一个信息爆炸的时代，为了避免负荷超载，我们通常会根据自己的标准，从许多垃圾信件中挑出有用的信息。广告商们早就知道要擅用颜色的效能来吸引人们的注意力并且去读它们的文案，公司们也知道如何利用色彩来增加文件从年度报表到公开发表简报的易读性。 如果网络上的所有网页都像过去好几年间一样，只有文字而没有色彩，那么我们就很难去分辨这一页和那一页有何不同。一个只有黑白两色，而且在文字的大小和图形上都了无变化的网页，会让读者不得不停下来读一读它的内文，然后才能决定这是不是一个有用的信息。一个只有纯文字的文件是有一些优点，它很明显地会占用较少的磁盘空间、因此也能增加网络传输的速度，读者的阅读也不会被图像所干扰，而能把焦点都集中在内文上；不使用图形也会使你的内容更加精简。但是完全不使用颜色也有一些危险，人们通常期望一个 WWW 网站能够图文并茂，这对于读者是否会停留在这个网站并且仔细地阅读它的内容是个决定性的因素，就算是一小点的颜色，对一个以纯文字为主的网页，都能大大地增加它的可读性。 太多的颜色比颜色不足还糟糕，许多设计学生在颜色的使用上有一种趋势，就像刚引进其它的如字型技术一般的图形技术时的情形一样，当一个学生发现了计算机可以一次将二十个不同的字体放在同一页上面时，他们就会兴奋地试验各种做法，直到有一天他们自己发现了计算机的这种容纳性并不能让设计的效果变得更好为止。同样的原则也试用在绘图软件会是网页设计上。由于无法把缤纷的背景放在网页上，许多人因此致力于尽可能将更多的色彩组合在一起，背景颜色也应注意和内文及图形相互协调、搭配。 2、使用限量的色块palette 选择一个色系，这其中可以包含和谐色与对比色，但要限制你用在网页上的颜色数量。要确保每一种元素要能够共同创造出一种色调的统一，有一种办法是选择在色盘中属于同范围的颜色。 3、复杂色块的掌控 有许多的网站会为了某些理由而使用很多种颜色，在这种情形下，调和主色和其它颜色之间的关系就非常重要。就像前面所说过的，有一种评量你的用色的方式就是往后站一点，然后从一段距离以外来看这个画面，哪一个颜色首先映入你的眼帘？这些所使用的颜色会让你有任何紧张或是视觉矛盾的感觉吗？所有的颜色使否得到同样的注意？在图形或背景中使用五彩缤纷的色彩，通常会破坏掉和谐的感觉，一系列使用了很多种色彩的写实影像就应该由某些共同的颜色来把它们串联起来。 4、颜色的对比 在考虑要用什么颜色、以及把这个颜色放在那里时，你应该要注意到这个颜色对它周围的色块以及与它重迭的元素有什么影响，有些网页设计者在使用一个背景颜色或图形前，并没有仔细地考虑过它与内文和图像的关系，大致上而言，背景颜色应该要尽量打淡一点，不要让所有的目光都集中到它身上而使得网页的内容黯然失色，在文字和背景图案间也要有适当的对比，这样文字才能具有易读性。 在背景和前景之间的适当对比可以藉由将深色与浅色元素之间的差异值最大化来达成。在考虑到对比时，色彩的反差也是很重要的。如果将整个页面转换成灰阶模式，有许多红红绿绿的色彩将会变成同样的颜色而无法分辨，虽然在彩色页面上他们看起来具有很高的反差，但对许多色盲的人来说，他们并无法分辨这两种颜色，所以，当你在设计中使用这些颜色时，也要考虑到这个问题。 5、色彩的变化 为了有助于浏览者了解网页的内容与主题事件，有效地对网页作变化是很重要的。如果特别以某些变化来标示某些项目，那么浏览者就很容易抓到整个网页的主题。报纸也常常利用标题的字型与字体的变化，来标示出每篇报导的相对重要性。变化可以被有效地应用在文字及图像上，例如，Netscape 的浏览器就将超级链接文字的字型做了预设的变化，并且标示出已连结与未连结的项目。这个浏览器的设计者事实上就是以实际应用为考虑，让人们可以分辨出接下来要点选什么，他们将图像设计的原则应用到超级链接选项之重要性的处理上。 超联结选项并不是网页上唯一需要被标示出来的项目。你也许会想要将你的标题做不同于文字的处理，并且把主要的图像和附加的图像区分开来。 6、网页系统化 当你在设计网页时，你必须要了解人们大部分都是从首页开始看，虽然这并非绝对。因此，通常在最高层的网页，也就是被视为首页的那一页，就必须包含了对这个网站内容、主题的整体概述，这一页必须在设计上具有吸引力，并且包含能表达你的意图的重要信息。一般来说，放在越上面的东西越重要，所以，在设计时要注意，让你的页面内容信息显得比页首丰富。 虽然大部分的人都会从首页开始看，你最好还是不要完全依据这个假设来设计网页。很多人都会把一些自己觉得有趣的网站的网址寄给朋友，而这些网址并不一定是指向你的首页。一个普遍的错误是，你常常会放上一个回上页或回主画面的按钮，但其实浏览者也许并没有看过你的网站结构中的前一页。（四）、关于背景使用 1、背景与主体的关系 1.背景与主体明度对比为 3:1 到 5:1 之间为宜。 2、背景的色彩 1.淡色系列的背景有助于整体和谐。 3、背景的材质机能 1.淡色材质背景为佳，能与主题分离之浅色标志或文字背景亦可。 图四：美国白宫全球信息网（五）、适合内容的绘图 用在网页上的图形应该要支持并能够增强 HTML 文件的内容，在设计图形时必须考虑很多事情，包括技术上的限制到美学上的考虑。技术上的限制虽然都已渐渐地获得解决，但是仍然不可忽视；而关于图像与用及设计的美学问题，则不会有太大的改变，我们今天所讨论的这些原则，将一直适用于大多数的应用实例中。 1、绘图与美术修养 当一个艺术家在为多媒体设计图像时，有许多小花招。如果要设计一个成功的图像，则必须要体认到一点计算机不会替你创造艺术 好的艺术必须出自有艺思的天赋与努力练习。当然，这并不是说如果你不是一个艺术家，你就没有办法创造出一个好的图像。 2、鉴赏的眼光 要做出成功的图像，有一个很重要的技巧是要有一双具批判性的眼光。如果你能够客观地评量你的作品并且发现它的缺点，那么你就能够改进它。如果你相信你的作品只是还不错，那么它就还有一点点变得更好的可能。许多艺术家一直不断地在寻求自身艺术造诣的更上层楼，而为了要训练自己具有批判性的眼光，最好的方式就是常常接收他人对自己作品的回馈。发现其它人对同一作品会有不同于我的观点的解释，甚至常常有些人会指出完全没注意到的部分，而这个部分一但被注意到，也就能产生另一种不同的观点。 当你向他人寻求对你的作品的忠告时，你必须要能够不带防卫地接受那些具建设性的批评。想想看别人所说的话，然后自己在心中衡量一下，要不就是回绝这个建议，要不就是改变你的图像来改正有问题的部分。如果你回绝这个建议，那么你也要能够合理地解释为什么这不是一个好建议。因为我想要这样子做并不是一个好理由。去找到一个愿意提出诚实并有意的评语的人是很重要的，像我喜欢这样的评语并不能帮助你把作品做得更好，请对方说说这个图像在效用上的优缺点会是个不错的方式。 3、绘图技巧 光是想着要改进你的技巧，并且具有批判的眼光是不够的，你将会发现若想要创作出成功的图像，艺术技巧是绝对必要的。你可以依循某些规则或诀窍来学习发展这些技巧。虽然我们在网络上可以看到许多经过处理的影像，但是大部分的时候我们也必须具备实际绘图的能力，手跟眼之间的协调、以及将眼睛所见的 3D 立体物体转换成计算机上 2D 的平面图像所需的视觉转换能力，都需要许多年的训练与经验才能做得好。能提出的最好的建议是，你可以随身带着一本素描簿，并且在任何时候画下你所见的事物，这样不久你就能够自然且随意地表达你所想表达的东西。要有创意地处理影像也需要技巧，你必须考虑颜色、整体设计、对比、色值、符号意涵、以及许多其它的因素。要用 PHOTOSHOP 把两个影像放在一起，然后制造出一个图像放在你的网页上，这看起来很容易，但你必须注意，如果你在设计一个图像时，将它独立于整体网页的设计考虑之外，那么你的网页可能会显得杂乱无章而使得效果有所打折。 4、图像性质一致 你的网页上的每一个图像都与彼此有着紧密的关联，所以，当它们被合置在一个网页上时，你不能对它们作各自独立的处理，因此，发展一套图像的规则并且确实地应用在图像的创造上就非常重要了。例如，你可以藉由在每一个图像上加一道 3 个像素宽的边框，并且让每一个图像保持 1 X 1 的大小，让图像间拥有一个共同的特质。当你建立起一套规则并实际地运用到你的网页图像上时，人们也许并不会注意到，但是，如果你的图像大小不一，有的有边框、有的没有，那么人们就很容易注意到，而使你的网页不那么吸引人。 5、阴影表现方式一致 当你在一个图形或文字上使用阴影时，这通常表现出一种深度的错觉；当你在文字下方加上阴影，会使得那文字似乎栩栩地跃然于纸上，这阴影用于图像时，它也会让读者觉得这影像比较逼近自己。并不是所有时候都必须使用阴影，你应该小心并有创意地用它。在使用阴影效果时，你应该了解到，有阴影就表示有一个潜在的光源，比如说，你的对象有一个下方 4 个像素、右方 5 个像素的阴影，那么看的人就会有意识或无意识地认定在相反方向的地方有一个光源。一个常见的错误是，在某个物体的某一边制造出阴影，却又在同一页或同一个影像上的相反的那一边也制造出阴影，这样的错误会导致视觉混淆，而让人无法确定光源到底来自哪个方向。 6、图像大小有统一性 当处理成对出现或一系列的图像时，你应该注意让所有的图像保持统一的规格，如果这些图像都是以同样的比例制作的，那么这倒不是难事，但是如果这些图形有的是水平的、有的是垂直的，那么要把它们统一起来就有些难度了。如果可能的话，就把垂直和水平的影像分别集中在一起，并且统一它们的规格。如果你把垂直和水平的影像放在同一个区块中，那么就重新调整它们的大小，让其中一个向度保持一样的尺寸，这将有助于建立统一感。由于我们一般都习惯使用固定的行间距，所以，调整影像让它在同一向度上具有一样的长度，将有助于维持整齐的行列。当一个影像以水平方向向其它影像对齐时，就调整影像使它的高度相等，而垂直方向的对齐，则有赖于影像宽度的一致。 7、图像排列有序 在一个有许多图像的网页上，即使每个图像都有一致的规格，仍然有可能因为缺乏有创意地排列，而显得凌乱随便。如果你事先为你的网页建立了网格线，那么只要将你的图像依网格线对齐，就能够强制产生一个架构。不管你是否使用网格线，你都必须有意识地决定如何安排这些图像的位置，不要被 HTML 的技术限制住你对图像编排的控制。 8、模仿其它媒体表现 有些时候艺术家们会模仿其它的媒体来创作图像，比如说，我们都已习惯看到图像后方出现阴影，而未曾质疑在计算机的影像上是不可能像现实世界中一样出现阴影的。作为一个艺术家，他常常会去模拟或是借用某种媒材的视觉特性，并把它转换到另一种媒材上面。在某些情况中，它的意图是要在 2D 平面上制造出三度空间的幻觉，有许多技巧可以制造出这种三度空间的效果 线条透视画法将线条延伸聚集在无限远的一点上 将两个影像轮廓重迭在上者看起来比较近 色彩透视画法较远的物体具有较浅的颜色、且较不精细 大小关系大的物体看起来比较近 做立体模型 做阴影做渐层将物体件加上三维效果 以方向性灯光制造阴影强调物体到表面的距离 在平面上的位置上面的物体看起来比较远 粗线条看起来向前方前进 色彩亮暖色系看起来向前方前进，暗冷色系则看起来像在后退 当第一次看到某些模拟手法时，我们常常会觉得惊讶或是新鲜。例如，在网页上看到一个木质的边框没什么了不起，可是从计算机屏幕上看到一个金属材质的注册标志，就很少见了。当你仿照其它的媒体而创造出图像，就有可能引起浏览者的好奇心，因而继续浏览你的网页。 9、模仿工具filters 虽然有创意的处理能够加强你的网站的视觉效果，但你也要知道，有许多处理的方式都已经被过度使用而变成陈腔滥调了。例如，页尾卷起的效果，在一开始被引进时，就被大量地引用，不管这样的效果有没有意义或是它和页面的内容图片有没有关系。伦敦字体一种中古世纪风格的、亮灿的草书字体处理方式也是如此，人们把这种字体用在未来派写作、科技观点、以及其它并不合适的地方。所以，当你发现一种新的滤镜效果时，要小心，这样的处理方式可能会被误用或是过度使用，而使的原来的本意大打折扣。当你使用滤镜时，要谨慎并且要有选择性，试着避免直接使用它的默认值，并且尽量将多种滤镜组合使用，以创造出不能被归类为某一种滤镜效果的图形。对计算机新手来说，你的作品中所使用的滤镜效果可能会令他们眼花撩乱，但是对从事图像创作的艺术家而言，你的作品只是，比如说，误用柔焦滤镜而产生的结果，而贬抑你的努力，认为那是个老套的东西。 10、破除框框的安排形式 另一种艺术工作者常用的小技巧是打破大多数图形所遵从的直线栏框。一般的图形都是被预设为以矩形的形状储存，虽然矩形的格式可以让你的画面看起来比较有组织，但是有时候一个突破框架限制的图形能够引起视觉上的刺激，并形成一个新的架构，这样子的挑战创新能够让你的文件看起来更具动态。当你在设计 GIF 图形文件时，你可以将这个档案设定为以某一种颜色当作透明罩遮，当你用浏览器看这个图形时，这个颜色就会变成透明的。这种透明效果只能用在 GIF ，而不能用在 JPG 档，用得好的话，它可以让你的 WWW 网页生色不少。 11、动画 WWW 的引进对因特网的意义，就像是电视的发明之于收音机的世界一样，我们可以看到影像并且很容易地接收信息，但是你能够想象如果电视上的所有影像都是静态的图像吗？电视就像是一连串的幻灯片或弹匣。早期的 WWW 浏览器只能经由外挂程序来看这些时间导向的媒体，因此，影片的内容和网页的内容是分开的。后来程序设计师们发明了一种聪明的方法来从服务器推动图像，以仿真动画的效果，但是频宽的问题却让这项发明无法广为大家所用，目前则有配合服务器之推动动作的动画型态的 GIF 格式，以及 Shockwave 档，和一些其它的小技巧，能够在浏览器窗口内仿真动画图形的效果。 动画效果对你的网页可以说是既能载舟，也能覆舟，所以你必须仔细考虑何时 以及为何要使用动画，在许多例子中，动画是被用来标示你的画面上的一些新鲜有趣的东西，有时动画则可以增加信息的负载量，制造出某一种气氛、或是配合支持网页的内容。要记住，在大部分的情况中，动画都会使得下载的速度变慢，而让联机必须一直处于开启状态。 如果你创造了一个动画，请仔细的想想看这个动画会与网页上的其它元素产生怎样的互动？它会对读者的感受与所要传达的信息有帮助吗？动画的动作跟色彩或是其中元素的安排一样重要。如果你打算要放进一个动画，那就让它值得观赏者花费那些下载的时间，并且让你的动画变动的动作看起来尽可能地顺畅。（六）、关于图形设计 1、图形的主体 1.清晰可见，去除不必要噪声。 2、图形的意义 1.简单明了。 3、图形内文字的本身 1.清楚容易视认。 4、图形内文字的装饰 1.没有过分花俏装饰，造成文字辨识不易。 图五：左侧图形内的文字辨识不易（七）、色彩的意义与选择 当你在为网页设计图形时，应该特别注意色彩的选择。如同前面所提到的，网页上的影像并不能独立于其它组件单独运作。因此在对图形加入色彩之前，你应该首先考虑网页的整体色彩架构。 在网页中使用色彩的原因应当如下： 区分项目 统一组件 唤起情绪反应 提高视觉反应 将观念符号化 打破传统 吸引注意力 在影像中的色彩，会受到周围色彩的影响。例如，当红色置于绿色附近，绿色会被增强。经过细心组合与安置的色彩可以让个别的颜色在视觉上彼此影响。互补的色彩有彼此机动配合的作用。对比的色彩，会令人产生一种紧张或兴奋的感觉。调和色彩，也就是在色彩轮盘上彼此靠近的颜色，会产生一种和谐与稳定的感觉。最好在你的影像上，选定一定范围的色彩，而不要运用如彩虹般众多的色彩。 1、色彩与情绪 德国的理论家，诗人与小说家哥德，曾经研究色彩对于观察者的感官与心理的效应。他相信当一个人观看色彩时，会建构出一复杂组合的心理经验，并认为色彩可以激发记忆与期待。虽然他的想法不被当时的科学界所接受，不过现在我们却发现他的研究具有实质的内容。虽然在不同文化之间，对于色彩的效应并不存在着所谓普遍的认知，我们依然可以肯定西方对于色彩在心灵上的效应所做的观察。譬如： 红色，橘色与黄色具有激励效应，快乐的，热情的特质 蓝色与绿色具有安抚与镇定的效应，忧郁的特质 紫色具有神秘与不安的特质 已经有研究显示，色彩甚至能影响观察者的新陈代谢与对他们所处的环境的感受。有报导说，在蓝色的房间内感觉较冷，而在黄色的房间内感觉较暖和。有人认为，在红色范围内的色调有助组织复原，然而蓝色与绿色会减少荷尔蒙的活动。 2、色彩与象征 在不同的文化中，色彩具有相当不同的象征意义。当为因特网设计图形使用色彩时，须注意某些色彩被认为具有强烈的象征或宗教意义。在西方文化中，白色象征纯洁；当使用迭加色彩系统时，它是所有色彩的组合。然而，在某些亚洲文化中，白色象征死亡。黑色，没有光线时，普遍地象征夜晚；但是在某些文化中，也意指死亡，危险和邪恶。黄色经常让人联想到阳光，但是在世界上干热的地区，太阳被认为有害。黄色有时让人联想到黄金与富有，但是在某些文化中，也已被认为哀悼的色彩。红色象征热情与爱情，但是在某些文化中，意指低俗与怪异。因为对色彩的联想缺乏普遍的象征意义，使得很难认定全球的人如何诠释你所选择的色彩。 3、色彩与冷暖 如同前面所提到的，色彩被使用来对于你的图形创造一种三度空间的感觉。暖色系，黄色，红色和橘色，在构图中呈现往前跳跃。冷色系，蓝色和绿色，似乎产生后退的感觉。经由选择能帮助区分背景与前景的色彩，将对你有利。选择色彩使得背景变成明亮的黄色或橘色且使得前景物体变成蓝色或绿色，是一项常见的错误。假如你把焦点放在个别的色彩上，影像可能会集中在一起，但是当往后站立，当色彩似乎与设计者想要建立的空间关系相矛盾时，你会注意到有视觉的紧张与混淆。 4、有效的色彩与绘图 当设计图像时， 应考虑整个 WWW 网站，而不仅仅是为了个别的部分。你要考虑这个图像如何与你在其它地方所做的东西有一致性呢？假如你仅仅为了吸引观众的注意，而使用一个图像，并且在视觉上与观念上，对于内容没有任何关系，也许最好不要使用这个图像。设计图像最重要的事情是，避免不必要的图像或是那些会贬抑你的观念的图像。例如，没有必要为一个容易经由文字传达意念的事物，去创造图像，除非这个图像能超越仅用文字的表达方式。总之，当设计超文件网页时，图像可以是用来传达你的观念的有效的方式。但是，一定要注意整合图像，文字与其相关内容，以创造一个整体性的网页是重要的一件事。（八）、关于色彩使用 1、纯色的使用 1.同版面不宜超过三种纯色。 2、整体色彩的表现 1.要做到和谐并能达到视觉平衡。 3、色彩的对比 1.不同类信息之间避免使用类似色调，以致区隔不明显。 4、机能性色彩区块的应用1. 运用小色球或色块能造成集群化的效果，以协助视觉搜寻。图六：颜色刺激的 BLENDER WEB 网站（九）、文字的运用 无论是在哪一种版面配置中，文字都同时扮演了内文与网页上的图像元素这两种角色，前面对色彩、图像对齐等规则的建议，同时也都适用于文字。 1、文字为设计基本元素 在一开始学习版面设计时，你最好不要拿有意涵的内文来用在你的版面上，你可试着把文字看做编织纹路，因为在讨论网页设计与排版时，文字的实际内容并不重要。当然，对一个网页设计来说，经过校对而没有任何文法或错字的文字内容是很基本必须的。为了将文字当作一个设计元素来讨论，我们要注意文字区块的形状与版面安排方式上面。 2、水平与垂直排列 无论你是否在网页中运用了隐藏的网格线，你都应该将文字区块的边缘跟你的图形边框或是网页上的其它元素对齐。当然有时也会有效果不错的穿插着的文字，但它必须跟其它元素达到良好的平衡，让人觉得那是经过特意设计的，而不是一个设计错误。HTML 语法中的表格功能，让网页设计者更能够随意地控制文字的置中或对齐，而注意页面的规格与文字区块的宽度之间的关系，也是很重要的。 3、字型的运用要有统一性 要有效地使用字型与字体，设立一个规则并切实地遵守。例如，所有的英文书名都使用斜体字，所有的副标题字体都设为四级的大小，诸如此类的用法。这能让观众从文字体裁的式样，快速地了解网页的文字内容。 4、标题字的运用 如果你用标题或是较大字体的格式来作为对某一页的快速导览，那么观众通常就能很快地找到他们要的信息。HTML 提供了从Hl到H6的旗标，来控制字体的大小，从一号到六号，其中一号代表最大的字体。所有的浏览器都支持这组旗标，不过实际上的字体大小多少会有些出入。另一种制作标题的方式就是用FONT SIZE = 4/ FONT这组旗标，来设定字体的大小。这种方式在没有分段符号的情况下较具弹性，而你也可以用它来改变某一行的字体大小。 5、反锯齿状与锯齿状的文字 既然我们所做的是用在屏幕上的设计，那就难免会受到屏幕分辨率的限制，在大部分的个人计算机以及麦金塔的标准分辨率屏幕上，我们都可以清楚地以肉眼看出组成文字的像素，尤其是有棱有角的字，如 ，这对大标题以及斜体字的使用来说，是一个颇大的困扰。一般来说，这对 SGIs 及 SUN 的工作站屏幕则不是问题，因为他们有较高的分辨率。有时你也许会使用反锯齿文字即无锯齿线，在这种情况下，你必须创造出一个包含这项文字的图形，当然，这是一种妥协，你想要增加你的字型质量，就得要花费较多的下载时间。有时你对格式的要求超出 HTML 所能提供的功能，例如想要让文字机动性地环绕着图像、具层次感、或是使用特殊字型等等，这时最好的方法大概就是把文字转换成图像的形式了，你可以以一种较低位的格式储存你的文字，来减少档案传输所需要的时间。 6、可读性的问题 虽然我们已有许多种方式可以控制格式，但在字型变化的能力上则仍有待努力。由于平台之间兼容性的问题，使得我们只能使用平台间某些共同的字型。虽然使用者能设定浏览器的预设字型，但是选择并不多。基本的选择就是非比例non-proportional即所有的字符都具有一样的字符空间，以及比例（proportional字型。后者较容易阅读，但前者在行列的设计上有比较好的效果。PRE这个旗标除了注意到文字中的空格键以外，它也是以一种非比例的方式排列。 7、文章与字型的整合 FONTFASE= 的旗标让网页设计者得以直接指定字型，虽然这让网页能够以一种比较有创造性的方式处理格式，但是当所指定的字型只在某些平台上受到支持时，它就常常会变成无效的设定。这种规格挑战了 WWW 的跨平台原理，它也为下一代的 WWW 对字型之支持的发展铺路。据说 Microsoft 将要推出一种方式，机动地让 HTML 所指定的字型随文件一同下载并嵌入。基本上，字型下载的方式让 Miocrosoft 得以将嵌入的压缩过的字型应用在 HTML 文件中，这项技术并不支持 Postscript 字型，它把字型的基本数据与专用的提示嵌入于文件中，而这样技术将只适用于 TrueType 字型，跨平台浏览器之间的支持是这项技术的一大问题。 Netscape 也宣布将要引进使用 Bitstream TrueDoc 技术的动态字型支持，据说 TrueDoc 同时可支持 TrueType 和 Postscript 两种字型，并且能够跨平台作