掌握經(jīng)典的版式四原則!
發(fā)布時(shí)間:2021-12-21 11:02 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2

關(guān)于手機(jī)端的詳情設(shè)計(jì),版式可以說是設(shè)計(jì)師必須要掌握的核心能力,因?yàn)樵斍轫?yè)是講產(chǎn)品的詳細(xì)內(nèi)容,只有合理的圖文排版才能讓用戶更好的讀內(nèi)容。而說到版式,就必須先提 4 條基本原則,這些原則一直都是版式教程的必講知識(shí)點(diǎn),有大量文章和書籍都做過詳細(xì)介紹,不過根據(jù)設(shè)計(jì)類型的不同會(huì)有出入,這里我就結(jié)合手機(jī)端的瀏覽體驗(yàn),來講講 4 原則的運(yùn)用,版式設(shè)計(jì)的 4 條原則分別是:對(duì)齊、親密性、對(duì)比和重復(fù)。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

這是由美國(guó)設(shè)計(jì)師 Robin Wulliams(羅賓·威廉姆斯)在《寫給大家看的設(shè)計(jì)書》中首次提出,準(zhǔn)確講這 4 條原則更側(cè)重排版設(shè)計(jì),可以說幾乎所有排版中,都要用到該原則,它是排版“心法”,更是需要遵循的基礎(chǔ)準(zhǔn)則,并且 4 條原則都不是孤立存在,通常會(huì)結(jié)合使用,很少有作品只用其中某條原則。


對(duì)齊


對(duì)齊很好理解,就是將內(nèi)容用某種對(duì)齊規(guī)則進(jìn)行排列,使它們產(chǎn)生視覺聯(lián)系,這樣畫面會(huì)顯得規(guī)整和嚴(yán)謹(jǐn)。如圖所示,盡管只是簡(jiǎn)單的文字對(duì)齊,但畫面卻有明顯差異:沒對(duì)齊的左圖文字非常混亂,讓人不適;而對(duì)齊的右圖文字井然有序,便于閱讀。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

根據(jù)對(duì)齊規(guī)則不同,常見對(duì)齊方式有以下 5 種。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

1. 左對(duì)齊

左對(duì)齊是以左線為基準(zhǔn)的對(duì)齊,這是最常用的對(duì)齊方式,當(dāng)我們?yōu)g覽橫向排版的信息時(shí),左對(duì)齊更符合視線從左往右的閱讀習(xí)慣,因此廣泛用于標(biāo)題和內(nèi)文的排版當(dāng)中。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

2. 居中對(duì)齊

居中對(duì)齊是以中線為基準(zhǔn)的對(duì)齊,也是一種對(duì)稱均衡的布局方式,對(duì)于手機(jī)端,常用于標(biāo)題排版,當(dāng)然有些文字不多的內(nèi)文偶爾也會(huì)用到,因?yàn)槭謾C(jī)版面的寬度偏窄,當(dāng)標(biāo)題居中對(duì)齊后,既不影響閱讀,也能讓視覺平衡、舒適。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

3. 左右對(duì)齊

左右對(duì)齊是讓兩端以左右線為基準(zhǔn)同時(shí)對(duì)齊,這種對(duì)齊最為工整,常用于文字較多的內(nèi)文排版,如下圖,左右對(duì)齊能將大段文字變成方形,整齊有序,利于閱讀。另外如果內(nèi)文配有圖片,最好也和文字兩端對(duì)齊。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

對(duì)于內(nèi)文的左右對(duì)齊,還需注意“避頭尾”,避頭尾是說文中的標(biāo)點(diǎn)符號(hào)盡量不出現(xiàn)在行首或行尾,因?yàn)槭孜驳臉?biāo)點(diǎn)會(huì)讓文字出現(xiàn)空缺,影響整齊程度。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

其實(shí)標(biāo)題有時(shí)也能左右對(duì)齊,通過對(duì)齊將文字圖形化、塊面化,這樣能增強(qiáng)畫面的形式感,如下圖所示。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

4. 右對(duì)齊

右對(duì)齊是以右線為基準(zhǔn)的對(duì)齊,這種對(duì)齊和我們視線的移動(dòng)路徑剛好相反,使得閱讀沒那么方便,因此不管標(biāo)題還是內(nèi)文,用的都相對(duì)較少。如下圖,當(dāng)畫面的留白靠右或有特殊的版式需求時(shí),才會(huì)用到右對(duì)齊。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

5. 頂對(duì)齊

頂對(duì)齊是以頂端為基準(zhǔn)的對(duì)齊,這是豎向排版才有的對(duì)齊方式,而豎向排版常用于中國(guó)風(fēng)中,雖然閱讀不便,但能體現(xiàn)古典和文藝,可以說頂對(duì)齊是國(guó)風(fēng)排版的專屬對(duì)齊。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

總結(jié)一下,對(duì)于手機(jī)端,標(biāo)題常用左對(duì)齊或居中對(duì)齊;而內(nèi)文若文字偏少用左對(duì)齊、偏多則用左右對(duì)齊;豎向排版優(yōu)先頂對(duì)齊。但這是一般情況,實(shí)際還需根據(jù)版面做靈活調(diào)整。

最后提下“絕對(duì)對(duì)齊”和“視覺對(duì)齊”,一般我們都用軟件的對(duì)齊工具進(jìn)行對(duì)齊,而軟件的衡量方式是以元素邊界為基準(zhǔn),這是“絕對(duì)對(duì)齊”,例如下面這段文字用的就是軟件工具的“絕對(duì)對(duì)齊”。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

從物理角度看,上面三行文字已完全對(duì)齊,但從視覺角度看卻沒有,我們會(huì)覺得第二行文字“原產(chǎn)地鮮果”偏右了一點(diǎn)點(diǎn),這是因?yàn)樽煮w大小、字形結(jié)構(gòu)的差異讓我們產(chǎn)生“視錯(cuò)覺”,此時(shí)要從人眼感知出發(fā),對(duì)文字進(jìn)行適當(dāng)修正,把“原產(chǎn)地鮮果”往左偏移一點(diǎn),這樣看起來才是對(duì)齊的,如下圖所示,這就是“視覺對(duì)齊”。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

顯而易見,設(shè)計(jì)講的都是“視覺對(duì)齊”,不管文字還是圖形,當(dāng)用軟件工具進(jìn)行“絕對(duì)對(duì)齊”后,若視覺不齊,那一定要調(diào)整至“視覺對(duì)齊”。當(dāng)然具體偏移多少并無(wú)固定數(shù)值,需要大家多多練習(xí),提升設(shè)計(jì)感,將眼睛練成最好的測(cè)量工具。


親密性


親密性是指文字間的關(guān)聯(lián)性,簡(jiǎn)單說,就是內(nèi)容的間距越小則關(guān)系越近;而間距越大則關(guān)系越疏,這和“格式塔原理”中的“接近性”相一致,一般我們會(huì)將相互靠近的內(nèi)容當(dāng)成一個(gè)組合,而把彼此遠(yuǎn)離的內(nèi)容當(dāng)成獨(dú)立模塊。如下圖所示,左圖內(nèi)容的行間距一致,信息沒層級(jí),顯得非常冗長(zhǎng),無(wú)法快速辨別關(guān)聯(lián)性,不便于閱讀;而右圖則通過調(diào)整行間距,對(duì)信息進(jìn)行層級(jí)的劃分,分出了標(biāo)題、內(nèi)文和模塊,這樣讀起來一目了然。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

可見親密性是要我們通過調(diào)整間距來對(duì)內(nèi)容進(jìn)行歸類分組,這樣信息才會(huì)層級(jí)分明、邏輯清晰,因此親密性又叫“分組”。在實(shí)際運(yùn)用中,常用間距有 4 種,從小到大依次是:字間距、行間距、段間距和模塊間距,從文字到模塊,它們的間距會(huì)越來越大,關(guān)聯(lián)性也越來越弱,如下圖所示。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

1. 字間距

字間距是指字與字間的距離,在內(nèi)容排版中,字與字的關(guān)聯(lián)性最強(qiáng),間距也最小,不過隨著字體減小,字距需逐步增大,即是說字距要根據(jù)字體大小及時(shí)做出微調(diào),不要只用默認(rèn)的 0。

一般來說,標(biāo)題字體較大,間距要更緊湊,但要避免壓縮過多而影響閱讀,常規(guī)字距在-50— -20;而內(nèi)文字體較小,間距則要適當(dāng)寬松,但也不要過于寬松而影響內(nèi)容的連貫性,常規(guī)數(shù)值在20—50,但數(shù)值只是參考,不要硬套,核心保證視覺和諧。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

但有時(shí)為強(qiáng)化版面的形式感,也會(huì)刻意增加字距,使其非常寬松,這時(shí)更多是考慮視覺美感而非易讀性。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

2. 行間距

行間距是指一行文字的最底部到下行文字最底部的距離,但為了方便調(diào)整,平時(shí)只需觀察行與行間的空白高度即可(以下簡(jiǎn)稱“行間空白”)。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

在關(guān)聯(lián)性上,行僅次于字,實(shí)際排版時(shí),行間空白需大于字間距才能保證內(nèi)容的易讀性,否則會(huì)讓閱讀順序產(chǎn)生混亂,如下圖所示。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

和字距一樣,行間空白也需隨著字體減小而增大,常規(guī)來說,標(biāo)題的行間空白最好小于半個(gè)字高;而內(nèi)文的行間空白建議為半個(gè)字高到 1 個(gè)字高,這樣的疏密程度看著舒適透氣、閱讀流暢。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

3. 段間距

段間距即指段落與段落之間的距離,當(dāng)內(nèi)文需要分段時(shí),就要注意調(diào)節(jié)段距,一般段距需遠(yuǎn)大于段落的行間空白才行。同樣若字體減小,段距還要更大,常規(guī)是 2 到 3 個(gè)字高,如下圖所示,這樣內(nèi)容層次才易區(qū)分,排版也更透氣。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

不過手機(jī)端由于版面受限,用戶又是掃讀信息,因此詳情頁(yè)的文字都不會(huì)太多,所以段間距總體使用較少。

4. 模塊間距

模塊間距是指不同模塊間的距離,其中模塊是泛指,在版面中任何一個(gè)相對(duì)獨(dú)立的組合都算一個(gè)模塊,這里組合可小可大,具體需按實(shí)際排布做靈活劃分。但不管大組合還是小組合,都相對(duì)獨(dú)立,所以模塊的關(guān)聯(lián)性最弱,間距最大。

如下圖,在日常排版中,常見模塊間距有主標(biāo)題和副標(biāo)題的間距、標(biāo)題和內(nèi)文的間距、文字和圖片的間距等等,其中間距數(shù)值并無(wú)具體建議,因?yàn)殡S著版式變化,差異往往較大,最好根據(jù)需求和感受靈活而定,但總體來說,間距要大于字距、行距和段距;另外隨著版面縮小,模塊間距還要適當(dāng)增大。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

總之在手機(jī)端的排版設(shè)計(jì)中,運(yùn)用親密性就是對(duì)內(nèi)容進(jìn)行梳理和分層,實(shí)現(xiàn)視覺邏輯化,而調(diào)節(jié)字/行/段/模塊間距則是核心手段。注意這 4 種間距還有一個(gè)共同特性,就是隨字體減小,間距需逐漸增大,這是因?yàn)樽煮w越小越顯擁擠,這時(shí)通過加大間距可增加透氣性。


對(duì)比


關(guān)于對(duì)比,本書已多次提到,從元素對(duì)比、色彩對(duì)比再到明暗對(duì)比等等,可見設(shè)計(jì)中對(duì)比是無(wú)處不在,而本小節(jié)說的則是“版式對(duì)比”,其本質(zhì)是讓內(nèi)容之間差異化,形成視覺反差。如果說“親密性”是讓信息的層次更清晰,那“對(duì)比”就是讓信息的主次更分明,例如下圖中,文字都已左對(duì)齊,也通過間距劃分了層次(親密性),但整體依然邏輯不清、沒有重點(diǎn)。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

當(dāng)我們通過調(diào)整字體大小和粗細(xì)分出主標(biāo)題、副標(biāo)題和內(nèi)文后,這時(shí)文字馬上有了主次,視覺也更具變化和沖擊,一個(gè)小小改動(dòng)就有如此效果,可見對(duì)比原則的重要性。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

另外日常運(yùn)用時(shí),對(duì)比程度最好強(qiáng)烈些,盡可能讓差異化明顯,這樣才能突出內(nèi)容重點(diǎn),有效傳遞關(guān)鍵信息,也讓版式更有變化,不至于平淡乏味。那版式對(duì)比的方式有哪些?其實(shí)很多,可以說只要能改變的地方就能對(duì)比,這里就提常見的 4 種:大小對(duì)比、粗細(xì)對(duì)比、字體對(duì)比和色彩對(duì)比,這些對(duì)比主要側(cè)重文字排版。接下來我會(huì)通過一段文字的逐步調(diào)整,讓大家了解 4 種對(duì)比的使用,下面先看看還未調(diào)整的版面示意,圖中文字目前只是居中對(duì)齊并簡(jiǎn)單分成了 2 組,能看到信息沒有重點(diǎn),畫面也不協(xié)調(diào)。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

1. 大小對(duì)比

通過改變字體大小形成差異化,注意前面提到“讓差異盡量明顯”,現(xiàn)在用字體大小來說,就是“大字要更大,小字要更小”,因?yàn)榉床钐〉膶?duì)比會(huì)讓主次模棱兩可。但在手機(jī)端,若畫面寬度是 750px(手機(jī)端的常規(guī)寬度),那最小字體也盡量不小于 20pt,不然會(huì)識(shí)別困難,違背易讀性。現(xiàn)在我們來調(diào)整案例的文字大小,如下圖,字體最大的是主標(biāo)題,其次是副標(biāo)題,最后才是內(nèi)文小字,要保證主標(biāo)和內(nèi)文的大小有著數(shù)倍差距,這樣主次才清晰。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

2. 粗細(xì)對(duì)比

粗細(xì)是說字體的筆畫粗細(xì),即字重。有些字體會(huì)有多種字重,就是為了方便我們根據(jù)不同內(nèi)容選擇合適字重。一般標(biāo)題要粗,而內(nèi)文要細(xì),但不絕對(duì),只是一個(gè)常規(guī)用法,可見字體大小和粗細(xì)常常會(huì)同時(shí)使用。如下圖,當(dāng)文字有了粗細(xì)變化后,信息層級(jí)會(huì)進(jìn)一步加強(qiáng),視覺也更均衡。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

3. 字體對(duì)比

就是用 2 種以上的字體來形成字形反差,這是形狀對(duì)比的一種,不同字體的穿插能豐富畫面層次、提升設(shè)計(jì)感,但核心要能根據(jù)風(fēng)格及編排選擇類型和氣質(zhì)都匹配的字體。還要注意詳情頁(yè)中,字體數(shù)量最好不超過 3 種,若種類太多會(huì)讓頁(yè)面過于花哨,反而影響美感和閱讀。再回到之前案例,由于畫面體現(xiàn)的是科技感和運(yùn)動(dòng)風(fēng),因此將主標(biāo)題改為“黑體+動(dòng)感”的“站酷高端黑”,這樣主標(biāo)題更突出、也更有沖擊力。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

4. 色彩對(duì)比

色彩對(duì)比最直觀,也易出效果,但前提是要選擇合適的配色方案。簡(jiǎn)單說色彩分無(wú)彩色和有彩色 2 大類,其中無(wú)彩色(黑色、白色、灰色)在文字的排版中非常常見,因?yàn)闊o(wú)彩色白搭,能讓信息呈現(xiàn)清爽明了,因此本文的大部分文字都以無(wú)彩色為主;當(dāng)然有彩色在排版中也必不可少,但很多時(shí)候不宜使用過多,主要作為點(diǎn)綴和無(wú)彩色進(jìn)行搭配。下方案例中,由于背景是深色,所以標(biāo)題采用高純度的天藍(lán)色,這樣會(huì)和主視覺形成呼應(yīng),而內(nèi)文則用淺灰色,內(nèi)容清晰但不搶標(biāo)題。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

總之文字用了以上 4 種對(duì)比后,版面更加均衡,信息更有層次,主次也更分明。另外 4 種對(duì)比很少單獨(dú)存在,都是組合使用,如下圖,多種對(duì)比讓文字更有表現(xiàn)力,但切忌使用過度,需根據(jù)要求做出適當(dāng)組合。

大小對(duì)比+粗細(xì)對(duì)比+字體對(duì)比+色彩對(duì)比 大小對(duì)比+粗細(xì)對(duì)比+色彩對(duì)比 大小對(duì)比+粗細(xì)對(duì)比

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

截自第一衛(wèi)天貓旗艦店手機(jī)殼詳情頁(yè)   截自第一衛(wèi)天貓旗艦店充電線詳情頁(yè)

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

截自美的生活電器天貓旗艦店電壓力鍋詳情頁(yè)

重復(fù)

重復(fù)是讓某些規(guī)則或元素在排版時(shí)反復(fù)使用,核心為了版式更加統(tǒng)一、整體、有序。例如下圖中,共有兩個(gè)版塊,單看任何一個(gè),文字排版都無(wú)太大問題,但兩個(gè)銜接一起時(shí),就會(huì)發(fā)現(xiàn)標(biāo)題、內(nèi)文的大小并不一致,對(duì)齊方式也有兩種,這樣排版就不統(tǒng)一,缺少整體性和必要關(guān)聯(lián)性。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

當(dāng)我們用“重復(fù)”作簡(jiǎn)單調(diào)整:統(tǒng)一上下版塊的文字大小和對(duì)齊方式后,馬上就協(xié)調(diào)很多,圖文排版也有章可循,整體工整、有條理。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

可見對(duì)詳情頁(yè)這種長(zhǎng)圖而言,由于是多版塊組合而成,因此“重復(fù)原則”就顯得尤為重要:事先設(shè)定一個(gè)排版規(guī)則,比如內(nèi)容的對(duì)齊方式、間距疏密、字體選擇、大小粗細(xì)、色彩搭配等等,然后讓每個(gè)版塊都在這個(gè)大規(guī)則下進(jìn)行編排,這樣就能避免雜亂無(wú)章,使版面井然有序。

當(dāng)然“排版重復(fù)”除了用于版塊間,有時(shí)也用在每個(gè)版塊中,比如常見的形狀重復(fù),如下圖所示,若打算用圓角矩形(左圖),那所有形狀最好都統(tǒng)一成圓角,包括標(biāo)題中的色塊圖形;若是直角矩形(右圖),那就統(tǒng)一成直角。這樣版面才更整體,也更協(xié)調(diào)。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

其實(shí)“重復(fù)”和“對(duì)比”剛好是設(shè)計(jì)的 2 個(gè)對(duì)立面:“重復(fù)”追求統(tǒng)一,而“對(duì)比”則追求變化,看似矛盾,實(shí)則相輔相成。可以說版式設(shè)計(jì)就是一個(gè)將統(tǒng)一與變化相互結(jié)合的過程。詳情頁(yè)也一樣,用“重復(fù)”讓版式變的規(guī)整有序,再用“對(duì)比”來打破過多重復(fù)產(chǎn)生的單調(diào)感,適當(dāng)制造差異化。

例如下方案例,雖然都用重復(fù)進(jìn)行了統(tǒng)一編排,但也用對(duì)比使其產(chǎn)生了微妙變化,像左一、左二中圖文位置的變化,左三中對(duì)齊方式的變化都是為了讓重復(fù)排版沒那么單調(diào)乏味。

手機(jī)詳情頁(yè)如何賣爆貨?先掌握經(jīng)典的版式四原則!

截自百雀羚天貓旗艦店護(hù)膚套裝詳情頁(yè) 截自花西子天貓旗艦店蜜粉詳情頁(yè) 截自第一衛(wèi)天貓旗艦店充電線詳情頁(yè)


總結(jié)


至此版式設(shè)計(jì) 4 原則(對(duì)齊、親密性、對(duì)比、重復(fù))就全部講完了,正是這些原則讓版式變的條理清晰、視覺均衡、便于閱讀。若再回看每條原則所展示的案例,會(huì)發(fā)現(xiàn)所有案例其實(shí)都是幾條原則的綜合使用,它們無(wú)法獨(dú)立存在,排版時(shí)要同時(shí)考慮、綜合使用,總之忽視任何一條原則都可能讓版式出現(xiàn)明顯問題。

電商視覺美工視頻教程
我要自學(xué)網(wǎng)商城 ¥90 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC