网页设计灵动布局之相对自由式

保持比例

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

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

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

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

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

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

魔幻几何

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

矩形

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

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

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

三角

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

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

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

圆

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

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

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

（编辑：宁德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!