一個合格的互聯網美工必須了解的入門知識

Photo of author
Written By CMO

互聯網行業中除了碼農這樣的“基層崗位”還有一種在金字塔底層的職位叫做“美工”。筆者從事數字行銷的十多年來和不下十個美工打過交道,面試過的更有數十人之多。美工們正規的名字應該叫圖形設計師,或者互聯網行業也會叫網頁設計師。他們每天所做的工作就是設計各種頁面,Banner小廣告,海報以及一些PPT,他們的好朋友是PS,AI,Flash。許多美工是藝術院校科班出身,也有許多來自各種藍翔,他們是一群“讓網絡世界變得更美好”的園丁。

你是個好美工嗎?
你是個好美工嗎?

美工之殤

美工這份看似平凡的互聯網職業實際上是對智慧要求特別高的。如果說前端開發工程師的衡量標準是“畫出來的是什麼他就能碼出來什麼”的話,美工在實施繪圖之前,需要大量的創造性思考。因此筆者非常尊敬那些出色的美工同事,他們往往是一個行銷活動成功的關鍵。

美工所進行的思考活動是圍繞著產品本身的藝術性和視覺效果承載的科學性雙重目標的。一個畫家並不一定能成為一個好美工,因為畫家的作品可能很難為行銷推廣所服務。而一個合格的美工卻可以做到,即便他不是為了自發的喜愛的產品在進行服務。所以有著一個好美工的企業往往是幸運的,尤其是國內,因為這樣的人才實在很少見。

以轉化為目標的設計(Conversion Centered Design)

筆者面試過許多美工,他們來面試時往往會帶著自己的作品。有各種網站的設計,賀卡設計,名片設計,Banner設計,圖標設計,甚至一些素描作品。但是問及你為什麼這樣設計時,他們的回答往往比古龍的武俠小說更縹緲更感性。當然也有說老闆要求我在這裡加個花弄個草的。實際上“所有不以轉化為目的的藝術設計都是耍流氓”。藝術性,用戶體驗,轉化能力這三者很多時候是矛盾的。我們所說的合格的美工就是以轉化能力為主要目的來進行設計的專業人員,其中優秀的那些人可以做到在最大化轉化能力的基礎上,同時對藝術性和用戶體驗的損失達到最小。那麼有哪些“藝術”上的特殊構思可以讓我們的設計為轉化率提高提供保障呢?

以轉化率為基礎的設計原則

封裝效應

一個封裝良好的區域會特別吸引觀察者的注意力,這好比在一個房間中我們總會看看窗外的景色。在下圖中我們可以看到遠處的景色會特別引起我們的注意力:

封裝效應
封裝效應

將頁面上的重要元素封裝起來會讓這些元素更加突出。另一個例子是類似於007片頭的隧道效果:

007隧道效果
007隧道效果

你最終會把視線聚焦在穿西服的男子身上。

視線暗示

人和動物的視線有著強烈的暗示作用,這是行為學的理論。談若有一個路人止住腳步往上看,那麼身邊的人也會跟著他往上看。下圖中的猴子的視線就讓我們的視線聚焦在它掌中的香蕉上:

視線的引導作用
視線的引導作用

頭隨眼動,在下面這個例子中你不但會好奇草叢裡藏著什麼,更會下意識地跟著這只草原狼往下看。

頭隨眼動
頭隨眼動

視線的奇妙作用實際上HubSpot One早在兩年多前的《完美著陸頁終極攻略》一文中已經介紹。我們再來回顧一下:

選圖對訪客視線的引導
選圖對訪客視線的引導

不過我們也提到,有時候目光交流會給人更多的情感推動。比如說下面這張拍攝於1985年的著名《阿富汗難民女孩》,它被用作了當年的國家地理雜誌封面:

阿富汗少女的眼神中你閱讀出什麼?
阿富汗少女的眼神中你閱讀出什麼?

留白

相信你一定聽過這樣一句名言“Less is more”。將所有空間填滿是業餘美工的特徵之一。HubSpot One曾經多次提到的在CTA周圍要留白或留空就是這個道理。我們看下面這張圖,正是因為畫面的“一無所有”你才會注意到那隻叉角羚:

Less is More!
Less is More!

同時,這張圖也是視線引導的又一例子。

強對比的應用

那些追求美的業餘美工另外一個最常犯的錯誤就是過分地追求“和諧”。 “在藍色的背景上使用一個藍色的按鈕”,“在紅色的背景中使用紅色字體的標題”,這些都是epic fail!一個好的設計師非常善於利用對比來引導觀察者的視線。舉個例子:

你的鼠標指針會自然地放到月亮上
你的鼠標指針會自然地放到月亮上

色彩的感情應用

你可能見過下面這張圖:

品牌的色彩應用和情感暗示
品牌的色彩應用和情感暗示

實際上一些顏色還有一些負面效果。比如女性最不喜歡的顏色是橙色、棕色和灰色。男性最不喜歡的顏色是棕色、橙色和紫色(你懂的)。 KissMetrics在兩年前曾有一篇不錯的博文就是講顏色的準確運用的,感興趣的可以移步這裡。下面這兩個例子展示了鮮豔色彩對視線的牽引能力:

你會不由自主地註視彩色湖面
你會不由自主地註視彩色湖面
你不會錯過這只“漂亮”的蚱蜢
你不會錯過這只“漂亮”的蚱蜢

方向標識效應

生活中我們總是用箭頭指示一些重要的訊息,在網頁上我們的瀏覽習慣仍然適用。下圖中我們會很自然地註意到右邊的男子:

箭頭的指示作用
箭頭的指示作用

在網頁設計中,我們可以添加一些箭頭和三角形來引導讀者瀏覽重要訊息。同樣作用的還有通路效應:

通向遠方的道路
通向遠方的道路

我們的視線會隨著公路延伸到盡頭。如果你的頁面很長,那麼引入一條垂直的“通路”可以幫助瀏覽者向下閱讀。

進一步學習CCD

以上HubSpot One為讀者介紹了以轉化為中心的設計,即CCD。同時,我們重點講了合格美工必須要了解的一些設計原則。在著陸頁和Banner的設計中,我們時常需要應用這些理論。這些設計原則和許多其他的CCD相關的重要知識都包含在了Unbounce的電子書《The Ultimate Guide to Conversion Centered Design》中。此外CrazyEgg在兩年前也有一篇關於此專題的匯總貼,傳送門在這裡。感謝關注HubSpot One。