网站设计技巧之比例与平衡--网站建设分享

从字体设计、制图到页面版式。设计总有那么几条通用的原则。它适用于网页或者印刷。然而。在网页设计这边。很多本应该有的规则都被搞乱了。就只是跟着感觉走。这并不是说设计师在规则方面有松懈。而是大多数网络工作者都不知道要遵守这些规则——就算他们知道。也不知道怎么去用。

结合网页讲。就是以下几条：

平 衡

平衡感挺难拿捏的。网页上呈现出的平衡有两种——对称和不对称。我们都很习惯了看对称的图片。就像我们小时候剪纸花。都会两边一起剪。这样打开就是对称化的。这种对称的平衡很好识别（反正都镜面反射一下）。而在不对称构图里面做到平衡才难。

举两个例子:

图一 Subtraction

不对称平衡

图一在多处位置展示了不对称平衡里面的一些重要原则。你看。作为主banner的那只狗的照片——狗身上的黑色全压在画面左侧了。这时候画面右侧出现了一个X。这看似随意的灰色X。可是平衡画面的关键因素！这样一来。你的视线就会被牵扯到画面中间。除了在banner图里面。在网页的页头中也出现了这样的设计——菜单栏的大小和颜色都相对重。那么在Subtraction的logo这条。就对应用了黑字白底。再在上面加上黑线。这样上下会相对平衡一些。

图二apple

对称平衡

苹果是现代网页中实现对称平衡的典范。如图二。每个元素都是在中轴线两侧排布。创造出了一个视觉上的和谐情景。

比 例

对于网页元素来说。并不是看得清楚就好。或者文本多长就弄多大。它的排布跟网页的平衡视觉上强调谁有很大关系。

Tumbrl

而到底如何去权衡这些元素的大小。跟每个元素本身的性质有很大关系。举个例子：你在浏览两栏式的网页的时候。一般会发现右边的框要比左边的框大。也放了一些关键的信息在里面。这是由人的视觉习惯决定——哪怕是文本框放在左侧。目录这些元数据放在右侧。也会不自觉的看向右边。所以说。元数据在右边占地方是不太科学的。有些人喜欢每栏一样宽度的栅格布局。就像图一那样；另外的人可能喜欢黄金分割率。也就是右边的框是左边框的1.62倍。

有些网页的设计也仅仅看重要程度来排比例的：

Coda

在这个页面上。各元素的比例控制得很好。不仅是视觉上的层次很好。意义上的层次也很好。从产品的logo开始（1）。然后引导用户的行为（2）。再到文字比较密集的相关介绍（3）。排布都很合理。图文混排的区域。标题的权重和正文隔开。还有和左侧icon的关系都很注意。浏览这个页面的时候也会觉得整体非常协调。

不过以上这个例子有点老。网页展现很平面。

现在的网页可通过交互设计来强化网页上展现的比例。

比如这个国际广告奖D&AD的网站。在滑动内页时候。菜单栏占页面的比例会相对缩小。这样人的注意力会更集中于中间部分。更注意阅读内容。