視覺設計師的五項技能修煉方法

 　　我的職責通常是產品戰略和設計方向的規劃，很少參與具體的設計細節，但我一直相信基礎設計技能對於設計思維的影響，以下五條是我認為頁面設計最基礎的技能要求。沒有經歷任何藝術教育的設計師(比如我)也可以通過對以下五項修煉的培養迅速提高基礎設計能力 >>>

　　一、草繪

　　無論前端技術發展成什麼樣，在自然交互界面沒有大行其道，只要圖形界面依然是交互設計的主流，網頁設計的基礎還是版式設計。換句話說，很多人的設計感不好來源於對於版式設計的基礎並不了解。

　　在傳統的印刷物或圖形設計領域，一件作品的創造過程通常經歷4個基礎步驟：

　　Sketch草繪：也叫做Thumbnail Sketch，通過大量的設計草繪逐漸形成設計概念(如下圖);

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

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

　　Finish完成：完成最終設計。

　　源於傳統平面設計領域的頁面設計同樣也應該遵循草繪、初版、精版、完成的過程。可惜的是很多頁面設計師因為種種原因，並沒有養成從草圖開始逐步細化的職業設計習慣。事實上，我只是從2012年時開始練習草繪的，在此之前我也有上手就是PS或者代碼的習慣，下面這張圖是我自己練習的第一張草繪圖：

　　經過三個月的練習，逐漸可以達到草繪場景圖、信息圖、Sketchnote等水平，當場景圖都能熟練表達的時候，繪制一個頁面就變得非常簡單了，如下面的圖：

　　值得提的是我並沒有接受過專業的美術訓練，只是很小的時候喜歡畫畫而已，在短時間內，只要不斷進行練習，相信在最多不到6個月的時間內，就能完全掌握草繪的技能

　　二、使用網格

　　草繪是最基礎的頁面設計技能，而對網格(或柵格系統)的使用更是被很多設計師忽視。同樣作為平面設計重要的工具之一，早在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可以快速生成自定義的頁面網格系統，如下圖：

　　當我們看細節，每個頁面元素的左邊緣都和縱向輔助線對齊，同時觀察元素高度、字體的行高、元素間的空隙、段落間距，都由橫向網格進行規范，保證高度都是8的整數倍，以及縱向居中，以及如下圖：

　　值得提醒的一點是，使用這樣大規模的網格系統，一個頁面做下來眼睛不殘廢也要半瞎，我特別貼心(這麼貼心是不是讓你特別想與我工作呢?)地告訴大家在全局設置裡可以更改網格的顏色，默認的Cyan藍基本坑人，再將畫板背景顏色改成淺灰色：

　　最後的操作界面看起來就舒服多了，多麼的貼心。

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

　　使用網格是一種習慣，它的基本邏輯是：美也許還需要一些天賦和感覺，但是對齊這件事，是可以通過後天努力和細心以及一些工具完成的。

　　三、使用留白

　　羅伯特卡帕說：If your photographs aren’t good enough, you’re not close enough(照得不夠好，靠得不夠近)，在頁面設計的領域，這句話應該改為“設計得不夠好，隔的不夠開”—— 實際上，設計成功的決定因素往往在空白處。留白本身的含義其實並不是頁面上空白的區域，而在於如何用更少的視覺元素表現足夠的含義，比較下面兩個表格：

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

　　空白還可以賦予頁面元素更多的含義，讓你用簡單的文字表現出從屬關系，例如下面這個例子：

　　第一個例子中留白放在正文上部，標題和URL成為一體，URL成為標題的附屬元素;第二個例子中不留白，三者成為了一體，看起來就像Google搜索結果;第三個例子留白放在了URL上面，URL變成了正文的一部分。

　　再從美學的角度，傳統平面設計(下圖)的經典設計原則亦是如此——視覺元素的功能是“輔助”內容本身，切勿喧賓奪主。回過頭來看擬物化和扁平化風格的爭執，我對此的觀點是，至少在Web端，一定會向平面設計(Print)風格傾向，意味著閱讀性內容的設計中一定會減少陰影、漸變、圖標、浮動的使用，而更重視字體的使用、更豐富的排版方式、高質量圖片、以及大量的留白。

　　總而言之，學會使用留白，不但是提升信息傳達效率、還是符合美學趨勢的重要技能。

　　四、使用字體

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

　　字體的選擇

　　字體重量的組合

　　字符間距

　　行高

　　當然這裡討論的是豐富程度遠超中文網頁字體(Web Font)的西文字體，在字體的選擇時，有以下兩個原則：

　　多種字體重量(Weight)的優先;

　　有Condensed的字體優先;

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

　　字體重量和樣式豐富的字體集在頁面設計時有更大的選擇空間和豐富的組合方式。