从业余到专业系列--01：网页设计理论的对齐准则

本教程结合案例介绍分析网页设计理论中的对齐准则。是系列文章网页设计四个准则之一，帮助读者提高网页设计水平。

1.先看业余的设计

在讲解之前让我们先看一个没有用到网页设计制作四个准则的页面，我们称之为业余设计。

在这个设计里面，各种信息被杂乱地放置在了一起。这是一个普通的网页布局，有头部、尾部，内容分为两个栏，但是各个栏目布置得很随意，没有目的性。文字是居中对齐的。整体看属业余水准。

2.应用对齐准则

在随后的教程中，我都将以本页面作为例子讲解，在改善这个网页的页面设计时，逐步将网页设计的四个基本准则对齐、重复、对比、相似运用进去。

让我们先应用对齐准则，将网页页面上的各个元素对齐起来。

看看现在的效果，虽然还谈不上是优秀的设计，但是对比之前没有对齐的页面感觉要好多了，这只是设计时简单运用对齐而已。

现在的页面看上去更加工整，有设计规划感，各个元素不像之前显得那么随意。

下图，我将网页对齐的地方用红线标示出来。

注意网页中，不仅仅是主要内容的文字对齐了，而且左边栏还和上面的logo部分对齐了。右边栏和尾部的导航栏也对齐了。

左边栏和logo并不是绝对对齐的，而是和logo图形里边的元素对齐，这是可以根据网页设计的具体需要进行安排。不应太拘泥。

头部的元素是水平顶部对齐的。所以这里将联系信息的文字对齐方式从原来的左对齐改成居中。

当然，进行网页设计时，可以为设计元素选择不一样的对齐方式，设计没有绝对的对或错。关键在于布置设计元素时要让它们看上去有规划感，如果可以做到这点，有时候对齐准则也是可以打破的。

3.标志Logo部分的对齐

让我们关注一下标志的对齐。

之前的设计

之后的设计

原来的logo里的文字没有经过太多的考虑，我将公司描述放在名字下面，这样不仅两个文字左对齐起来了，而且还和左边logo图形里的三条白线在水平上也对齐了，在视觉上就将它们联系起来了。

4.总结

现在再重新看看新的页面设计，经过简单对齐之后，是不是要比原来的设计专业的多了。

当然这还是一个未完成的设计，不过有对齐和没对齐的网页设计是有显著的不同的。对齐就是网页设计师从业余进阶到专业的一大利器！

现在浏览网页时，开始注意其他设计师是如何运用对齐的。在看到一些没有运用对齐的网页时，注意分析它们是偶然的还是有意打破规则，有时候有目的性的打破规则能够让页面显得有趣。