一、草繪 無論前端技術發展成什么樣，在自然交互界面沒有大行其道，只要圖形界面依然是交互設計的主流，網頁設計的基礎還是版式設計。換句話說，很多人的設計感不好來源于對于版式設計的基礎并不了解。 在傳統的印刷物或圖形設計領域，一件作品的創造過程通常經歷4個基礎步驟：
- Sketch草繪：也叫做Thumbnail Sketch，通過大量的設計草繪逐漸形成設計概念（如下圖）；
- Layout初版：初版主要構建基礎的元素以及體現元素間的主次關系；
- Comp精版：在精版中一部分展示更多的細節；
- Finish完成：完成最終設計。
源于傳統平面設計領域的頁面設計同樣也應該遵循草繪、初版、精版、完成的過程。可惜的是很多頁面設計師因為種種原因，并沒有養成從草圖開始逐步細化的職業設計習慣。事實上，我只是從2012年時開始練習草繪的，在此之前我也有上手就是PS或者代碼的習慣，下面這張圖是我自己練習的第一張草繪圖： 經過三個月的練習，逐漸可以達到草繪場景圖、信息圖、Sketchnote等水平，當場景圖都能熟練表達的時候，繪制一個頁面就變得非常簡單了，如下面的圖： 值得提的是我并沒有接受過專業的美術訓練，只是很小的時候喜歡畫畫而已，在短時間內，只要不斷進行練習，相信在最多不到6個月的時間內，就能完全掌握草繪的技能，關于草繪，可以參考Alistpast的文章《Sketching：the Visual Thinking Power Tool》。 二、使用網格 草繪是最基礎的頁面設計技能，而對網格（或柵格系統）的使用更是被很多設計師忽視。同樣作為平面設計重要的工具之一，早在1629年，法王路易十四命令成立一個管理印刷的皇家特別委員會，由數學家尼古拉斯·加宗（Nicolas Jaugeon）擔任領導。委員會提出了新字體設計建議：以羅馬體為基礎，采用方格為設計依據，每個字體方格分為64個基本方格單位，每個方格單位再分成36小格，這樣，一個印刷版面就由2304個小格組成。這是世上最早對字體和版面進行科學實驗的活動。也是柵格系統的雛形（下圖）。
巧合的是，我一直推崇的水平網格單元正是8px，最初的想法是中文基礎字符高度為12px，通常1.5倍行高正好是16px也就是兩個網格高度，在這里并沒有什么科學依據，也許8這個數字比較吉利吧。 網格使用主要是兩個方向，一個是水平網格，用于控制縱向節奏（Vertical Rhythm）如下圖的比較： 另一個是大家更熟悉的縱向網格，也叫做Grid System（如下圖），因為960.gs等前端框架的流行，Grid System目前較為普遍，大部分設計師都懂得使用縱向的柵格規劃頁面結構。 而真正規范的頁面設計同樣要考慮縱向頁面柵格和縱向節奏，無論你使用Photoshop還是Sketch都可以較為方便地生成橫向和縱向兩個方向的輔助線，以Photoshop CC 2014為例，使用插件GuideGuide可以快速生成自定義的頁面網格系統，如下圖： 神器地址：《PS 參考線插件GUIDEGUIDE下載及使用說明》 當我們看細節，每個頁面元素的左邊緣都和縱向輔助線對齊，同時觀察元素高度、字體的行高、元素間的空隙、段落間距，都由橫向網格進行規范，保證高度都是8的整數倍，以及縱向居中，以及如下圖： 值得提醒的一點是，使用這樣大規模的網格系統，一個頁面做下來眼睛不殘廢也要半瞎，我特別貼心（這么貼心是不是讓你特別想與我工作呢？）地告訴大家在全局設置里可以更改網格的顏色，默認的Cyan藍基本坑人，再將畫板背景顏色改成淺灰色： 最后的操作界面看起來就舒服多了，多么的貼心。 當然，最重要的快捷鍵是cmd+H，它幫助你快速切換是否顯示網格。 使用網格是一種習慣，它的基本邏輯是：美也許還需要一些天賦和感覺，但是對齊這件事，是可以通過后天努力和細心以及一些工具完成的。
