一、草繪

無論前端技術發(fā)展成(chéng)什麼(me)樣(yàng)，在自然交互界面(miàn)沒(méi)有大行其道(dào)，隻要圖形界面(miàn)依然是交互設計的主流，網頁設計的基礎還(hái)是版式設計。換句話說，很多人的設計感不好(hǎo)來源于對(duì)于版式設計的基礎并不了解。

在傳統的印刷物或圖形設計領域，一件作品的創造過(guò)程通常經(jīng)曆4個基礎步驟：

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。

Sketch草繪：也叫(jiào)做Thumbnail Sketch，通過(guò)大量的設計草繪逐漸形成(chéng)設計概念（如下圖）；

Layout初版：初版主要構建基礎的元素以及體現元素間的主次關系；

Comp精版：在精版中一部分展示更多的細節；

Finish完成(chéng)：完成(chéng)最終設計。

源于傳統平面(miàn)設計領域的頁面(miàn)設計同樣(yàng)也應該遵循草繪、初版、精版、完成(chéng)的過(guò)程。可惜的是很多頁面(miàn)設計師因爲種(zhǒng)種(zhǒng)原因，并沒(méi)有養成(chéng)從草圖開(kāi)

始逐步細化的職業設計習慣。事(shì)實上，我隻是從2012年時開(kāi)始練習草繪的，在此之前我也有上手就是PS或者代碼的習慣，下面(miàn)這(zhè)張圖是我自己練習經(jīng)過(guò)三個月的練習，逐漸可以達到草繪場景圖、信息圖、Sketchnote等水平，當場景圖都(dōu)能(néng)熟練表達的時候，繪制一個頁面(miàn)就變得非常簡單了，如

值得提的是我并沒(méi)有接受過(guò)專業的美術訓練，隻是很小的時候喜歡畫畫而已，在短時間内，隻要不斷進(jìn)行練習，相信在最多不到6個月的時間内，就能(néng)完全掌握草繪的技能(néng)，關于草繪，可以參考Alistpast的文章《Sketching：the Visual Thinking Power Tool》。

二、使用網格

草繪是最基礎的頁面(miàn)設計技能(néng)，而對(duì)網格（或栅格系統）的使用更是被(bèi)很多設計師忽視。同樣(yàng)作爲平面(miàn)設計重要的工具之一，早在1629年，法王路易十四命令成(chéng)立一個管理印刷的皇家特别委員會，由數學(xué)家尼古拉斯·加宗（Nicolas Jaugeon）擔任領導。委員會提出了新字體設計建議：以羅馬體爲基礎，采用方格爲設計依據，每個字體方格分爲64個基本方格單位，每個方格單位再分成(chéng)36小格，這(zhè)樣(yàng)，一個印刷版面(miàn)就由2304個小格組成(chéng)。

這(zhè)是世上最早對(duì)字體和版面(miàn)進(jìn)行科學(xué)實驗的活動。也是栅格系統的雛形。

巧合的是，我一直推崇的水平網格單元正是8px，最初的想法是中文基礎字符高度爲12px，通常1.5倍行高正好(hǎo)是16px也就是兩(liǎng)個網格高度，在這(zhè)裡(lǐ)并沒(méi)有什麼(me)科學(xué)依據，也許8這(zhè)個數字比較吉利吧。

網格使用主要是兩(liǎng)個方向(xiàng)，一個是水平網格，用于控制縱向(xiàng)節奏（Vertical Rhythm）如下圖的比較：

另一個是大家更熟悉的縱向(xiàng)網格，也叫(jiào)做Grid System（如下圖），因爲960.gs等前端框架的流行，Grid System目前較爲普遍，大部分設計師都(dōu)懂得使用縱向(xiàng)的栅格規劃頁面(miàn)結構。

而真正規範的頁面(miàn)設計同樣(yàng)要考慮縱向(xiàng)頁面(miàn)栅格和縱向(xiàng)節奏，無論你使用Photoshop還(hái)是Sketch都(dōu)可以較爲方便地生成(chéng)橫向(xiàng)和縱向(xiàng)兩(liǎng)個方向(xiàng)的輔助線，以Photoshop CC 2014爲例，使用插件GuideGuide可以快速生成(chéng)自定義的頁面(miàn)網格系統，如下圖：神器地址：《PS 參考線插件GUIDEGUIDE下載及使用說明》

當我們看細節，每個頁面(miàn)元素的左邊緣都(dōu)和縱向(xiàng)輔助線對(duì)齊，同時觀察元素高度、字體的行高、元素間的空隙、段落間距，都(dōu)由橫向(xiàng)網格進(jìn)行規範，保證高度都(dōu)是8的整數倍，以及縱向(xiàng)居中，值得提醒的一點是，使用這(zhè)樣(yàng)大規模的網格系統，一個頁面(miàn)做下來眼睛不殘廢也要半瞎，我特别貼心（這(zhè)麼(me)貼心是不是讓你特别想與我工作呢？）地告訴大家在全局設置裡(lǐ)可以更改網格的顔色，默認的Cyan藍基本坑人，再將(jiāng)畫闆背景顔色改成(chéng)淺灰色：最後(hòu)的操作界面(miàn)看起(qǐ)來就舒服多了，多麼(me)的貼心。

當然，最重要的快捷鍵是cmd+H，它幫助你快速切換是否顯示網格。

使用網格是一種(zhǒng)習慣，它的基本邏輯是：美也許還(hái)需要一些天賦和感覺，但是對(duì)齊這(zhè)件事(shì)，是可以通過(guò)後(hòu)天努力和細心以及一些工具完成(chéng)的。

三、使用留白

羅伯特卡帕說：If your photographs aren’t good enough, you’re not close enough（照得不夠好(hǎo)，靠得不夠近），在頁面(miàn)設計的領域，這(zhè)句

話應該改爲“設計得不夠好(hǎo)，隔的不夠開(kāi)”—— 實際上，設計成(chéng)功的決定因素往往在空白處。留白本身的含義其實并不是頁面(miàn)上空白的區域，而在于如何用更少的視覺元素表現足夠的含義，比較下面(miàn)兩(liǎng)個表格：

這(zhè)就是空白的力量，它既減少了視覺元素的使用，同時提高了信息的可讀性，當我們回頭看看Google最新一次設計改版的變化，最顯著的便是空白的使用：

空白還(hái)可以賦予頁面(miàn)元素更多的含義，讓你用簡單的文字表現出從屬關系，例如下面(miàn)這(zhè)個例子：

第一個例子中留白放在正文上部，标題和URL成(chéng)爲一體，URL成(chéng)爲标題的附屬元素；第二個例子中不留白，三者成(chéng)爲了一體，看起(qǐ)來就像Google搜索

結果；第三個例子留白放在了URL上面(miàn)，URL變成(chéng)了正文的一部分。

再從美學(xué)的角度，傳統平面(miàn)設計（下圖）的經(jīng)典設計原則亦是如此——視覺元素的功能(néng)是“輔助”内容本身，切勿喧賓奪主。回過(guò)頭來看拟物化和

扁平化風格的争執，我對(duì)此的觀點是，至少在Web端，一定會向(xiàng)平面(miàn)設計（Print）風格傾向(xiàng)，意味著(zhe)閱讀性内容的設計中一定會減少陰影、漸變、

圖标、浮動的使用，而更重視字體的使用、更豐富的排版方式、高質量圖片、以及大量的留白。

總而言之，學(xué)會使用留白，不但是提升信息傳達效率、還(hái)是符合美學(xué)趨勢的重要技能(néng)。

四、使用字體

字體才是内容與用戶的交互界面(miàn)，學(xué)會處理字體也是網頁設計的基礎技能(néng)之一。在使用字體的時候，有如下幾點需要加強練習：

字體的選擇

字體重量的組合

字符間距

行高

當然這(zhè)裡(lǐ)讨論的是豐富程度遠超中文網頁字體（Web Font）的西文字體，在字體的選擇時，有以下兩(liǎng)個原則：

多種(zhǒng)字體重量（Weight）的優先；

有Condensed的字體優先；

基于這(zhè)個選擇原則，四套最受歡迎的英文網頁字體分别是Helvetica Neue。Roboto。Avenir以及Open Sans。

字體重量和樣(yàng)式豐富的字體集在頁面(miàn)設計時有更大的選擇空間和豐富的組合方式。不同重量和風格的字體通常有不同的含義，例如以最簡單的斜體

（Italic）爲例，它的使用含義可表達在正文中的“強調”，例如強調某個詞、某個專門定義、特定名稱；也可以表達引言；而粗體大寫通常是表達強烈的标題性文字。

不同字體的組合可以體現更加舒适的閱讀體驗，在下面(miàn)的例子裡(lǐ)，我隻使用了一種(zhǒng)字重的：

當我們學(xué)會不同字重的組合時，閱讀體驗將(jiāng)會變得更加好(hǎo)，用戶從字重中就可以識别文字的含義。

五、使用顔色

顔色通常是一個初級設計師比較頭疼的事(shì)情，我們對(duì)于色彩的敏感往往不能(néng)夠很好(hǎo)地對(duì)色彩進(jìn)行搭配，但通過(guò)一定的練習也可以達到好(hǎo)的效果，這(zhè)

裡(lǐ)我的練習方法是填色練習。

反複重複鍛煉，可以形成(chéng)下面(miàn)多個色彩搭配的，用這(zhè)樣(yàng)的方式可以幫助你培養你對(duì)色彩的配搭感覺。

隻要我們不那麼(me)貪心（使用多于兩(liǎng)種(zhǒng)的顔色），從藝術作品中借鑒某些顔色的配搭，選取冷熱兩(liǎng)種(zhǒng)主色，再加上不同灰度的黑色作爲輔色，或者冷

熱主色的不同透明度的色階，一個簡單的網頁界面(miàn)色彩的管理是足夠勝任的，如下面(miàn)這(zhè)個界面(miàn)的設計：

寫在最後(hòu)

我并不像很多設計師是從工業設計開(kāi)始設計生涯的，也并沒(méi)有接觸過(guò)專業的美術基礎教育，在我的工作裡(lǐ)也并不需要我進(jìn)行細節的視覺設計，但是

我相信，基礎視覺設計技能(néng)是談論設計的基礎。同時我也看到，很多視覺設計師并沒(méi)有養成(chéng)“幹淨”的設計習慣，對(duì)于留白、字體、栅格的使用都(dōu)

非常随意，我相信本篇的内容對(duì)他們也會有些幫助。

因此，一個非專業視覺設計師視覺方面(miàn)的修煉，就是以下五步：

練習草繪；

嚴格使用網格（對(duì)TM齊）；

練習留白；

練習字體組合表達内容；

練習色彩搭配。