幾乎所有設計師都知道網(wǎng)頁(yè)設計中用圖的重要性。AnyForWeb也在上一篇文章《網(wǎng)頁(yè)設計中，誘惑大腦中的“原始人”》里，和大家分享了一些經(jīng)典的案例，通過(guò)不同類(lèi)型的網(wǎng)頁(yè)設計用圖從多個(gè)層面充分展現了“好圖勝千言”。

好案例自然能給設計師帶來(lái)一定的靈感，但在實(shí)際項目中，如何做好圖片設計？

本文是網(wǎng)頁(yè)圖片設計系列之二，AnyForWeb 將與大家分享如何通過(guò)“把握圖片的意圖”做好設計。

給設計師的建議：做圖前先別急著(zhù)找素材！
如果能做好兩個(gè)準備工作，對設計師們會(huì )有幫助：

1、 梳理網(wǎng)站中所需圖片類(lèi)型

沒(méi)經(jīng)過(guò)思考就直接開(kāi)工是設計效率低下的罪魁禍首。

在圖片設計前，設計師最好能參考目前已有的網(wǎng)頁(yè)粗略布局和欄目等，重新梳理列出網(wǎng)站中所需的圖片類(lèi)型。
比如，按照欄目和模塊對所需的圖片分類(lèi)：Banner、業(yè)務(wù)介紹、產(chǎn)品介紹/展示、公司介紹、團隊介紹、新聞/資訊、客戶(hù)案例等。

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

2、 明確圖片的意圖

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

實(shí)際上，網(wǎng)頁(yè)上的圖片不只是美麗的像素塊，所有的圖片都應該是有意圖的。

了解圖片意圖，對設計師來(lái)說(shuō)就是明確圖片的設計目標，這是非常重要的一步工作。

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

以下是實(shí)際案例分享：

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

上面案例是fiftythree網(wǎng)站的Banner圖。
在一個(gè)網(wǎng)站中，首屏對用戶(hù)的第一印象幾乎起決定作用，而B(niǎo)anner圖在首屏中所在的位置，決定了其重要性。尤其對于營(yíng)銷(xiāo)型網(wǎng)站來(lái)說(shuō)，Banner圖是一個(gè)最佳產(chǎn)品展示的位置。

案例中的圖片展示了“Pencil”使用在iPad（Apple系列產(chǎn)品）上的畫(huà)面，即產(chǎn)品的使用場(chǎng)景，也是產(chǎn)品的一個(gè)特點(diǎn)。

該案例的圖片意圖非常明確，和文字搭配在一起，既有宣傳、推廣產(chǎn)品的作用，又是一個(gè)引導用戶(hù)點(diǎn)擊參與的入口。

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

圖案例是aiia產(chǎn)品博客的Banner，此處的圖片與文字高度相關(guān)，既保持了元素的一致性，又通過(guò)色調上明與暗的處理，呈現了一種視覺(jué)美。

用戶(hù)在打開(kāi)博客后，會(huì )同時(shí)關(guān)注到文字和背景的產(chǎn)品圖片，在腦海中留下具象化的印象。

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

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

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

幫助人理解

Zuli網(wǎng)站中為用戶(hù)展示的是一款新穎的智能家居產(chǎn)品，其中首頁(yè)Banner以產(chǎn)品使用場(chǎng)景為背景。
這款產(chǎn)品是怎么用的？上圖幫助用戶(hù)快速理解網(wǎng)站傳達的內容。

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

教導人使用

Zuli網(wǎng)站中為用戶(hù)展示的是一款新穎的智能家居產(chǎn)品，其中首頁(yè)Banner以產(chǎn)品使用場(chǎng)景為背景。
這款產(chǎn)品是怎么用的？上圖幫助用戶(hù)快速理解網(wǎng)站傳達的內容。

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

教導人使用

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

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

這種設計方式有兩個(gè)關(guān)鍵：一般先通過(guò)美麗的模特（或其他人物形象）吸引用戶(hù)關(guān)注；用戶(hù)會(huì )繼續跟著(zhù)模特視線(xiàn)轉移注意點(diǎn)，關(guān)注產(chǎn)品、文案或Logo，達到圖片設計的目標。

在著(zhù)名的You Look Where They Look研究里，通過(guò)對嬰兒尿布零售商網(wǎng)站的眼動(dòng)研究，得出了結論：廣告中，用戶(hù)眼球可以被模特（或人物形象）的視線(xiàn)所引導。

通過(guò)人物視線(xiàn)的巧妙引導，可以讓網(wǎng)站重要信息得到展示，并改善用戶(hù)視線(xiàn)只關(guān)注模特的問(wèn)題。

營(yíng)造氛圍

打開(kāi)23snaps網(wǎng)站后，左側圖片瞬間吸引人的注意力，給人一種親切感。

對用戶(hù)來(lái)說(shuō)，生活化的圖片濃縮了人們日常生活的一個(gè)場(chǎng)景，有熟悉的感覺(jué)。圖片從整體營(yíng)造了溫馨的氛圍，并且人物愉悅的表情能影響人的心情，讓用戶(hù)感受到一種歡樂(lè )、溫馨的家庭氣氛。

此處同樣采用了人物視線(xiàn)引導用戶(hù)，跟著(zhù)圖片中兒童的視線(xiàn)，用戶(hù)會(huì )進(jìn)一步關(guān)注到圖中文案和注冊/登錄區域。
該案例還從整體構圖展現了App使用場(chǎng)景，向用戶(hù)傳達了“Share Family Photos”的定位。

渲染情緒

UDO網(wǎng)站采用的圖片展現了大量美麗景色，布局和色彩的整體搭配，從視覺(jué)上帶給用戶(hù)一種清新舒適的感覺(jué)。
該網(wǎng)站由AnyForWeb設計開(kāi)發(fā)，既表現了旅游行業(yè)的特色，又通過(guò)具有美感的圖片進(jìn)行了情緒渲染。

審美是人人具備的天性，一個(gè)網(wǎng)站是否好看，用戶(hù)在第一眼就會(huì )有直觀(guān)的判斷。受到大腦中的“原始人”影響，圖片美觀(guān)程度能真正影響到用戶(hù)對網(wǎng)站第一印象。

該案例中的圖片給在視覺(jué)設計上給用戶(hù)留下一個(gè)好印象，激發(fā)用戶(hù)的想象，并釋放出優(yōu)美、清新、寧靜等感受，讓用戶(hù)感到放松，并樂(lè )意繼續瀏覽網(wǎng)站。

塑造品牌

Katia Bongiorno是一個(gè)品牌網(wǎng)站，該案例的產(chǎn)品/服務(wù)通過(guò)一系列風(fēng)格統一的高清大圖全屏展示，在用戶(hù)群體中塑造了高端、精美的品牌形象。

對用戶(hù)來(lái)說(shuō)，高質(zhì)量的大圖往往更受歡迎，風(fēng)格統一的圖片既有視覺(jué)震撼力，又容易給人留下較深刻的印象，長(cháng)久吸引用戶(hù)注意力。

成功品牌可以在很久之后，通過(guò)視覺(jué)上的獨特，喚起人潛意識里的印象，讓用戶(hù)聯(lián)想到該品牌。

此處的高清大圖以及圖片風(fēng)格統一是塑造品牌的關(guān)鍵因素，無(wú)形中加深了人的印象，留下長(cháng)遠影響。

以上幾個(gè)案例是最常見(jiàn)的圖片意圖，同時(shí)也是圖片設計中需要實(shí)現的目標。

設計師需要做的，就是加深對項目需求和客戶(hù)公司的業(yè)務(wù)了解，以便更明確網(wǎng)站中各欄目圖片的設計目標。

準備工作完成后，再綜合考慮需求分析階段的成果（設計構思、網(wǎng)頁(yè)內容結構、網(wǎng)站風(fēng)格等），設計師們就可以開(kāi)始準備拍攝或搜集圖片素材了。

什么樣的圖片素材是合適的？AnyForWeb將會(huì )在后面的文章中與大家繼續分享相關(guān)內容。