设计(ji)(ji)有一(yi)些原(yuan)则是共通的，不管(guan)是产品设计(ji)(ji)、平面设计(ji)(ji)、还是服(fu)装设计(ji)(ji)，设计(ji)(ji)的形式美法则都是通用的。前(qian)面跟大家(jia)也分享了一(yi)些对比、统一(yi)、留白在网(wang)页(ye)当(dang)中的运用，今(jin)天跟大家(jia)分享对齐原(yuan)则在网(wang)页(ye)当(dang)中的运用。

对(dui)齐，是很重要却很容易被遗(yi)忘的(de)(de)一点。在(zai)《给大(da)家(jia)看的(de)(de)设计书(shu)(shu)》这书(shu)(shu)中提出了四(si)大(da)原则：对(dui)比、重复(fu)、对(dui)齐、和(he)亲密性(xing)。书(shu)(shu)中提出：任(ren)何东西都不能在(zai)页面(mian)上(shang)随(sui)意摆放，每个(ge)元(yuan)素都应当(dang)与页面(mian)上(shang)的(de)(de)另一个(ge)元(yuan)素有着某种(zhong)视觉联系。这样能建立一种(zhong)清晰、精巧而且清爽的(de)(de)外观。

视觉上遵从(cong)保持尺(chi)寸和边缘的一致性。

对(dui)齐可(ke)以让一个(ge)网(wang)站页面看起来(lai)比较规范整齐。对(dui)齐一般(ban)有三种(zhong)方式：左对(dui)齐、居中对(dui)齐、右对(dui)齐。

在网(wang)页当中运用比较多的(de)是(shi)居中对(dui)(dui)(dui)齐(qi)和左对(dui)(dui)(dui)齐(qi)，大篇幅的(de)右对(dui)(dui)(dui)齐(qi)可(ke)读性(xing)上比较差，所(suo)以出现的(de)频率不(bu)(bu)高，小部分的(de)出现还是(shi)有的(de)。不(bu)(bu)管是(shi)哪种方式的(de)对(dui)(dui)(dui)齐(qi)，网(wang)页中对(dui)(dui)(dui)齐(qi)后的(de)文本一定要考虑可(ke)读性(xing)的(de)问题，千(qian)万不(bu)(bu)要本末倒置。

对(dui)齐在(zai)网页中的(de)(de)(de)运用无非(fei)还(hai)是上面那(nei)三种对(dui)齐方式，正常情况(kuang)下我们要注意的(de)(de)(de)对(dui)齐有这(zhei)些(xie)：元素的(de)(de)(de)对(dui)齐、文字的(de)(de)(de)对(dui)齐、图(tu)片的(de)(de)(de)对(dui)齐、区块布局的(de)(de)(de)对(dui)齐。

1、元(yuan)素对齐

元素的(de)(de)对齐(qi)指的(de)(de)是网(wang)(wang)页(ye)中的(de)(de)一些按钮(niu)、图(tu)标、搜索框等网(wang)(wang)页(ye)中的(de)(de)元素统一采用一种对齐(qi)方式(shi)对齐(qi)。

用zui主页来举(ju)例，可以看到图标部分都是居左对(dui)齐(qi)的，元(yuan)素(su)上的对(dui)齐(qi)分布(bu)让整个(ge)界面看起来整齐(qi)简(jian)洁，内容划(hua)分也变得比较明确，可读性强，方便浏览(lan)者浏览(lan)。

一个网页(ye)当中，会(hui)有(you)(you)很多元素(su)，而(er)元素(su)的对齐可(ke)以让整个界面(mian)变得井(jing)然有(you)(you)序(xu)，元素(su)过于随(sui)意摆放没(mei)有(you)(you)规律(lv)，会(hui)让界面(mian)杂乱无章。

2、文字的对齐

文字的对齐(qi)方式也不(bu)外乎上面(mian)三种(zhong)，左对齐(qi)是最常(chang)见的，居中(zhong)对齐(qi)常(chang)出(chu)现(xian)在文章详情的标题部(bu)分(fen)，右对齐(qi)文字出(chu)现(xian)的频率小一点，不(bu)会以大篇(pian)幅(fu)出(chu)现(xian)，大部(bu)分(fen)在登陆注册或是产品(pin)详情界(jie)面(mian)中(zhong)常(chang)见。

左对齐的(de)方式适合人们的(de)阅读习(xi)惯(guan)，在网页中也(ye)比较(jiao)常见(jian)，这里不多讲了。

居(ju)中对(dui)齐是(shi)进几年(nian)随着html5流行起来(lai)，越(yue)来(lai)越(yue)多设计师用居(ju)中对(dui)齐作为一些区(qu)块内容展示的方式(shi)。

可以看到(dao)，苹果官网在产品介绍页面，文(wen)字(zi)(zi)用得(de)比较多的(de)(de)(de)是这种居中(zhong)对(dui)齐。这样的(de)(de)(de)对(dui)齐方式(shi)有个好(hao)处(chu)就(jiu)是让浏览者的(de)(de)(de)视线集中(zhong)在该区块内(nei)容上(shang)，其次(ci)从样式(shi)上(shang)的(de)(de)(de)不(bu)(bu)对(dui)称感可以增加(jia)界(jie)面的(de)(de)(de)层次(ci)感和设计感。但(dan)是文(wen)字(zi)(zi)居中(zhong)对(dui)齐不(bu)(bu)适(shi)用于文(wen)字(zi)(zi)内(nei)容太多的(de)(de)(de)区块。

右(you)对(dui)齐常见到的是(shi)在一些小的细(xi)节中，比如登陆(lu)注册界面、底部导航区块等，仔细(xi)看(kan)看(kan)还是(shi)可以发现有一些地方用(yong)到了右(you)对(dui)齐。

惠普商(shang)城注册界(jie)面(mian)中输(shu)入框(kuang)提(ti)示文字全(quan)部都是居右对(dui)齐(qi)，让(rang)提(ti)示信(xin)息和输(shu)入框(kuang)看(kan)起来(lai)更为整(zheng)体和舒服。在注册界(jie)面(mian)上(shang)的设(she)计，大部分设(she)计都是提(ti)示信(xin)息居右对(dui)齐(qi)，包括蝉(chan)知注册界(jie)面(mian)也是这样(yang)的设(she)计方式，不信(xin)可以打开网站看(kan)看(kan)。

3、图(tu)片的对齐

图片(pian)对(dui)齐(qi)也不外乎上面说(shuo)的三种方式，图片(pian)对(dui)齐(qi)好处(chu)理(li)一(yi)些，主要根(gen)据网页(ye)想(xiang)表(biao)达(da)的内容(rong)去(qu)做对(dui)齐(qi)，以(yi)(yi)达(da)到好的视觉展示效果。所以(yi)(yi)在不同的情况下，可以(yi)(yi)采(cai)用不同的对(dui)齐(qi)方式。

在当(dang)当(dang)的图(tu)书展示(shi)页中，列表展示(shi)方式下图(tu)片在图(tu)片的左边(bian)，文字在图(tu)片的右侧。

在大(da)图(tu)展示(shi)方(fang)式(shi)下，可以看到(dao)产品图(tu)是居中(zhong)展示(shi)的。所以就算(suan)是同一个网站也不(bu)会只用(yong)一种(zhong)对齐(qi)方(fang)式(shi)，对齐(qi)比较灵活(huo)，就算(suan)是同个页面，也可能为了视觉效果而采用(yong)两种(zhong)或三种(zhong)对齐(qi)方(fang)式(shi)，这(zhei)个根据整个界面的效果而定。

4、区块布局的对齐(qi)

上(shang)面(mian)讲的小元素(su)(su)对(dui)(dui)齐重要，那大的区块(kuai)对(dui)(dui)齐也很重要。视觉上(shang)的对(dui)(dui)齐，可以让(rang)浏览者快(kuai)速的浏览到相应的内容。小元素(su)(su)不(bu)(bu)对(dui)(dui)齐会显得乱，大区块(kuai)不(bu)(bu)对(dui)(dui)齐会让(rang)整个界(jie)面(mian)没有秩序感。

这样的情况最常(chang)出现在一些产品展(zhan)示的网站当中(zhong)，设(she)计(ji)(ji)这个网页(ye)的设(she)计(ji)(ji)师说(shuo)他们(men)刻意(yi)追求不对称(cheng)感。按钮的不对齐，和(he)区块(kuai)的不对齐，让整个界面显得很(hen)粗糙。在不是瀑(pu)布(bu)流的情况下，这种区块(kuai)大幅度出现在界面当中(zhong)的时候，对浏览者来说(shuo)就是一种折(zhe)磨(mo)。

说(shuo)到区块(kuai)的(de)对齐(qi)，不(bu)得(de)不(bu)提的(de)栅格(ge)系(xi)统(tong)，栅格(ge)系(xi)统(tong)可以让一个(ge)网站看起来有秩(zhi)序感(gan)。很多人不(bu)喜欢栅格(ge)系(xi)统(tong)，觉得(de)限制他们自(zi)己的(de)创意。

事实(shi)上，栅(zha)(zha)格的(de)运用(yong)可以(yi)很灵活，分多少栏全看设(she)计师的(de)设(she)计。记得在给大家分享区块(kuai)对比的(de)时候，曾分享过(guo)zui前端(duan)框架和Gridpak栅(zha)(zha)格的(de)小工(gong)(gong)具(ju)(ju)，这两个工(gong)(gong)具(ju)(ju)可以(yi)帮助(zhu)设(she)计师怎么更(geng)好的(de)用(yong)栅(zha)(zha)格系(xi)统来搭建你的(de)网站(zhan)。

用当(dang)(dang)当(dang)(dang)的(de)登陆界面(mian)(mian)给大(da)家总体分析(xi)一下，在(zai)当(dang)(dang)当(dang)(dang)网(wang)的(de)界面(mian)(mian)当(dang)(dang)中(zhong)(zhong)(zhong)，有左对齐(qi)、居中(zhong)(zhong)(zhong)对齐(qi)和右对齐(qi)，其实这些概念大(da)家都懂，就是不知道怎(zen)么合(he)理的(de)运用到(dao)各个网(wang)页当(dang)(dang)中(zhong)(zhong)(zhong)。

可以看到(dao)整(zheng)个界面的(de)层次(ci)区分图，这是(shi)人视觉停留的(de)内(nei)容层次(ci)图，通过层级关系的(de)分析，我们可以找到(dao)一定的(de)规律：

第一(yi)眼是居中显示的，当视线提留到1区时，1区的内容是右对齐，视线转移到2区时，2区内容是左对齐。3区则是为了平衡界面有左对齐也有右对齐。

因此(ci)可(ke)见(jian)，对(dui)齐也是(shi)有(you)层(ceng)次的(de)，不(bu)同层(ceng)次内容可(ke)以采用不(bu)同的(de)对(dui)齐方式。

对齐相比较之前的(de)其他设(she)计原则来说，会比较简单也好理解，但是在具体的(de)实践过(guo)程中，还需要设(she)计师们(men)去(qu)思考和设(she)计。对齐，不仅可以在信息层级上(shang)一致，而且会更(geng)有气势(shi)。

总之(zhi)，在做网站的时候要以内容为主(zhu)旨，界面设计(ji)一定是要方(fang)便用(yong)户快速找到他们(men)想要的。其次使用(yong)正确(que)的对齐方(fang)式，让界面更为整齐，信息更为明确(que)。