設(shè)計(jì)的四大基本原則(一):對(duì)齊

在《寫(xiě)給大家看的設(shè)計(jì)書(shū)》中,Robin 提出了設(shè)計(jì)的四大基本原則:對(duì)齊、重復(fù)、對(duì)比、親密性。每一個(gè)優(yōu)秀的設(shè)計(jì)作品通常都遵守這四大基本原則。今天我們談的是:對(duì)齊。

看圖片,做測(cè)試

先來(lái)看一組圖片,然后嘗試著描述一下自己此刻心里的陰影面積:

難受嗎?反正我挺難受的。
其實(shí)我們也很難說(shuō)清為什么會(huì)難受,但是這些圖讓我們難受的原因都是:沒(méi)有對(duì)齊。

為什么PPT設(shè)計(jì)中需要對(duì)齊

PPT在本質(zhì)上是一種視覺(jué)設(shè)計(jì),而視覺(jué)設(shè)計(jì)非常講究元素間的關(guān)系和擺放位置。
我們從小被教導(dǎo)要把物品放得整齊:把亂糟糟的被子疊好、把到處都是的衣服掛好、把上課的桌椅對(duì)齊擺好……

在人類(lèi)進(jìn)化的長(zhǎng)久歷史中,整齊變得符合人類(lèi)的心理認(rèn)知。
而對(duì)齊是達(dá)到整齊效果的重要手段。

對(duì)齊就是使兩個(gè)以上事物配合或接觸得整齊(來(lái)自百度百科)。
我嘗試用我的理解作出定義:對(duì)齊即兩個(gè)元素參照某條有形或無(wú)形的線進(jìn)行排列的排列方法。
對(duì)齊意味著有序,而我們的眼睛喜歡看到有序的事物,這給人有種穩(wěn)定、安全的感覺(jué)。

不對(duì)齊意味著無(wú)序、混亂。當(dāng)我們看到無(wú)序的事物時(shí),會(huì)覺(jué)得心生煩躁、不安。

另外,對(duì)齊有助于提高閱讀的易讀性,因?yàn)樗欠先祟?lèi)眼球的運(yùn)動(dòng)規(guī)律的。

現(xiàn)代人習(xí)慣的閱讀方式是從左至右、從上至下的,從而在設(shè)計(jì)領(lǐng)域被總結(jié)出兩種閱讀布局模式: F形布局模式和Z形布局模式,這兩種布局模式都會(huì)引導(dǎo)讀者的視線自然移動(dòng)。
而F型和Z型的布局模式都是左對(duì)齊的,這有助于讀者快速找到閱讀的起點(diǎn)。

對(duì)齊的根本目的是使頁(yè)面統(tǒng)一而且有條理。
在設(shè)計(jì)中,統(tǒng)一性是一個(gè)重要的概念。要讓頁(yè)面上的所有元素看上去統(tǒng)一、有聯(lián)系而且彼此相關(guān),需要在每個(gè)單獨(dú)的元素之間存在某種視覺(jué)紐帶。

而對(duì)齊通過(guò)一條“無(wú)形的線”將元素連在了一起,形成了這種視覺(jué)紐帶。
如果頁(yè)面上的一些項(xiàng)是對(duì)齊的,這會(huì)得到一個(gè)更內(nèi)聚的單元。所以在頁(yè)面上放其他項(xiàng)時(shí),一定要確保每一項(xiàng)都與頁(yè)面上的其他項(xiàng)存在某種對(duì)齊。

對(duì)齊的三種方式

即便你沒(méi)有系統(tǒng)學(xué)習(xí)過(guò),但你一定有意無(wú)意地在以往用過(guò)這三種對(duì)齊方式:

  • 左對(duì)齊
  • 居中對(duì)齊
  • 右對(duì)齊

我們用一個(gè)實(shí)際例子來(lái)感受一下這三種對(duì)齊方式。

這是一張名片,你的視線會(huì)先看哪里?是左上方的“運(yùn)營(yíng)狗”還是中間加粗的“陳伯健”?接下來(lái)你會(huì)看哪里?
它給我的感覺(jué)就像:上面的元素就好像是我在家里隨地亂扔的襪子一樣,雜亂無(wú)章。我們發(fā)現(xiàn)這里的每個(gè)元素都與其他任何元素沒(méi)有關(guān)聯(lián)。

我們可以嘗試?yán)鲆恍┹o助線,來(lái)看看這些元素的基準(zhǔn)線在哪里。如果這些元素對(duì)齊了,這些基準(zhǔn)線應(yīng)該是重合才對(duì)的。

這真是太糟糕了!連我都想手撕自己的這張名片了!
如果給你改,你會(huì)怎么改?其實(shí)吧,我們只要稍加對(duì)齊,這張名片就會(huì)脫胎換骨。

對(duì)齊大法第一招:左對(duì)齊

在這里我采用了左對(duì)齊的方式,將所有元素都順著一條無(wú)形的線對(duì)齊了。怎么樣?是不是感覺(jué)界面很清爽,嗖一下的就看完了?

在上面也提到了,左對(duì)齊是最符合我們的閱讀習(xí)慣的。特別是大段的文本段落,左對(duì)齊甚至可能是唯一的選擇。其實(shí)要做到這種對(duì)齊只需要一條參考線就可以了,請(qǐng)看:

看看一些運(yùn)用了左對(duì)齊的優(yōu)秀作品:

Marko Cvijetic(dribbble)
Ardias Elga Kurnia(dribbble)
對(duì)齊大法第二招:右對(duì)齊

右對(duì)齊的使用場(chǎng)景就比左對(duì)齊的少得多了。但正因右對(duì)齊用得少,所以常常右對(duì)齊會(huì)顯得更有設(shè)計(jì)感。
在文本較少、每行只有幾個(gè)字的情況下使用右對(duì)齊是沒(méi)問(wèn)題的,所以我們可以看到在名片設(shè)計(jì)中大量使用了右對(duì)齊的設(shè)計(jì)。

Milosz Klimek(dribbble)
對(duì)齊大法第三招:居中對(duì)齊

居中對(duì)齊是最易用的,同時(shí)它也非常的常用和安全,居中對(duì)齊基本不會(huì)犯錯(cuò)。

We WANNA Party
DERTURE
作者:Artem Zadereshchenko(dribbble)

而實(shí)際上,很少作品會(huì)單純包含一種對(duì)齊方式,往往是混合使用兩種甚至三種。
例如這張作品,使用了居中對(duì)齊和左對(duì)齊。

關(guān)于對(duì)齊的建議

  1. 對(duì)齊時(shí),盡量利用「參考線」來(lái)幫助你對(duì)齊。怎么喚出參考線?在PPT頁(yè)面點(diǎn)擊鼠標(biāo)右鍵 - 網(wǎng)格和參考線 - 添加參考線。記得勾選「參考線」和「智能參考線」;
  2. 對(duì)齊有「命令對(duì)齊」和「嚴(yán)格對(duì)齊」,當(dāng)我們?cè)趪L試對(duì)齊兩個(gè)元素時(shí),PPT很智能地在靠近的時(shí)候進(jìn)行「命令對(duì)齊」,但我們一般需要「嚴(yán)格對(duì)齊」所以你需要使用方向鍵進(jìn)行微調(diào)。納米級(jí)微調(diào)的操作是ctrl +方向鍵。
  3. 如果你對(duì)對(duì)齊還不太熟練,建議你在初期練習(xí)中每次只使用一種對(duì)齊。優(yōu)先使用左對(duì)齊和居中對(duì)齊。

參考書(shū)目:Robin Williams. The Non-Designer's Design Book [M]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 設(shè)計(jì)的四大基本原則:對(duì)齊、重復(fù)、對(duì)比、親密性,每一份優(yōu)秀的設(shè)計(jì)作品通常都遵守這四大基本原則。今天我們談的是:對(duì)齊。...
    喵小姐huan閱讀 2,293評(píng)論 0 0
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,122評(píng)論 1 92
  • “你是捉摸不透的風(fēng) 亦是陰晴不定的天” “我的世界很單一 只有你 我的世界很美好 全是你” “從前有個(gè)傻子很愛(ài)你 ...
    遲久閱讀 338評(píng)論 1 0
  • 關(guān)關(guān)雎鳩,在河之洲,窈窕淑女,君子好逑!聽(tīng)到這樣的詩(shī)句時(shí),我的腦海里總是會(huì)出現(xiàn)一個(gè)畫(huà)面,在一片撒有蘆葦蕩的水面上,...
    請(qǐng)你看電影閱讀 279評(píng)論 0 0
  • 寧夏衛(wèi)視《最強(qiáng)小孩》第二季選手招募活動(dòng)記錄 2016年2月,欄目組找到我們讓我們舉辦寧夏衛(wèi)視《最強(qiáng)小孩》第二季地方...
    小媒子閱讀 360評(píng)論 0 1

友情鏈接更多精彩內(nèi)容