注：如本站轉載的教程文章涉及版權等問題，請作者與我聯系，我將(jiāng)在第一時間删除！ 聯系E-mail：給我留言 

@AnyForWeb_UED ：幾乎所有設計師都(dōu)知道(dào)網頁設計中用圖的重要性，但在實際項目中，如何做好(hǎo)圖片設計？本文將(jiāng)與大家分享如何通過(guò)“把握圖片的意圖”做好(hǎo)設計。

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

如果能(néng)做好(hǎo)兩(liǎng)個準備工作，對(duì)設計師們會有幫助：

1、 梳理網站中所需圖片類型

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

在圖片設計前，設計師最好(hǎo)能(néng)參考目前已有的網頁粗略布局和欄目等，重新梳理列出網站中所需的圖片類型。

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

當然，設計師也可以根據項目實際情況，或最适合自己的方法采用更好(hǎo)的圖片分類。

梳理圖片類型是幫助設計師重新梳理網站内容，讓後(hòu)面(miàn)工作更有計劃和針對(duì)性。

2、 明确圖片的意圖

在一個網站中，浏覽網頁時所看到的圖片不應僅做到吸引用戶的視線，而更能(néng)讓用戶通過(guò)視覺影像，準确感受到網站傳遞的信息。

實際上，網頁上的圖片不隻是美麗的像素塊，所有的圖片都(dōu)應該是有意圖的。

了解圖片意圖，對(duì)設計師來說就是明确圖片的設計目标，這(zhè)是非常重要的一步工作。

我們總結了幾個常見的圖片意圖：展現産品特點（優勢）；與文字相關聯，保持元素一緻性；幫助人理解某些東西；教導人使用（某産品）；以人物視線引導用戶；營造氛圍；渲染情緒；塑造品牌。

以下是實際案例分享：

展現産品特點：

上面(miàn)案例是fiftythree網站的Banner圖。

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

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

該案例的圖片意圖非常明确，和文字搭配在一起(qǐ)，既有宣傳、推廣産品的作用，又是一個引導用戶點擊參與的入口。

與文字相關聯，保持元素一緻性：

上圖案例是aiia産品博客的Banner，此處的圖片與文字高度相關，既保持了元素的一緻性，又通過(guò)色調上明與暗的處理，呈現了一種(zhǒng)視覺美。

用戶在打開(kāi)博客後(hòu)，會同時關注到文字和背景的産品圖片，在腦海中留下具象化的印象。

其實對(duì)設計師來說，圖文相關是設計中的一個基本原則。但大部分網站忽略了這(zhè)一點，甚至導緻信息不能(néng)正确傳遞、銷售機會減少等問題。

有一個來自Web易用性大師Jakob Nielsen的研究結論：單純的裝飾性圖片會潛意識地被(bèi)我們大腦忽略。

這(zhè)項研究表明圖文相關性的重要作用，成(chéng)爲設計指導原則。

“圖片與文字相關聯”更應該被(bèi)設計師用于項目實踐中。

幫助人理解

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

這(zhè)款産品是怎麼(me)用的？上圖幫助用戶快速理解網站傳達的内容。

此處圖片經(jīng)過(guò)專業拍攝和處理，清晰、幹淨，并且將(jiāng)原本需要一大段文字描述的信息，成(chéng)功以“看圖說話”的方式直接向(xiàng)用戶展示，幫助用戶更好(hǎo)地理解産品。

教導人使用

在Zuli網站的“How it Works”頁面(miàn)中，網頁以圖文結合方式展示産品的多個使用狀态或場景。

該網頁的所有圖片風格一緻，圖片設計都(dōu)以實體圖像爲主，通過(guò)扁平化的圖标建立了産品與手機App之間的虛拟聯系，簡單易懂。

此處圖片的意圖是教導用戶使用産品。

當用戶浏覽網頁時，圖片可以吸引人的注意力，并讓用戶對(duì)圖片内容高度敏感，進(jìn)而主動浏覽文字深入了解産品如何使用，激發(fā)更大興趣。

一般情況下，設計目标爲“教導人使用”的圖片，更适用于新産品或使用複雜的産品，這(zhè)種(zhǒng)方式可以幫助用戶快速掌握使用技巧，降低産品使用成(chéng)本，獲得用戶青睐。

以人物視線引導用戶

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

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

這(zhè)種(zhǒng)設計方式有兩(liǎng)個關鍵：一般先通過(guò)美麗的模特（或其他人物形象）吸引用戶關注；用戶會繼續跟著(zhe)模特視線轉移注意點，關注産品、文案或Logo，達到圖片設計的目标。

在著名的You Look Where They Look研究裡(lǐ)，通過(guò)對(duì)嬰兒尿布零售商網站的眼動研究，得出了結論：廣告中，用戶眼球可以被(bèi)模特（或人物形象）的視線所引導。

通過(guò)人物視線的巧妙引導，可以讓網站重要信息得到展示，并改善用戶視線隻關注模特的問題。

營造氛圍

打開(kāi)23snaps網站後(hòu)，左側圖片瞬間吸引人的注意力，給人一種(zhǒng)親切感。

對(duì)用戶來說，生活化的圖片濃縮了人們日常生活的一個場景，有熟悉的感覺。圖片從整體營造了溫馨的氛圍，并且人物愉悅的表情能(néng)影響人的心情，讓用戶感受到一種(zhǒng)歡樂、溫馨的家庭氣氛。

此處同樣(yàng)采用了人物視線引導用戶，跟著(zhe)圖片中兒童的視線，用戶會進(jìn)一步關注到圖中文案和注冊/登錄區域。

該案例還(hái)從整體構圖展現了App使用場景，向(xiàng)用戶傳達了“Share Family Photos”的定位。

渲染情緒

UDO網站采用的圖片展現了大量美麗景色，布局和色彩的整體搭配，從視覺上帶給用戶一種(zhǒng)清新舒适的感覺。

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

該案例中的圖片給在視覺設計上給用戶留下一個好(hǎo)印象，激發(fā)用戶的想象，并釋放出優美、清新、甯靜等感受，讓用戶感到放松，并樂意繼續浏覽網站。

塑造品牌

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

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

成(chéng)功品牌可以在很久之後(hòu)，通過(guò)視覺上的獨特，喚起(qǐ)人潛意識裡(lǐ)的印象，讓用戶聯想到該品牌。

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

以上幾個案例是最常見的圖片意圖，同時也是圖片設計中需要實現的目标。

設計師需要做的，就是加深對(duì)項目需求和客戶公司的業務了解，以便更明确網站中各欄目圖片的設計目标。

準備工作完成(chéng)後(hòu)，再綜合考慮需求分析階段的成(chéng)果（設計構思、網頁内容結構、網站風格等），設計師們就可以開(kāi)始準備拍攝或搜集圖片素材了。

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。