网页设计与页面编排原则

《网页设计与页面编排原则》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页设计与页面编排原则(一)、网页设计经常面对的问题　　原则上，一个HTML网页页面的配置，能够加强作者所企图表达的概念与目的。页面上的每一个元素，都会影响读者对页面上其它元素的解读，在看一个页面时，我们应该把整个组合看做是一个统一的整体，而非许多小单位的集合。在进行版面配置时，应把焦点放在版面的平衡与留白空间的处理，设计者应该根据图像与背景的关系、对比的关系、类似的原理、以及比例的关系，将整个空间以最有效的方式加以分配、组织。1、版面留白量　　设计者可以很容易地改变背景颜色，因此，当我们提到「空白」时，所指的就是背景颜色，或是所谓图像与背景的关系的背景部分。

2、在一个页面的组合中，留白的部分和被置于其上的元素同样重要。就像乐章中的休止符，让听者能据知对音乐达成理解与鉴赏一样，留白的空间让页面有了格式，因此，千万不要忽略留白的重要性。在早期的HTML版本中，要随心所欲地安排版面配置还很困难，由于在处理行列与对齐上的技术困难，使得版面常常陷入一种不平衡的局面。你必须考虑到所有的留白，这并不是说你得填满所有的空白，而是，你必须把这些留白也一起纳入考虑，达成页面的平衡。2、视觉平衡的考虑　　在安排页面上的诸元素时，你应该考虑每个元素之间的视觉比重，这个比重可以由对象的大小、亮度﹝深色对象比浅色对象重﹞、以及纹路或内文的密度。

3、视觉对比也很重要，如果加以有效地运用，对比可以很快地抓住读者的注意力。但是如果元素之间的对比过大，则容易造成反效果，使整体失去和谐与平衡。另外，视觉上的谐调和对比一样重要，你必须考虑对象之间大小比例的关系，将每一个元素对其他元素作相对的评估，比如说，一个很大的对象如果跟一个小对象放在一起，它会显得更大，而影响到整体的平衡。3、对称式的平衡　　在设计一个HTML页面时，有许多方法可以达成平衡，其中最简单的就是那种规规矩矩或是对称的版面，比如说左右两半或是上下部分彼此相似，甚至有些设计者把页面上的每个元素向中央对齐。在某些情况下，这种设计方式可以有不错的效果，但是

4、通常内文的易读性就会大大地降低。一般而言，一个对称式的平衡是属于静态的，而无法引导读者的目光去搜寻页面上的其它元素。另外还有一种平衡的方式则是非制式且不对称的。4、不对称的平衡　　一个不对称的页面结构必须藉由技巧性地安排不同视觉比重的各种元素来达成。例如，一段很长的文字就可以用一个深色的图形来平衡，一系列的小元素可以用一个大的元素来平衡。其变化的可能性是有很多的。一个不对称的平衡页面有时是经由设计者的天赋巧思所设计出来的，有时则是经过仔细的计算。初学者可藉由网格线的辅助来设计页面的平衡。一个不对称或是非制式的组合方式可以使页面在视觉上显得较生动活泼。5、缺乏平

5、衡的问题14網頁設計與頁面編排原則.doc21/06/11andrew　　一般而言，一个页面会出现不平衡的情况，若不是因为技术上的限制，就是因为设计者缺乏慨念。目前软件的技术已能符合大部分格式设计的要求，因此很快地，设计者就必须为失败的设计负起全责。有时候设计者的意图是要制造出一种让人感到不安、不稳定的感觉，这时一个不平衡的页面也许就可以适当地传达出这种概念或感觉，但如果这种不平衡不是出于故意的安排，那么，这样一个页面会让你的网站功效大打折扣。6、网页设计前后的一致性　　一般而言，你不会只设计一页网页，而是将许多页面以一个主题为中心相互连结起来，因此，在开始设

6、计时，你必须将整个WWW网站的方案做全盘考虑。由于超媒体的便利性，我们都习惯只需用鼠标轻轻一点，就能从某一页跳到另一页，而在这种情形下，视觉上的改变可能会让读者认为我们已从一个网站跳到另一个网站，通常我们当然不希望读者在我们的网站中，从一页跳到另一页时产生这种错觉。因此，你就得在你的页面之间建立一个统一性，例如使用一个固定的标题图示、一种特别的版面安排、或是一组特定的色系。记住，在考虑如何让你的页面具有一致性时，对这一致性做一点点的变化，会使你的网站更具有视觉趣味，并且使读者更有兴趣去浏览它。有时你也许会想要对你的页面设计作变化，让它不那么枯燥无聊，有时你也可

7、能想要建立一个版面规格让每一页的内容配置都能保有一致性。7、纸上设计与网页设计的比较　　在设计WWW时，我们应记住的是，计算机的屏幕通常是宽大于高，这使得我们很难同时在计算机上和纸上作设计，几年前，有人预言一个无纸的时代即将来临，但到了今日，看起来我们的用纸量比过去有过之而无不及，无论计算机多么方便，人们还是习惯把网页打印出来看，如果你是以水平而非垂直的方向在扩展你的网页，那就会有些打印上的问题。有些浏览器会在打印前先把页面重新安排过，但是通常这也会破坏所有有趣的页面设计。因此，你必须了解，有些材料最好是以垂直的格式来表现，这样比较便于打印。8、使用设计参考网

8、格线　　在设计版面时，利用网格线来安置