項目二 版式設(shè)計基礎(chǔ)

版式設(shè)計是現(xiàn)代設(shè)計藝術(shù)的重要組成部分，是視覺傳達的重要手段。它是指設(shè)計人員根據(jù)主題、視覺和內(nèi)容需求，在預(yù)先設(shè)定的有限版面內(nèi)，運用造型要素和形式美的法則，將文字、圖片（圖形）及色彩等視覺傳達信息要素，進行有組織、有目的的組合排列的設(shè)計行為與過程。

版式設(shè)計的應(yīng)用范圍廣泛涉及報紙、刊物、書籍（畫冊）、產(chǎn)品樣本、掛歷、展架、海報、易拉寶、招貼畫、唱片封套和網(wǎng)頁頁面等平面設(shè)計各個領(lǐng)域。

版式設(shè)計的最終目的是使版式條理性清晰，用悅目的編排方式更好地突出主題，使版面達到最佳視覺效果，使讀者心動或使得讀者在閱讀的過程中充滿輕松、美好的感覺。所以在設(shè)計的時候，不僅要從設(shè)計師的角度出發(fā)，更要從讀者的角度出發(fā)。

版式設(shè)計是將理性思維個性化地表現(xiàn)出一種具有個人風(fēng)格和藝術(shù)特色的視覺傳達活動，傳達信息的同時更需要產(chǎn)生感官上的美感。這種視覺美感要具有一定的形式美的法則，如節(jié)奏與韻律、對稱、黃金比例、留白、對比等法則。相關(guān)法則效果圖見附頁彩圖1所示。

2.1 常見版式類型

在版式設(shè)計時，經(jīng)常會采用不同的版式形式來有效地傳達信息。常見的版式類型有以下幾種：對稱型版式、曲線型版式、十字型版式、骨骼型版式、重點型版式、滿版型版式、斜置型版式、并置型版式、自由型版式、標(biāo)題型版式。

（1）對稱型：一種比較常見的版面編排形式，其特點是畫面中各元素容易形成平衡，結(jié)構(gòu)穩(wěn)當(dāng)，風(fēng)格平實。對稱分絕對對稱和相對對稱，一般多采用相對對稱手法，以避免過于嚴(yán)謹(jǐn)。對稱一般以左右對稱居多，此外還有上下對稱和中心對稱式。

（2）曲線型：版面的圖片或文字的聚集有明顯的弧線感，易形成版面節(jié)奏多變、韻律豐富的視覺美感。

（3）十字型：此種版面要素有兩個方向，形成明顯的“十字”交織感，此版式設(shè)計多變靈活，多用于商業(yè)廣告排版。

（4）骨骼型：按照功能需求把整個版面分成上下或左右?guī)讉€部分，分別安排圖片和文字。它是一種規(guī)范的、理性的分割方法。常見的骨骼有豎向通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。圖片和文字的編排上，嚴(yán)格按骨骼比例進行編排配置，給人嚴(yán)謹(jǐn)、和諧、理性的美。骨骼經(jīng)過相互混合后的版式，既理性有條理，又活潑而具有彈性，多用于報紙的版式設(shè)計。

（5）重點型：這種版式極易產(chǎn)生視覺焦點，使其更加突出，簡潔直接、簡單明了。它又分為中心、向心、離心幾種。“中心”指直接以獨立而輪廓分明的形象占據(jù)版面中心。“向心”指視覺元素向版面中心聚攏的運動。“離心”指猶如石子投入水中，產(chǎn)生一圈一圈向外擴散的弧線運動。

（6）滿版型：是指版面由一張相對完整的圖片構(gòu)成，不留固定的白邊，圖像、圖形不受版心的約束，也就是“出血版”，視覺傳達直觀而強烈。文字配置壓置在上下、左右或中部（邊部和中心）的圖像上。滿版型給人大方、舒展的感覺，是商業(yè)廣告常用的形式。

（7）斜置型：在版面編排中，圖形或文字的主要部分向右或向左作方向傾斜。從而賦予圖形或文字強烈的結(jié)構(gòu)張力和視覺動感。傾斜型版面極易造成版面強烈的動感和不穩(wěn)定因素，引人注目。

（8）并置型：將相同或不同的圖片作大小相同而位置不同的重復(fù)排列。并置給予原本復(fù)雜喧鬧的版面以秩序、安靜、調(diào)和與節(jié)奏感。

（9）自由型：自由型版式是將圖像或文字分散安排在頁面各個部位，無規(guī)律，有活潑、輕快的感覺，但應(yīng)注意圖像的大小、主次，還應(yīng)考慮疏密、均衡、視覺流程等。

（10）標(biāo)題型：版面多以標(biāo)題為最搶眼的亮點，這種版式多出現(xiàn)在報紙排版，強調(diào)標(biāo)題的重要性，往往以加粗字體，加大字號，改變標(biāo)題顏色等方法來變化。效果圖見附頁彩圖2常見版式類型（a-i）。

2.2 版式構(gòu)成要素

優(yōu)秀的版面設(shè)計離不開文字、圖片、網(wǎng)格三大構(gòu)成要素。它們是提升作品版面視覺效果、賦予其更加深刻且直觀的藝術(shù)表現(xiàn)力的三大法寶。

一、文字

文字在版式設(shè)計中是重要的視覺傳達元素。文字版式設(shè)計的好壞直接關(guān)系到整個版式設(shè)計質(zhì)量的好壞。文字排版時首要注意的問題就是文字的易讀性。所用字體、大小、行距、段距是否合適都會直接影響版面閱讀的流暢性。此外書籍、宣傳冊等文字編排還需要考慮版心的大小，裝訂的方式。

1．文字對齊

版面的文字的編排常見的有六種方式：左右均齊、齊左、齊右、齊中、沿線排版、文字的圖形化排列。

（1）左右均齊：即文字的編排必須保持從左端到右端在長度上均齊，使文字的整體效果呈現(xiàn)出一種整齊、嚴(yán)謹(jǐn)、端正之美。左右均齊的編排方式是目前使用比較多的一種文字編排方式設(shè)計，適用于各類書籍的排版。

（2）齊中：即以內(nèi)容的中心為軸線，保持兩端的字距對等。采用這種方式來編排文字時，注意使文字的中心與圖片的中軸線保持一致。使用這種對齊方式時對象往往有長長短短的多行文字，如詩歌、請柬。

（3）齊左、齊右：又稱左對齊和右對齊。這是一種相對比較靈活、輕松的編排方式，松緊有度，文字的自由度和節(jié)奏感更強。齊左或齊右，依然保持一條清晰的垂直線，左對齊方式一般更符合人們的閱讀習(xí)慣。而右對齊方式則在某些特殊的時候采用會顯得比較新穎。

（4）沿線排版：即文字編排沿著曲線進行，一般出現(xiàn)在活潑有趣的版面，文字可以按照給出的路徑生動的排版，多用于商業(yè)廣告的排版。

（5）文字的圖形化：該形式的排版，顧名思義就是文字作為點線面等視覺要素填充一個具象的圖形框，它可以使得版面具有趣味感，多用于商業(yè)廣告和兒童書籍的排版。效果圖見附頁彩圖3文字對齊方式（a-d）。

2．文字強調(diào)

文字強調(diào)的方法有劃線、線框、符號的強調(diào)；行首強調(diào)；以不同排列方式突出強調(diào)。

（1）劃線、線框、符號的強調(diào)：該方法可以快速引起觀者注意，突出重點，有效進行信息傳達。

（2）行首強調(diào)：行首強調(diào)可以分為放大、下墜、裝飾三種。例如將正文的第一漢字或字母放大，此方法可以打破版面的單調(diào)性，增強閱讀的次序感，豐富和提高文字的可讀性。

（3）以不同排列方式突出強調(diào)：不同的排列方式是指用文字的對齊方式相互組合進行突出強調(diào)，或者用色彩、行首強調(diào)加以突出，它屬于綜合表現(xiàn)的一種方法。效果圖見附頁彩圖4文字強調(diào)（a-b）。

3．文字整體編排

文字的編排設(shè)計除了學(xué)會把握各個細(xì)節(jié)的要求之外，還必須注重文字內(nèi)容的整體編排設(shè)計。具體來講，首先對文案進行群組編排，將文字內(nèi)容組成一個完整的框架，組成一個整體的形，然后按照其邏輯順序進行段落的分割，使其在保持文字完整性的同時，又能突出個性特征，具有更好的條理性。它是一種特別有效的賦予視覺的秩序性、組織性、設(shè)計性的方法。所有文字和圖形可以融為一個整體，形成版面的視覺焦點，其他部分大面積留白，使得版面干凈利落，重點突出，傳達信息更加簡單有力。效果圖見附頁彩圖5文字整體編排。

二、圖片

圖片對于一個版面而言不僅僅起到活躍畫面的輔助作用，其信息傳達的準(zhǔn)確性、迅速性也是文字不能替代的。一個圖片的好壞直接影響版面的風(fēng)格。

1．圖片分類

版式設(shè)計中圖片的分類方法有很多，例如按表現(xiàn)形式可分為具象圖和抽象圖；按圖形形狀可分為方形圖、長方形圖、圓形圖、三角形圖、橢圓形圖等。按表現(xiàn)方法可分為逼真、比喻、象征、夸張、浪漫圖形。這里我們將介紹的是按照版面處理的四種類型：方形圖、退底圖、出血圖、滿版圖。

（1）方形圖：圖片的編排中接觸得最多的就是方形圖。

（2）退底圖：實為摳圖，指保留圖片主體的外輪廓，把背景部分刪除。

（3）出血圖：是指圖形、圖像有一部分在畫面以外。

（4）滿版圖：指圖片充滿整個版面。

效果圖見附頁彩圖6不同圖片編排效果（a-d）。

2．圖片組合編排方式

常見的圖片對齊方式有圖片對齊、相互疊壓、 散點組合。

（1）圖片對齊：圖與圖兩端對齊，整齊地出現(xiàn)在版面中，有著明顯的秩序感。

（2）相互疊壓：圖與圖自由地、隨意地相互疊壓出現(xiàn)在版面中。在疊壓時務(wù)必不能遮擋住任意圖片的重要信息，所有圖片的色彩也應(yīng)該保持視覺上的平衡。

（3）散點組合：是指圖與圖輕松地任意出現(xiàn)，無拘無束非常自由。這種方式需要注意不能過分分散，不可失去整體上的秩序感。

效果圖如附頁彩圖7圖片組合編排效果（a-c）所示。

三、圖文混排

版式設(shè)計中最常見的組合就是圖片與文字的混合編排，圖文結(jié)合可以使得版面生動，增強版面的表現(xiàn)力，因此掌握圖文組合的方法尤為重要。常見的混合圖文編排方法有以下三種：齊整、疊壓、文本繞圖。

（1）齊整：圖片與文字左右對齊，它是一種特別具有秩序美感的編排方式。

（2）疊壓：文字以線條、面、塊、圖形等各種形式疊壓在圖片上方，這種方法可以結(jié)合想象，使得圖文結(jié)合產(chǎn)生生動的視覺效果。

（3）文本繞圖：文字以環(huán)繞圖片的方法出現(xiàn)，一般圖片為退底圖。圖片與文字的混排應(yīng)該注意圖片與文字的距離關(guān)系，注意圖片與文字的統(tǒng)一，注意圖片與文字的位置關(guān)系，注意對圖片中文字的處理。

效果圖如附頁彩圖8圖片與文字的排版方式（a-c）所示。

成角網(wǎng)格：成角網(wǎng)格是指版面中的所有元素都朝向同一個或兩個角度進行分欄編排。這種網(wǎng)格可以形成斜置型網(wǎng)格效果。具有強烈的動感。

此外網(wǎng)格還有一種按漢字結(jié)構(gòu)進行分割的分類方法：上下型風(fēng)格、三字型風(fēng)格、井字型網(wǎng)格、回字型網(wǎng)格……，其中回字型網(wǎng)格使用非常靈活方便，效果特別突出。

效圖如附頁彩圖9網(wǎng)格排版效果（a-h）所示。

四、網(wǎng)格排版

網(wǎng)格是現(xiàn)代版式設(shè)計中最重要的基本構(gòu)成元素之一。它是用來設(shè)計版式元素的一種方法，主要目的是幫助設(shè)計師在設(shè)計版式時有明確的設(shè)計思路，能夠構(gòu)建完整的設(shè)計方案。網(wǎng)格可以讓設(shè)計師在設(shè)計中考慮的更全面，能夠更精細(xì)地編排設(shè)計元素，更好地把握頁面的空間感與比例感。

網(wǎng)格在版式中有著約束版式的作用，其特點是強調(diào)了比例感、秩序感、整體感和時代感，使整個版式具有簡潔、樸實的藝術(shù)風(fēng)格，成為版式設(shè)計中的主要手法。

1．網(wǎng)格功能

一個好的網(wǎng)格結(jié)構(gòu)可以幫助人們在設(shè)計版式的時候形成明確的版式結(jié)構(gòu)。網(wǎng)格可以體現(xiàn)理性、穩(wěn)定的視覺效果，給人穩(wěn)定、信賴的感覺。它有以下三大功能。

（1）網(wǎng)格具有版式需求性。

（2）網(wǎng)格具有組織信息的功能性。

（3）網(wǎng)格具有閱讀的關(guān)聯(lián)性。

2．網(wǎng)格分類

網(wǎng)格可以分為以下四種類型。

（1）對稱式網(wǎng)格：對稱網(wǎng)格有相同的頁邊距，網(wǎng)格數(shù)量、版面安排。

（2）非對稱網(wǎng)格：非對稱式網(wǎng)格通過欄與欄之間的寬窄對比變化，使得版面整體效果更加生動、豐富。

（3）基線網(wǎng)格：基線網(wǎng)格能夠幫助版面中所有元素按照要求，實現(xiàn)標(biāo)準(zhǔn)對齊。注意中英文編排中對基線的要求不同。

（4）成角網(wǎng)格：成角網(wǎng)格是指版面中的所有元素都朝向同一個或兩個角度進行分欄編排。這種網(wǎng)格可以形成斜置型網(wǎng)格效果，具有強烈的動感。

效果圖見附頁彩圖9網(wǎng)格類型（a-f）。

自我測試

（1）報紙排版一般采用的是（ ）。

A．滿版型

B．骨骼型

C．重點型

D．對稱型

（2）（ ）版面的圖文聚集有明顯的弧線感，易形成版面節(jié)奏多變、韻律豐富的視覺美感。

A．骨骼型

B．曲線型

C．十字型

D．重點型

（3）（ ）具有靜態(tài)的秩序感，但也很容易造成呆板感。

A．對稱

B．均衡

C．對比

D．調(diào)和

（4）文字排版時首要注意的問題就是文字的（ ）。

A．流暢性

B．美觀性

C．創(chuàng)意性

D．易讀性

（5）（ ）文字作為點線面等視覺要素填充一個具象的圖形框，它可以很有趣味感。

A．左對齊

B．沿線排版

C．文字圖形化

D．左右均齊

（6）（ ）方法可以打破版面的單調(diào)性，增強閱讀的次序，豐富和提高文字的可讀性。

A．行首強調(diào)

B．文字整體編排

C．以不同排列方式突出

D．劃線、線框、符號的強調(diào)

（7）（ ）實為摳圖，指保留圖片主體的外輪廓，把背景部分刪除。

A．滿版圖

B．方形圖

C．退底圖

D．出血圖

（8）下面不屬于圖與圖對齊方式的是（ ）。

A．圖片對齊

B．相互疊壓

C．散點組合

D．突出強調(diào)

（9）常見的混合圖文編排方法有三種，不包括（ ）。

A．齊整

B．整體

C．疊壓

D．文本繞圖

（10）（ ）有著約束版式的作用，它強調(diào)了版面的比例感、秩序感、整體感和時代感。

A．網(wǎng)格

B．色彩

C．文字

D．圖片