从业余到专业:01网页设计理论的对齐准则

兼love

兼love

2016-01-29 11:41

从业余到专业:01网页设计理论的对齐准则,本教程结合案例介绍分析网页设计理论中的对齐准则。是系列文章网页设计四个准则之一,帮助读者提高网页设计水平。
1.先看业余的设计

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

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.总结

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

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

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


展开更多 50%)
分享

猜你喜欢

从业余到专业:01网页设计理论的对齐准则

Html CSS布局 Div+CSS XHTML
从业余到专业:01网页设计理论的对齐准则

从业余到专业:04网页设计理论的相似准则

Html CSS布局 Div+CSS XHTML
从业余到专业:04网页设计理论的相似准则

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

从业余到专业:02网页设计理论的重复准则

Html CSS布局 Div+CSS XHTML
从业余到专业:02网页设计理论的重复准则

从业余到专业:03网页设计理论的对比准则

Html CSS布局 Div+CSS XHTML
从业余到专业:03网页设计理论的对比准则

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

从业余到专业:网页设计的四个基本准则(概述篇)

Html CSS布局 Div+CSS XHTML
从业余到专业:网页设计的四个基本准则(概述篇)

字体设计理论

电脑网络
字体设计理论

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS入门教程:关于CSS样式表

CSS入门教程:关于CSS样式表

一个非常强大完整的web表单验证程序(1)

一个非常强大完整的web表单验证程序(1)
下拉加载更多内容 ↓