2.应用对齐准则
在随后的教程中,我都将以本页面作为例子讲解,在改善这个网页的页面设计时,逐步将网页设计的四个基本准则对齐、重复、对比、相似运用进去。
让我们先应用对齐准则,将网页页面上的各个元素对齐起来。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)
看看现在的效果,虽然还谈不上是优秀的设计,但是对比之前没有对齐的页面感觉要好多了,这只是设计时简单运用对齐而已。
现在的页面看上去更加工整,有设计规划感,各个元素不像之前显得那么随意。
下图,我将网页对齐的地方用红线标示出来。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)
注意网页中,不仅仅是主要内容的文字对齐了,而且左边栏还和上面的logo部分对齐了。右边栏和尾部的导航栏也对齐了。
左边栏和logo并不是绝对对齐的,而是和logo图形里边的元素对齐,这是可以根据网页设计的具体需要进行安排。不应太拘泥。
头部的元素是水平顶部对齐的。所以这里将联系信息的文字对齐方式从原来的左对齐改成居中。
当然,进行网页设计时,可以为设计元素选择不一样的对齐方式,设计没有绝对的对或错。关键在于布置设计元素时要让它们看上去有规划感,如果可以做到这点,有时候对齐准则也是可以打破的。
3.标志Logo部分的对齐让我们关注一下标志的对齐。
之前的设计
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)
之后的设计
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)
原来的logo里的文字没有经过太多的考虑,我将公司描述放在名字下面,这样不仅两个文字左对齐起来了,而且还和左边logo图形里的三条白线在水平上也对齐了,在视觉上就将它们联系起来了。
4.总结现在再重新看看新的页面设计,经过简单对齐之后,是不是要比原来的设计专业的多了。
当然这还是一个未完成的设计,不过有对齐和没对齐的网页设计是有显著的不同的。对齐就是网页设计师从业余进阶到专业的一大利器!
现在浏览网页时,开始注意其他设计师是如何运用对齐的。在看到一些没有运用对齐的网页时,注意分析它们是偶然的还是有意打破规则,有时候有目的性的打破规则能够让页面显得有趣。