10.21 「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

最近很多同學問的最多的問題是什麼是網格系統?它與版式設計有什麼聯繫?基於這些問題,很有必要編寫一篇文章讓大家提前認識一下網格系統與版式設計。


網格系統與版式設計

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

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

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

一、柵格的概念

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

Gridiron”的簡寫,意為格柵、網柵或網格。


柵格設計不是簡單地將文字、圖片等要素並置,而是遵循畫面結構中的相互聯繫發展出來的一種形式法則。它的特徵是重視比例、秩序、連續感和現代感。柵格設計成功的關鍵是,在仔細的計劃內,縱橫劃分版面的關係和比例。當我們把技巧、感覺和柵格這三者融合在一起靈活而創造性地進行設計時,就會產生精美大方,令人印象深刻的版面,並在整體上給人一種清新感和連續感,具有與眾不同的統一效果。同時,設計工作也因此更加方便,設計者不會再因圖與圖之間的距離,文字與圖之間的關係等方面的原因而傷腦筋。


我們在版式設計中使用的所有元素都是按照這些格子的劃分有序分佈、組織的。在柵格系統中,對齊是一個基本的原則,包括豎向對齊——欄的劃分、圖片和文字與欄的豎向對齊,同時也包括橫向對齊——對開頁面中圖文的左右橫向對齊與協調。

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統


二、柵格的製作

柵格的設置是版式設計中重點之一。所謂柵格,就是設計物料在視覺表現上的規矩、框架。所有的頁面的版式設計都應在一定的規矩裡完成,這樣,在視覺外觀上才會具有整體的統一感。當然不能是所有的都千篇一律,要有變化,但不管怎麼變,都要沿著這條柵格主線,遵循一個原則,這樣才既有統一又有變化。

橫向柵格的製作

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


2. 書籍或雜誌裡佔最大比重的是內文,所以內文字體的設定給讀者的閱讀帶來愉悅是最為重要的,那麼在版心位置大概定出後就首先要設定內文的字體。


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


縱向柵格的製作

前面選擇內文文字時,我們暫時將版心平均分為三欄,現在,我們要將它分為更多的欄,以適用於各種版式的設計。格子越多,參照也越多,選擇更多,也更靈活。在這之前,我們早已定好了設計的風格,每個欄目的感覺也應該在我們腦海中形成一個初步想法,那麼具體到頁面,分幾欄比較合適?


三、柵格應用到分欄的技巧


雙欄

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


「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

三欄

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

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統


四欄

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


當然,這也不是一成不變的。有些篇幅較長的文章由於圖片量大,文字信息量也很大,亦可採用四欄的排法。

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統


五欄

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


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

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

「乾貨」詳解版式設計中的網格系統

四、柵格設計是版式設計的基礎

版式設計應該遵循建立在柵格基礎上的實用原則,而不僅僅只注重創意。具有創意的版式設計,但仔細觀察之下,卻大多經不住推敲。有時候我們並不缺乏創意,相反,缺少的是嚴謹。


原因在於,大家對柵格系統還缺乏足夠的重視,因此更談不上熟練應用了。柵格設計系統是一種實用的工具和手段,是版式設計的前提和基礎,只有在領會了它的精髓之後,我們才能在實際設計中創作出更加嚴謹、經得起推敲的作品。


五、最後

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


分享到:


相關文章: