感謝大家繼續留意本系列文章，今天創優翼小編教給大家的，是成爲UI界野區小王子的第二個技能~~網絡！
技能二 —— 網格
草繪是最基礎的頁面設計技能，而對網格（或柵格系統）的使用更是被很多設計師忽視。同樣作爲平面設計重要的工具之一，早在1629年，法王路易十四命令成立一個管理印刷的皇家特別委員會，由數學家尼古拉斯·加宗（Nicolas Jaugeon）擔任領導。委員會提出了新字體設計建議：以羅馬體爲基礎，採用方格爲設計依據，每個字體方格分爲64個基本方格單位，每個方格單位再分成36小格，這樣，一個印刷版面就由2304個小格組成。這是世上最早對字體和版面進行科學實驗的活動。也是柵格系統的雛形（下圖）。
草繪是最基礎的頁面設計技能，而對網格（或柵格系統）的使用更是被很多設計師忽視。同樣作爲平面設計重要的工具之一，早在1629年，法王路易十四命令成立一個管理印刷的皇家特別委員會，由數學家尼古拉斯·加宗（Nicolas Jaugeon）擔任領導。委員會提出了新字體設計建議：以羅馬體爲基礎，採用方格爲設計依據，每個字體方格分爲64個基本方格單位，每個方格單位再分成36小格，這樣，一個印刷版面就由2304個小格組成。這是世上最早對字體和版面進行科學實驗的活動。也是柵格系統的雛形（下圖）。
另一個是大家更熟悉的縱向網格，也叫做Grid System（如下圖），因爲960.gs等前端框架的流行，Grid System目前較爲普遍，大部分設計師都懂得使用縱向的柵格規劃頁面結構。
而真正規範的頁面設計同樣要考慮縱向頁面柵格和縱向節奏，無論你使用Photoshop還是Sketch都可以較爲方便地生成橫向和縱向兩個方向的輔助線，以Photoshop CC 2014爲例，使用插件GuideGuide可以快速生成自定義的頁面網格系統，如下圖：
當我們看細節，每個頁面元素的左邊緣都和縱向輔助線對齊，同時觀察元素高度、字體的行高、元素間的空隙、段落間距，都由橫向網格進行規範，保證高度都是8的整數倍，以及縱向居中，以及如下圖：
值得提醒的一點是，使用這樣大規模的網格系統，一個頁面做下來眼睛不殘廢也要半瞎，我特別貼心（這麼貼心是不是讓你特別想與我工作呢？）地告訴大家在全局設置裏可以更改網格的顏色，默認的Cyan藍基本坑人，再將畫板背景顏色改成淺灰色：
插入
最後的操作界面看起來就舒服多了，多麼的貼心
插入
當然，最重要的快捷鍵是cmd+H，它幫助你快速切換是否顯示網格。
使用網格是一種習慣，它的基本邏輯是：美也許還需要一些天賦和感覺，但是對齊這件事，是可以通過後天努力和細心以及一些工具完成的。
好了，今天的第二個技能就介紹到這裏，創優翼期待與你一起進步。我們下次再接着談剩下的技能。
