「網格系統設立了約束與規範,讓設計師更專注於在框架以外的構思。」
但所約束的規範怎麼沒有一個答案?還很非常地複雜又多樣。
而且最重要的是…
首先呢
在前一篇 溫故知新 — 初探 Grid 網格 ,假設我們對網格、排版有了基本的暸解與認識但老實說還是一知半解,說真的還不曉得該如何下手。
而且 Josef Müller-Brockmann 在書本裡也沒有詳細的教學過程,看完後還是一頭霧水😕
這篇提供了自己探索 Grid 的設計流程,有點像是在每個實作步驟上紀錄一些重點摘要。經過了一段跌跌撞撞的陣痛期,追尋解答的過程中,自認沒有很完美,就在此拋磚引玉分享給大家。
一起進入 Grid 的世界吧 🚩
過程總覽
先有個簡單的認知,就是整個實驗的過程會是反反覆覆、來來回回的循(大)環(坑),在還沒踏進去以前,原以為要照一定的路走才是正確的。
※在沒有任何網格排版經驗的情況下,真心建議:
訂好首要目標「優先保留時間與力氣,重心放在思考與實驗上」。
想好該怎麼達到所要的成果,當發現困在某個地方上太久,就能立即做修正與想解決辦法,免得筋疲力竭做不下去,有先訂定明確地目標滿重要的。
#1 準備好手中的材料
準備好要編排的內容(文本)、圖片,以及暸解你在設計什麼:
如前篇提到的:「設計師應該要大致了解目標受眾(Target Audience)將會如何看待(使用)這個設計專案。」,設計專案的定位、方向以及目標受眾,將會影響後續該使用哪些合適版面的決定。
這邊先模擬所要設計的專案為:「決定做(月刊,採用騎馬釘) A4 美國大峽谷主題旅遊雜誌,其中的跨頁篇幅」。
※注意:自訂的設計專案越擬真越好(模擬問題的發生),否則胡亂複製過來彼此間毫無關聯的文本、圖像等等,將會無法學習到解決能力與思考,畢竟在往後實戰上所發生的狀況會是百百種。
而本篇文章將準備好主標題:「Introduction to The Grand Canyo National Park」、一份文本(含自行設定的頁碼、圖注、專欄類別)、數張符合文本方向的來自 Unsplash 圖片,來作為接下來實作的範例。
※題外話:剛好在 Spotify 聽到這首 Nicholas Gunn — Entering Twin Falls , 是從小就很喜歡的音樂才會決定做這個主題,分享給各位可搭配圖文聆聽 🎶
#2 工具的選用
設計發想就從最基本的筆跟紙開始,有助於快速建立出版面架構的雛形。
當然也能先在電腦軟體上快速模擬,甚至列印不同版本,拿遠遠的進行視覺比對。
總言之,能建立出 Grid 格線並且能呈現各種形式給大眾,什麼樣的軟體、工具都可以的哦!選自己喜歡、合適的,不熟悉就去學如何操作,來達到想要的設計成果。
在這篇為何我會選擇使用 InDesign 呢?
最大原因有二:
(1) 專業的版面排版工具,調整網格、微調數值等,是款細膩的排版軟體。
(2) 想選擇 Baseline Grid 作為我主要的網格系統之一。(在 #5 與 #6 中會有詳細的說明)
本來想使用 Illustrator,結果發現裡頭沒有工具能夠標示出每一行的 Baseline,用手動去拖拉除了會有誤差外,而且毫無效率可言。如果有我不知道的套件能做得到的話,歡迎分享 🙌
#3 頁面大小
在自我練習中這裡簡單使用我們常見的 DIN format A4 紙張大小,或者任何想要展現在其他二維或三維的媒介上(像是不在 DIN 尺寸內的刊物、裝置螢幕、大型牆面、展覽設計等等);在實務上,必須根據設計專案的各方需求、目的、經費成本而定。
#4 初步設計版面(Thumbnail)
在前篇提到:「先製作規模較小的草圖(而且要盡可能越準確越好)幫助設計師規劃版面是好的。」
「對於設計師來說,若把草圖繪製的越潦草,就越難設想出印刷品最終的效果;而相對著,草圖繪製的越精確,設計師就能從草圖中驗證自己的創意在版面中是否可行。」— Müller-Brockmann, J (1981). Grid Systems in Graphic Design. p94.
而我便先試著畫出簡易鉛筆草圖,來快速應證想法。在跨頁中,審視材料的形狀、內文段落的多寡,像是三張圖片與兩張圖片的感受差異,哪一個是能比較接近大峽谷壯闊情境,是個從規劃裡從中取捨的過程。
接著使用 A4(210mm*297mm)大小的尺寸,等比縮小到 A8 (52mm*74mm),方便在手頭上的筆記本內畫出格子,來做更進一步精細的草擬,這樣的大小也不因筆太粗而失去太多細節。
最後手繪精細的樣板,說真的很耗費時間(但有做過,更能體會出上機後不一樣的感受,多了一份思考的空間),可能往後會精簡成先做簡易鉛筆稿,再來上機快速排列出各種樣板出來,認為除了較有效率外,到成果呈現上不會差太多。
#5 字體
※注意:字體學是門很深遠的學問,在這邊只會提到自己在實作網格排版時有用到的部分。
前段一直提到 Baseline Baseline,到底是什麼呢?
可以仔細看上圖 Typography 的基礎組成,在倒數第二條線,從左方至右可以看出他是標示出字母的(Baseline)基本線。在第二張可以看到行距 (Leading)的計算是從上一行的基線到下一行文字的基線距離。
1. 行距 (Leading)
關於行距,所有字型的行高都是依循 1:1.2 比率。
身為設計師的我們可能沒有意識到,在下圖中 illustrator 文字行距的預設都是如此。
至於行距間的拿捏,可依據版面大小、排版風格,透過長期經驗的累積,進行視覺上等比調整,選擇出在版面上最合適的。
至於比率的源由,就要從了解 Typography 文字結構開始,而自己是從工作坊學習 Foundational Hand 才有明確的理解。在這邊就不多做解釋了,對書寫歐文字體有興趣、想要更深地體驗,滿推薦參加 Joe Chang 的歐文字體設計工作坊哦!
2. 字體的選用
為了標題和文本選擇字體,設計師會思考如何使用易於閱讀的字體進行簡單、有效的版面設計,搭配的得宜會是個需要長期經驗的累積。但發現掃視千百種以上字體,就像得了選擇障礙癌一樣,提供一個簡單的方式:
以歐文而言,一個版面建議使用兩種不同字體:
像是 Serif Font 與 Sans Serif 或 搭配 Script 手寫字體等為限。當你在限制中漸漸摸熟了,就會有更多想發揮的空間。
而對於介面設計而言:
Web Design is 95% Typography–Oliver Reichenstein
接著在此文章中也建議最多選擇兩種字體,以保持界面設計的一致性。使內容易於可讀性(Readability)和易讀性(Legibility),這兩個是必須了解的主要原則。
可讀性:能簡單讀出字彙、語句、文章。
易讀性:在特定字體中,一個字母與另一個字母之間能否容易區分出來。
(1) 展現標題 Display Headlines
- 在版面字體中是最大的。
- 需給它不少的空白空間,襯托出輪廓與劃分出獨立的空間。
(2) 標題與副標題 Headlines & Subheadlines
- 可將標題們設置成粗體或是斜體。
- 在版面字體中它是要排第二順位的大小。
在這裡,練習選用了襯線體 Sabon LT Pro Roman 字型 36pt,行距 43.2pt 。
(3) 內文 Copy or Body Copy
- 選擇了 Serif Font 襯線體,建議設置在最大 11pt 的話,最小約 8–9pt。
- 選擇了 Sans Serif 無襯線字體,建議設置最大在 10pt,最小則約 7–8pt。
襯線體因字母的細節較多,為了視覺上可讀與易讀性考量會設的比無襯線字體大一些。而這邊我選用了無襯線 Gill Sans Regular 字型 10pt,行距 12pt。
Helpful Resources
- 想參考更多排版設計,很推薦 Fonts In Use 網站,提供設計師們進行研究,類型的選擇與配對,能從中發掘使用字體的新方法。
- 最近發現的 Font combinations for web designers. 一個配對字體的網頁小工具,搜尋您要的字型後,會提供建議搭配的組合。
3. 延伸
在實作當作會遇到選了不同的字型,覺得奇怪明明選的字號大小一樣,為何不同字型間還是有差別。原因是其各個字母之間像是字懷(Counter Space)、外形(Exterior Shape)、字形空間(Glyph Space)、節奏間所產生的正負空間(Positive and Negative Space,也稱二維空間)不同,對於大小的感受上會出現差異。
前面的細節術語就不多談,對於正負空間可以簡單介紹一下:在一樣的圓點大小、方形範圍大小,在下圖中很明顯右邊的白點比左邊的感受上是偏大的。
舉個最近 Figma (一款線上界面設計工具)發布了最新的文章提到:
Four metal fonts with the same, 16pt font size. Notice some fonts take up more space than the others, and the baselines vary all over the place.
簡單提及十九世紀金屬活版印刷,並且特別提醒了某些字體佔用的空間比其他字體多,而且基線在各處會有所不同。
下圖中,明顯顯示出在一樣的字號下,四種字型呈現出各自不同之處。
忘了以前是在哪篇看到一篇 UI 文章說內文一定要設置在 10pt 才會閱讀舒適,對此是持反對的。不論在平面印刷、UI 介面上,並不全然內文得要統一限制在某字號大小就是好的,而是依照所選擇的字型而定。
在 A4 頁面上,以歐文文本而言,Josef Müller-Brockman 提供相關的經驗參考:「在一個版面中每行平均約 10 個單字左右,是比較容易閱讀的。當然只有在文本有一定的量與長度之下,這個經驗才會產生實際作用。」
Helpful Resources
- 更多關於 Positive and Negative Space,可參考 Dong Hyun Lee 的 Effective Use of Negative Space in Graphic Design 設計研究論文,畢業於美國羅徹斯特大學藝術、科學及工程學院,對於正負空間有著相當詳細的圖文案例分析。
- 暸解更多字體學的基礎:The CMG Team 的 OUR COMPLETE GUIDE TO TYPOGRAPHY BASICS 此文、Google 的 Understanding typography。
#6 網格
在前面暸解了字體學的基礎後,然而選擇使用 Baseline Grid 的好處在於:
行距(Leading )是讓文字呼吸的空間。它能讓讀者的眼睛認為文字有方向,而不是一坨黑黑的東西,這就是 Typography 一直很要求的 Readability(可讀性) — “給設計初心者:字型基礎八篇” on justfont blog
直接使用 Baseline Grid 調整,亦即預先處理好每段行距的細節與整體的可讀性。
若想嘗試的話,強烈建議使用 indesign 工具,可以使每個文本區塊自動與 Baseline Grid 對齊,可以說目前相當好用;或者您有前端相關程式基礎,也能在 Html & CSS 進行行距上的調整配置。
在 溫故知新 — 初探 Grid 網格 文章,可以從中找到想練習的各種網格種類。另外,Josef Müller-Brockman 在書中提供了 8、20、32 格網格的範例:準備的文本,尤其圖片相當大量的話,建議使用 32 格 Grids 是非常合適的;而 8 格可以進一步劃分出 16 格,20 格則就有著 42 種排版可能性。
「設計師也需要具備一種良好的判斷力,並對圖文的結構和節奏保持一個良好的感覺。」
「使用了網格系統並不能保證就能達到最佳的效果,最終還是取決於設計師本身。」- Müller-Brockmann, J (1981). Grid Systems in Graphic Design. p75.
Helpful Resources
- 關於在 indesign 使用 Baseline Grid,可參考 Dolale Huang 在 Facebook 的 INDESIGN上課了社團發表的「兩欄文字對齊的小工具」貼文
#7 版心與頁邊距
對於印刷上會受限於技術,如頁邊距不能設置的過窄,通常會裁切預留 5mm 出血的位置,裝訂則會預留 1~3mm(視各家印刷機器而定),防止裝訂裁切的誤差導致文本受影響;另一方面將版面配置得妥當,比例協調的頁邊距,能提升閱讀體驗。
幾個世紀以來,所有經典的排版作品都有者一個完美的頁邊距,它們的共通點是通過黃金分割或者是一些數學公式精確計算出來。
— Müller-Brockmann, J (1981). Grid Systems in Graphic Design. p39.
這裡整理了幾個認為較好理解、好計算的頁邊距公式圖列:
(左1)為作者在第 41 頁提供的比列協調頁邊距,此版心的配置較適合文學類的書籍,並不適合廣告宣傳品。原因是頁邊距預留的距離對於成本來說太過奢侈。
(左2)在第 51 頁的經典版心,比例為 1:2。
(中)名為 Canon Ternario(Ternary Canon)的公式。
(右)基於 Golden Ratio 黃金比例公式,所分割出來的版心模樣。
Josef Müller-Brockman 非常強調版心內所劃分的(單、雙、多)欄位,是由字號的大小取決於欄的寬度。
而我就從最簡單的開始:一個兩欄版心,兩欄的文字舒適度是覺得合適的,頁邊距都是 2:2 來做,讓切口跟訂口有同樣的距離。一開始不太想要太複雜,先照這個類型排看看,成果出來若不是那麼符合想要的方向,再從頭調整。
兩欄之間的間距(Gutter)自己簡單設定了 5mm、10mm、15mm,比較下10mm 視覺感受上是適中的。也可以創建幾個不同網格、欄位,看看它們在一起的距離,就會看得出一個間距是否太寬或者是太窄。
Helpful Resources
更多公式,可參考:
練習成果
後記
為何想要去做:
「溫故知新」—現代科技的潮流,都源自於經年累月的精髓,簡單來說傳統印刷與數位網頁之間皆是息息相關的。想追根究底地解開打結的小腦袋,不管做什麼事情願意從頭來過,先耐心的一步一步走過來,接著盡力做好有注意到的小細節,畢竟對於網格系統我是個一無所知的菜鳥。
正因為一無所知,才察覺到自己知識是匱乏的,因此試圖去做突破自我的事。
接下來呢?
嘗試在各種媒介上做出不同主題,去反覆的訓練、不斷練習網格排版(像有很多網格、排版等系統原則都還沒完全去試過),未來會運用在網頁等多媒體平台上做更廣泛的應用,我想這過程中會學到書本上學不到的東西。
到時候就能寫篇文章分享給大家囉👍
參考資料
- Josef Müller-Brockmann. Grid Systems in Graphic Design. Niggli: 1996.
- Antonio Carusone & AisleOne. The Grid System–The ultimate resource in grid systems.
- Zac Fukuda. How to Draw Grid on A4. Jan 23, 2018.
- Andrew Maher. How you make a grid.
- Joe Chang. 歐文字體設計工作坊的講義. Eyeson Type.
Hi 非常謝謝你看完我的文章:喜歡的話,
別忘了按下 👏👏👏 拍手鼓勵鼓勵。有了無形地鼓勵,
將會成為驅動下篇文章的精神糧食哦!- 很歡迎 Follow Yakko Wu 接收最新文章
- 或者是 Follow Yakko Twitter(不時有遊戲、設計、創作、開發心得的分享)歡迎追隨、一起交流互動 :)若有疑問的地方,
非常歡迎文章底下留言或來信 imyakkowu@gmail.com 一起討論~謝謝
希望大家能從網格排版中,找到屬於自己的風格哦 :)