設(shè)計(jì)師們都知道設(shè)計(jì)中用圖的重要性，但是在實(shí)際項(xiàng)目中，卻時(shí)常容易為此迷茫，到底該如何做好圖片設(shè)計(jì)呢？錦州網(wǎng)站建設(shè)華?？萍紝⑴c大家分享如何通過(guò)“把握?qǐng)D片的意圖”來(lái)做好設(shè)計(jì)。
先給設(shè)計(jì)師們一個(gè)建議：做圖前先別急著找素材！
在做之前先準(zhǔn)備好2個(gè)工作，對(duì)設(shè)計(jì)師們會(huì)有幫助：
1、 梳理設(shè)計(jì)中所需圖片類型
沒(méi)經(jīng)過(guò)思考就直接開(kāi)工是設(shè)計(jì)效率低下的罪魁禍?zhǔn)住?
在圖片設(shè)計(jì)前，設(shè)計(jì)師最好能參考目前已有的網(wǎng)頁(yè)粗略布局和欄目等，重新梳理列出所需的圖片類型。
比如，按照欄目和模塊對(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)頁(yè)時(shí)所看到的圖片不應(yīng)僅做到吸引用戶的視線，而更能讓用戶通過(guò)視覺(jué)影像，準(zhǔn)確感受到網(wǎng)站傳遞的信息。
實(shí)際上，網(wǎng)頁(yè)上的圖片不只是美麗的像素塊，所有的圖片都應(yīng)該是有意圖的。
了解圖片意圖，對(duì)設(shè)計(jì)師來(lái)說(shuō)就是明確圖片的設(shè)計(jì)目標(biāo)，這是非常重要的一步工作。
我們總結(jié)了幾個(gè)常見(jiàn)的圖片意圖：展現(xiàn)產(chǎn)品特點(diǎn)（優(yōu)勢(shì)）；與文字相關(guān)聯(lián)，保持元素一致性；幫助人理解某些東西；教導(dǎo)人使用（某產(chǎn)品）；以人物視線引導(dǎo)用戶；營(yíng)造氛圍；渲染情緒；塑造品牌。
以下是實(shí)際案例分享：
展現(xiàn)產(chǎn)品特點(diǎn)：
在一個(gè)網(wǎng)站中，首屏對(duì)用戶的第一印象幾乎起決定作用，而B(niǎo)anner圖在首屏中所在的位置，決定了其重要性。尤其對(duì)于營(yíng)銷型網(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è)引導(dǎo)用戶點(diǎn)擊參與的入口。
與文字相關(guān)聯(lián)，保持元素一致性：
上圖案例是aiia產(chǎn)品博客的Banner，此處的圖片與文字高度相關(guān)，既保持了元素的一致性，又通過(guò)色調(diào)上明與暗的處理，呈現(xiàn)了一種視覺(jué)美。
用戶在打開(kāi)博客后，會(huì)同時(shí)關(guān)注到文字和背景的產(chǎn)品圖片，在腦海中留下具象化的印象。
其實(shí)對(duì)設(shè)計(jì)師來(lái)說(shuō)，圖文相關(guān)是設(shè)計(jì)中的一個(gè)基本原則。但大部分網(wǎng)站忽略了這一點(diǎn)，甚至導(dǎo)致信息不能正確傳遞、銷售機(jī)會(huì)減少等問(wèn)題。
有一個(gè)來(lái)自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)品，其中首頁(yè)Banner以產(chǎn)品使用場(chǎng)景為背景。
這款產(chǎn)品是怎么用的？上圖幫助用戶快速理解網(wǎng)站傳達(dá)的內(nèi)容。
此處圖片經(jīng)過(guò)專業(yè)拍攝和處理，清晰、干凈，并且將原本需要一大段文字描述的信息，成功以“看圖說(shuō)話”的方式直接向用戶展示，幫助用戶更好地理解產(chǎn)品。
教導(dǎo)人使用
在Zuli網(wǎng)站的“How it Works”頁(yè)面中，網(wǎng)頁(yè)以圖文結(jié)合方式展示產(chǎn)品的多個(gè)使用狀態(tài)或場(chǎng)景。
該網(wǎng)頁(yè)的所有圖片風(fēng)格一致，圖片設(shè)計(jì)都以實(shí)體圖像為主，通過(guò)扁平化的圖標(biāo)建立了產(chǎn)品與手機(jī)App之間的虛擬聯(lián)系，簡(jiǎn)單易懂。
此處圖片的意圖是教導(dǎo)用戶使用產(chǎn)品。
當(dāng)用戶瀏覽網(wǎng)頁(yè)時(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)站中間的文字。打開(kāi)網(wǎng)站時(shí)，大多數(shù)人會(huì)首先關(guān)注人物的臉部，并進(jìn)一步受到人物視線的引導(dǎo)。
隨著人物的視線，用戶會(huì)進(jìn)一步將注意力放在網(wǎng)頁(yè)中間的文字和圖形上。
這種設(shè)計(jì)方式有兩個(gè)關(guān)鍵：一般先通過(guò)美麗的模特（或其他人物形象）吸引用戶關(guān)注；用戶會(huì)繼續(xù)跟著模特視線轉(zhuǎn)移注意點(diǎn)，關(guān)注產(chǎn)品、文案或Logo，達(dá)到圖片設(shè)計(jì)的目標(biāo)。
在著名的You Look Where They Look研究里，通過(guò)對(duì)嬰兒尿布零售商網(wǎng)站的眼動(dòng)研究，得出了結(jié)論：廣告中，用戶眼球可以被模特（或人物形象）的視線所引導(dǎo)。
通過(guò)人物視線的巧妙引導(dǎo)，可以讓網(wǎng)站重要信息得到展示，并改善用戶視線只關(guān)注模特的問(wèn)題。
營(yíng)造氛圍
打開(kāi)23snaps網(wǎng)站后，左側(cè)圖片瞬間吸引人的注意力，給人一種親切感。
對(duì)用戶來(lái)說(shuō)，生活化的圖片濃縮了人們?nèi)粘Ｉ畹囊粋€(gè)場(chǎng)景，有熟悉的感覺(jué)。圖片從整體營(yíng)造了溫馨的氛圍，并且人物愉悅的表情能影響人的心情，讓用戶感受到一種歡樂(lè)、溫馨的家庭氣氛。
此處同樣采用了人物視線引導(dǎo)用戶，跟著圖片中兒童的視線，用戶會(huì)進(jìn)一步關(guān)注到圖中文案和注冊(cè)/登錄區(qū)域。
該案例還從整體構(gòu)圖展現(xiàn)了App使用場(chǎng)景，向用戶傳達(dá)了“Share Family Photos”的定位。
渲染情緒
UDO網(wǎng)站采用的圖片展現(xiàn)了大量美麗景色，布局和色彩的整體搭配，從視覺(jué)上帶給用戶一種清新舒適的感覺(jué)。
審美是人人具備的天性，一個(gè)網(wǎng)站是否好看，用戶在第一眼就會(huì)有直觀的判斷。受到大腦中的“原始人”影響，圖片美觀程度能真正影響到用戶對(duì)網(wǎng)站第一印象。
該案例中的圖片給在視覺(jué)設(shè)計(jì)上給用戶留下一個(gè)好印象，激發(fā)用戶的想象，并釋放出優(yōu)美、清新、寧?kù)o等感受，讓用戶感到放松，并樂(lè)意繼續(xù)瀏覽網(wǎng)站。
塑造品牌
Katia Bongiorno是一個(gè)品牌網(wǎng)站，該案例的產(chǎn)品/服務(wù)通過(guò)一系列風(fēng)格統(tǒng)一的高清大圖全屏展示，在用戶群體中塑造了高端、精美的品牌形象。
對(duì)用戶來(lái)說(shuō)，高質(zhì)量的大圖往往更受歡迎，風(fēng)格統(tǒng)一的圖片既有視覺(jué)震撼力，又容易給人留下較深刻的印象，長(zhǎng)久吸引用戶注意力。
成功品牌可以在很久之后，通過(guò)視覺(jué)上的獨(dú)特，喚起人潛意識(shí)里的印象，讓用戶聯(lián)想到該品牌。
此處的高清大圖以及圖片風(fēng)格統(tǒng)一是塑造品牌的關(guān)鍵因素，無(wú)形中加深了人的印象，留下長(zhǎng)遠(yuǎn)影響。
以上幾個(gè)案例是最常見(jiàn)的圖片意圖，同時(shí)也是圖片設(shè)計(jì)中需要實(shí)現(xiàn)的目標(biāo)。
設(shè)計(jì)師需要做的，就是加深對(duì)項(xiàng)目需求和客戶公司的業(yè)務(wù)了解，以便更明確網(wǎng)站中各欄目圖片的設(shè)計(jì)目標(biāo)。
準(zhǔn)備工作完成后，再綜合考慮需求分析階段的成果（設(shè)計(jì)構(gòu)思、網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)、網(wǎng)站風(fēng)格等），設(shè)計(jì)師們就可以開(kāi)始準(zhǔn)備拍攝或搜集圖片素材了。
遼寧華?？萍加邢薰臼菍I(yè)軟件開(kāi)發(fā)、高端錦州網(wǎng)站建設(shè)、云店商城開(kāi)發(fā)公司，歡迎建站咨詢。
?。ㄒ唬?、全網(wǎng)推廣——錦州網(wǎng)站建設(shè)-華?？萍?，整合公眾號(hào)、朋友圈，全面推廣、宣傳。
?。ǘ?、專業(yè)網(wǎng)站建設(shè)、淘寶、京東開(kāi)店傳圖運(yùn)營(yíng)指導(dǎo)。
（三）、公眾號(hào)、小程序開(kāi)發(fā)運(yùn)營(yíng)。
?。ㄋ模?、財(cái)務(wù)、進(jìn)銷存、生產(chǎn)管理軟件銷售、服務(wù)。
華?？萍甲稍冸娫挘?3394162255 、13941609031。微信號(hào)同。公司地址:錦州市經(jīng)濟(jì)技術(shù)開(kāi)發(fā)區(qū)金山大街51號(hào)、遼寧省錦州市中央大街二段52號(hào)
本文內(nèi)容來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)立即聯(lián)系刪除
