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

时间：2023-02-18 23:14:01 | 来源：营销百科

时间：2023-02-18 23:14:01 来源：营销百科

页面编排网页设计与页面编排原则：原则上，一个 HTML 网页页面的配置，能够加强作者所企图表达的概念与目的。页面上的每一个元素，都会影响读者对页面上其他元素的解读，在看一个页面时，我们应该把整个组合看做是一个统一的整体，而非许多小单位的集合。在进行版面配置时，应把焦点放在版面的平衡与留白空间的处理，设计者应该根据图像与背景的关系、对比的关系、类似的原理、以及比例的关系，将整个空间以最有效的方式加以分配、组织。

n1、版面留白量

n设计者可以很容易地改变背景颜色，因此，当我们提到「空白」时，所指的就是背景颜色，或是所谓图像与背景的关系的背景部分。在一个页面的组合中，留白的部分和被置於其上的元素同样重要。就像乐章中的休止符，让听者能据知对音乐达成理解与鉴赏一样，留白的空间让页面有了格式，因此，千万不要忽略留白的重要性。在早期的 HTML 版本中，要随心所欲地安排版面配置还很困难，由於在处理行列与对齐上的技术困难，使得版面常常陷入一种不平衡的局面。你必须考虑到所有的留白，这并不是说你得填满所有的空白，而是，你必须把这些留白也一起纳入考虑，达成页面的平衡。

n2、视觉平衡的考量

n在安排页面上的诸元素时，你应该考虑每个元素之间的视觉比重，这个比重可以由物件的大小、亮度﹝深色物件比浅色物件重﹞、以及纹路或内文的密度。视觉对比也很重要，如果加以有效地运用，对比可以很快地抓住读者的注意力。但是如果元素之间的对比过大，则容易造成反效果，使整体失去和谐与平衡。另外，视觉上的谐调和对比一样重要，你必须考虑物件之间大小比例的关系，将每一个元素对其他元素作相对的评估，比如说，一个很大的物件如果跟一个小物件放在一起，它会显得更大，而影响到整体的平衡。

n3、对称式的平衡

n在设计一个 HTML 页面时，有许多方法可以达成平衡，其中最简单的就是那种规规矩矩或是对称的版面，比如说左右两半或是上下部分彼此相似，甚至有些设计者把页面上的每个元素向中央对齐。在某些情况下，这种设计方式可以有不错的效果，但是通常内文的易读性就会大大地降低。一般而言，一个对称式的平衡是属於静态的，而无法引导读者的目光去搜寻页面上的其他元素。另外还有一种平衡的方式则是非制式且不对称的。

n4、不对称的平衡

n一个不对称的页面结构必须藉由技巧性地安排不同视觉比重的各种元素来达成。例如，一段很长的文字就可以用一个深色的图形来平衡，一系列的小元素可以用一个大的元素来平衡。其变化的可能性是有很多的。一个不对称的平衡页面有时是经由设计者的天赋巧思所设计出来的，有时则是经过仔细的计算。初学者可藉由格线的辅助来设计页面的平衡。一个不对称或是非制式的组合方式可以使页面在视觉上显得较生动活泼。

n5、缺乏平衡的问题

n一般而言，一个页面会出现不平衡的情况，若不是因为技术上的限制，就是因为设计者缺乏慨念。目前软体的技术已能符合大部分格式设计的要求，因此很快地，设计者就必须为失败的设计负起全责。有时候设计者的意图是要制造出一种让人感到不安、不稳定的感觉，这时一个不平衡的页面也许就可以适当地传达出这种概念或感觉，但如果这种不平衡不是出於故意的安排，那麽，这样一个页面会让你的网站功效大打折扣。

n6、网页设计前後的一致性

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

n7、纸上设计与网页设计的比较

n在设计 WWW 时，我们应记住的是，电脑的萤幕通常是宽大於高，这使得我们很难同时在电脑上和纸上作设计，几年前，有人预言一个无纸的时代即将来临，但到了今日，看起来我们的用纸量比过去有过之而无不及，无论电脑多麽方便，人们还是习惯把网页列印出来看，如果你是以水平而非垂直的方向在扩展你的网页，那就会有些列印上的问题。有些浏览器会在列印前先把页面重新安排过，但是通常这也会破坏所有有趣的页面设计。因此，你必须了解，有些材料最好是以垂直的格式来表现，这样比较便於列印。

n8、使用设计参考格线

n在设计版面时，利用格线来安置物件的位置是一个蛮不错的建议。格线就像是隐形的路标，有助於在网站的页面中建立组织化的单元。许多的桌面排版软体中都附有标线以便於物件的对齐，有些编写网页的工具也会提供这类的工具，但一般的文书编辑器则没有。在这种情况下，你可以为你的页面画一个草图，一但你决定了所依据的格线，你就可以用这个架构去对齐你的图像与文字，让你的页面达到平衡。HTML 的分割页框的功能，则可以让你在页面上定义出不同的区 块，这使你只需更新有改变的元素即可，而不用每次都重新修改一整页。有些人可能会觉得使用格线会让画面的整体设计变得单调无趣，但其实如果运用得当的话，并不会如此。一但你建立了网页的架构，你就可以在这个格线架构下衍生出许多种安排物件的方式，并且每页之间在元素排列上的变化是非常重要的。一个元素可以占据一个或两个、甚至更多个区域，文字也可以放在一块本来被拿来放图像的区块，你可以为一个网站准备两个或以上的格线，然後依照每一页的内容做不同的应用，通常当一个网站中使用多个格线模式时，是为了要在页面转换之间，创造出视觉上的韵律感。

n9、视觉焦点的安排

n在完成了一个页面的编写之後，用浏览器开启它，往後站一步来看。不要读内文的文字，把你的眼睛闭上几秒钟，然後打开，看着你的 WWW 网页。页面上的哪个部分最吸引你的眼光？你目光的下一个目标又是哪里？试着去追溯你的眼睛浏览整个页面的轨迹。作为一个设计者，也许你会有些偏见，所以你可以找别人来帮你看看你的焦点与浏览路径是否适当。如果你的焦点在颜色对比、大小、密度或是色值上太过强势，那麽读者的目光就会很难从上面移开，而其他的部份就会被认为是不重要的。但如果页面上的所有元素看起来都差不多，那们读者就很容易被搞糊涂，不知道该从哪里看起，也不知道下一步要看哪一项。无论如何，不管设计者是否是有意识地考虑到读者的目光，你都要记得，目光浏览的路径，也会影响到读者对这个网页的满意度与阅读经验。