第六页 网页界面设计系列教程——版式的构成与设计

         网页界面中除了点、线面这些实体造型元素，其余的空间就是“空白”，空白不一定是“白”，它可以是与背景色相同的表示“虚”的空间范围。空白能使实体在视觉上产生动态，获得张力。在中国传统绘画中，空白的表现力丰富，同时又使笔墨生支灵妙，无怪乎古人所说“形得之于形外”，“计白守黑”。页面中巧妙地留白，讲究空白之美，有助于更好地烘托主题，渲染气氛，集中视线，加强空间层次，使版面疏密有序，布局清晰。

　　黄金之比所以有如此神圣和不可思议的力量，乃是因为黄金比是含有无理数 的数字，用公式表示为Φ=(1+)/2约=1.618。黄金矩形去掉短边为边长的正方形时，剩下的矩形仍为黄金矩形。

　　以正方形的对角线为长边，所得矩形为矩形，再以矩形的对角线为长边，所得矩形为矩形，以此类推，可以得到任意自然数的矩形。 矩形对折成半时，面积虽然只剩一半，但形状不变，仍是矩形。

　　网页界面的版式设计中，其比例关系一般体现在：页面所限定空间的长宽比，实体内容与虚空间（空白）的面积比，页面被分割的比例，图文的关系比以及各造型元素内部的比例等形式上的数量关系。
对称的版式设计稳定、庄严、整齐、秩序、安宁、沉静，如同中国古代宫殿一样庄重、严肃，体现了一种古典主义的风格。为避免对称产生的单调和呆板，要在对称中略带变化。

　　视觉艺术中的节奏和韵律来自音乐的概念，节奏较多地强调“节拍”，韵律较多地强调“变化”，如果说韵律感不够，是指缺少变化，过于呆板；如果说节奏感不强，是指变化缺乏条理规则。

　　对比是指因多种元素相异的特点相比较而更加鲜明强烈的紧张感。对比有形的对比（大小、方圆、长短、曲直、宽窄），色的对比（色相、明度、纯度、冷暖），质的对比（刚柔、粗细、强弱、干湿、轻重、软硬、虚实），势的对比（疾缓、疏密、动静、抑扬、进退）等。对比关系越清晰，视觉效果就越强烈，在一个页面中，通常是多种对比关系同时并存，以产生多姿多彩的表现效果。
人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。视线的变化习惯于从左到右，从上到下和顺时针方向运动。
调查显示，视区内上部比下部注目程度高，左侧比右侧更引人注意。

　　欲使网页在传递视觉信息时顺畅高效，页面须具备清晰的条理性和组织性，产生一定的主从关系。常采取的方式有：
　　（1）加强主从对象的大小对比。
　　（2）加大主体形象周围的空白。
　　（3）加强主从对象之间的色彩对比。
　　（4）将主体形象在页面反复出现，强化与视线的接触频率，这种强化方式尤其适合于以产品为主体形象的网页界面。
　　（5）加强主从对象在形态上“势”的对比。一般来说，网页的版面中水平或垂直的形态居多，如果主体形象运用适当的斜线和曲线，就会从水平、垂直线构成的环境中突显出来。

　　通过视觉流程，设计师运用视觉移动规律，将多种视觉信息进行有序组织，诱导浏者的视线依设计师的意图进行流动，从而使浏览者清晰、流畅、快捷地接受最佳信息。视觉流程的几种表现方式：
　　（1）单向视觉流程：横向，竖向，斜向。
　　（2）曲线视觉流程。
　　（3）导向视觉流程：借助诱导因素来实现。
　　　 ①线形导向：以线、文字等线形元素来引导观者的视线。
　　　 ②形象导向：以图片中人或物的朝向来引导观者的视线，如人物的目光方向，一个座椅的朝向等。
　　　 ③指示导向：通过指示性的箭头、手指或具有透视感的线条来引导视线。
　　（4）重心视觉流程：视觉会沿着形象方向与力度的伸展来变换、运动，如表现向心力或重力的视线运动。
　　（5）反复视觉流程：其运动虽不如单向、曲线、重心视觉流程运动感强烈，但更富于节奏和秩序美。
　　（6）散点视觉流程：没有固定的视觉流动线，强调一种感性、自由性、随意性、偶然性。

　　对于栏目设置比较复杂的网站，如果显示所有与该页相关的导航，页面势必变得相当庞大，影响了版面的整体布局。最好的办法是将此页面做成弹出窗口，不影响原有页面的导航信息，同时只设置与该页关系最近的导航链接和首页链接。

　　在视觉习惯上，页面的垂直均匀分割，当左右两部分形成强烈对比时，会造成视觉心理的不平衡。这时，可将分割线作部分或全部的弱化处理，或在分割处加入其他元素，使左右部分的过渡自然而和谐。