【干貨】詳解版式設(shè)計中的網(wǎng)格系統(tǒng)

時間：2023-09-02 04:42:02 | 來源：網(wǎng)站運營

時間：2023-09-02 04:42:02 來源：網(wǎng)站運營

【干貨】詳解版式設(shè)計中的網(wǎng)格系統(tǒng)：?最近很多同學(xué)問的最多的問題是什么是網(wǎng)格系統(tǒng)？它與版式設(shè)計有什么聯(lián)系？基于這些問題，很有必要編寫一篇文章讓大家提前認識一下網(wǎng)格系統(tǒng)與版式設(shè)計。




網(wǎng)格系統(tǒng)與版式設(shè)計

版式設(shè)計亦稱版面排版。所謂編排，即在有限的版面空間里，將版面構(gòu)成要素——文字字體、圖片圖形、線條線框和顏色色塊等諸因素，根據(jù)特定內(nèi)容的需要進行組合排列，并運用造型要素及形式原理，把構(gòu)思與計劃以視覺形式表達出來。




版面設(shè)計是平面設(shè)計中重要的組成部分，也是一切視覺傳達、藝術(shù)施展的大舞臺，被廣泛地應(yīng)用于報紙廣告、書刊、包裝裝潢、企業(yè)形象 (CI) 和網(wǎng)頁等領(lǐng)域。




一、柵格的概念

在進行版式設(shè)計之前，我們需要先了解和認識一個新的概念——柵格。柵格設(shè)計 (Grid) 又叫標準尺寸系統(tǒng)、程序版面設(shè)計及瑞士版面設(shè)計，是一種運用固定的格子設(shè)計版面的方法，即 ：利用頁面上預(yù)先確定好的網(wǎng)格，按照一定的視覺原則在網(wǎng)格內(nèi)分配文字、圖片、標題等元素。英 語 中“Grid” 一 詞 源 自“Gridiron”的簡寫，意為格柵、網(wǎng)柵或網(wǎng)格。

柵格設(shè)計不是簡單地將文字、圖片等要素并置，而是遵循畫面結(jié)構(gòu)中的相互聯(lián)系發(fā)展出來的一種形式法則。它的特征是重視比例、秩序、連續(xù)感和現(xiàn)代感。柵格設(shè)計成功的關(guān)鍵是，在仔細的計劃內(nèi)，縱橫劃分版面的關(guān)系和比例。當(dāng)我們把技巧、感覺和柵格這三者融合在一起靈活而創(chuàng)造性地進行設(shè)計時，就會產(chǎn)生精美大方，令人印象深刻的版面，并在整體上給人一種清新感和連續(xù)感，具有與眾不同的統(tǒng)一效果。同時，設(shè)計工作也因此更加方便，設(shè)計者不會再因圖與圖之間的距離，文字與圖之間的關(guān)系等方面的原因而傷腦筋。

我們在版式設(shè)計中使用的所有元素都是按照這些格子的劃分有序分布、組織的。在柵格系統(tǒng)中，對齊是一個基本的原則，包括豎向?qū)R——欄的劃分、圖片和文字與欄的豎向?qū)R，同時也包括橫向?qū)R——對開頁面中圖文的左右橫向?qū)R與協(xié)調(diào)。










二、柵格的制作

柵格的設(shè)置是版式設(shè)計中重點之一。所謂柵格，就是設(shè)計物料在視覺表現(xiàn)上的規(guī)矩、框架。所有的頁面的版式設(shè)計都應(yīng)在一定的規(guī)矩里完成，這樣，在視覺外觀上才會具有整體的統(tǒng)一感。當(dāng)然不能是所有的都千篇一律，要有變化，但不管怎么變，都要沿著這條柵格主線，遵循一個原則，這樣才既有統(tǒng)一又有變化。




橫向柵格的制作

1. 根據(jù)頁面的大小設(shè)定版心的位置，也可以參考已有的同類設(shè)計的風(fēng)格，用尺子量出距離。如果是雜志訂口的距離一定要注意根據(jù)雜志預(yù)計的總頁數(shù)及裝訂方式來決定，如果很厚，訂口距離要相對大一些。




2. 書籍或雜志里占最大比重的是內(nèi)文，所以內(nèi)文字體的設(shè)定給讀者的閱讀帶來愉悅是最為重要的，那么在版心位置大概定出后就首先要設(shè)定內(nèi)文的字體。




3. 選定好內(nèi)文字體（字體、字距、字號、行距），要鋪滿整個頁面，先暫定頁面分為三欄，然后打印“原大”（按雜志原樣尺寸大小打印）后，按裁切線裁去“出血位”以外的紙張，從而接近成品尺寸。根據(jù)經(jīng)驗，一定要打印原大，這個時候千萬別因為省紙省墨或怕麻煩而按比例縮小。原大便于我們更好地比較字體、字距、字號、行距是否是我們最終想得到的，從而在以后的工作中省去很多修改。要知道，改一個元素就要改整本雜志里所有出現(xiàn)此元素的地方，那將是一項巨大的工程，而且會因為忘記修改某個篇章而造成我們犯很低級性的錯誤。




縱向柵格的制作

前面選擇內(nèi)文文字時，我們暫時將版心平均分為三欄，現(xiàn)在，我們要將它分為更多的欄，以適用于各種版式的設(shè)計。格子越多，參照也越多，選擇更多，也更靈活。在這之前，我們早已定好了設(shè)計的風(fēng)格，每個欄目的感覺也應(yīng)該在我們腦海中形成一個初步想法，那么具體到頁面，分幾欄比較合適？




三、柵格應(yīng)用到分欄的技巧

雙欄

雙欄是最常見的一種分欄方法，掌握起來也比較簡單，易于上手。將頁面縱向等分為兩部分，圖片和文字均整齊劃一，整個頁面看上去相當(dāng)規(guī)矩、統(tǒng)一、穩(wěn)健，這些都是雙欄的顯著特點。雙欄可以相對完整、連續(xù)地展示文字和圖片，在視覺上更容易使讀者集中精力，達到很好的閱讀效果。




三欄

三欄也是一種很常見的一種分欄方法。較之雙欄，三欄顯得更加靈活和富于變化。最主要的變化來自圖片。三欄中，圖片的表現(xiàn)方法比較靈活，通欄的大圖可以與占一欄或兩欄的小圖并存。從三欄起，我們就要逐步建立一個“并欄”的概念。并欄就是在劃分好欄數(shù)之后，將其中的若干欄并作一體，與其它欄一起表現(xiàn)出來，形成一個整體。




四欄

四欄可以看作是雙欄的演變和擴展，其將頁面以中心對稱等分四欄，看起來比較自然、舒服，符合一般大眾的視覺心理和喜好。需要注意的是，由于將頁面四等分，欄的寬度變窄，在視覺上其實并不適合連續(xù)閱讀。因此，四欄的排法常用于那些短小精悍的信息類欄目和文章，如產(chǎn)品介紹、最新動態(tài)、書評等。

當(dāng)然，這也不是一成不變的。有些篇幅較長的文章由于圖片量大，文字信息量也很大，亦可采用四欄的排法。




五欄在熟練理解和掌握了用兩欄、三欄和四欄將頁面等分之后，更多的分欄可通過適當(dāng)演變，進入更加靈活的版式。五欄或更多欄的版式將更頻繁地使用并欄的技巧。現(xiàn)今，很多報紙多采用了五欄的排法，但雜志版面一般不使用那么“明顯”的五欄，而是將五欄的版面通過并欄手段，實現(xiàn)一種對頁面“不均衡”的分配。這種排法，看似破壞了頁面的平衡或穩(wěn)定，但由于巧妙并欄，圖片或文字的排法更加靈活多變，同時又不失一定的章法和原則，若掌握得好，也可以做出賞心悅目的頁面。另外，將五個單欄排列組合，也可以形成左兩欄加右三欄的格局，用數(shù)字表示的話就是“23 并欄”，同樣，亦可形成左三欄加右兩欄的變化，即“32 并欄”。




總之，靈活運用并欄的技巧，更多的分欄（六欄、七欄……）也可以創(chuàng)造出豐富多樣、嚴謹有序的版面?？伸`活運用上述方法，以此類推，如六欄亦可視為大三欄，八欄亦可視為大四欄或大兩欄。




四、柵格設(shè)計是版式設(shè)計的基礎(chǔ)

版式設(shè)計應(yīng)該遵循建立在柵格基礎(chǔ)上的實用原則，而不僅僅只注重創(chuàng)意。具有創(chuàng)意的版式設(shè)計，但仔細觀察之下，卻大多經(jīng)不住推敲。有時候我們并不缺乏創(chuàng)意，相反，缺少的是嚴謹。

原因在于，大家對柵格系統(tǒng)還缺乏足夠的重視，因此更談不上熟練應(yīng)用了。柵格設(shè)計系統(tǒng)是一種實用的工具和手段，是版式設(shè)計的前提和基礎(chǔ)，只有在領(lǐng)會了它的精髓之后，我們才能在實際設(shè)計中創(chuàng)作出更加嚴謹、經(jīng)得起推敲的作品。




五、最后

版式設(shè)計可以說是平面設(shè)計的基礎(chǔ)，是設(shè)計師必須掌握的基本功之一。無論是平面設(shè)計、還是PPT、網(wǎng)頁設(shè)計、廣告設(shè)計，沒有好的排版，信息傳達就會受阻，更談不上這是一件好的設(shè)計作品。




點擊閱讀全文可深入學(xué)習(xí)