1、网页版面设计与构图网页版面设计与构图 摘要网络技术与艺术的紧密结合，使得网页的艺术设计从平面设计扩展到立体设计，只有充分的考虑艺术与技术的统一，达到设计与技术的协调，才能获得良好的网页浏览效果。对网页设计而言，网页版面设计与构图的意义在于：如何把表现网页的各种元素安排在网页上，把分散的元素组成一个和谐统一的整体，以获得最佳布局，更好的表现设计者的思想。 关键词 网页 构图 艺术设计 1.引言 一个网页是艺术与技术相结合的产物。在网页设计中不仅要考虑艺术的因素，也要考虑技术上的因素。网页作为传播信息的载体，同其他出版方式（报纸，杂志）相比，在设计上有许多共同点。但由于在表现形式，运行方式和构成元
2、素等方面的不同，网页版面设计和传统的平面设计相比有其独特的性质。 2. 网页构成 不论复杂的网站还是简单的网站，大多数的网站都是由图（1）所示的六个基本部分构成的。 2.1 内容块 内容块就是网页的容器，这个容器可以是页面的“body”标签，或者是一个全局的“div”标签。如果没有内容块，我们就没地方放置页面的内容，页面的内容就会超出浏览器的边框。内容块的宽度是可变的，也可以是固定的。这样不管窗口的大小如何，内容的宽度总是不变的。 2.2 Logo（标志） 网站的识别特征应该包括网站的标志或者网站名字，并且网站标志和名字要放在每个页面的顶上。网站的标志增强了网站的品牌公认度，可以让用户觉得他们
3、正在访问的都是同一个网站。 2.3 导航 导航系统是每个网站必备的，网站的导航系统容易被找到和使用是一个基本原则。不管你使用垂直的页面菜单，还是横向的页面菜单，导航都应该放在页面布局的顶部附近。 2.4 内容 浏览者访问一个网站一般只是几分钟甚至几秒钟的事情。如果浏览者找不到他们想要的东西，他们就会关闭窗口去访问其他的网站。因此，主要的内容板块放在页面的视觉中心是很重要的，这样，当浏览者浏览网页时，就会很快找到自己想要的内容，不会浪费时间。 2.5 注脚 注脚通常放在页面底部，一般包括版权，联系方式，法律信息和网站主要部分的链接。注脚应该在页面底部明确地向用户显示出来。 2.6 留白 图形设计
4、中的“留白”就是指页面上没有文字和插图的区域。页面上的留白和内容同样重要，留白不会让页面显得拥挤，并且有助于页面的平衡和统一。 3. 网页版面设计的基本原则 3.1 内容与形式的统一 内容与形式的统一是所有设计师都知道的一个基本原则。设计的内容就是指设计的主题，形象，题材等要素的总和。设计的形式指的就是设计的结构，风格，设计语言等表现形式。内容决定形式，形式反作用于内容。在设计一个网站时，首先应当明确网站的定位，然后在内容上用心，再以内容作为设计的依据，做到内容与形式的统一。 3.2 整体与变化的统一 网页最主要的功能就是传播各种信息，表达一定的内容和主题。在设计时强调网页的整体性，可以使浏览
5、者更加快捷和准确的获得想要的信息，并使整个网页条理清晰，分类明确。整体性不仅使用户能够认可所有的网页属于同一个网站，而且也是体现一个网站独特风格的重要手段。但不要忘了“变”是网络媒体的重要特色。过分强调页面结构形式的整体性，必然会使页面显得呆板和沉闷，以至影响访问者的兴趣和心情。所以，在进行网站和网页设计时要把整体和变化统一考虑，“整体”是“变化”基础上的整体。 3.3 艺术与技术的统一 网络媒体的形式和特点决定了网页设计师既要了解艺术设计又要了解技术原理。网页设计的自由是在艺术与技术达成一致的前提下表现出来的，由于受到网络技术和计算机技术的制约，网页设计不能像平面设计那样自由表现。网页的功能
6、和形式是建立在网络技术的基础之上的，只有了解和掌握相应的技术手段，才能在设计页面的过程中不被这些技术标准所约束，才能避免由于显示或者浏览器等造成的差异，使大多数人可以通过简单的方式浏览网页。 4. 网页版面设计与构图 网页的版面设计过程实际上就是网页构图的过程。构图来源于英文Composition,意思是组成和构成。从艺术设计的角度讲，就是在特定空间安排和处理各种元素的关系和位置，把构成整体的各部分统一起来以表现设计的主题与美感。 4.1 栅格理论与三分法原理 4.1.1 栅格理论 栅格是图形设计的基本工具。栅格的使用并不是单纯的让图形看起来更方正或者更笔直，它涉及比例问题，这就是栅格理论。经
7、典的栅格理论已经对艺术成就影响了几百年。划分元素的概念可以追溯到几何思想，毕达哥拉斯（Pythagoras）和他的追随者定义了比例的概念，而不是将事物当成一个单纯的个体。 毕达哥拉斯发现日常生活中无处不在的几何规律就好像是神的旨意。他们将这个比例称为黄金分割线或者神圣比例。如图（2）所示，一条线可以用黄金比例1.62进行分割，这个1.62实际上是1.6180339.它是一个无理数。 总的来说，一个用黄金比例来分割的图形从美学的角度来说是非常令人愉悦的。文艺复兴时期的艺术家们常用黄金分割点来设计他们的油画、雕刻、和建筑、就好像今天的网站设计师们也用这个比例来设计网站、网页的布局、海报和宣传册一样
8、。不同于艺术家的灵感，黄金分割点给了我们一个关于美学布局的逻辑性指导。 4.1.2 三分法原理 黄金分割点的简化就是三分法原理。被黄金分割点分成两部分的线条，其中一部分大概是另一部分的两倍。所以将一个整体分成三个等分是一种应用黄金分割原理而不需要详细计算的最简单的方法。如图（3）,先用铅笔在纸上画一个矩形，将这个矩形横向纵向都分为3等份。然后将最上面的三分之一再分为三份。最后将每一个纵向栏对分成更小的栅格。 重复上面的步骤，你就会得到许多符合三分原理、不同布局的选择。有了这些简单的栅格，就可以放置我们的各种元素了。 4.2 网页构图的形式原理 每个人都有判断美与丑的能力，这种能力是一种“形象思
9、维”。设计师就是运用形象思维来思索点线面的构成，设计出美的作品。寻找统一性与多样性的平衡点是设计中美的形式原理。网页构图作为一种形式设计，也充分体现了美的形式原理。网页中经常用到的形式原理有：视觉平衡，一致性，强调和突出。 4.2.1 视觉平衡 视觉平衡分对称和不对称两种。对称是我们最常遇到的设计形式之一，如蝴蝶，汽车，人体等。对称平衡虽然在生活中用的非常广泛，但对于网页设计来说并不怎么实用。与对称平衡相比不对称平衡更有意思，与对称平衡的镜像化不同，不对称平衡不同大小，形状，色调和位置的物体。这些物体虽然有着很大的不同，但在布局上它们让整个网页看起来还是平衡的。 4.2.2 一致性 一致性的设
10、计原理是指不同的元素之间相互影响的方法。一个统一的布局是指各个元素之间相互影响就像一个整体，而不是各自独立。一致性不仅仅存在于网页内的各元素之间，网页本身也应该像一个整体。我们经常通过相似性和重复性来实现布局中的一致性。 任何时候，相似的东西放在一起就会组成一个整体。同理，重复出现的颜色，形状，纹理和相似的物体可以让网站看起来是一个有内在联系的整体。相似性和重复性经常出现在网页设计中，用于统一版面布局的风格。 4.2.3 强调和突出 与一致性紧密相关的是强调和突出。强调和突出是指使特殊的元素引起浏览者的注意。在网页版面设计时，经常需要让浏览者注意到某些信息或者某个按钮，以及那些想要强调的东西。
11、一种达到强调的作用的方法就是把需要的内容放在视觉中心。 5. 结语 正是网络技术与艺术的紧密结合，使得网页的艺术设计从平面设计扩展到立体设计，只有充分的考虑艺术与技术的统一，达到设计与技术的协调，才能获得良好的网页浏览效果。对网页设计而言，网页版面设计与构图的意义在于：如何把表现网页的各种元素安排在网页上，把分散的元素组成一个和谐统一的整体，以获得最佳布局，更好的表现设计者的思想。 参考文献 1(美) Jason Beaird, 完美网页设计M,熊平 宓媛珊 译，人民邮电出版社，2008.02 2张明贵，网站视觉形象设计M,清华大学出版社，2007.09 3张明贵，网页艺术设计与应用M,高等教育出版社，2004.09 作者简介 左向辉，男，陕西咸阳人，陕西科技大学设计与艺术学院在校硕士生,所学专业：设计艺术学 ,研究方向：工业设计与设计管理。 任工昌，男，1962年生，工学博士，教授，研究生导师。
