感覺設(shè)計(jì)太亂?「對(duì)齊」原則肯定沒學(xué)會(huì)!

資訊頻道 - 設(shè)計(jì)技 來源:藝海拾貝Design 作者:cdo 2020-02-17

重復(fù)、對(duì)比、對(duì)齊以及親密性是版式設(shè)計(jì)中的四大原則,各種排版形式與規(guī)則都是基于這四大原則衍生而來,而掌握這些具有指導(dǎo)性的設(shè)計(jì)原則,能夠幫助我們?cè)诙虝r(shí)間內(nèi),更快更好地達(dá)成設(shè)計(jì)目標(biāo)。本期給大家講解四大原則之對(duì)齊原則。

01#什么是對(duì)齊原則

對(duì)齊原則是指:「任何元素都不能在頁面上隨意安放,每一項(xiàng)都應(yīng)當(dāng)與頁面上的某個(gè)內(nèi)容存在某種視覺聯(lián)系」。

在四大原則中,對(duì)齊應(yīng)當(dāng)是最容易理解的了,因?yàn)樵谖覀兊纳钪袑?duì)齊幾乎就是無處不在。

不管什么樣的環(huán)境,只要有各種各樣的事物存在,它就需要一個(gè)秩序,人類的環(huán)境如此,設(shè)計(jì)元素的環(huán)境照樣如此。左下圖設(shè)計(jì)元素參差不齊,畫面顯得雜亂無章,沒有美感,影響閱讀;而右下圖運(yùn)用合理的對(duì)齊可以帶來秩序感,看起來更加嚴(yán)謹(jǐn)、專業(yè),信息傳達(dá)效果更好。

為什么要對(duì)齊?不僅僅是對(duì)用戶視覺瀏覽習(xí)慣的考量,還是對(duì)頁面中信息組織的考量。一方面利用對(duì)齊,符合用戶的視覺慣性,降低用戶閱讀負(fù)擔(dān);另一方面利用不同的對(duì)齊形式,能有效組織信息,讓頁面規(guī)整有序、嚴(yán)謹(jǐn)美觀。

02#文字編排對(duì)齊方式

文字編排常用的對(duì)齊方式有:左對(duì)齊、兩端對(duì)齊末行左對(duì)齊、右對(duì)齊、居中對(duì)齊、兩端對(duì)齊、頂對(duì)齊和底對(duì)齊等。在進(jìn)行設(shè)計(jì)時(shí)要根據(jù)構(gòu)圖形式選擇合理的對(duì)齊方式,每種對(duì)齊形式所傳達(dá)的視覺感受也不一樣。(對(duì)齊名稱只是為了便于講解和記憶,不一定與軟件中的名稱一致)

1. 左對(duì)齊

由于我們的閱讀順序大多是從左往右,所以左對(duì)齊是閱讀效率最高的對(duì)齊方式,也成為了排版中最常見的一種對(duì)齊方式。

左對(duì)齊的缺點(diǎn)是容易造成右端留白過多,整體視覺失衡。但是這種對(duì)齊方式不破壞文字本身的起伏和韻律,能保證較好的閱讀體驗(yàn)。還可以避免英文因單詞所包含的字符數(shù)量不等而不便于左右對(duì)齊的編排難題。

2. 兩端對(duì)齊末行左對(duì)齊

在進(jìn)行大段的文字編排時(shí),常會(huì)遇到這樣的情況,無論你怎么拉動(dòng)文本框,文字的兩端都無法對(duì)齊。

這時(shí)可以強(qiáng)制左右兩端都對(duì)齊,最后一行靠左對(duì)齊。這是最常用的段落性文字編排形式,多運(yùn)用于雜志、畫冊(cè)、報(bào)紙等多文字信息內(nèi)容的編排。使段落文字嚴(yán)謹(jǐn)工整,讓版面清晰有序而有條理,提高閱讀效率。

3. 居中對(duì)齊

多用于居中對(duì)稱式的版面,給人莊重、肅穆、經(jīng)典的感覺。因?yàn)榇蠖蔚木又袑?duì)齊文字會(huì)造成分行和閱讀困難的問題,所以常用在標(biāo)題、導(dǎo)語和短篇文字編排中。

4. 右對(duì)齊

右對(duì)齊的編排方式與人的視線移動(dòng)方向相反,而且每一行起始部分的不規(guī)則增加了閱讀的時(shí)間和精力,這種格式只適用于少量的文字。

右對(duì)齊使用的頻率不太高,往往會(huì)與圖形、照片建立某種視覺聯(lián)系,獲得排版上的平衡。使用右對(duì)齊會(huì)給人一種人為干預(yù)的感覺,因此這種對(duì)齊方式會(huì)顯得比較個(gè)性。

5. 兩端對(duì)齊

兩端對(duì)齊是指將文字通過調(diào)整間距的方式使得兩端完全對(duì)齊,強(qiáng)制處理成四方形,這樣可以達(dá)成工整嚴(yán)謹(jǐn)?shù)男Ч?/p>

6. 頂對(duì)齊

頂對(duì)齊是縱向排版才會(huì)用到的對(duì)齊方式,起源于古代的書簡(jiǎn),因此采用縱向排版雖然不利于閱讀,但是可以營(yíng)造出復(fù)古的文化氛圍,有著濃濃的中國(guó)味。

7. 底對(duì)齊

底對(duì)齊也使用在縱向排版,每一行起始部分的不規(guī)則增加了閱讀的時(shí)間和精力,是最不適合閱讀的對(duì)齊方式,一般只用于少量文字或作為裝飾性元素使用。

 03#其他對(duì)齊方式

1. 非橫向和縱向?qū)R

排版不一定只有橫向和縱向的視覺方式,也會(huì)有其他的方式,在這些視覺方向上,也要通過對(duì)齊的原則來規(guī)整設(shè)計(jì)元素。

2. 傾斜對(duì)齊

3. 分散對(duì)齊

設(shè)計(jì)時(shí)常會(huì)根據(jù)構(gòu)圖和空間分割使用多種對(duì)齊方式的編排組合,如下圖版面中每個(gè)信息群組使用的對(duì)齊方式也不一樣,可以讓信息層級(jí)更清晰,信息傳達(dá)效果更好。

4. 自由對(duì)齊

打破秩序,沒有明確的對(duì)齊線,是崇尚隨性,自由活潑,具有詩(shī)意、感性的排列方式,為版面設(shè)計(jì)提供無限的可能性。

 04#實(shí)例操作

為了讓大家加深對(duì)對(duì)齊原則的理解,提取本期文章的主要內(nèi)容作為原始資料,運(yùn)用對(duì)齊原則進(jìn)行設(shè)計(jì)示范。

按照親密性原則總結(jié)出來的規(guī)律,把版面中的文字信息進(jìn)行分組,使它們各自成為一個(gè)視覺單元,建立起條理性和組織性。并按照「字間距< 行間距< 段間距< 組間距」的規(guī)則進(jìn)行親密性設(shè)置,保證各個(gè)間距組合之間的相對(duì)性比例。

把「標(biāo)題」、「對(duì)齊原則簡(jiǎn)介」、「對(duì)齊方式」,三組信息分別進(jìn)行對(duì)齊設(shè)置。

「標(biāo)題」按照兩端對(duì)齊的形式,調(diào)整文字間距使得兩端完全對(duì)齊,強(qiáng)制處理成四方形,這樣可以達(dá)成工整嚴(yán)謹(jǐn)?shù)男Ч。并把字體改為思源宋體,與正文的思源黑體增加字體對(duì)比:

「對(duì)齊原則簡(jiǎn)介」文字采用左對(duì)齊格式,可以保持文字本身的起伏和韻律,還能保證較好的閱讀體驗(yàn)。另外文字較多的一段,可以采取兩端對(duì)齊末行左對(duì)齊格式。使段落文字嚴(yán)謹(jǐn)工整,讓版面清晰有序而有條理,提高閱讀效率。

「對(duì)齊方式」信息組使用右對(duì)齊形式,增加對(duì)齊方式的多樣性。雖然每一行起始部分的不規(guī)則增加了閱讀的時(shí)間和精力,但是也增強(qiáng)了排版的節(jié)奏感。

把設(shè)置好的文字信息放置到版面中,并使用網(wǎng)格進(jìn)行規(guī)范和輔助對(duì)齊,使用網(wǎng)格可以快速分割版面以及找準(zhǔn)對(duì)齊關(guān)系,輔助我們的設(shè)計(jì)更嚴(yán)謹(jǐn)。

沿用上期使用的孟菲斯風(fēng)格元素豐富畫面。給各個(gè)信息組加入偽立體效果的外框,讓信息分割更明確,加入外框后畫面也要遵循對(duì)齊原則。

加入小圓點(diǎn)當(dāng)作背景肌理,并增加各種幾何形狀來豐富畫面。增加活潑感和趣味性。方案一設(shè)計(jì)完成:

嘗試使用其他對(duì)齊方式和構(gòu)圖形式設(shè)計(jì)另一個(gè)方案:

加入孟菲斯風(fēng)格元素豐富畫面,遵循對(duì)齊原則進(jìn)行排版,方案二設(shè)計(jì)完成:

05#總結(jié)

視覺規(guī)范最基礎(chǔ)的要求就是:整齊、規(guī)范、有條理。大多數(shù)情況下,設(shè)計(jì)做得不美觀,很大的原因就是在排版方面過于隨意,尤其是很難或者沒有意識(shí)做到對(duì)齊。

無論版面的信息多少、位置如何變化,只要遵循對(duì)齊原則,保證元素間的對(duì)齊關(guān)系,就能夠使版面統(tǒng)一、簡(jiǎn)潔、更有條理,還可以引導(dǎo)視覺流向,有助于信息更好傳達(dá),當(dāng)然也更美觀。在進(jìn)行設(shè)計(jì)時(shí)必須先掌握最基本的程序化的美,才可以升華到最「隨意」的原始美。

 

原文:藝海拾貝Design


聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點(diǎn)。

全部評(píng)論

暫無相關(guān)推薦