在《寫給大家看的設(shè)計(jì)書》中,Robin 提出了設(shè)計(jì)的四大基本原則:對齊、重復(fù)、對比、親密性,每一份優(yōu)秀的設(shè)計(jì)作品通常都遵守這四大基本原則。今天我們談的是:對齊。
大家先來看一組圖片,然后試著描述一下自己此刻心里的陰影面積:
在餐桌邊搖搖欲墜的餐具難受嗎?反正我挺難受的。其實(shí)我們也很難說清為什么會難受,但是這些圖讓我們難受的原因都是:沒有對齊。?
PPT在本質(zhì)上是一種視覺設(shè)計(jì),而視覺設(shè)計(jì)非常講究元素間的關(guān)系和擺放位置。我們從小被教導(dǎo)要把物品放得整齊:把亂糟糟的被子疊好、把到處都是的衣服掛好、把上課的桌椅對齊擺好……
在人類進(jìn)化的長久歷史中,整齊變得符合人類的心理認(rèn)知。
對齊就是使兩個(gè)以上事物配合或接觸得整齊(來自百度百科)。
我嘗試用我的理解作出定義:對齊即兩個(gè)元素參照某條有形或無形的線進(jìn)行排列的排列方法。
對齊意味著有序,而我們的眼睛喜歡看到有序的事物,這給人有種穩(wěn)定、安全的感覺。
不對齊意味著無序、混亂。當(dāng)我們看到無序的事物時(shí),會覺得心生煩躁、不安。
另外,對齊有助于提高閱讀的易讀性,因?yàn)樗欠先祟愌矍虻倪\(yùn)動規(guī)律的。現(xiàn)代人習(xí)慣的閱讀方式是從左至右、從上至下的,所以我們在設(shè)計(jì)領(lǐng)域總結(jié)出兩種閱讀布局模式:「 F形布局模式」和「Z形布局模式」,這兩種布局模式都會引導(dǎo)讀者的視線自然移動。而F型和Z型的布局模式都是左對齊的,這有助于讀者快速找到閱讀的起點(diǎn)。
對齊的根本目的是使頁面統(tǒng)一而且有條理。
在設(shè)計(jì)中,統(tǒng)一性是一個(gè)重要的概念。要讓頁面上的所有元素看上去統(tǒng)一、有聯(lián)系而且彼此相關(guān),需要在每個(gè)單獨(dú)的元素之間存在某種視覺紐帶。
而對齊通過一條“無形的線”將元素連在了一起,形成了這種視覺紐帶。如果頁面上的一些項(xiàng)是對齊的,這會得到一個(gè)更內(nèi)聚的單元。所以在頁面上放其他項(xiàng)時(shí),一定要確保每一項(xiàng)都與頁面上的其他項(xiàng)存在某種對齊。
對齊的三種方式
即便你沒有系統(tǒng)學(xué)習(xí)過,但你一定有意無意地在以往用過這三種對齊方式:左對齊、居中對齊、右對齊。
我用一個(gè)實(shí)際例子來讓大家快速掌握這三種對齊方式。
這是一張名片,你的視線會先看哪里?是左上方的“運(yùn)營狗”還是中間加粗的“陳伯健”?接下來你會看哪里?它給我的感覺就像:上面的元素就好像是我在家里隨地亂扔的襪子一樣,雜亂無章。我們發(fā)現(xiàn)這里的每個(gè)元素都與其他任何元素沒有關(guān)聯(lián)。我們可以嘗試?yán)鲆恍┹o助線,來看看這些元素的基準(zhǔn)線在哪里。如果這些元素對齊了,這些基準(zhǔn)線應(yīng)該是重合才對的。
我們發(fā)現(xiàn)沒有一條輔助線是重合的,這真是太糟糕了,連我都想手撕自己的這張名片了!如果給你改,你會怎么改?其實(shí)吧,我們只要稍加對齊,這張名片就會脫胎換骨。?
對齊大法第一招:左對齊
在這里我采用了左對齊的方式,將所有元素都順著一條無形的線對齊了。怎么樣?是不是感覺界面很清爽,嗖一下的就看完了?在上面也提到了,左對齊是最符合我們的閱讀習(xí)慣的。特別是大段的文本段落,左對齊甚至可能是唯一的選擇。其實(shí)要做到這種對齊只需要一條參考線就可以了,請看:
看看一些運(yùn)用了左對齊的優(yōu)秀作品:
作者:Marko Cvijetic(dribbble)?
作者:Ardias Elga Kurnia(dribbble)?
對齊大法第二招:右對齊
- 對齊時(shí),盡量利用「參考線」來幫助你對齊。怎么喚出參考線?在PPT頁面點(diǎn)擊鼠標(biāo)右鍵 - 網(wǎng)格和參考線 - 添加參考線。記得勾選「參考線」和「智能參考線」;
- 對齊有「命令對齊」和「嚴(yán)格對齊」,當(dāng)我們在嘗試對齊兩個(gè)元素時(shí),PPT很智能地在靠近的時(shí)候進(jìn)行「命令對齊」,但我們一般需要「嚴(yán)格對齊」所以你需要使用方向鍵進(jìn)行微調(diào)。納米級微調(diào)的操作是ctrl +方向鍵。
- 如果你對對齊還不太熟練,建議你在初期練習(xí)中每次只使用一種對齊。優(yōu)先使用左對齊和居中對齊。
參考書目:Robin Williams. The Non-Designer's Design Book [M]
原作者:伯健君PPT 微信號:bojianjun2017 自媒體大咖進(jìn)駐