網頁首圖的設計技巧

一、雙色冰淇淋漸變

首圖當作全屏出血大圖處理時，你可以將圖片調色成為雙色漸變，有點像我們吃的雙色冰淇淋球，選一組你認為能激發心理氛圍的配色，最好是對比色，帶來強烈的視覺落差。由於要作為背景而存在，整體的色彩明度要區別於文字的顏色。這裏推薦的這一方式只需要利用PS中的“漸變映射”工具，就能輕鬆獲得。

上圖所示的設計中，我們不僅採用了這種雙色映射，還利用線條創造了視覺焦點，引導了用户的視線。

二、線條引流

沒錯，延續上一個例子所用的方法，這也不失為一種首圖設計方式。在首圖中讓線條來引導實現去穿越你想要焦點停留的地方。

上圖所示的設計，重點是模特和文字，因此，我們採用了9這個數字的線條方向，利用這個線條的環繞運動，最後從上至下游走過文字。這裏的心理預期是要把9筆畫完成，因此你沒有可能跳過文字。

三、動態情景

對於首圖的選擇，你可以焦距到動態場景。這類動態場景由於本身模特的動態造型，會調動觀眾的運動神經，激發頁面的活力。

大家可以想象，如果將上圖的主角換成一個靜物，效果將是不同的。這裏將模特的方向加以改變後重新降低透明度的`做法，帶來一定的虛實結合的感受。

四、謹慎配色

我們希望大家在運用首圖時，儘量不要去觸屏普通的風景圖。自然風光雖然好，但大片風景會表現出一團飽和的顏色堆疊，其實運用在網頁中略顯得沒有重點。因為你要為最終配圖運用以後所出現的顏色負責，色彩儘量控制在三種顏色之內，這條道理相信設計師們都會贊同，因此，這裏的配圖的色彩最好也能有所節制。

如這個設計中，整個圖片都呈現大片灰白，其實正是對顏色進行管控的技巧。當然你也要來個大花襖也無傷大雅，關鍵是運用時除了要注意元素的色彩，還要對首圖的色彩本身也足夠警惕。

五、虛擬現實

當然，我們這裏談的不是虛擬現實（VR），而是在首圖設計時，試着將靜物表現得更為“現實”，好像它們就在你的屏幕上，隨手可以取到。但這個表達法，最緊要的是要為虛擬尋找出口，也就是説，不能完全寫實，要讓用户看出虛擬的破綻，從而讓形象更為立體。這類表達技巧在首圖中有手機，利用APP產品展示等最為常見。

這是我們今年出的一款開源的輕移動口袋雜誌，展示這個設計的時候，我們就運用了虛擬現實的設計方式，增加背景圖案，並讓咖啡和太陽鏡作為一種“休閒”的視覺提示物件，讓用户能感受到它們的現實的同時又能從背景中看出“破綻”。

六、文字本身的美

每張首圖也許我們都希望能配上文字，其實文字本身也能成為一種風景，有時候適當運用一些具有圖像風格的文字，更能傳遞文字本身的能量。

如果能將文字看作圖像，書法文字是最合適不過了。書法本身的隨意瀟灑，和普通的印刷字體相比有着不可比擬的個性感。這裏，運用了書法作為主角，本身書法作為傳統國粹，在東方傳統的行業裏運用非常應景。當然，這裏的書法本身還可以寫得更好。

七、靜止的力量

對稱能帶來一種莊重靜止的力量，因此，在首圖設計中，你不妨採用對稱的佈局方式來設計首圖。但由於對稱本身略顯得靜止呆板，因此在設計上更需要多一些匠心，增加一些比較能突破規則小細節。

對稱的佈局最好採用倒三角的構圖，這樣視線會更靈活，從上往下會顯得更流暢，否則就會有一種滯澀不前的感受。

八、左圖右文

首圖的設計除了全屏展示，還有一種方式是可以放左邊圖片右邊文字的方式，這樣的設計技巧帶來的好處就是可以分割圖文，特別在圖片信息也同樣重要的時候，如果把圖文混合，雙方都不夠凸顯，不如左右各凸出主角，跟隨先左後右的視線也能傳遞本身的視覺效果。

如上圖所示，左右結構的傳達效果更為清晰明確。你不會錯過圖片中美食的細節，也不會忽略文字的描述。色彩是鮮豔欲滴的橙色，食物和文字背景渾然一體。

首圖的設計技巧千變萬化，這裏只分享一小段，你的下一個設計如果苦於沒有靈感，不妨看看本文。