在準(zhǔn)備了大量素材及資料后，今天咱們的這篇關(guān)于網(wǎng)格的方法文章，終于來啦。本文過于干貨，SO，記筆記的小本本，準(zhǔn)備起來~~

第一：什么是網(wǎng)格？

在掌握網(wǎng)格的設(shè)計(jì)方法之前，咱們得先知道，到底什么是網(wǎng)格？為什么會(huì)有網(wǎng)格系統(tǒng)這一說？網(wǎng)格系統(tǒng)的存在，是為了解決設(shè)計(jì)什么樣的問題？

實(shí)際上，說到網(wǎng)格的歷史，得追溯到文藝復(fù)興時(shí)期。為了達(dá)到美的極致，藝術(shù)家從繪畫中找到了完美的比例分布圖，并嘗試以輔助線來實(shí)現(xiàn) 「完美」 構(gòu)圖的方法。

△ Masaccio, ‘The Tribute Money,’ Brancacci Chapel, 1425.

在13世紀(jì)，法國的建筑設(shè)計(jì)師 Villard de Honnecourt 將網(wǎng)格系統(tǒng)及黃金比例進(jìn)行了結(jié)合，創(chuàng)建了一個(gè)這樣的圖表，固定版面中內(nèi)容的結(jié)構(gòu)及邊距，來實(shí)現(xiàn)完美的布局。而這套方法，直到至今都仍在使用，大量的雜志排版、書籍排版都能看到這套方法的影子。

所以，網(wǎng)格的存在，最主要就是為了解決設(shè)計(jì)美感的問題，通過網(wǎng)格讓雜亂無章的信息能通過一個(gè)較好的結(jié)構(gòu)來進(jìn)行約束，保障信息高效傳達(dá)的同時(shí)，充分提升版面設(shè)計(jì)的美感。

1. 網(wǎng)格的結(jié)構(gòu)

網(wǎng)格實(shí)際上，是一種結(jié)構(gòu)，通過線的垂直或者相交，來構(gòu)建一個(gè)參考界線。通過這個(gè)參考界線，我們可以在一個(gè)單一的容器中，把容器里的內(nèi)容，以參考線進(jìn)行對(duì)齊，來有秩序的布局組織并羅列分布。從而實(shí)現(xiàn)一個(gè)較好的視覺秩序感，提升閱讀效率的同時(shí)增加美感。

因?yàn)榫W(wǎng)格是一種結(jié)構(gòu)，所以網(wǎng)格本身是不一定可見（少部分作品會(huì)使用網(wǎng)格做裝飾），但這種結(jié)構(gòu)會(huì)映射到內(nèi)容元素的布局，影響信息的排列美感及閱讀效率。所有在有確定了網(wǎng)格的邊界和約束后，設(shè)計(jì)師就可以根據(jù)網(wǎng)格，來對(duì)內(nèi)容的位置比例，進(jìn)行調(diào)整約束元素的坐標(biāo)，達(dá)到一個(gè)比較理想的版式設(shè)計(jì)。

環(huán)顧我們的生活周圍，實(shí)際上也能看到很多網(wǎng)格的運(yùn)用場(chǎng)景。比如我很喜歡的這套宜家網(wǎng)格柜子~

不過網(wǎng)格目前運(yùn)用的最為廣泛的場(chǎng)景，還是在書籍、雜志的版式設(shè)計(jì)中。實(shí)際上，網(wǎng)格系統(tǒng)誕生的初衷也是為了解決印刷制版的問題。所以從印刷術(shù)的興起，網(wǎng)格就開始誕生了 ，并演繹的越來越豐富，越來越系統(tǒng)。

2. 網(wǎng)格的制版

在平面設(shè)計(jì)中，網(wǎng)格系統(tǒng)更常見，特別是用于書籍的裝幀及印刷場(chǎng)景。所以如果有從事平面設(shè)計(jì)或者是從事視覺相關(guān)行業(yè)的同學(xué)，我推薦有機(jī)會(huì)也可以讀讀下面這本書。

這本書是由瑞士的設(shè)計(jì)師約瑟夫·米勒–布羅克曼 編寫的《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》，文中主要介紹了在平面設(shè)計(jì)中，網(wǎng)格的功能和使用方法，旨在為平面和空間的設(shè)計(jì)師們提供一個(gè)實(shí)際的工具，讓他們可以從概念、組織結(jié)構(gòu)和設(shè)計(jì)上更有效、 自信地處理和解決視覺問題。

書中很多方法及版式，基本上可以現(xiàn)學(xué)現(xiàn)用，掌握起來也非常方便。

「事實(shí)上，絕大多數(shù)的設(shè)計(jì)師都不知道、也不理解為什么要建立這樣的一個(gè)秩序系統(tǒng)。所以，如果想要合理、功能地運(yùn)用網(wǎng)格系統(tǒng)，那就必須仔細(xì)地研究網(wǎng)格的所有原理。只要不嫌麻煩，任何研究網(wǎng)格的人都會(huì)發(fā)現(xiàn)，在網(wǎng)格系統(tǒng)的幫助下，他都能更快地解決設(shè)計(jì)中的問題，并讓設(shè)計(jì)更具功能性、邏輯性和視覺美感。
——約瑟夫·米勒－布羅克曼 」

第二：網(wǎng)格的組成部分

講了網(wǎng)格的歷史，接下來咱們就開始講正式的網(wǎng)格使用方法啦。

目前網(wǎng)格設(shè)計(jì)主要運(yùn)用在兩大場(chǎng)景，一個(gè)是印刷讀物，比如海報(bào)、書籍、封面等，而另外一個(gè)就是電子設(shè)備的熒幕，比如 iPhone、iPad、Windows 等，常見于 APP 設(shè)計(jì)、H5設(shè)計(jì)及 Web 設(shè)計(jì)中。

在這些不同場(chǎng)景的網(wǎng)格設(shè)計(jì)中，都會(huì)有一些很通用的基礎(chǔ)組件部分，如邊距、列寬、水槽、以及交叉的模塊，正是這些基礎(chǔ)的元素組成了復(fù)雜的網(wǎng)格系統(tǒng)。所以在使用網(wǎng)格設(shè)計(jì)方法做圖之前，我們需要先了解每個(gè)元素的具體含義以及其具體用法。

1. 網(wǎng)格邊距

網(wǎng)格邊距指的是內(nèi)容外部邊緣距離容器的空白距離，在紙質(zhì)設(shè)備中，容器就是紙張的大小，在界面設(shè)計(jì)里，容器就是設(shè)計(jì)稿的尺寸分辨率。這個(gè)邊距，一方面是為了信息不超出安全距離，二方面也主要是為了讓內(nèi)容看起來，能更加的聚焦在中心區(qū)域，以防信息太過于貼邊導(dǎo)致的不利于閱讀。

在APP設(shè)計(jì)中，也會(huì)用到邊距這個(gè)概念?；贎2x尺寸，很多APP內(nèi)容到屏幕的邊距，都采用的是24px，比如淘寶、支付寶、微博等。但也有不少的APP采用的是32px的邊距，比如微信、QQ、知乎等，這個(gè)大家可以截圖，縮到750的寬度，自行量~~當(dāng)然，文章后面也會(huì)詳細(xì)講這塊怎么定比較好

2. 列寬及水槽

除去邊距，在內(nèi)容區(qū)域的中心部分，網(wǎng)格主要由列寬及水槽組成，列寬就是每列中間的寬度，水槽就是每兩列的中間預(yù)留區(qū)域。列決定網(wǎng)格的復(fù)雜程度，而水槽決定內(nèi)容的疏密程度。

3. 交叉模塊

這個(gè)指的就是網(wǎng)格中的交叉區(qū)域，實(shí)際上是一個(gè)空間單位。我們可以把固定的圖片或者是段落，直接填充在這個(gè)模塊里。當(dāng)然，后面也有案例來解讀。

所有的網(wǎng)格，基本上都是由上面的基礎(chǔ)元素組成。正是這些，組成了龐大且復(fù)雜的網(wǎng)格系統(tǒng) Gird System

第三：三種常見的網(wǎng)格

在我們的設(shè)計(jì)當(dāng)中，目前這三種網(wǎng)格最為常見，且這三種也能滿足我們?nèi)粘５拇蟛糠中枰?/p>

1. 單列網(wǎng)格

在咱們目前設(shè)計(jì)中，其實(shí)最常見的，就是這種單列的網(wǎng)格。這種單列的網(wǎng)格大多數(shù)以水平，或者是垂直的形態(tài)出現(xiàn)。比如你看到的現(xiàn)在咱們發(fā)的這篇文章，實(shí)際上它就是一種以水平形態(tài)的單列網(wǎng)格所組成，文字與文字中間的距離，就組成了水渠，它也是目前最簡單的一種網(wǎng)格。

這種其實(shí)我們用文字的行高，就可以控制了，不需要設(shè)置特別多的信息。保證每一列的距離是一樣的即可。

2. 多列網(wǎng)格

多列網(wǎng)格，顧名思義就是有多列的網(wǎng)格，會(huì)包含交叉關(guān)系。實(shí)際上，創(chuàng)建的列數(shù)越多，你的網(wǎng)格在使用過程中覆蓋面會(huì)越廣，能對(duì)齊的內(nèi)容也會(huì)越多，不過處理不好的話，信息也會(huì)越碎。

咱們根據(jù)這個(gè)網(wǎng)格，簡單排一些文字，看看效果

再把線去掉，順便加點(diǎn)顏色看看，再修飾一下細(xì)節(jié)~~

其實(shí)還是比較的簡單，當(dāng)然，我這個(gè)只是隨意拼湊，小伙伴們可以在收藏本文后，抽時(shí)間自己動(dòng)手試試~~相信肯定會(huì)比我這個(gè)好

3. 交叉網(wǎng)格

交叉網(wǎng)格也比較好理解，其實(shí)就是基于水平及垂直領(lǐng)域的交叉網(wǎng)格。這種網(wǎng)格的節(jié)奏感非常好，適合在海報(bào)、雜志、封面版本中使用。包括在部分App以及Web的場(chǎng)景中，也可以使用這種布局方式。

比如：

是不是明白許多啦，再強(qiáng)調(diào)一句，光看是不行的，這里我鼓勵(lì)各位小伙伴們，多動(dòng)手進(jìn)行練習(xí)嘗試，只有動(dòng)手了，這些知識(shí)才能轉(zhuǎn)化成你自己的能力！加油，奧利給！

第四：界面設(shè)計(jì)中，如何使用網(wǎng)格布局

那么在界面設(shè)計(jì)當(dāng)中，如何使用網(wǎng)格來約束版式，讓設(shè)計(jì)看起來更整齊、更規(guī)律、更美觀？其實(shí)方法一樣的，無非只是容器的不同。

1. 先定邊距

在規(guī)劃網(wǎng)格之前，咱們的第一步實(shí)際上是需要先定內(nèi)容到容器的邊距，這個(gè)邊距定好了后，咱們才能開始后面的網(wǎng)格制定。

通常在APP設(shè)計(jì)中，常見的邊距有24、32、40，這3個(gè)單位，信息比較密集的，通常會(huì)使用24這個(gè)單位，而信息比較寬松，偏工具型的產(chǎn)品，則會(huì)使用40的這個(gè)單位。當(dāng)然，也有很多產(chǎn)品，選擇了比較中立的32。

△ 圖中 ③ 綠色區(qū)域?yàn)檫吘啵?藍(lán)色區(qū)域?yàn)樗郏?紅色區(qū)域?yàn)檫吘?/h6>

在Web或者是PPT的封面設(shè)計(jì)中，由于屏幕本身就是橫向的，所以咱們的邊距可以定的更大一些，通常為100、200、300不等，這個(gè)可以根據(jù)個(gè)人風(fēng)格喜好來定。

2. 確定列數(shù)

在確定了邊距之后，很重要的一步就是需要確定列數(shù)了。定義使用多少列，這個(gè)直接會(huì)影響到頁面的信息疏密以及靈活程度。在APP設(shè)計(jì)中，比較流行的有 4-6 列，而在Web設(shè)計(jì)中，10-12 列則是非常的主流

在做PPT或者是網(wǎng)頁的時(shí)候，我最喜歡還是使用12列，因?yàn)樗鋵?shí)最靈活，而且大小不大不小，剛剛合適~~大家可以對(duì)應(yīng)下面這張圖（基于@1x），來決定自己設(shè)計(jì)稿中，列數(shù)的數(shù)量是多少。

3. 設(shè)定水槽寬度

邊距及列數(shù)都確定下來了后，咱們其實(shí)需要定的，就是水槽的寬度了。

在移動(dòng)端設(shè)計(jì)中，我建議水槽的距離，最小尺寸為16，其次以4為單位往上遞增，比如16、20、24、28、32、36，可以根據(jù)產(chǎn)品的類型來定義這個(gè)水槽的寬度。如果你的屏幕信息密度很高，那么我建議使用20、24這種小距離的，如果密度非常低，整個(gè)屏幕里都沒什么內(nèi)容，那么可以使用32、36等大水槽邊距。

在Web或者PPT封面設(shè)計(jì)中，則是以8為單位整加比較合適，比如16、24、32、40、48、56，這種大寬屏的尺寸，在定義水槽邊距的開放度會(huì)更高。

列跟水槽，sketch自帶的工具其實(shí)都可以實(shí)現(xiàn)，我們用這個(gè)工具，能很輕松的達(dá)到自己想要的效果。在PS里，可能更多的是需要靠自己繪制矩形量尺寸，然后來拉取輔助線。

4. 按照網(wǎng)格調(diào)整設(shè)計(jì)稿

待網(wǎng)格定好后，我們?cè)俑鶕?jù)網(wǎng)格，去制定界面中元素的間距及尺寸即可，盡量保證各個(gè)元素的垂直間距是一致的。

網(wǎng)格定義好了之后，其實(shí)后面就很簡單了，就是按照網(wǎng)格，咱們來約束內(nèi)容的邊界了，我們可以通過手動(dòng)把文字的邊距，或者圖片的尺寸，來控制到跟網(wǎng)格一樣大小，調(diào)整整個(gè)頁面的和諧程度。

第五：熟練掌握&插件提效

方法掌握了后，實(shí)際上就是需要自己日常多收藏一些優(yōu)秀的網(wǎng)格作品，其次多加練習(xí)，尋找網(wǎng)格排版的手感。畢竟只有不斷練習(xí)，不斷發(fā)現(xiàn)問題、總結(jié)問題，你才能牢牢的掌握知識(shí)，提升自己的動(dòng)手能力。

不要完全被網(wǎng)格約束

網(wǎng)格實(shí)際上也只是一種參考線，并不是需要完全約束內(nèi)容，比如有的文字長度會(huì)超出網(wǎng)格線，實(shí)際上完全參考網(wǎng)格，也會(huì)出現(xiàn)問題。所以網(wǎng)格最終只是參照，不要完全刻意約束，避免出現(xiàn)適得其反的效果。

橫向的水槽高度需要保持統(tǒng)一

在APP設(shè)計(jì)中，不同信息的高度不一致，所以我們很難用等距網(wǎng)格去約束它，更多的時(shí)候是去約束模塊與模塊的間距。在那種大模塊與大模塊的間距中，咱們的水槽高度盡量保持統(tǒng)一。

2. 網(wǎng)格插件神器下載

最后為了方便大家制定網(wǎng)格，我這里也給大家推薦一些制定網(wǎng)格的插件神器，非常好用，推薦指數(shù)五顆星。

Bootstrap Grid（ Sketch 使用）

用這個(gè)插件，可以在 Sketch 里輕松創(chuàng)建自定義網(wǎng)格，不需要那么多繁瑣的設(shè)置，簡單兩步就能搞定！

還支持針對(duì)不同的尺寸，自定義生成不同的網(wǎng)格參考線~~

flavor（ Sketch 使用）

部分文獻(xiàn)參考資料

• 「A Brief History of Grids,」 Lucienne Roberts, Graphics
• 「The Secret Law of Page Harmony,」 Retinart
• 「Responsive layout grid 」Material Design Team
• 「Building Better UI Designs With Layout Grids」

原文：UX小學(xué)

◇◆ 1.中文搭英文 ◆◇

◇◆ 2.加 Icon ◆◇

◇◆ 3.點(diǎn)線搭配 ◆◇

◇◆ 4.加色塊 ◆◇

◇◆ 6.加一組線 ◆◇

◇◆ 7.加符號(hào) ◆◇

◇◆ 8.變換字體 ◆◇

◇◆ 9.上下方加線 ◆◇

◇◆ 10.錯(cuò)位排版 ◆◇

◇◆ 11.加序號(hào) ◆◇

結(jié)語

除了以上11個(gè)技巧外，也還有很多其他的小標(biāo)題設(shè)計(jì)方式，但無論怎么做，我們的目的是為了使小標(biāo)題的信息更突出，使整個(gè)版面更有細(xì)節(jié)和設(shè)計(jì)感，除此之外，小標(biāo)題的設(shè)計(jì)風(fēng)格一定要與整體的設(shè)計(jì)風(fēng)格保持一致。

原文地址：蔥爺（公眾號(hào)）

作者：蔥爺

一、多圖排版設(shè)計(jì)案例

在這里的排版案例中，有多種不同場(chǎng)景使用了多圖的排版方式，有宮格、無序、時(shí)尚、文藝等排版方式可以參考。

二、以電影海報(bào)為案例的多圖排版作品

電影海報(bào)99%都是需要圖像才會(huì)有吸引力，所以拿電影作品作為參考對(duì)象也是不錯(cuò)的選擇哦，而這里我們只挑選多圖排版的電影海報(bào)。

#p#副標(biāo)題#e#

三、多圖排版的5個(gè)技巧

看了這么多案例還是不知道怎樣多圖排版？那么試試這5個(gè)技巧，讓你的多圖版式更加美觀實(shí)用吧！

1. 統(tǒng)一尺寸編排

這種編排在很多設(shè)計(jì)中較為常用的方法，版面視覺整齊清晰，但容易缺少變化。這里不建議多個(gè)頁面都使用這一種方法，會(huì)顯得更加單調(diào)。

2. 不同尺寸編排

一般來說，尺寸大的東西比尺寸小的更容易吸引注意力，這點(diǎn)對(duì)于圖片也是一樣。所以利用不同尺寸的圖片可以讓整體版面產(chǎn)生節(jié)奏變化，也是區(qū)分層級(jí)關(guān)系的有效手段。合理的調(diào)整圖片大小，把圖片的主次關(guān)系和層次感體現(xiàn)出來，讓版面更顯張力。

3. 與色塊結(jié)合

色塊除了有突出區(qū)分和修飾的用途，還有信息間引導(dǎo)的作用。而圖片與色塊組合在一起可以削弱版面的單調(diào)性，還能吸引讀者注意和引導(dǎo)閱讀視線，保證版面形式與內(nèi)容形成統(tǒng)一感。不過注意色塊的顏色不宜過多，可吸取圖片的顏色進(jìn)行配色。

4. 不同形狀展現(xiàn)

圖片在版式設(shè)計(jì)中占有很大的比重，如果改變圖片的形狀來編排，在視覺上可以讓版面更豐富。

5. 嘗試去底圖

這種處理方式比較靈活，沒有固定的規(guī)律。由于摳出來的圖形是沒有背景的，因此去底圖可以更好地與其它視覺元素搭配使用，更顯設(shè)計(jì)感和空間感。

今天的到這里，建議收藏本文，遇到多圖文排版的時(shí)候，可以從本文的獲取靈感。

感謝閱讀！

作者： 周妙妍，來源：版式設(shè)計(jì)很簡單

“格式塔心理學(xué)”是對(duì)人類視覺工作原理研究。此項(xiàng)研究提出人類的視覺是一個(gè)整體，眼睛所看到的事物都是經(jīng)過大腦整體化處理，所以我們是以整體形式感知事物而不是個(gè)體元素。其中，最重要的格式塔原理有著幾個(gè)：接近性原理；相似性原理；連續(xù)性原理；封閉性原理；對(duì)稱性原理；主體/背景原理。

在此篇文章中，我們重點(diǎn)介紹前三個(gè)，而這三個(gè)也是在版面中運(yùn)用最廣泛最基礎(chǔ)的。

一、 格式塔原理在版面中的應(yīng)用

1.1 接近與信息關(guān)聯(lián)性

何為接近原則？即我們視覺會(huì)把彼此接近的元素看成一個(gè)整體。

所以，在排版的時(shí)候我們可以將相關(guān)聯(lián)的元素彼此接近，不相關(guān)的元素彼此遠(yuǎn)離，以此來區(qū)分不同的信息集。

建立不同組合的方式有很多種，但是以接近性原則最為基礎(chǔ)和重要。即便每個(gè)元素的顏色形狀不同，但只要彼此接近，也能夠在視覺上形成一組。

例如：聯(lián)合利華LOGO的諸多元素因?yàn)楸舜私咏?，所以我們很輕易的能夠辨認(rèn)出輪廓“U”。

那么接近原則在版面中是如何運(yùn)用的呢？其實(shí)就是將相關(guān)聯(lián)的信息彼此靠近，不相關(guān)的信息彼此遠(yuǎn)離的過程。

在這個(gè)名人名言的案例中，標(biāo)題與內(nèi)容之間的距離完全相等，我們很大程度上就會(huì)產(chǎn)生哪段標(biāo)題對(duì)應(yīng)哪段文字的疑惑。

如果我們將接近性原則處理好之后會(huì)發(fā)生什么？

當(dāng)我們把相對(duì)應(yīng)的名人名言互相貼近，不相關(guān)的互相遠(yuǎn)離后，其閱讀障礙就不存在了，誰說了那句話一目了然。

接近性原則不但可以處理標(biāo)題與文字，還可以處理各種各樣的元素。

在此案例中，圖片與文字距離過遠(yuǎn)，缺乏聯(lián)系感。而圖片之間又過近，組合不分明。接近性沒有做好，所以造成了畫面整體偏散的問題。

當(dāng)我們用接近性原則將相關(guān)聯(lián)的圖文信息組合在一塊后，版面更易閱讀，哪個(gè)人物對(duì)應(yīng)哪個(gè)名字也不會(huì)出錯(cuò)了。

我們?cè)賮砜匆幌逻@組信息，需要用以下信息做一個(gè)中英文結(jié)合的名片。

首先，要做的還是把接近性原則處理好，把姓名職位、英文名、聯(lián)系方式、地址等通過接近性原則劃分為不同的組合。

右邊經(jīng)過接近性原則處理后的更易閱讀，哪塊信息說了什么也十分明顯，剩下的我們只需要把劃分好的組合選擇合適的字體，并排列到名片的版面中。

（Ps：關(guān)于如何選字體下文會(huì)講到）

利用好接近性原則我們可以不斷嘗試已經(jīng)分好組的元素在版面中的位置，在確保每組距離的同時(shí)保證版面的平衡性即可。

利用接近性原則可以不斷的去調(diào)整位置形成新的版面。

以上都是以接近性原則為基礎(chǔ)延伸出的不同布局的名片。

1.2 相似與版面統(tǒng)一性

接近性原則強(qiáng)調(diào)的是位置對(duì)我們視覺的影響，而相似性原則強(qiáng)調(diào)視覺元素的內(nèi)容對(duì)視覺的影響，如顏色、形狀、大小、方向等等。如果其他因素一樣，只有這些內(nèi)容不同，那么我們的視覺會(huì)把相似的內(nèi)容看成一個(gè)整體。

在同一組圖形中，顏色或者形狀相似的元素會(huì)形成一個(gè)視覺單元。

同樣的原理，在一組圖形中大小或方向相似的元素也會(huì)形成一個(gè)視覺單元。

相似性原理在版面上是如何去運(yùn)用的？

首先，利用相似性原理可以把不和諧的元素和諧化。

三張圖片的色調(diào)不同，強(qiáng)行組合在版面中并不和諧。

將色調(diào)處理成統(tǒng)一版面也會(huì)更加和諧。

不同的數(shù)字表現(xiàn)方式使版面凌亂不堪。

將數(shù)字的特征相似化后整體的風(fēng)格更統(tǒng)一，版面也沒了凌亂的感覺。

相似性原理除了可以和諧的處理版面之外還可以著重突出重點(diǎn)的元素。

我們只需要將想要突出的元素去掉相似特征就可以了，使之異于其他相似的元素。

此例中用不同的色彩使已完成、待進(jìn)行、正在處理的流程區(qū)分開來。而“已完成”的步驟其顏色則是一樣的；“未完成”之間的色彩也一致，這正是相似原則的突出運(yùn)用。

1.3 連續(xù)性原則與視覺邏輯

比起相似的事物，我們的視覺更容易感知到連續(xù)的事物，使之成為一個(gè)整體。

以上圖而言，雖然全部是虛線的點(diǎn)，但我們依然可以辨認(rèn)出他們的幾何形狀。有很多LOGO造型也是運(yùn)用了連續(xù)性的，比如IBM。

分割開的圖片我們依然能夠識(shí)別出內(nèi)容，也說明了視覺是連續(xù)的。連續(xù)性在排版設(shè)計(jì)中一般用于解決元素散亂、視覺邏輯的問題。

為解決這個(gè)問題，我們可以加入其它元素，建立連續(xù)性。

通過線條的穿插表現(xiàn)，我們的視覺得到了很好的引導(dǎo)，解決了不知按什么順序閱讀的問題。另外線條使四個(gè)點(diǎn)連成了一個(gè)整體，點(diǎn)與點(diǎn)之間具備了連續(xù)性，散亂的問題也得到了很好的解決。

線條的走向也會(huì)對(duì)我們的閱讀順序產(chǎn)生重大的影響。

這里考一下大家，如何利用連續(xù)性原則將上圖比較散的年份和日期建立聯(lián)系感？（要求：不能改變兩者的距離。）

好了，時(shí)間結(jié)束啦，我們看一看答案吧。

另外，我們的視覺流向也會(huì)被畫面中的目光朝向所影響。

我們現(xiàn)在要將BIG Cat 放到畫面里面，放到什么位置最能讓別人注意到？

放到這里雖然感覺也沒問題，但是如果字再小一點(diǎn)，圖片顏色再深一點(diǎn)就非常容易讓觀者遺漏此信息。

將“BIG Cat”放到貓咪目光的延伸線上則會(huì)非常容易使人注意到。

二、 素材的精致程度

素材的精致程度對(duì)版面的優(yōu)劣也有非常大的影響，素材的精致程度主要體現(xiàn)在三個(gè)方面，分別是清晰度、契合度和表現(xiàn)力。

2.1 清晰度

清晰度相信不用多說了吧，清晰度的優(yōu)劣直接會(huì)影響我們作品的品質(zhì)。

如下圖中這類素材清晰度不夠，排版就會(huì)毀于素材。

調(diào)換成足夠清晰度的素材，畫面也會(huì)精致很多。

2.2 契合度

契合度就是素材與主題的關(guān)聯(lián)程度。

如果一個(gè)表現(xiàn)體育的主題你去找一張美食的圖片，那么毫無關(guān)聯(lián)程度，必然是錯(cuò)的。

上圖左側(cè)的案例文字是狗，但素材圖卻是個(gè)豹子，于是就成了契合度不夠的典型。

同樣是書法培訓(xùn)的海報(bào)，左側(cè)的用到太多不相關(guān)的元素，廟宇、竹子、山川等等，與主題的契合度不夠。而右側(cè)的案例僅僅只用了書法筆觸的素材，但契合度和表現(xiàn)力卻比左側(cè)好很多。另外，右側(cè)文字的編排在接近性、連續(xù)性上也比左側(cè)案例好很多。

2.3 表現(xiàn)力

表現(xiàn)力有多重形式，如創(chuàng)意性、光影出色、層次感強(qiáng)等等。

比如我們找一個(gè)舞者的素材，下圖左側(cè)這種就屬于表現(xiàn)力不夠的。

左側(cè)的素材常見，造型、創(chuàng)意以及美感都差強(qiáng)人意，缺乏感染力自然表現(xiàn)力就不夠。相比較，右側(cè)素材的光影以及美感非常好，表現(xiàn)力就會(huì)強(qiáng)很多。

上圖兩案例也屬于表現(xiàn)力非常好的素材，我們?cè)谧雠虐鏁r(shí)，如果要用素材就要用表現(xiàn)力過關(guān)的素材，這樣作品才會(huì)更有美觀與設(shè)計(jì)感。

三、 字型選擇的重要性

字型在我們?cè)O(shè)計(jì)中是非常重要的，甚至可以上升到設(shè)計(jì)之魂的高度。字型選擇是否正確對(duì)版面的影響是決定性的。

在講字型之前我們先看一個(gè)案例。

這個(gè)生命科學(xué)的海報(bào)看上去怪怪的，究竟怪在哪里呢？實(shí)際上，是字體應(yīng)用不得當(dāng)?shù)膯栴}。案例中用的是襯線體與宋體，而這兩個(gè)都是傳統(tǒng)型字體，表達(dá)不出生命科學(xué)所擁有的嚴(yán)謹(jǐn)感與現(xiàn)代醫(yī)學(xué)的科技感。

當(dāng)我們將字體換成無襯線體與黑體后是不是就順眼多了。無襯線體更加現(xiàn)代，與要表達(dá)的主題氣質(zhì)契合。由此可見字型選不對(duì)，就很容易毀掉你的作品。要選對(duì)字型首先要對(duì)字體的氣質(zhì)有一定的了解，接下來重點(diǎn)介紹襯線體、無襯線體、黑體、宋體所具備的不同的氣質(zhì)。

3.1 襯線體與宋體

襯線體，即有襯線裝飾特征的字體；宋體，即筆畫有粗細(xì)變化，并且轉(zhuǎn)折處有三角裝飾特征的字體。襯線體與宋體一般都具有傳統(tǒng)的氣質(zhì)，能夠表現(xiàn)一定的文化感、歷史感，并且具有強(qiáng)烈的人文主義感。

襯線體還可詳細(xì)分為偏傳統(tǒng)和偏現(xiàn)代的類型，主要是看他們的橫豎筆畫的粗細(xì)對(duì)比度與簡潔程度區(qū)分。

左側(cè)傳統(tǒng)型襯線體粗細(xì)對(duì)比相差比較小，襯線也比較圓潤復(fù)雜，襯線連接處呈圓角；右側(cè)現(xiàn)代型襯線體粗細(xì)對(duì)比相差非常大，襯線連接處呈直角，簡單直接。

偏傳統(tǒng)襯線體的代表有Garamond、Caslon等，它們的傳統(tǒng)氣質(zhì)非常強(qiáng)烈，適合傳達(dá)傳統(tǒng)、文藝、人文的氣質(zhì)與故事感。

說完偏傳統(tǒng)的咱們?cè)賮碚f一下偏現(xiàn)代的。

偏現(xiàn)代襯線體的代表有Didot、Bodoni、Walbaum等，它們?cè)诒Ａ粢r線的同時(shí)又有很強(qiáng)的現(xiàn)代感，粗細(xì)對(duì)比也比較大，能夠傳達(dá)出優(yōu)雅、女性、高端、時(shí)尚的氣質(zhì)，因此很多時(shí)尚雜志、女性產(chǎn)品選擇此類型的字體。

既然襯線體分為傳統(tǒng)襯線與現(xiàn)代襯線，那么宋體也是一樣。

按照宋體裝飾三角的復(fù)雜程度也可分為傳統(tǒng)宋體與現(xiàn)代宋體。

常用的傳統(tǒng)宋體有方正標(biāo)宋、書宋、報(bào)宋、筑紫明朝、王漢宗明體等；而常用的現(xiàn)代宋體有方正雅宋系列、思源宋體、小塚明朝等。

傳統(tǒng)宋體與現(xiàn)代宋體所傳達(dá)的氣質(zhì)也有差別。傳統(tǒng)的宋體更能夠表現(xiàn)出文藝、故事、人文的感覺；而現(xiàn)代宋體則偏向傳遞女性優(yōu)雅、時(shí)尚的感覺。

介紹完宋體與襯線體的相同與不同后我們?cè)賮碚f一下他們之間應(yīng)該如何混合搭配。

搭配原則其實(shí)不難，總結(jié)就是一句話：

以這個(gè)搭配原則我們看一下下面這個(gè)案例。

第一組搭配為方正風(fēng)雅宋與其自帶的英文，顯然是不匹配的；第二組為方正風(fēng)雅宋+Garamond，現(xiàn)代宋體搭配傳統(tǒng)襯線體，顯得也不倫不類，不和諧；第三組為現(xiàn)代宋體搭配現(xiàn)代襯線Didot，所以非常和諧。

這一組也是一樣，只有第三組傳統(tǒng)宋體+傳統(tǒng)襯線體最為和諧。盡管第一組自帶的英文也可勉強(qiáng)劃分到傳統(tǒng)襯線里面，但他的筆畫特征與中外完全不同，因此也非常難匹配。

所以搭配的時(shí)候不僅要?dú)赓|(zhì)相匹配，其筆畫特征也應(yīng)該是相似的。

3.2 無襯線體與黑體

無襯線體，即沒有襯線修飾的字體。

黑體也是沒有三角形裝飾特征的字體，相較于襯線體與宋體而言，其更為簡約、現(xiàn)代，能夠表達(dá)理性、利落的特質(zhì)。

無襯線體根據(jù)其字母的結(jié)構(gòu)關(guān)系可以分為常規(guī)型、人文型、幾何型三類。

其中常規(guī)型無襯線體是最常見最普通的，可以說是最沒個(gè)性的；人文型無襯線體的筆畫并不是等寬的，而是有過渡過變化，S、C等字母的切口也是寬的，給人的感覺很秀麗、優(yōu)雅，同時(shí)又具有一點(diǎn)文藝氣質(zhì)；幾何型無襯線體更像是用幾何形狀切出來的，給人的感覺很簡約、時(shí)尚、現(xiàn)代。

常見的常規(guī)型無襯線體有Helvetica、Univers、DIN等，它們給人的感覺是現(xiàn)代、理性、嚴(yán)謹(jǐn)?shù)?，同時(shí)也是最沒個(gè)性的。

因?yàn)槠錄]有特別的個(gè)性，所以字體的包容性非常廣，有話云：當(dāng)你不知道用什么字體時(shí)，就用Helvetica。由此可見其用途廣泛程度。

人文型無襯線體的代表為Gill Sans、Optima、Stone Sans等，它們給人感覺是理性與感性并存，是很有溫度的一類字體；它們也能傳達(dá)優(yōu)雅、秀麗、人文的氣質(zhì)。

幾何型無襯線體的代表有Ftura、Avalon、Avant Garded等，這種字體有強(qiáng)烈的幾何感，顯得很現(xiàn)代、高端。

相對(duì)于無襯線體，黑體的分類就比較簡單了，按照有無喇叭口的原則只將其分為常規(guī)型黑體與人文型黑體。無喇叭口的黑體為常規(guī)型，有喇叭口的為人文型。

常見的常規(guī)型黑體有思源黑體、微軟雅黑、漢儀旗黑、方正蘭亭黑等；常見的人文型黑體有默認(rèn)黑體和冬青黑體。

黑體與無襯線體的搭配比襯線體和宋體要簡單，只需要選擇精致的字體，并統(tǒng)一好字重和筆畫形式便可。

四、 案例演示

此部分我們用“東方藝蘊(yùn)”的海報(bào)來作為案例，來看看如何運(yùn)用以上的知識(shí)點(diǎn)運(yùn)用到版面設(shè)計(jì)中去。

首先我們看一下同學(xué)的原作極其所存在的問題。

第一點(diǎn)，是所用的素材不夠精致，不管是層次感還是表現(xiàn)力都非常的差。

第二點(diǎn)，是字形選擇上的錯(cuò)誤，中文與英文的搭配也并不合理。

第三點(diǎn)，是接近性原則沒有處理好，版面的層級(jí)關(guān)系也沒有劃分好，所以顯得很碎且雜亂無章。

知道問題后我們來逐一解決就可以了。

問題一：“素材的精致程度不夠”

首先來看第一點(diǎn)，素材的精致程度。

隨著此素材層次感和表現(xiàn)力都不太好，但也并不是完全沒救，我們只需要在PS里處理一番，提高其層次感和表現(xiàn)力。

處理后素材的層次感通過浮雕效果表現(xiàn)了出來，增添一些東方韻味。對(duì)其色階、對(duì)比度的調(diào)整更使其表現(xiàn)力增加了幾分。

雖然調(diào)整好了，但素材的負(fù)空間比較多，比較零碎，所以我們可以為他加入一個(gè)底，最好貼合著形體來，我這里加了一個(gè)漸變的圓形，形式貼近中國特色民族傳統(tǒng)工藝之一的刺繡，與活動(dòng)主題契合不少。

現(xiàn)在主體非常飽滿了，但后面的圓形缺乏層次感，為了解決這個(gè)問題我們可以去找一些紋理的素材疊加上去。

當(dāng)我們把紋理疊加上去后，其視覺表現(xiàn)更豐富了，層次感也比之前強(qiáng)很多，至此素材精致度的問題已經(jīng)得到了解決。

Ok，我們可以將處理好的素材置于版面之中作為主體，如下：

現(xiàn)在主體在版面中的大小已經(jīng)調(diào)整的比較合適了，剩下的我們只需要在主體以外的區(qū)域編排上文字信息便可。

在此圖中能夠放置文字信息的區(qū)域也就只有上下兩部分，如下：

問題二：“中西文字體搭配不合理”

了解文字編排的位置之后，我們需要解決第二個(gè)問題，也就是中西文字體搭配的問題。

在做之前，我們首先應(yīng)思考其表達(dá)的主題是什么，是傳統(tǒng)的感覺還是現(xiàn)代的感覺、該用黑體還是宋體？東方藝蘊(yùn)明顯是東方的藝術(shù)展，非常有文化感與藝術(shù)性，所以黑體與無襯線體肯定是不合適的，我們應(yīng)該選擇能夠表現(xiàn)文化屬性的宋體類字形。在宋體字形里面我們也要避開具有時(shí)尚、現(xiàn)代氣質(zhì)的，而要選用傳統(tǒng)的、有文化性的字體——傳統(tǒng)宋體。

確定好中文宋體的類型之后我們還要去確定英文字形，根據(jù)我們上文所說的傳統(tǒng)配傳統(tǒng)的法則，上面三個(gè)搭配中只有王漢宗明體與Garamond的搭配最為合適。

字型都確定好后便可以進(jìn)入排列文字信息的環(huán)節(jié)。

問題三：“接近性原則、層級(jí)關(guān)系沒有處理好”

首先，把主標(biāo)題放上去，但主標(biāo)題字與字直接空隙太大，有些散，怎么解決這個(gè)問題呢？

根據(jù)我們上文所說，在字與字之間加入連接性的符號(hào)就可以了，這樣建立了連續(xù)性，使其成為了一個(gè)視覺組合。

其他的信息也按照接近性的原則排列上去，注意相關(guān)聯(lián)的信息互相接近；不相關(guān)的信息互相遠(yuǎn)離。

現(xiàn)在，版面的結(jié)構(gòu)已經(jīng)成型了，剩下時(shí)間日期這里顯得有些散。

同樣我們也為其加入連接性的符號(hào)組織到一個(gè)視覺單元里去，那么其整體的效果就會(huì)好不少。

深灰色背景太單調(diào)了，所以我們可以另找一個(gè)密一點(diǎn)的紋理素材疊加上去。

疊加上去之后我們看一下其局部效果，

再看一下整體的效果和運(yùn)用效果。

至此，這個(gè)案例也就完成了。

總結(jié)

1.  要做好版面一定要去選擇精致的素材作為主體，素材的精致與否很大程度上能夠決定版面的優(yōu)劣。素材不夠精致，可以二次處理，二次處理也搶救不了的素材就趕緊換吧。

2.  素材的精致程度是其一，有了精致的素材還需要通過格式塔原理將信息的層級(jí)拉開。用接近性原則處理好信息的貼近與遠(yuǎn)離；用相似性原則平衡版面不同元素間的視覺和諧度，也可用此原則強(qiáng)調(diào)需要突出的信息；用連續(xù)性原則使散亂的信息形成整體，建立視覺邏輯。

3.  字體選擇和中英文搭配要契合項(xiàng)目的氣質(zhì)，并且筆畫特征相似。一定不要隨意的去選擇字體，每種字形都有其特定的氣質(zhì)，只有選擇正確的字形，版面所傳達(dá)的主題氣質(zhì)才會(huì)更加明確。

原文地址：大貓?jiān)O(shè)計(jì)（公眾號(hào)）
作者：大貓Sunjay

接下來大家一起看看標(biāo)題文字的排版的12個(gè)技巧：

1.加序號(hào) 

類似于幾大優(yōu)勢(shì)、幾大特點(diǎn)、幾個(gè)方法之類的內(nèi)容，可以按照排列順序給小標(biāo)題加上對(duì)應(yīng)的序號(hào)，這么做可以加深讀者的印象，也能使內(nèi)容更清晰、更便于閱讀。

序號(hào)一般是用阿拉伯?dāng)?shù)字表示，其表現(xiàn)方式可以把其拉大、填充不同的顏色、添加色塊等，使其與標(biāo)題文字形成對(duì)比。

2.上下方加線 

即在小標(biāo)題的上下方分別加一條直線，形成線夾字的效果，而且線離文字不能太近，要留給標(biāo)題文字足夠的空間。這種處理方式比較簡單，但也能有效突出小標(biāo)題，且給人的感覺比較優(yōu)雅，適合于文字比較多版面。

3.中文搭英文 

如果只是把小標(biāo)題的字號(hào)加大，效果會(huì)比較單調(diào)，把中文標(biāo)題翻譯成英文，然后讓其跟在中文的后面或下面，就可以使標(biāo)題更加豐富、更加國際化。此方法適合文字比較少的小標(biāo)題。

4.加 Icon 

這是一種很常見的小標(biāo)題設(shè)計(jì)技巧，通常的做法是根據(jù)小標(biāo)題的文字設(shè)計(jì)一個(gè)與其相關(guān)的圖形，然后把它放在相應(yīng)標(biāo)題的前面或上面。這么做可以增加小標(biāo)題的吸引力，同時(shí)也可以使整個(gè)版面更美觀、更有細(xì)節(jié)。

5.點(diǎn)線搭配 

通過在小標(biāo)題前面增加“點(diǎn)”來使其更突出，也是設(shè)計(jì)小標(biāo)題的常用手法，不過這么做會(huì)顯得過于簡單，感覺沒下功夫，所以我們還可以在小標(biāo)題的后面增加一條直線，并使線條與正文對(duì)齊，或延伸到版面之外，這么做既增加了小標(biāo)題的設(shè)計(jì)感，也使其更加平衡。該技巧也適合文字較少的標(biāo)題，且同一版面中不會(huì)有太多小標(biāo)題的情況。

6.加色塊 

加色塊也是很常用的方式，但很多人只會(huì)粗暴地把文字放在一個(gè)矩形色塊里，這么做雖然可以使小標(biāo)題更突出，但不夠精致、靈活，也不太美觀。所以，我們需要在色塊的設(shè)計(jì)上多下一點(diǎn)功夫，比如把它設(shè)計(jì)成某個(gè)圖形，或者增加一點(diǎn)裝飾元素等。

7.加線框 

線框的視覺沖擊力沒有色塊那么強(qiáng)，但也因此線框沒有色塊那么容易顯得突兀。如果只是給文字增加一個(gè)矩形線框，效果通常不會(huì)太好，所以我們可以在線框的造型上做些文章，或者在一個(gè)標(biāo)題中使用兩個(gè)線框，以增加其設(shè)計(jì)感與視覺沖擊力。

8.加一組線 

即把線重復(fù)排列形成面的效果，然后將其置于標(biāo)題文字底層，線組成的面比色塊更靈活、更透氣，不過重復(fù)的線條會(huì)影響到文字的識(shí)別性，所以通常要給文字描邊。

9.加符號(hào) 

這是一個(gè)很簡單的方法，一般是用特殊符號(hào)把標(biāo)題文字夾在中間，目的也是為了起到突出和裝飾的作用，該處理方式比較低調(diào)，適用于比較簡約、優(yōu)雅的版面。

10.變換字體 

簡單的變換一下字體也可以做出效果不錯(cuò)的標(biāo)題設(shè)計(jì)，即給標(biāo)題配一種與正文字體視覺差異比較大的字體，同時(shí)還需要將字號(hào)加大，并填充其他顏色，使其與正文形成鮮明的字體對(duì)比、大小對(duì)比、顏色對(duì)比。。

11.上下方加線 

即在小標(biāo)題的上下方分別加一條直線，形成線夾字的效果，而且線離文字不能太近，要留給標(biāo)題文字足夠的空間。這種處理方式比較簡單，但也能有效突出小標(biāo)題，且給人的感覺比較優(yōu)雅，適合于文字比較多版面。

12.錯(cuò)位排版 

錯(cuò)位排版比對(duì)齊排版更靈活，而且也能使小標(biāo)題更特別，通常的做法是把小標(biāo)題的字號(hào)加大，并把正文往小標(biāo)題的后方移動(dòng)1-2個(gè)字的距離，這一技巧常用于折頁、單頁的排版中。

作者：蔥爺（id:congyenanian）

圖片的對(duì)比方式可以通過“比較”來定義，如果在版面出現(xiàn)多個(gè)同等或不同等性質(zhì)關(guān)聯(lián)的元素時(shí)，先將版面一分為二形成對(duì)稱構(gòu)圖，再對(duì)元素進(jìn)行對(duì)比編排。

01、同等性對(duì)比方式

將同等性質(zhì)的元素以對(duì)稱的構(gòu)圖進(jìn)行編排。如果使兩者對(duì)比更加強(qiáng)烈，可以通過顏色對(duì)比，使版面形成視覺性對(duì)比。

02、不同等性對(duì)比方式

將不同等性質(zhì)的元素以對(duì)稱的構(gòu)圖進(jìn)行編排。這樣的視覺性比較不僅可以突出對(duì)成要素的差異，而且更簡單明確地表現(xiàn)出不同事物之間的區(qū)別性。

03、輪廓合并對(duì)比方式

通過兩者的輪廓結(jié)構(gòu)合并形成一個(gè)新的創(chuàng)意組合，因而很好的對(duì)比出兩者的差異性。前期是兩者組合的輪廓要有相似度，否則會(huì)破壞整體的對(duì)稱性。

作者：周妙妍 | 來源：版式設(shè)計(jì)很簡單

//  一、區(qū)隔信息  //

區(qū)隔信息是斜線最常見的用法，通常用來區(qū)隔左右、左上和右下兩部分的信息，用斜線區(qū)隔的內(nèi)容不需要對(duì)齊排列，這樣看起來更靈活一點(diǎn)。

在海報(bào)設(shè)計(jì)中就經(jīng)常用斜線來區(qū)隔年月日等日期信息。

//  二、切割元素  //

很多簡單的元素完整呈現(xiàn)出來時(shí)會(huì)顯得很普通，這時(shí)依據(jù)斜線將其切割可以增加設(shè)計(jì)感，即切除元素的局部，只保留元素剩余的部分以及斜線，元素被切割后的不完整性會(huì)增加元素的獨(dú)特性和神秘感，所以更容易讓人眼前一亮。

PS：切割的時(shí)候要注意保留元素的美觀性和識(shí)別性。

//  三、裝飾  //

由于斜線具有一定的動(dòng)感，通過重復(fù)排列后又具有節(jié)奏感，且線本身占面積比較小，不會(huì)對(duì)畫面造成太大干擾，所以很適合用作裝飾元素，斜線主要是從以下幾方面來起到裝飾作用的。

1.增加動(dòng)感

一些以文字為主且文字是水平或垂直排列的設(shè)計(jì)，可能會(huì)因?yàn)樘^常規(guī)或缺少對(duì)比而缺乏動(dòng)感，這時(shí)在文字周圍增加一些平行的斜線，使其與主體形成方向?qū)Ρ?，就可以大大提升該設(shè)計(jì)的動(dòng)感。

2.增加氛圍

比如在一些促銷設(shè)計(jì)中，如果畫面中缺少裝飾元素的點(diǎn)綴，那么促銷的氛圍也可能會(huì)有所欠缺，這種情況下，我們也可以通過增加斜線來改善，這里使用的斜線可以有粗細(xì)和顏色的變化。

PS：斜線的方向要統(tǒng)一。

3.增加細(xì)節(jié)

比如很多畫面的背景太單調(diào)，我們就可以把重復(fù)排列的斜線放進(jìn)背景里做底紋，這樣的背景感覺更豐富，而且用斜線做底紋不會(huì)對(duì)主體造成太大干擾。

PS：把斜線排成一個(gè)圓，具有不錯(cuò)的裝飾效果。

//  四、平衡  //

在排版時(shí)可能會(huì)遇到這樣的情況，比如我們想采用某種形式排版，但由于缺少內(nèi)容或圖片輪廓有限制，所以這么排會(huì)引起版面的失衡，這時(shí)可以用斜線來填充空白，以達(dá)到版面平衡的效果。

//  五、創(chuàng)造形式  //

由于設(shè)計(jì)的版面通常都是矩形的，以至于斜線天生就顯得比較特別，所以在設(shè)計(jì)中合理的使用斜線可以增加其設(shè)計(jì)感。

例如下面這張海報(bào)作品，如果沒有中間的斜線它也會(huì)是一件不錯(cuò)的版式作品，但是有點(diǎn)常規(guī)，所以設(shè)計(jì)師用一根斜線穿過整個(gè)畫面，打破了這種常規(guī)，給這件作品帶來一種不一樣的感覺。

PS：貫穿畫面的斜線不能影響文字的識(shí)別性，且不能從人物的臉部穿過。

本篇文章來源于微信公眾號(hào)：蔥爺（ id:congyenanian）

一、單圖排版

1.平鋪

即把圖片鋪滿整個(gè)版面，這種處理方式多用于封面設(shè)計(jì);

或者在內(nèi)頁中把某一半版平鋪一張大圖，另一半則排列文字或者小圖。

平鋪的圖片比較有張力，有視覺重心的圖片適合這么處理，例如下圖平鋪的效果就一般般。

還有一種情況是把圖片當(dāng)做背景時(shí)，也可以采用平鋪，如下圖。

2.四周留白

即圖片要比版面小，并讓其四周都留出空白，這里也分兩種情況，一是圖片位于版面正中央，圖片周圍的留白是對(duì)稱的，這種效果類似于相框，常用于封面設(shè)計(jì)。

還有一種情況是圖片周圍的留白并不對(duì)稱，如下圖，留白較多的區(qū)域會(huì)用來排文字，常用于海報(bào)設(shè)計(jì)和畫冊(cè)內(nèi)頁設(shè)計(jì)。

3.一條邊出血

即把圖片的一條邊對(duì)齊邊界，這么處理有點(diǎn)沖破束縛的意思，可以增加圖片的想象力和版面的設(shè)計(jì)感。

4.三條邊出血

這么做會(huì)把版面分成兩部分，一部分為色塊，一部分為圖片，在排版時(shí)我們還可以通過文字、色塊或顏色把這兩個(gè)部分聯(lián)系起來。

5.拆分

即把一張圖片拆分成幾份，然后隔開一點(diǎn)排列，這么做比單獨(dú)放一張圖片會(huì)更有設(shè)計(jì)感和趣味性，風(fēng)景類圖片適合這么處理。

6.跨版

即在畫冊(cè)設(shè)計(jì)中，讓圖片同時(shí)占據(jù)兩個(gè)版面，當(dāng)在一個(gè)跨版中只有一張圖片時(shí)，如果只把圖片排在某一半版中，那么另一半版就容易單調(diào)，所以在這種情況下通常會(huì)使用跨版，而且圖片放大后會(huì)更有張力，還能把左右兩個(gè)版面關(guān)聯(lián)起來。

二、雙圖排版

在畫冊(cè)的設(shè)計(jì)中，有時(shí)候我們應(yīng)該把一Ｐ當(dāng)成一個(gè)版面，而有時(shí)候則需要把一個(gè)跨版當(dāng)成一個(gè)版面，這取決于具體的內(nèi)容以及排版形式，所以圖片的排版也要分成這兩種情況來考慮。

7.統(tǒng)一大小對(duì)齊排版

在一些作品集或產(chǎn)品畫冊(cè)中常用到此排法，視覺流程簡單、清晰。

8.統(tǒng)一大小錯(cuò)位排版

比對(duì)齊排版更有動(dòng)感，且由于圖片不多，所以也不會(huì)顯得亂。

9.一大一小排版

這種排版對(duì)比鮮明、更有張弛，可以在一個(gè)跨版中使用，也可以是在某一Ｐ中使用。

還可以把其中的一張圖片去底，這么組合起來更靈活，對(duì)比更強(qiáng)烈。

如果把整個(gè)跨版當(dāng)成一個(gè)版面，那么可以把大的那張圖進(jìn)行跨版，小的那張圖則不跨版。

或者把大圖鋪滿一個(gè)Ｐ，而小的圖片和文字則排在另一個(gè)Ｐ。

這兩種排法都很大氣且不失細(xì)膩。

三、多圖排版

有時(shí)候一個(gè)版面內(nèi)的圖片會(huì)有很多，這種版面排起來會(huì)更有難度，常用的排版方式有：

10.大小統(tǒng)一對(duì)齊排版

這種排法比較整潔，但缺少變化，適合用于目錄頁或者產(chǎn)品和人物介紹。

11.大小不統(tǒng)一對(duì)齊排版

這種排法會(huì)比前一種更靈活一點(diǎn)。適合利用網(wǎng)格工具來輔助排版。

這種排版雖然沒有統(tǒng)一圖片的大小，但由于保持了嚴(yán)格的對(duì)齊關(guān)系，所以依然顯得很整潔。

12.圖片與色塊組合排版

圖片與色塊組合在一起排版既不會(huì)像只有圖片那么單調(diào)，還可以利用色塊排文字。不過注意色塊的顏色不要太多，且顏色最好來自圖片。

13.錯(cuò)位排版

即把相連兩張圖片刻意錯(cuò)開，或者把圖片與文字的位置互換，這么做可以有效搭配圖片完全對(duì)齊的單調(diào)，且由于有一定的規(guī)律，所以也不會(huì)對(duì)視覺流程造成太大影響。

14.把圖片拼成特定的形狀

這種排法適合圖片比較多的情況，這么做可以避免圖片太多而顯得混亂，而且因?yàn)槠闯傻男螤钜c設(shè)計(jì)需求相關(guān)，所以會(huì)顯得更有創(chuàng)意。

15.按照某一路徑排版

這種排法跟前一種一樣，適合數(shù)量較多的同類圖片使用，可以避免圖片拍得太過分散，如果不統(tǒng)一圖片的大小和方向，效果會(huì)比較活潑但不規(guī)范，適用于照片墻和兒童畫冊(cè)的排版。

如果統(tǒng)一圖片的大小和方向，或者使它們呈漸變式的變化，這些圖片還可以形成一定的節(jié)奏感，不僅不會(huì)亂，還很美觀。

16.一大多小排版

如果在版面中分開排列大小差不多的多張圖片，那么該版面就會(huì)缺乏重點(diǎn)且沒有張力，而如果把其中一張圖片放大，與其他圖片形成鮮明的大小對(duì)比，就可以有效解決這一問題。

17.自由排版

即大小不需要統(tǒng)一、圖片與圖片之間也不一定要嚴(yán)格對(duì)齊，效果比較靈活，設(shè)計(jì)感較強(qiáng)，常用于雜志排版中。

▲這種排法有兩點(diǎn)需要注意，一是圖片不要排的太分散；二是最好要有大小對(duì)比。

▲去底圖也很適合這么做，當(dāng)然，在排版的時(shí)候也要有大小的區(qū)分，同時(shí)要注意圖片與圖片、圖片與文字之間的輪廓要形成互補(bǔ)。

結(jié)語

版面中的圖片數(shù)量有從一張到數(shù)十張不等，圖片的排版方式也非常多，所以我沒法一一列出，以上總結(jié)的十七個(gè)技巧僅僅代表一些比較主流的方向，具體的變化還需要大家根據(jù)具體的內(nèi)容和設(shè)計(jì)需求去做嘗試和突破，希望這篇文章能給你一點(diǎn)幫助。

作者：蔥爺 (id:congyenanian)

在平面設(shè)計(jì)中，排版看似簡單（大部分人都停留在能使用word就可以排版的認(rèn)識(shí)上），其實(shí)非?？简?yàn)設(shè)計(jì)師的基本功。雖然我們也大量攝入了很多有關(guān)排版的理論知識(shí)，但是知識(shí)無法活用，沒有得到實(shí)踐驗(yàn)證時(shí)，是非常危險(xiǎn)的。因此，在本文中，我會(huì)拿我自己作為設(shè)計(jì)師以及閱讀者兩個(gè)身份來切換思考，也許我們?cè)诖四芴剿鞲唷?/p>

在排版前，我們要清楚的三個(gè)重要概念就是：字號(hào)、行距、字間距。當(dāng)然，其他相關(guān)的概念還有很多，比如字體、字體家族、粗細(xì)輕重、首行縮進(jìn)、標(biāo)點(diǎn)符號(hào)等等。但我認(rèn)為這些都是相對(duì)來說次要的。

字號(hào)與閱讀速度

字號(hào)明確了字體本身的尺寸大小。在閱讀文章時(shí)，每一個(gè)文字就是一個(gè)「點(diǎn)」，點(diǎn)是平面構(gòu)成三元素之一（點(diǎn)、線、面）。字號(hào)大小的設(shè)置取決于閱讀者的閱讀速度。

比如小朋友和老年人的閱讀速度可能不及一個(gè)有著常年閱讀習(xí)慣的年輕人，那么在針對(duì)這部分人的排版當(dāng)中，字號(hào)就應(yīng)該設(shè)置得稍大。大家可以感受一下閱讀下面左右的段落文字，看看是不是較大的字號(hào)會(huì)讓你的速度變得更慢。

字號(hào)越大其閱讀速度也會(huì)放慢，當(dāng)然其文字的關(guān)注度也會(huì)增加，除了文字本身涵蓋的信息以外，文字在放大時(shí)，筆畫的細(xì)節(jié)就越來越明顯，觀者的注意力就會(huì)從對(duì)每個(gè)字的「點(diǎn)」的層面慢慢放大。而文字越小，閱讀會(huì)變得更為快速。

比如我們平時(shí)所知的快速閱讀法，就是由逐字逐字的閱讀變?yōu)檫B詞閱讀。

字號(hào)與主次信息

所以我們平時(shí)在做平面設(shè)計(jì)排版時(shí)，就要考慮到受眾的閱讀習(xí)慣再進(jìn)行設(shè)置。大號(hào)的字體更能瞬間吸引眼球，因此是主焦點(diǎn)所在，也是主要信息應(yīng)該運(yùn)用的，這時(shí)就要注意與此搭配的字號(hào)，注意在多層次的主次信息上字號(hào)運(yùn)用需要有對(duì)比。

能與大字號(hào)進(jìn)行搭配的是小字號(hào)，而且彼此最好能對(duì)比明顯。這樣才能形成信息的主次傳遞。

有些宣傳方認(rèn)為文字越大，其吸引力效果越強(qiáng)，就采用統(tǒng)統(tǒng)放大字體的做法，這樣來輸出信息，由于沒有對(duì)比，整體版面凌亂。而完全沒有考慮過閱讀者真實(shí)的感受。

其實(shí)作為閱讀的一方，平時(shí)我們?cè)诳磸V告牌、打開APP瀏覽Banner時(shí)，都會(huì)因?yàn)橐粋€(gè)版面太過凌亂的畫面而立刻切換掉這樣的信息，不是嗎？長期被廣告轟炸的我們，其實(shí)根本不喜歡這種被信息牽著走的感覺。所以，已經(jīng)練就了可以過濾掉【繁雜信息】的過濾機(jī)制，保護(hù)自己的注意力。

案例分析

我們可以拿常見的網(wǎng)店Banner設(shè)計(jì)為例來說明排版中的誤區(qū)，這是一個(gè)看上去比較常見的設(shè)計(jì)，左圖右文，排版最大的問題就是右邊的文字信息過多，字體主次不太分明，造成閱讀擁擠。

下面我們逐條分析作品中的問題：

1）字體顏色單一，且飽和度極高，容易讓人視覺疲勞

2）三行字體間距過于緊密，字體的字號(hào)沒有區(qū)別

3）Banner雖說是一個(gè)非常重要的傳達(dá)重要品牌信號(hào)、推廣信息的圖片，且大部分尺寸都較大，但是其中傳達(dá)的信息也需要有一個(gè)重要焦點(diǎn)，而不宜輸出過多的文字。

作為平面設(shè)計(jì)師，我認(rèn)為也應(yīng)該和文案一起結(jié)合考察，文案本身是否足夠精簡扼要？次要的文案是否可以刪掉？設(shè)計(jì)師的職責(zé)并不是“美化”，而是“體驗(yàn)”，把自己放在接受者的位置，你愿意對(duì)方一次性就輸出這么多信息給你嗎？還是想慢慢一步步接受后再深入了解？

于是可以我們做下面的調(diào)整：

1）將文字的色彩進(jìn)行調(diào)整，形成閱讀的主次順序，照顧到整個(gè)Banner要傳遞的主要信息——冬季新品，放大的冬字才用宋體，和其他的字體相異。宋體的字型對(duì)應(yīng)女性的輪廓，看上去更具曲線感。

2）紅色是非常吸引眼球的顏色，因此有些次要的文字可以不需要一直用紅色，而把主題詞和引導(dǎo)按鈕用紅色進(jìn)行處理。

3）按鈕變?yōu)閯?dòng)感較強(qiáng)的形狀，這樣能增加畫面的及時(shí)感。也符合這一片排版的形狀布局。

4）行距之間拉開差距，字體大小對(duì)比明顯

5）刪掉沒那么重要的傳遞品牌價(jià)值的文案，在這里，集中傳達(dá)一個(gè)信息就足夠了

6）顏色改為相對(duì)柔和的暖粉色，傳遞冬日暖陽的氣氛。背景用了一些白色的雪作為點(diǎn)綴，突出主題。

在不改變?cè)胁季趾退夭牡那闆r下，我們把字體排版進(jìn)行了調(diào)整，版面就清晰、簡潔了許多。

也許很多人會(huì)說：簡潔當(dāng)然是正道，但是老板/甲方不喜歡啊！我對(duì)于這樣的問題也常常會(huì)遇到，老板/甲方也是人，人當(dāng)然會(huì)分種類，人也會(huì)失策，會(huì)有自身的局限性……如果設(shè)計(jì)師不能給他建議，他當(dāng)然會(huì)跟隨舊有習(xí)俗走，如果我們能發(fā)揮專業(yè)知識(shí)，帶他來到新的路，是否走這條路全憑他自己選擇，我們要做的就是尊重對(duì)方的選擇。但是，我們必須要提供這樣的可能性呈現(xiàn)到對(duì)方眼前。

行距：相對(duì)的距離

行距是段落上下兩行文字的疏密程度。行距在文章中的作用是有效的引導(dǎo)閱讀。兩行文字之間的行距太近會(huì)讓閱讀變得困難，而離得太遠(yuǎn)同樣也會(huì)造成問題。

行距和形成平面構(gòu)成種的「面」這個(gè)元素是分不開的，不同的行距構(gòu)成面的密度，也即是文章段落呈現(xiàn)的灰度。

行距和行高又是緊密不可分割的，比如字體的行高為10px，那么行距如果為2px，也就是行高的1/5倍，就會(huì)變得太擠，不易閱讀。

如果我們拉開行距到5px，也就是行高的1/2倍，則閱讀起來就比較舒暢，輕松。

所以合適的行距是一個(gè)相對(duì)值，根據(jù)我的經(jīng)驗(yàn)，文章的閱讀中，行距為行高的1/2~1倍都算是舒適的。

當(dāng)行距為行高的1倍，看起來行距是比較寬，有些人會(huì)覺得整個(gè)段落看起來不夠緊湊，但我個(gè)人感覺如果行距和行高相等時(shí)，段落看起來松散，讓閱讀者會(huì)有種和緩的速度。比如我個(gè)人就比較傾向喜歡閱讀這一比例的文字段落。

除了和行高本身有關(guān)，行距與字間距也有著不小的關(guān)聯(lián)。等談到字間距的時(shí)候我們還會(huì)細(xì)講。

案例分析

下面還是以一個(gè)具體的案例來說明行高在排版中的視覺作用。這是一個(gè)家居主題的Banner設(shè)計(jì)，也許初看上去并沒有什么問題（設(shè)計(jì)的問題大都是通過對(duì)比才會(huì)發(fā)現(xiàn)的）。

仔細(xì)看過后，我們會(huì)發(fā)現(xiàn)右邊的文字閱讀起來略有點(diǎn)困難，這是由于行高太小而造成的。

逐條分析一下Banner中比較顯著的視覺問題：

1）兩行小字的行高太小，以及小字和大字彼此距離太近

2）文字的色彩沒有太多變化，不同的內(nèi)容全部擠在一起，閱讀起來層次感不強(qiáng)

3）整體色彩有些灰暗，家居的氛圍有點(diǎn)暗沉（原素材需要調(diào)色處理）

Banner設(shè)計(jì)要做到色香味俱全，除了關(guān)注布局、色彩、還需要對(duì)文字以及文字間距都要精細(xì)化處理。

為了解決這三個(gè)比較大的問題，我們作了下面一些調(diào)整：

1）改變小字的行高，讓兩行小字跟隨右側(cè)的斜線條，形成呼應(yīng)，并且讓小字和大字也保持距離

2）整體文字稍微縮小，給整個(gè)版面以呼吸的空間。

3）「全場(chǎng)8折」四個(gè)字用橙色作底，橙色是溫暖的顏色，給版式加暖，且讓文字排版多一些變化，信息層次更分明

4）大的文字采用漸變填色，比起純色平涂，帶有微微光感。

5）整個(gè)畫面的色調(diào)調(diào)得更暖，配合家居的溫暖氛圍

字間距 VS 字符間距

我們平面設(shè)計(jì)師理解當(dāng)中的字間距，大概就是在軟件中可以直接設(shè)置文字字符間距的參數(shù)值，而字體設(shè)計(jì)師的字間距，是更基礎(chǔ)的工作。字體設(shè)計(jì)中每一個(gè)文字都要設(shè)定好它們的字間間隔，太近和太遠(yuǎn)都不利于文章的閱讀。而且在字體設(shè)計(jì)中，調(diào)整字間也是一項(xiàng)及其繁瑣龐大的工作。

在漢字的書法法則中，有所謂的“行氣”之說，所謂“行氣”也就是一整行字體帶來的感覺，這也和字間距有著千絲萬縷的關(guān)系。而所謂行氣也能形成一條線，也就是平面構(gòu)成中「線」元素的發(fā)揮。

那么，作為我們拿著已經(jīng)設(shè)定好字間的段落再進(jìn)行字間距的調(diào)整，無非也是搭上巨人的肩膀再進(jìn)行調(diào)試而已。所以字間的調(diào)整也是依據(jù)原有字體設(shè)計(jì)中已有的間距上的改變，在此我們可以稱之為字符間距。

字體原有的字間距

最合適的字間距，對(duì)于不同的字體來說都不一樣。我們可以舉個(gè)例子：「思源宋體」和「方正美黑」，這兩個(gè)字體形態(tài)差異很大，思源宋體的字符間距設(shè)置為0時(shí)，和方正美黑的字符間距為0時(shí)，字間距的差異也很大，方正美黑的字體間距默認(rèn)就很寬，大家可以對(duì)比當(dāng)方正美黑的字符間距為0時(shí)，對(duì)比思源宋體字符間距為100，其本身字間仍然是大許多的。

所以，拋開字體本身的間距來談字符間距，是毫無意義的。當(dāng)然，方正美黑也許是個(gè)極端的例子，但每款字體的間距的確是有略微差別，呈現(xiàn)在我們眼前的，還是以字間距為準(zhǔn)。

考慮行距的影響

我們之前講過，行距也是影響字間距的一個(gè)很重要的因素。如果字間距大過了行距的情況下，這樣的段落將是特別難以閱讀的。

原本從左到右的閱讀流，將會(huì)被更為接近的上下兩行的文字，錯(cuò)誤引導(dǎo)為從上到下的閱讀。

所以保持字間距要小于行距，是一個(gè)必備的保險(xiǎn)做法。

寬大字距的魅力

在海報(bào)、Banner這類宣傳品的設(shè)計(jì)中，文字通常用得比較少，也談不上形成段落，這時(shí)字間距可以放得更開，而無需涉及到行距。

不得不說，放大的字間距會(huì)顯得版式疏松、體現(xiàn)一種優(yōu)雅寧靜的感覺。

同樣，如果你想要讓你的文章看起來更輕松，也可以試著把字間距適度放大。

案例分析

字間距的案例，我們同樣用一個(gè)Banner設(shè)計(jì)來說明。這個(gè)Banner設(shè)計(jì)也是看起來沒什么大問題。唯一惹眼的就是「科技互聯(lián)、引領(lǐng)未來」這八個(gè)字的字距過寬，字距大過行距，造成閱讀時(shí)容易產(chǎn)生“科引，技領(lǐng)，互未，聯(lián)來”這樣的順序。并且使用的字體本身的字距也需要進(jìn)一步調(diào)整，看起來兩行文字也是有些錯(cuò)落，視覺上不夠精細(xì)。

這里我們?nèi)匀徽{(diào)整了字體排版以及色彩方面的諸多小問題：

1）調(diào)整了「科技互聯(lián)、引領(lǐng)未來」這八個(gè)字的行距和字距，讓字間小于行距

2）增加2019的光感，營造視覺焦點(diǎn)

3）「掌握最黑技術(shù)、占領(lǐng)最大市場(chǎng)」這一行字增加字距，縮小字號(hào)，制造和下方英文字符截然不同的節(jié)奏感。

4）文字的色彩有變化，讓畫面在此不會(huì)顯得過于扁平，為了突出文字，讓下方背景的色彩更深。

5）縮小左上方的區(qū)塊鏈三個(gè)字的部分，給以更多的留白空間，讓畫面不至于內(nèi)容過分飽和。

6）整體的畫面做了進(jìn)一步色彩飽和度處理以及其他細(xì)節(jié)的處理，讓畫面更具沖擊力。

以上我們所舉案例只是在尊重原有設(shè)計(jì)思路的基礎(chǔ)上進(jìn)行微調(diào)，這也是為了說明原有設(shè)計(jì)中存在的問題，當(dāng)然會(huì)有更好的方法就是大的修整或者重組布局等，但不在我們這篇文章討論的范圍之內(nèi)。

后記：瀏覽街邊廣告牌

排版是一個(gè)值得深挖的問題，越細(xì)節(jié)越難以被發(fā)現(xiàn)。如果只是潦草應(yīng)對(duì)，也暫時(shí)不會(huì)帶來特別大的問題，但卻是會(huì)日積月累形成盲區(qū)，無形中造成的問題，讓人永遠(yuǎn)發(fā)現(xiàn)不了。很多公司投入大量的財(cái)力做廣告、線上線下宣傳，然后發(fā)現(xiàn)成本過高，而利潤過低，廣告效果不及以往，運(yùn)營的每個(gè)環(huán)節(jié)都可能會(huì)造成問題，但是也許最前線的問題就是沒有和用戶產(chǎn)生真正的互動(dòng)，平面廣告做出來以后也沒有調(diào)查用戶是否接受這樣的設(shè)計(jì)，有沒有吸引到目標(biāo)用戶。我同時(shí)作為用戶的身份，在平時(shí)逛街看廣告時(shí)，好的設(shè)計(jì)都想多看看，甚至?xí)畜@喜，但是有些的平面廣告從排版到布局再到圖片素材都讓人提不起興趣，而且后者居多。

我們工作室平時(shí)接觸的客戶，有一些客戶創(chuàng)業(yè)做自己的宣傳品，也是習(xí)慣于讓設(shè)計(jì)師去“模仿”某個(gè)所謂同行里“成功品牌”的設(shè)計(jì)，結(jié)果殊不知，這個(gè)“成功品牌”的設(shè)計(jì)早已發(fā)揮不了作用，對(duì)方也在瀕臨崩潰的邊緣。等到還沒模仿完，成功品牌的宣傳品就已經(jīng)下架了，公司甚至開始面臨倒閉。這時(shí)場(chǎng)面會(huì)很尷尬，這也是我親歷過的事，而且不止一次。

說回我們的平面設(shè)計(jì)，涉及到的要素?zé)o非是歸于點(diǎn)、線、面，還有不斷的實(shí)踐。UI設(shè)計(jì)發(fā)展很快是因?yàn)榛ヂ?lián)網(wǎng)這兩年張勢(shì)可喜，但是飛速的發(fā)展帶來的弊端就是一切都浮在表面，深度不夠。所以，我認(rèn)為現(xiàn)在正是對(duì)平面進(jìn)一步深入的時(shí)候，沉下心來，更多細(xì)節(jié)就會(huì)被看見。

作者：飛屋設(shè)計(jì) 公眾號(hào)：ifeiwu81

在進(jìn)行文字排版之前，首先要理解文字的內(nèi)容。我見過很多設(shè)計(jì)師只注重版式美觀而不關(guān)注文字內(nèi)容，把文字一拿到手就開始編排，從不考慮文字在說什么。他們認(rèn)為文字一定要服從于版式需求，反而這是不正確的設(shè)計(jì)方法。對(duì)于一篇文案稿，如果我們不去理解它表述的內(nèi)容，就很容易本末倒置。

01  橫豎編排組合

標(biāo)題組合的編排一般都會(huì)使用基本的編排方式：橫編排，豎編排或橫豎編排。這是比較容易掌握，也是使用較為廣泛的方式，給人一種嚴(yán)謹(jǐn)正規(guī)的感覺。而橫豎編排都會(huì)遵從對(duì)齊，如左對(duì)齊／右對(duì)齊／居中對(duì)齊／兩端強(qiáng)制對(duì)齊。只要做到對(duì)齊，基本都能做出好的標(biāo)題組合。

左對(duì)齊編排組合

居中對(duì)齊編排組合

兩端強(qiáng)制對(duì)齊編排組合

02 線框編排組合

如果你覺得單純的橫豎編排過于單調(diào)，不妨添加一些線框。在文字中插入線（線框）或其他圖形元素，使整個(gè)標(biāo)題變化更豐富。在使用中需要注意線（線框）的粗細(xì)和長度，考慮它們與信息間起到什么作用，而并非隨意添加。

03 錯(cuò)位編排組合

除了正常的橫豎組合編排，簡單的錯(cuò)位組合也是不可缺少的編排方式。其具有較強(qiáng)的編排創(chuàng)造性，能表現(xiàn)出文字間的節(jié)奏感。

04 方向編排組合

文字的方向編排是指把文字整體或局部排列成傾斜狀態(tài)，構(gòu)成非對(duì)稱的畫面形式，使版面具有動(dòng)感和節(jié)奏感，富有強(qiáng)烈的視覺效果。

05 圖形穿插編排組合

巧妙地將文字與主圖穿插一起，整體達(dá)到圖文并茂的版面效果。提高畫面的趣味性，并能同時(shí)傳達(dá)圖文兩種信息。而這種做法的難度比較高，很考驗(yàn)設(shè)計(jì)師的設(shè)計(jì)功底。

最后，無論你選用哪種方式去編排，文字的排版最終還是要回歸到能順利地傳遞出去，必須調(diào)整好文字的間距和字重比例，考慮整體版面的平衡感和層次感。

作者：周妙妍
微信號(hào)：typography_design