俗話說(shuō)得好，“一圖勝千言”。圖片不僅要漂亮，還要夠意思！

俗話說(shuō)得好，“一圖勝千言”，人類是高度視覺(jué)化的動(dòng)物，能瞬間處理視覺(jué)傳達(dá)的信息，研究表明我們的大腦能感知和捕獲的90%的信息都是視覺(jué)信息。圖片可以迅速吸引用戶的注意力，并讓用戶迅速?gòu)谋姸嗌唐分姓J(rèn)出你的商品。此外，圖像還可以跨越語(yǔ)言障礙，但是單純的文字卻做不到。

圖像不應(yīng)該僅僅用于裝飾，他們有能力創(chuàng)造或打破用戶的體驗(yàn)。在這篇文章中，我們將介紹一些有用的原則和最佳實(shí)踐，幫助您將圖像融入到您的設(shè)計(jì)中。

只使用相關(guān)的圖像

每張圖像都有它的故事。就像寫(xiě)作一樣，在開(kāi)始之前你要知道自己想表達(dá)什么才是極好的。引人入勝的圖像有激發(fā)用戶吸引力的獨(dú)特功能，但不是所有的圖像都能達(dá)到這種體驗(yàn)，那些不合時(shí)宜的圖像僅僅起到了占位的作用，而更糟糕的是它們會(huì)混淆視聽(tīng)，在設(shè)計(jì)中最危險(xiǎn)的就是使用了傳達(dá)錯(cuò)誤信息的圖像。

不能表達(dá)主題的圖片往往讓用戶困惑

用戶對(duì)圖像的反應(yīng)速度要遠(yuǎn)比文字快得多，所以務(wù)必確保你的內(nèi)容和圖像是高度匹配的。只選擇和使用與你的產(chǎn)品目標(biāo)強(qiáng)相關(guān)的圖像，并確保上下文是有關(guān)聯(lián)的。

減少圖像中的視覺(jué)干擾

“越多越好”的原則不適用于圖像。你的網(wǎng)站或者app不是用來(lái)展示圖像的，反之，圖像可以用來(lái)表現(xiàn)產(chǎn)品。在設(shè)計(jì)中只使用能抓住用戶注意力的圖片，不求最多，只求最好。

使用高質(zhì)量不失真的圖像

確保你要使用的圖像在跨平臺(tái)顯示時(shí)的尺寸是合適的。確保圖像不會(huì)失真，所以一定要對(duì)不同分辨率的設(shè)備進(jìn)行反復(fù)測(cè)試。展示圖片或圖形其原有的比例，不要將其比例放大超過(guò)100%。沒(méi)有人想看到自己的圖像或藝術(shù)品看上去是變形的，要么太小，要么太大。

左圖：失真的圖像；右圖：正確的分辨率

在進(jìn)行響應(yīng)式網(wǎng)頁(yè)和手機(jī)應(yīng)用設(shè)計(jì)的時(shí)候，常常會(huì)在為選擇什么圖像能最好的適配不同的用戶設(shè)備上產(chǎn)生爭(zhēng)議。很顯然，能適配所有屏幕和設(shè)備的的圖像是稀缺貨，然而，對(duì)不同像素的圖像的需求卻太多，一次性剪裁所有尺寸圖像的工作量是巨大的，特別是如果你有大量的圖像，整個(gè)人幾乎是崩潰的。

那么，怎么才能自動(dòng)適配所有尺寸的圖像呢？還好我們都是這個(gè)時(shí)代的幸運(yùn)兒，一些在線工具可以幫助你處理不同尺寸的圖像。Cloudinary就是一個(gè)能夠幫助你生成響應(yīng)式圖片的在線工具。此工具使用先進(jìn)的算法，將上傳的圖像生成最匹配的圖像斷點(diǎn)，以方便為每個(gè)上傳的圖像生成最佳匹配斷點(diǎn)，在圖像基礎(chǔ)上進(jìn)行分析從而找出匹配的斷點(diǎn)，而不是創(chuàng)建所有可能的圖像分辨率。（關(guān)于圖像斷點(diǎn)的概念請(qǐng)自行度娘或谷哥，嫌棄臉）

Cloudinary就是一個(gè)批量剪裁、調(diào)整圖像尺寸的在線工具

圖像聚焦要適度

能夠吸引用戶注意力的美觀的圖片當(dāng)然有其價(jià)值，但它的代價(jià)是有可能犧牲用戶對(duì)其他元素的關(guān)注和使用。

如果在圖像上用力過(guò)猛，往往會(huì)產(chǎn)生視覺(jué)過(guò)度，這樣會(huì)嚴(yán)重影響用戶對(duì)內(nèi)容的注意。以SoundCloud’s（如下圖app）為例，用戶將所有注意力都集中在了界面的圖像上，幾乎忽略了下面的兩個(gè)按鈕。

Soundcloud的主界面上的背景圖的吸引力已經(jīng)超過(guò)了下面的按鈕

雖然圖像聚焦的設(shè)計(jì)在多數(shù)設(shè)計(jì)中是合適的（以蘋(píng)果官網(wǎng)主頁(yè)面為例），應(yīng)用程序和網(wǎng)站在設(shè)計(jì)時(shí)，應(yīng)該遵循一個(gè)平衡的法則-向用戶展示的圖像要能表達(dá)產(chǎn)品理念，但不能喧賓奪主，掩蓋其主要功能。

使用多種介質(zhì)

插畫(huà)和照片可以同時(shí)被運(yùn)用在同一個(gè)產(chǎn)品里。

照片是用來(lái)展示一個(gè)實(shí)體或者描述一個(gè)故事很好的元素。例如，我們不需要展示各種各樣的花，只需要展示一朵玫瑰花。

對(duì)于特定實(shí)體，使用照片展示

• 插畫(huà)在表達(dá)概念和隱喻的時(shí)候尤為有效，這是照片望塵莫及的。

當(dāng)總的特性不需要表達(dá)的時(shí)候，用插畫(huà)來(lái)傳達(dá)一個(gè)近似的內(nèi)容以幫助理解是極好的。

只有一個(gè)焦點(diǎn)

圖像是信息傳達(dá)的視覺(jué)交流工具，焦點(diǎn)明確的圖像只需一瞥就能領(lǐng)會(huì)其意思，反之則不然。

當(dāng)圖像的視覺(jué)焦點(diǎn)變得模糊不清時(shí)，它的價(jià)值也就消失了:

Don’t：視覺(jué)焦點(diǎn)較弱的圖像能表達(dá)的意義也相對(duì)較弱

不要試圖讓你的用戶從你的圖像中尋找含義，要確保將清晰地概念通過(guò)顯著的方式傳達(dá)給對(duì)方。

Do：焦點(diǎn)明確的圖像只需一瞥就能領(lǐng)會(huì)其意義

盡量減少圖像上干擾表達(dá)圖像意義的元素。

展示真實(shí)的人像

人像是吸引用戶注意力的一個(gè)有效的方法，當(dāng)我們看到其他人的面孔時(shí)，我們會(huì)感覺(jué)自己跟他們是相關(guān)聯(lián)的，而不是單純的在使用一個(gè)產(chǎn)品。然而許多公司的網(wǎng)站為了“建立信任”，雇傭模特，拍攝并使用過(guò)度虛假的照片，這往往適得其反。

Don’t：不真實(shí)的圖像，給用戶用戶一種膚淺的、虛假的感覺(jué)。

可用性測(cè)試結(jié)果顯示：純粹的裝飾照片很難給產(chǎn)品帶來(lái)任何價(jià)值，反而會(huì)對(duì)用戶體驗(yàn)造成傷害。用戶通常忽略這樣的圖像，甚至這些圖像可能會(huì)讓你的用戶感到沮喪。

一個(gè)非常簡(jiǎn)單的經(jīng)驗(yàn)法則是使用與自己產(chǎn)品或者網(wǎng)站文字相匹配的高質(zhì)量的人像照片。你使用的圖像應(yīng)該能真實(shí)的反應(yīng)出你的產(chǎn)品、公司或企業(yè)文化

Do：展示真實(shí)的，實(shí)實(shí)在在的人，并確保這些人像與你的產(chǎn)品是高度匹配的。

建議：

1. 避免使用擁擠的人群，盡量選擇只有一個(gè)人物焦點(diǎn)的圖像
2. 盡量使用真實(shí)的故事情景，如果你已經(jīng)有了一個(gè)實(shí)體產(chǎn)品，那么讓你的用戶與你的產(chǎn)品產(chǎn)生交互是極好的。

將圖像與設(shè)計(jì)融合

在你的設(shè)計(jì)即將采用一張圖像之前，請(qǐng)先問(wèn)問(wèn)自己，這張圖像是不是與你的產(chǎn)品或者網(wǎng)站審美相匹配。Squarespace（一個(gè)網(wǎng)站）就是一個(gè)在網(wǎng)站首頁(yè)以圖像為焦點(diǎn)的很好的例子。它簡(jiǎn)潔又干凈，使用了大面積的白色背景，圖像占據(jù)整個(gè)屏幕，即大膽，又抓人眼球。

選擇一張含有符合產(chǎn)品要?jiǎng)?chuàng)造的用戶體驗(yàn)理念的圖像是非常重要的。

改進(jìn)你的電子商務(wù)產(chǎn)品

產(chǎn)品的圖像可以用來(lái)銷售產(chǎn)品。用戶往往依靠產(chǎn)品圖像來(lái)評(píng)估產(chǎn)品及其特性。無(wú)論你的產(chǎn)品是耳機(jī)或是玩具，產(chǎn)品照片是任何電子商務(wù)網(wǎng)站的最重要的元素。最終，越是能吸引你的訪客的產(chǎn)品，他們對(duì)你購(gòu)買(mǎi)的東西就越有信心，你的轉(zhuǎn)化率也就越高。

圖片是讓用戶對(duì)產(chǎn)品產(chǎn)生感覺(jué)的

請(qǐng)把產(chǎn)品圖片整的漂亮點(diǎn)。一張好的圖片可以讓你省去很多工作：好的照片能迅速獲取用戶的注意，并且讓用戶辨識(shí)你的產(chǎn)品。但是，好的照片需要時(shí)間處理。

讓產(chǎn)品自我銷售。以下面的GORILLA POD 為例，這張照片充分展示了產(chǎn)品的優(yōu)勢(shì)。

優(yōu)先顯示最主要的圖片。不要試圖讓用戶通過(guò)滾動(dòng)瀏覽來(lái)獲取產(chǎn)品最關(guān)鍵的信息。主要產(chǎn)品形象應(yīng)該展示在最突出的位置，以此展示你最想讓用戶獲取的信息。

越大的圖像沖擊力越大，盡你可能的放大你的圖片！當(dāng)圖像太大不能在界面正常顯示的時(shí)候，你需要具有整合放大圖像具體細(xì)節(jié)的能力，弄清哪些細(xì)節(jié)是用戶最關(guān)心的尤為重要。切記放大的圖像仍然需要保證是高質(zhì)量的。

Don’t：讓用戶看到放大的圖片的某個(gè)特殊的部位

Do：讓用戶對(duì)圖片放大縮小有自己的控制權(quán)（這其中包括包括了深度和范圍）

表達(dá)個(gè)性的同時(shí)，激發(fā)用戶的情感

圖像可以傳達(dá)一個(gè)產(chǎn)品或服務(wù)的精髓，與此同時(shí)它還可以制造驚喜和喜悅。圖像可以盡可能多的傳達(dá)信息。如果你已經(jīng)有了一個(gè)滿意的客戶體驗(yàn)，添加一些歡樂(lè)的風(fēng)格有助于激發(fā)用戶和產(chǎn)品之間的情感。情感強(qiáng)大的圖像是確保你的用戶還愿意繼續(xù)深入了解產(chǎn)品體驗(yàn)的重要因素。

圖像能夠喚起瀏覽者的情緒反應(yīng)。幽默可以減輕認(rèn)知負(fù)擔(dān)，用戶可能因此而愛(ài)上它。

大腦情緒受到照片和插畫(huà)的影響，尤其是人像和有故事情節(jié)的圖像。說(shuō)道插圖，即使是網(wǎng)站或應(yīng)用程序不能納入整體繪畫(huà)風(fēng)格，仍然可以通過(guò)漫畫(huà)手法達(dá)到目的。例如，插圖可以用于說(shuō)明用法、教程或者空狀態(tài).

選擇一張能夠吸引用戶注意，并能引人入勝的圖片

現(xiàn)實(shí)生活場(chǎng)景：如何為著陸頁(yè)選擇一張能達(dá)到目的的圖像

從本質(zhì)上講，著陸頁(yè)就是展示商品的櫥窗，在大多數(shù)情況下，著陸頁(yè)也是商家給用戶留下印象的唯一機(jī)會(huì)。當(dāng)用戶來(lái)到著陸頁(yè)，你希望用戶能在你的頁(yè)面上操作：從而提高轉(zhuǎn)化率。好的著陸頁(yè)能創(chuàng)造穩(wěn)固的用戶體驗(yàn)，而圖像是創(chuàng)建用戶體驗(yàn)的重要角色。當(dāng)用戶來(lái)到著陸頁(yè)的時(shí)候的，多多少少會(huì)有不同的反應(yīng)，無(wú)論是積極的還是消極的，很大程度上取決于他們所看到的。

請(qǐng)遵循如下建議“做而不說(shuō)”：

（1）選擇的圖片需要符合你的產(chǎn)品目標(biāo)

選擇一張能清晰闡述產(chǎn)品概念或服務(wù)理念的圖片尤為重要。這并不意味著圖片需要表述所有信息，單獨(dú)看一張圖片的時(shí)候可能不是很清晰，但是當(dāng)它同界面上其它元素組合在一起的時(shí)候，就會(huì)變得條理清晰，請(qǐng)?jiān)谝曈X(jué)上強(qiáng)調(diào)你試圖傳遞給來(lái)訪者的信息。

（2）將圖片展示在正確的位置

如果當(dāng)前圖像需要強(qiáng)調(diào)一個(gè)高優(yōu)先級(jí)的目標(biāo)，就應(yīng)該通過(guò)視覺(jué)加以強(qiáng)調(diào)；相反，次要目標(biāo)不應(yīng)該過(guò)度突出。最重要的圖像應(yīng)該放在最顯眼的位置上（i.e.重點(diǎn)突出的是頂部的文件夾），成為界面上的最主要的視覺(jué)焦點(diǎn)。

（3）使用最直接能抓住用戶眼球的圖像

盡你所能的使用最引人入勝的圖像，就像Steven Snell說(shuō)過(guò)的：“一張栩栩如生的圖像能夠讓人記憶猶新，文字可能被人忘記，但是視覺(jué)沖擊力強(qiáng)的圖像卻能在人心中留下深深的烙印?！?/p>

（4）選擇情感豐富的圖像

通過(guò)圖像本身具有的情感，加上設(shè)計(jì)師情感化設(shè)計(jì)的襯托，讓圖像試圖從情感上說(shuō)服用戶。表忘了，往往情感能夠在用戶作出決策之前改變其想法（沖動(dòng)是魔鬼，對(duì)卜？!）。

舉一個(gè)陸頁(yè)的栗子，如下圖：該服務(wù)可以幫助用戶高效的與他們的客戶進(jìn)行交流。該著陸頁(yè)通過(guò)一個(gè)相當(dāng)復(fù)雜的概念告訴用戶該網(wǎng)站提供何種服務(wù)，以及用戶可以從中獲取的好處。

通過(guò)兩張插畫(huà)將舊的的工作模式和簡(jiǎn)單的工作模式作對(duì)比

總結(jié)

在設(shè)計(jì)中考慮圖像在可用性方面的影響是非常必要的，設(shè)計(jì)中的視覺(jué)傳達(dá)往往能給用戶留下了深刻的印象。引人入勝的圖像有激發(fā)和吸引用戶注意，并提供有用信息的獨(dú)特能力。寧可多花些時(shí)間，也要確保所使用的圖像成為你的應(yīng)用或網(wǎng)站的體驗(yàn)加分項(xiàng)。

原文地址

譯者：豬滴

來(lái)源：微信公眾號(hào)【INUX】

本文由 @INUX?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。