KC1982′ Creative

格線系統(Grid System)是用以建構文字區塊以及圖片或是媒體區塊的基本排版技巧。

基本的作法就事先在畫面上拉出等量的導引線，再依照導引線區塊把相關素材放進區塊中，如此作法可以確保畫面中的素材整齊排列而不會淪於混亂。
格線的基準值會影響畫面整體平衡，以網頁設計來說，可用網站Logo大小去訂出相關格線距離。

(完成圖—-可點擊放大)

Step1：以Logo的大小畫出格線，並注意讓之後加上的影像敘述文字和左側的導覽文字對齊，可以運用"尺標工具"先把導引線畫出。

Step2：依照所畫出的導引線，把中間影像敘述文字加上。

Step3：置頂的導覽連結跟Logo間的距離、Logo跟影像區塊的距離若是相同的話，會讓人覺得有律動感，頁面也會感覺比較整齊。

Step4：若是影像區塊需要再放大的話，只需要注意，跟上下區塊的距離即可。

Step5：追加的頁尾宣告事項區塊，也是和其他區塊間距是相同的，如此看起來比較自然。

後記：此方法容易使用，且編輯出的版型很整齊，但是卻容易流於呆板，這裡可以建議的是，中間的影像區塊可以使用Flash或是Js達到一個動態的效 果，讓網頁不會因為呆板的格線排列而顯得無趣。另外，使用格線系統也不一定全部都要參照格線的區塊去排列，在編輯的時候偶爾可以把導引線拿掉試試不一樣的 排版方式。

PSD檔案下載：Download

參考網頁：http://www.folietto.at/

參考資料：設計的美學WEB LAYOUT  設計師：矢野