本篇文章附 Adobe Xd 的 Grid layout 原檔提供使用
當你匯入資料夾中的文案內容、圖片素材，開始憑感覺在排版，彷彿有一隻看不見的滑鼠，這邊移一點、那邊擺過去，連續地Command + Z 讓你更失措，傷透腦筋怎麼樣都不好看，消耗的時間榨乾你的耐性。
如果說人是會善用工具的動物，你又何苦為難自己的人設呢？
網格系統就是要讓你有靠維持秩序與實現邏輯完成設計。
要瞭解 Grid System 讓我們從源頭開始，20世紀初一群歐洲慵懶浪漫的設計師，在智械危機後相互扶持，某天一名隊友背後發光「我已超凡入聖！」而找到內心的平靜，發現唯有維持視覺秩序，從而使版面能更加清晰有效地傳遞信息，才能從根本解決問題，史稱 Swiss Typography Movement (瑞士新浪潮平面設計運動)，後來成為全球風靡的 International Typographic Style (國際主義設計風格) 。
他們的信念被全球設計師接受，在平面設計領域被奉為教科書，只是，絕大多數的設計師都不理解為什麼要建立網格這樣的一個秩序系統。那麼，如果想要心悅誠服地運用網格系統，就必須仔細地研究網格的所有原理，這邊整理出三大重點：
重點1 ) 敵不動我不動，以不變應萬變。
被賈伯斯稱為史上最偉大的平面設計師 — 美國設計教父 Paul Rand (保羅・蘭德)曾對網格系統下過定義：
「網格的概念是給你一套層級系統，但同時也給你豐富的多樣性；網格完全沒變，變的永遠是網格裡面的東西，就是這點讓事情變得更有趣。」
也就是說，網格系統並不是要縮限設計師想像力，而是在有限制的規範內應允你嘗試各種不同的可能性、快速創造出不同的排列組合，還能能夠有效凸顯視覺層次與強調資訊重點。
重點2 ) 盡可能地利用版面達到最高經濟效益。
以網頁設計來說，非常多的時間都是在排版上周旋，若是沒有適當的輔助線，很容易陷在怎麼都排不好看的深淵當中。
網格系統強調比例，重視數學上的和諧，藉此可以輔助你用科學的方法找到最佳解，妥善利用負空間(留白)與資訊內容的比例，架構出舒適的體驗。
重點3 ) 整齊劃一且容易閱讀
既然網格系統是從平面發展而來，有效資訊傳達就是一脈相承的主軸，當載體從紙質換成電腦、手機或電視，都當比照辦理。
網頁 UI 設計的發展至今，已經有極為目標導向的設計方法，取決於受眾、商業考量與使用者體驗，如果今天要的是敘事情境型、炫技動態型網頁，那當然就是吸引人、感覺帥就好；但更常見的需求是讓使用者在被海量的資料淹沒中得到指引的資訊型網頁，簡單、直接的版面才是政治正確的選擇。
並且，跨裝置的一致體驗也愈受重視，響應式網頁(RWD)已成為標配的今天，若與工程師共用相同的網格系統進行設計，可以大大加速產品開發流程，也因此像是 Bootstrap 以 flexbox 建立的容器，或 WordPress 5.0 Gutenberg 區塊編輯器等，都已經透過網格建構出方便操作編輯的系統。
那麼該如何製作網格 (Grid) ?
margin 是畫面兩側的留白，能隨著 RWD 的斷點改變大小。
Column 是網格中的欄位，為填充主要內容使用，其數值以畫面尺寸而定。
Gutter 是欄位間的縫隙，用來分開內容，可視情況調整數值。你可能有在網路上看過 Photoshop 自製網格教學或外掛，但在 Adobe Xd 裏透過 Grid Layout 可以更輕鬆地達成，不過為了協助剛開始學習的學員們，我製作了一份響應式的 Grid System.xd 檔案，下載之後每次開啟新專案都可以直接拉過去使用哦！
至於在 Adobe Xd 中如何搭配 Grid system 進行設計，我們將在正式課程中透過詳細的說明讓你更容易理解，到時候見啦！ :)
本篇文章為「Adobe Xd設計實務｜成為UI設計師的8項核心技能」 線上課程蒐錄教材，更多 UI 設計學習資源將於正式章節中釋出。
我是 Riven ，如果這篇內容還算受用的話，歡迎幫我在旁邊拍手處給予 1~50下的鼓勵，更多 UI/UX設計相關文章可以發摟我的 Medium。
有任何問題或交流討論，都可以透過我的 Facebook 臉書。我們下次見囉 😉
