溫故知新 — 初探 Grid 網格
[涉及領域：平面印刷、使用者介面、前端工程]
「它分了各種型態，搞得我好亂」
「以前大學的設計科老師、教授都沒教」
「到底在什麼情況下，又如何使用它們呢？」
— 來自曾摔了個跤又懞懂的自己
首先，先暫時別讓各種別人的聲音影響思緒，試著向源頭探尋，將不會迷失在茫茫的資訊大海裡。
有兩本書 LAYOUT NOW 以及 Grid Systems in Graphic Design 啟發了我，因此這篇文章將以此為骨架，分兩大類別：
用自身經驗試著如何詮釋整個脈絡，以重點摘要的條列方式整理出來，較為偏重在理解觀念上。
另外，怕篇幅過長影響了理解效率，因此實作面不會細說太多，若有機會的話，將成為往後文章的主題。
我們一起開始吧 :) 🚩
網格目的
在排版設計中，清晰、邏輯地呈現標題、副標題、文本、插圖、註解等訊息，不僅可以使閱讀變得更快速、更容易外，還可以讓訊息更容易被理解和記憶。這是一個被科學驗證的真理，每個設計師都應銘記於心。- Josef Müller-Brockmann.
此外，
Müller-Brockmann 並不認為網格系統就是成功的保證。
對他來說，網格系統只是一種輔助工具。它可以提供許多潛在的排版方式，而且每個設計師都可以在這些組合中找到符合自己風格的選項。
但要達到這點，設計師還是需要練習如何使用網格。網格的應用是一種需要練習的技藝。- 節錄自 jf blog 瑞士展專題
在平面設計中的網格 Grid use in graphic design
最早在 1629 年出現網格系統的雛形，經過好幾個世代變遷與驗證，發展出不少各式系統和方法，傳承至今融入於社會中。
有個來自瑞士的設計框架因為容易標準化、操作上相對平易近人，樣貌簡潔乾淨又直接，所以廣受歡迎。這股從 1950 年代成形，1960 年後漸漸風行世界的「國際主義」風格(international typographic style) 就是出於瑞士。至於現在設計師必用的網格系統、潮到出水的扁平設計，這些概念都可以回溯到這股運動。 — jf blog 專訪與報導 [瑞士展專題]
詳細可參閱下方文章：
排版組成 Layout Components
可以說排版是設計的血與肉所組成的實體外在。
- Column: 列（亦稱欄），在頁面上一個垂直放內容的地方，用線條或用空格處區隔開。
- Type Area: 版心，指擺放文字和圖片的地方，去除頁面外邊白色範圍的中間紅框所框選之處。
- Headline: 標題，版面中以字號較大的字體破題，吸引讀者注意與引導。
- Focal Point: 焦點，版面中最先引起讀者注意的地方。
- Copy or Body Copy: 內文，指主要的文案內容，制式文案的字號都設置成適合閱讀的大小。
- Margin: 邊界距離，版心與頁面之間的空白範圍。
- Caption: 註解，對插圖、照片或表格做解釋、補充說明。
- Image Area: 圖像區域，插圖、照片或表格要放置的位置。
- Head: 頂部，位於整張頁面上面的位置，亦即版心上方的空白處。
- Foot: 底部，位於整張頁面下面的位置，亦即版心下方的空白處。
- Bleed: 出血，是印刷時將底色、底圖等版面上有延伸至頁面之外設計的物件做延展與擴張。即頁面以外的紅色斜線區域，是會被裁切掉的範圍。
作法
排版技巧
- Visual Hierarchy 視覺層次
- White Space 留白
- Display Typeface 展示字體
- Body or Text Typeface 內文字體
- Page Number 頁碼
- Punctuation 標點符號
- Measure(Or Line Length) 每行長度：不是指行高，#01（位於第六點）
- Widows and Orphans 寡行和孤行：#01、#02
- Typographic Color 字體色彩
- Paragraph Indications 段落演示
- Alignment （排版）對齊：#01
原理原則
構成版面上比例與秩序：
- Golden Ratio 黃金比列 與 The Fibonacci Sequence 斐波那契
- The Rule of Thirds 三分法
網格組成 Grid Components
而網格則是提供支撐血與肉的骨架。
- Margin: 邊界距離， 版面最外圍與內容外邊緣之間的空白空間。
- Module or Region: 模塊（亦稱區塊）
- Flowline: 水平線，將空間分成水平方向的對齊方式。
- Spatial Zone: 空間區域，模塊相鄰連結在一起，在此範圍中分配一個特定的功能。
- Column: 列（亦稱欄）
- Row: 行，若覺得容易與列（欄）搞混，可參考此行列 & 行欄的區別範例。
- Gutter: 間隙（亦稱間距）
網格種類
- Manuscript/Single-Column Grid
- Multi-Column Grid
- Modular Grid
- Hierarchical Grid
- Baseline Grid
- Compound Grid
詳細的圖文說明，可參考下方文章：
作法
設定網格
- Accessing and Planning 編程與規劃：在決定如何設置網格前，需要考慮內容（文字和圖片數量）、所需的頁數、紙張大小、設計的性質以及許多其他因素。換句話說，設計師應該要大致了解目標受眾（Target Audience）將會如何看待（使用）這個設計專案。
首先，是由內容決定了網格的結構， 一旦知道了頁面的大小和基本文案的文本，就可以確定這些元素在頁面上最適合的方式有哪些，先製作規模較小的草圖（而且要盡可能越準確越好）幫助設計師規劃版面是好的。
使用的網格是取決於每個專案上的設計元素、需求定位，而不是讓這些去迎合制式的網格架構。
Helpful Resources
想更提升排版技能，可以參考以下的推薦：
- Nick Babich 的 Getting Typography Right in Digital Design 目前為止在網路上看過最為完整的解說文件，非常適合要入門平面與網頁設計之間的排版學問（光是這篇就可以讓您看很久）。
- Josef Müller-Brockmann. Grid Systems in Graphic Design.
- Emil Ruder. typography
- circle 設計雜誌《Emil Ruder 中文也可以》 TDC65 特別紀念版，此書是從 Emil Ruder 著作《Typography》，將此西方理論轉化至中文排版上，非常實為難得。
在網頁設計中的網格 Grid use in web design
印刷媒體界早已行以多年地廣泛應用，近十多年來，對此感到興趣的 Web developers 才開始將其運用至數位產品中，至今仍持續優化 Grid 相關的 Framework。
網格組成 Grid Components
- Margin
- Column
- Row
- Gutter (Or gap)
對於 Designer 與 Front-End Engineer 協作上是有著共同的語言，可以發現至今還是能圍繞在上述的四個元素 (Elements)，進行開發的溝通上是沒有問題的。作法
Coding
會用到的 Framework 有很多種方式可以處理，像是：CSS 的 Grid Layout、Flexbox、Float 、Inline-Block 或者使用 Bootstrap，端看 Front-End Engineer 的個人習慣或依據專案狀況，決定用哪種方式處理。
為何沒提到 960.gs 的原因是：
早已被他們自己官方認證要改用它的接班人 Unsemantic.com（A responsive grid framework），需要 Responsive Web Design 的專案，則沒必要網格都要照著像素數值能被整除的規範去處理。其中
- CSS Grid Layout
Flexbox 與 Grid 都是解決舊有問題，在 Responsive Web Design 中實現了以前無法實現的功能。
特別說明這個 Grid Layout ，發現它是最貼近設計師所採用的網格系統，而且是個強大的原生框架（Native Framework）。能利用 Two Dimensional 二維（Rows and Columns）做排版，依照設計稿規劃出要怎麼樣的 Module 與 Spatial Zone，彈性做到各種變化多端的活潑版面。
※需要注意：並不是所有的瀏覽器都能夠支援 Flexbox 以及 Grid。此外
- Bootstrap Grid (v4.X)
也是另種 Framework 選擇，若熟知它們的專屬寫法與架構，不妨可以嘗試看看。
Helpful Resources
想瞭解更多 CSS Grid，可參考下方清單：
- Grid Garden 是有著 28 個關卡的程式小遊戲
- Jen Simmons 整理的 Learn CSS Grid 文章，一起慢慢地摸索它吧
Designing
現在 Responsive Web Design 當道的時代，沒必要都照著網格數值能被整除的規範去設計（像是 960.gs），頁面劃分成任何適合專案、開發團隊或想要的內容都可以。
依照專案會用到的裝置有哪一些，以 Mobile First 來說，可以使用 StatCounter Global Stats 查詢全球所針對的區域，最多人使用的最小螢幕解析（Resolution）是什麼。
普遍會從專案需求、layout 在某尺寸下會需要做大幅度地變動，設計出由小至大的斷點（Breakpoints)，從這樣的方向著手的設計才是最重要的。而不是一味就只固定在某種（像是 960、1280、1980 等）尺寸上而已。
亦可參考以下的文章：
※要注意任何設計元件、網格元素的尺寸數值都不要出現小數點。市面上有許多各種工具能幫你快速規劃出客製化的網格系統，所以不需要自己去手動拖拉計算。
若有餘力的話，甚至可以去瞭解上段的 Coding 中提到的 CSS Flexbox、Grid Layout 或是 Bootstrap Grid (v4.X.X) ，嘗試運用在介面設計上，未來與 Front-End Engineer 溝通會有所助益的。
結語
輸入如此龐大地訊息量，釐清整個架構，試著別緊逼自己，慢慢地一步步將它輸出出來。試著踏出一步，受挫再爬起來，踏出下一步，遠比被動吸收知識更能得到深切的體悟。
至今，仍在這些領域打滾中，
努力學到的知識經驗分享給你，這會使我很快樂 😊
Hi 非常謝謝你看完我的文章：喜歡的話，
別忘了按下 👏👏👏 拍手鼓勵鼓勵。有了無形地鼓勵，
將會成為驅動下篇文章的精神糧食哦！- 很歡迎 Follow Yakko Wu 接收最新文章
- 或者是 Follow Yakko Twitter（不時有遊戲、設計、創作、開發心得的分享）
歡迎追隨、一起交流互動 ：）若有疑問的地方，
非常歡迎文章底下留言或來信 imyakkowu@gmail.com 一起討論～謝謝
參考資料 References
- Josef Müller-Brockmann. Grid Systems in Graphic Design. Niggli: 1996.
- LAYOUT NOW. SendPoints: 2017.
- Johna Paolino. CSS Grid for Designers. Times Open.
- Jen Simmons. Revolutionize Your Page: Real Art Direction on the Web.
- Jon Yablonski. Designer’s Guide to Flexbox and Grid.
