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