保持比例

说起比例，难免和数学公式扯上关系。其实，简单一点来看，我们完全可以把比例看作一个视觉的原子单位，一切位置、大小的关系都以这个原子单位为标杆。

比如我确定一个原子单位是50px的正方形，那么以这个矩形为基准来创作一个图形，这个图形就是又这个正方形所搭建的，有点类似我们玩的拼图游戏。

加入了50px的网格线后你就会明白它们正好合乎原子单位的比例

以上说明了比例这件事，无论是一比三还是五比二，其中的道理都是从这个原子单位衍生过来的。在网页设计中，为了保持比例可以采用网格作为辅助线。在Photoshop中可以任意设置网格的大小，网格的大小好能和你的文档成比例关系。比如你的新建文档宽度是1600px，那么网格可以设置为80px或者160px等。根据网格线进行大小尺寸和位置对齐，网格线越小，终的结果也就越灵活。但也要注意网格如果太小其实就并没有发挥太大的作用。

比例会让你的网页设计形成某种看不见的稳定感，每个元素恰如其分的表现在所应该出现的位置，如果你选采用对称的布局，由于对称本身就具稳定性，因此，网格在非对称的布局中发挥作用更大。

下面这个表现叠叠乐游戏趣味的设计就是采用网格才能让每个色块各得其所。它的不对称布局随时给人一种倾塌的紧张，更需要背后有比例的支撑。

魔幻几何

网页布局几乎都是由几何构成的，加之显示屏本身就是矩形，因此在布局时常用到的也是矩形。

矩形

给人以稳重、踏实、秩序之感，因此，比较予人一种信赖。在网页设计中，不仅可以将图片设计为矩形，文字段落也可以为矩形。如下面的例子中左文右图的版式的图文分别都为矩形

作为矩形，还有直角矩形和圆角矩形之分，这两种矩形分别传递出不同的感觉，圆角矩形相对没那么尖锐，它往往更柔和圆润。

除图文以外，还有作为色块所出现的矩形，一般为强调视觉重点所用。如下面例子中左边的矩形方框用于聚焦文字段落

三角

三角有一种稳定性，因为关于三角多的联想是一座山或金字塔，这种结构本身就能抵抗外在环境的侵害。你的潜意识会把一个正三角看成一种庇护。三角形的力量上的稳健感觉常常用在建筑等有着人工痕迹的领域。

三角的出现所呈现的稳定人心的气场不应被干扰，因此，以三角作为图片出现时，它就是全场的焦点。当然，如果仅仅作为图案出现的三角例外。这也表现出三角形的某种霸气和孤立。

由于三角其实也是矩形的一半，因此用三角形来引申出矩形的意向，经过巧妙地构图安排，同样可以发挥矩形布局的效果。

圆

圆是完满，也象征着周而复始，可以说圆是很东方风格的符号元素。圆有一种柔性的豁达，因此它比起三角的尖锐来说力量感稍弱，而显得更为活泼。如果你的页面中充满圆点，无疑，这个页面势必让人联想到这是以儿童或少女为受众的网页。

圆的魅力在于圆融，所以它能和在任何版式中都适用，而且它也能形成一种聚焦

因为我们对于圆有种流动性，因此，它并不具备稳定这样一个特征，在布局上如果采用圆进行布局，在它四周的布局表达都会受到影响，因此，在圆形的使用上我们都需要进一步改良。比如保持圆形的尺寸不易过大，因为过大的圆形容易挤压本身屏幕的边缘线，对四周产生一种压迫感。

在利用几何进行布局设计时，往往文字段落都是用矩形版式居多，这样也就是说在配图以及图案造型时需要利用几何本身的魔力进行排版。其实自然界本身的结构都可以简化为几何造型，甚至一张图片本身就带着几何造型的特征。因此你可以将图片内容本身和几何结合起来运用。

有些几何造型并不单纯，比如矩形经过倾斜角度就变成了平行四边形。两个三角形相叠加就变成了六角星形。四边形多增加一个边就是五边形，依次增加就变成了多边形。几何间经过巧妙地组合还能形成新的造型，这几乎让几何拥有了无穷无尽的魔力。

如本例中的三角形将角变圆后，图形的尖锐感没有了，给整个图形增添了一份灵动

后记

灵动本身是一个极富感染力的词汇，也许源于此很多人以为这就需要煞费苦心，其实往往越用力越欲速而不达，只要明确了设计的目标，你就只需要跟随目标而进入过程。这里不得不提及，很多看似简单的可操作性的技巧都未必能真正帮到你，比如“运用黄金比例就能获得佳效果”“非对称布局一定比对称布局更具动感”“一个页面的色彩不得超过三种颜色”“字体用蓝色阅读体验不佳”类似这样的经验总结之所以会误导你的原因，并非它本身不正确，而是由于它并没有为初学者提供一个外部环境，他们只给出了基于他们设计现场里出现的问题的解决方案，而换个环境就未必适合你。

设计好玩的是，永远没有标准答案。一件即使被称为大师的杰作也等待有人能突破它，或许我们也应该放弃“突破”这个竞技式的思维表达，而应该说，不同的人应该演绎不同的风格。

【甘肃易领域网络科技有限公司】

【网址】