在做之前先準(zhǔn)備好2個(gè)工作，對(duì)設(shè)計(jì)師們會(huì)有幫助：

1、 梳理設(shè)計(jì)中所需圖片類型

在圖片設(shè)計(jì)前，設(shè)計(jì)師最好能參考目前已有的網(wǎng)頁粗略布局和欄目等，重新梳理列出所需的圖片類型。

比如，按照欄目和模塊對(duì)所需的圖片分類：Banner、業(yè)務(wù)介紹、產(chǎn)品介紹/展示、公司介紹、團(tuán)隊(duì)介紹、新聞/資訊、客戶案例等。

當(dāng)然，設(shè)計(jì)師也可以根據(jù)項(xiàng)目實(shí)際情況，或最適合自己的方法采用更好的圖片分類。梳理圖片類型是幫助設(shè)計(jì)師重新梳理網(wǎng)站內(nèi)容，讓后面工作更有計(jì)劃和針對(duì)性。

2、 明確圖片的意圖

在一個(gè)網(wǎng)站中，瀏覽網(wǎng)頁時(shí)所看到的圖片不應(yīng)僅做到吸引用戶的視線，而更能讓用戶通過視覺影像，準(zhǔn)確感受到網(wǎng)站傳遞的信息。

了解圖片意圖，對(duì)設(shè)計(jì)師來說就是明確圖片的設(shè)計(jì)目標(biāo)，這是非常重要的一步工作。

我們總結(jié)了幾個(gè)常見的圖片意圖：展現(xiàn)產(chǎn)品特點(diǎn)（優(yōu)勢(shì)）；與文字相關(guān)聯(lián)，保持元素一致性；幫助人理解某些東西；教導(dǎo)人使用（某產(chǎn)品）；以人物視線引導(dǎo)用戶；營造氛圍；渲染情緒；塑造品牌。

展現(xiàn)產(chǎn)品特點(diǎn)：

在一個(gè)網(wǎng)站中，首屏對(duì)用戶的第一印象幾乎起決定作用，而Banner圖在首屏中所在的位置，決定了其重要性。尤其對(duì)于營銷型網(wǎng)站來說，Banner圖是一個(gè)最佳產(chǎn)品展示的位置。

與文字相關(guān)聯(lián)，保持元素一致性：

其實(shí)對(duì)設(shè)計(jì)師來說，圖文相關(guān)是設(shè)計(jì)中的一個(gè)基本原則。但大部分網(wǎng)站忽略了這一點(diǎn)，甚至導(dǎo)致信息不能正確傳遞、銷售機(jī)會(huì)減少等問題。

有一個(gè)來自Web易用性大師Jakob Nielsen的研究結(jié)論：?jiǎn)渭兊难b飾性圖片會(huì)潛意識(shí)地被我們大腦忽略。

這項(xiàng)研究表明圖文相關(guān)性的重要作用，成為設(shè)計(jì)指導(dǎo)原則。“圖片與文字相關(guān)聯(lián)”更應(yīng)該被設(shè)計(jì)師用于項(xiàng)目實(shí)踐中。

幫助人理解:

Zuli網(wǎng)站中為用戶展示的是一款新穎的智能家居產(chǎn)品，其中首頁Banner以產(chǎn)品使用場(chǎng)景為背景。

經(jīng)過專業(yè)拍攝和處理，清晰、干凈，并且將原本需要一大段文字描述的信息，成功以“看圖說話”的方式直接向用戶展示，幫助用戶更好地理解產(chǎn)品。

教導(dǎo)人使用:

在Zuli網(wǎng)站的“How it Works”頁面中，網(wǎng)頁以圖文結(jié)合方式展示產(chǎn)品的多個(gè)使用狀態(tài)或場(chǎng)景。

該網(wǎng)頁的所有圖片風(fēng)格一致，圖片設(shè)計(jì)都以實(shí)體圖像為主，通過扁平化的圖標(biāo)建立了產(chǎn)品與手機(jī)App之間的虛擬聯(lián)系，簡(jiǎn)單易懂。

當(dāng)用戶瀏覽網(wǎng)頁時(shí)，圖片可以吸引人的注意力，并讓用戶對(duì)圖片內(nèi)容高度敏感，進(jìn)而主動(dòng)瀏覽文字深入了解產(chǎn)品如何使用，激發(fā)更大興趣。

一般情況下，設(shè)計(jì)目標(biāo)為“教導(dǎo)人使用”的圖片，更適用于新產(chǎn)品或使用復(fù)雜的產(chǎn)品，這種方式可以幫助用戶快速掌握使用技巧，降低產(chǎn)品使用成本，獲得用戶青睞。

以人物視線引導(dǎo)用戶:

Ines Maria Gamler網(wǎng)站中展示的女性正側(cè)著臉，雙眼注視網(wǎng)站中間的文字。打開網(wǎng)站時(shí)，大多數(shù)人會(huì)首先關(guān)注人物的臉部，并進(jìn)一步受到人物視線的引導(dǎo)。

隨著人物的視線，用戶會(huì)進(jìn)一步將注意力放在網(wǎng)頁中間的文字和圖形上。

http://www.dongguanlifeng.com/wangzhansheji/3315.html 設(shè)計(jì)網(wǎng)站時(shí)，如何選擇背景圖（一）