網格系統(Grid System)

建立網頁排版的概念,不論是學習設計適應各種大小螢幕的設計還是建立Normal flow的概念,
grid system 可以幫助設計師有所依歸。

grid system 其實是一種平面設計方法與風格,它藉由固定的格子切割版面來設計佈局方法。

運用在網頁則是把一定寬度的頁面切割成數欄,並且欄與欄之間留有間隙。

可以依【StatCounter網站頁面分析

grid system 主要是由欄(column)與間隙( gutter )所組成,
另外為視覺舒適度,不會將元素填滿整個頁面,會在兩旁留白(grid padding),
最後所有的欄、間隙與留白的寬度加總起來要等於預計設計頁面的總寬。

使用網格原因

1. 增加可讀性

使用格線佈局可以建立對齊規律的排版,藉由分欄拆出不同的區塊來放不同的內容,但同時個區塊間仍然整齊規律。

2.建立網頁設計師與前端工程師的共通語彙

當設計師與工程師都共同使用 grid system ,那在產品開發中可以從線框( wireframe)開始,視覺設計稿到最後前端 CSS 都一脈相承,不需轉換任何比例尺寸,可以加快開發速度以及降低設計與程式的溝通成本。

3.幫助設計師建立適應不同大小螢幕的佈局

因網頁會遇到使用者螢幕大小不同, 設計的單位從 pixel 變成 %,以相對比例來設計佈局。
而 grid system 提供了某種程度的比例概念,可以讓設計師比較可以做到RWD。

4.網頁前端框架軟體開發工具,多以網格方式呈現

利用Bootstrap、Fundation網頁前端框架,讓網站設計更快捷

參考

【網格】參考線繪製方法

(1) PhotoShop【網格】參考線方法

(2) illustrator【網格】參考線方法

 

End