Source: SmashingMagazine
Author: Nick Babich

常言道：“一圖勝千言紧阔〈豢瑁”人類(lèi)是高度視覺(jué)動(dòng)物皮仁，我們幾乎能立馬處理視覺(jué)信息。我們所接收到的以及大腦所轉(zhuǎn)換的信息中90%來(lái)自于視覺(jué)蝌数。圖片是抓住用戶注意力和區(qū)分產(chǎn)品的有效手段愕掏。單張圖片能比一個(gè)精心制作的文本塊傳達(dá)更多顶伞。此外饵撑，圖片能跨越語(yǔ)言障礙而文本卻不能。

圖片不僅僅是裝飾唆貌。它能創(chuàng)造用戶體驗(yàn)也能打破用戶體驗(yàn)滑潘。本文將介紹很多有用的原則和最好的實(shí)例以助于您成功的將圖片整合進(jìn)設(shè)計(jì)中去。

只用相關(guān)的圖片

每張圖片都有一個(gè)故事锨咙。正如寫(xiě)作一樣语卤，在開(kāi)始寫(xiě)作之前你最好知道要講述什么。引人注目的圖像具有獨(dú)特的能力能激勵(lì)和吸引用戶酪刀，但不是所有的圖片都能改善用戶體驗(yàn)粹舵。一些圖片僅僅只會(huì)占用空間，更有甚者蓖宦，會(huì)令用戶困惑。任何設(shè)計(jì)中最危險(xiǎn)的元素之一是圖片傳達(dá)了錯(cuò)誤的信息油猫。

用戶對(duì)視覺(jué)圖片的反應(yīng)比文本快稠茂，因此請(qǐng)確保您的內(nèi)容與支持的視覺(jué)圖片匹配。您應(yīng)該選擇和產(chǎn)品目標(biāo)有很強(qiáng)關(guān)系的圖片，并且確保和內(nèi)容相關(guān)睬关。

圖片不應(yīng)該創(chuàng)造視覺(jué)噪音

“更多即更好”的原則不適用于圖片诱担。網(wǎng)站或者應(yīng)用的目的不應(yīng)該是展示圖片，相反的电爹，您選擇的圖片要展示產(chǎn)品的目的蔫仙。在設(shè)計(jì)中使用有限數(shù)量的視覺(jué)效果——那些能真正抓住用戶注意力的視覺(jué)效果。

使用無(wú)失真高品質(zhì)的圖片

確保圖片的尺寸能在所有平臺(tái)里展示丐箩。圖片不應(yīng)出現(xiàn)像素化摇邦，因此請(qǐng)務(wù)必針對(duì)特定比率和設(shè)備測(cè)試適當(dāng)?shù)姆直媛食叽纭Ｒ栽奸L(zhǎng)寬比呈現(xiàn)照片和圖形屎勘，不要將圖片縮放超過(guò)100%施籍。您不會(huì)想您產(chǎn)品中的圖片看起來(lái)歪斜，太大或者太小概漱。

響應(yīng)式網(wǎng)站或者手機(jī)應(yīng)用經(jīng)常掙扎著選用合適的圖片分辨率以匹配各種用戶設(shè)備。顯然瓤摧，僅用一種圖片適配所有分辨率的屏幕和設(shè)備是不夠的竿裂。然而，像素級(jí)的圖片又太多照弥，每次都剪裁圖片工作量太大腻异，特別是你有特別多圖片的時(shí)候。

因此产喉，我們?cè)撊绾巫詣?dòng)選擇最優(yōu)的響應(yīng)式圖片尺寸捂掰？有望的是，有在線工具能管理整個(gè)文件夾的圖像的多個(gè)尺寸曾沈。Cloudinary就是能生成交互式響應(yīng)式圖片斷點(diǎn)的工具这嚣。這個(gè)工具使用了高級(jí)算法能為每張上傳的圖片生成最匹配的斷點(diǎn)；在逐個(gè)圖像的基礎(chǔ)上分析圖片以找到最佳斷點(diǎn)塞俱，而不是生成所有可能分辨率的圖片姐帚。

*Cloudinary是一項(xiàng)用來(lái)批量剪裁，調(diào)整圖片大小的云服務(wù) *

圖像聚焦設(shè)計(jì)不適用每個(gè)頁(yè)面

用美觀的圖片得到用戶的注意力確實(shí)有價(jià)值障涯，但是會(huì)使其他元素更難看見(jiàn)或者更難使用罐旗。

在設(shè)計(jì)中將過(guò)多的注意力放在圖片上可能會(huì)造成視覺(jué)過(guò)度，嚴(yán)重干擾用戶從內(nèi)容中分心唯蝶。你能從SoundCloud這個(gè)app中看到這個(gè)效果：圖片吸引了所有的注意力你幾乎無(wú)法注意到這兩個(gè)按鈕九秀。

在SoundCloud的首頁(yè)中，屏幕按鈕被圖像遮蔽

以圖像為中心的設(shè)計(jì)在有些情況下是合適的（例如：蘋(píng)果首頁(yè)）粘我，絕大多數(shù)的網(wǎng)站和apps應(yīng)該遵循一個(gè)平衡的方法——在界面中使用的圖片應(yīng)該支持產(chǎn)品鼓蜒，而不是掩蓋其他重要內(nèi)容或者遮蔽功能痹换。

使用多個(gè)介質(zhì)

插圖和攝影圖像能用在相同的產(chǎn)品中。

• 攝影是展示特定實(shí)體和故事的理想選擇都弹。例如：如果我們需要顯示不只是花娇豫，而是特定的玫瑰：
  

  
  用攝影表征某個(gè)特定的實(shí)體

• 插圖表示概念和隱喻是有效的，攝影圖片則會(huì)比較疏遠(yuǎn)
  

  
  當(dāng)不需要總的特異性時(shí)畅厢，插圖能傳達(dá)近似的概念以幫助理解

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

圖像是傳達(dá)信息的視覺(jué)溝通工具冯痢。清晰的焦點(diǎn)能一目了然地傳達(dá)概念，而缺乏焦點(diǎn)使得圖像無(wú)意義框杜。

當(dāng)焦點(diǎn)被遮擋時(shí)浦楣，圖像的圖標(biāo)質(zhì)量會(huì)喪失：

不要讓用戶尋找圖像的意義霸琴，確保以令人難忘的方式傳達(dá)清晰的概念椒振。

減少在圖片中的分心物，聚焦于有意義的元素梧乘。

顯示真實(shí)的人

人類(lèi)是使用戶參與的非常有效的方式澎迎。當(dāng)我們看見(jiàn)其它人的臉時(shí)，它讓我們覺(jué)得我們實(shí)際上是與他們有連接选调，而不僅僅是使用產(chǎn)品夹供。可是仁堪，很多企業(yè)網(wǎng)站都因過(guò)度使用不誠(chéng)實(shí)的攝像去制造所謂的信任而臭名昭著哮洽。

可用性測(cè)試表明純裝飾照片很少能為設(shè)計(jì)增加價(jià)值，經(jīng)常損害用戶體驗(yàn)而不是增強(qiáng)用戶體驗(yàn)弦聂。用戶通常會(huì)忽略這樣的圖片鸟辅，甚至?xí)钣脩舾械骄趩省?/p>

一個(gè)簡(jiǎn)單的經(jīng)驗(yàn)法則是使用匹配你的網(wǎng)站或者app特性的高品質(zhì)人像圖片。圖片應(yīng)該真實(shí)的表現(xiàn)你的產(chǎn)品莺葫，公司或者文化匪凉。

小貼士

• 避免使用人群戰(zhàn)術(shù)再层，相反的，使用有單個(gè)主題的圖像堡纬。
• 爭(zhēng)取代表真實(shí)故事的圖片聂受。拍攝人們做有趣事情的圖像。如果你有產(chǎn)品烤镐，考慮拍人們正和你的產(chǎn)品發(fā)生交互的圖像蛋济。

將圖像和設(shè)計(jì)混合

當(dāng)在你的設(shè)計(jì)中使用圖像時(shí)，問(wèn)問(wèn)自己你所采用的圖像是否符合你的網(wǎng)站或者app的美學(xué)標(biāo)準(zhǔn)炮叶。Squarespace的主頁(yè)是關(guān)注圖像的一個(gè)很好的例子碗旅。它優(yōu)雅鹊杖，干凈，使用大量的留白和巨大的全屏圖像創(chuàng)造了一個(gè)大膽的設(shè)計(jì)以抓住了人們的注意力扛芽。

改進(jìn)你的電子商務(wù)設(shè)計(jì)

產(chǎn)品圖片銷(xiāo)售該項(xiàng)目。用戶經(jīng)常依靠產(chǎn)品圖片來(lái)評(píng)估產(chǎn)品及其功能积瞒。不論你的產(chǎn)品是手機(jī)還是玩具川尖，產(chǎn)品攝影圖是任何電子商務(wù)網(wǎng)站最重要的元素。最終茫孔，你的產(chǎn)品對(duì)訪客越有吸引力叮喳，他們從你那購(gòu)買(mǎi)產(chǎn)品就越感到自信，你的轉(zhuǎn)化率就會(huì)越高缰贝。

使產(chǎn)品圖像美觀一個(gè)好的圖像為你做所有的辛勤工作：它抓住用戶的注意力，使你的產(chǎn)品具有區(qū)分度剩晴。然而锣咒，良好的產(chǎn)品攝影需要努力≡廾郑可以考慮閱讀這篇文章 “Improve Your E-Commerce Design With Brilliant Product Photos” 學(xué)習(xí)如何拍出高品質(zhì)的產(chǎn)品攝影圖毅整。

讓產(chǎn)品賣(mài)它們自己。 考慮如下Gorilla Pod 的例子：照片證明了產(chǎn)品的優(yōu)點(diǎn)绽左。

14-preview-opt.png

在首屏上顯示主圖像悼嫉。不要讓用戶滾動(dòng)屏幕才能看見(jiàn)產(chǎn)品的主圖像。主要的產(chǎn)品圖像應(yīng)錨定在顯著位置拼窥，以便交易你的優(yōu)先的產(chǎn)品戏蔑。

為了使圖像更有效率，你要使圖片盡量的大鲁纠。那么总棵，當(dāng)你已經(jīng)最大化了你的圖像的大小，您需要集成放大產(chǎn)品的特定細(xì)節(jié)的能力房交。這對(duì)于服裝等產(chǎn)品尤其重要彻舰，用戶對(duì)這些產(chǎn)品的細(xì)節(jié)更關(guān)注。放大的圖像還需要保持高質(zhì)量候味。

傳達(dá)個(gè)性和觸發(fā)用戶情感

圖像可以傳達(dá)產(chǎn)品或服務(wù)的本質(zhì)，但它也可以傳達(dá)驚喜和喜悅白群。和傳達(dá)信息的能力一樣尚胞，圖像也有使人愉悅的能力。如果您的產(chǎn)品已經(jīng)有令人滿意的客戶體驗(yàn)帜慢，為您的產(chǎn)品增添愉悅有助于創(chuàng)建與用戶的情感聯(lián)系笼裳。情感強(qiáng)大的圖像是確保用戶繼續(xù)深入了解您的體驗(yàn)的一個(gè)因素唯卖。

情感大腦受照片和插圖拜轨，特別是人的照片和插圖以及故事的影響。談到插圖允青，甚至那些不會(huì)至始至終整合繪制風(fēng)格的網(wǎng)站和app也可以用卡通插圖達(dá)到這些目的橄碾。例如，插圖可用于指令颠锉，教程和空白狀態(tài)法牲。

現(xiàn)實(shí)生活場(chǎng)景：如何為著陸頁(yè)選擇圖像

著陸頁(yè)本質(zhì)上是您的商店櫥窗琼掠，在大多數(shù)情況下拒垃，你只有一個(gè)機(jī)會(huì)給用戶留下深刻的印象。談到著陸頁(yè)時(shí)瓷蛙，您希望訪問(wèn)者在您的網(wǎng)頁(yè)上只完成一個(gè)任務(wù)：轉(zhuǎn)化悼瓮。優(yōu)良的著陸頁(yè)具建立在穩(wěn)固的用戶體驗(yàn)之上，圖像在建立這種體驗(yàn)中起重要作用艰猬。當(dāng)用戶來(lái)到您的網(wǎng)頁(yè)時(shí)谤牡，他們會(huì)有一些反應(yīng)：無(wú)論是積極還是消極，在很大程度上姥宝，都是由他們所看到的決定翅萤。

遵循如下建議“顯示，不要告訴”腊满。以及：

1. 選擇適合您信息的圖像套么。
   選擇可以簡(jiǎn)單解釋產(chǎn)品或服務(wù)概念的圖片很重要。這并不意味著圖像需要說(shuō)明一切——單獨(dú)看到的圖像可能甚至看起來(lái)意義不明碳蛋，但當(dāng)它連接到頁(yè)面上的一切時(shí)邏輯上應(yīng)該合適胚泌。它應(yīng)該在視覺(jué)上強(qiáng)化您嘗試提供給訪客的消息。

2. 在正確的位置展示圖像
   如果圖像支持高優(yōu)先級(jí)目標(biāo)肃弟，它應(yīng)該有更多的視覺(jué)強(qiáng)調(diào)玷室。相反，與次要目標(biāo)相關(guān)的圖像應(yīng)該具有較少的強(qiáng)調(diào)笤受。最重要的圖像應(yīng)該錨定在顯著的位置（例如：在首屏上）和顯著的焦點(diǎn)上穷缤。

3. 選擇能捕捉注意的醒目視覺(jué)
   專(zhuān)注于選擇您可以找到的最引人注目的圖像。正如Steven Snell 所提及的 “一個(gè)生動(dòng)箩兽，醒目的形象將持續(xù)在用戶的心中津肛。文本可能被讀取和遺忘，但強(qiáng)烈的圖像將被記住汗贫∩碜”

4. 使用情感強(qiáng)大的圖像
   您的圖像應(yīng)該有情感的說(shuō)服力 - 有情感的影響并強(qiáng)化你想創(chuàng)造的感覺(jué)秸脱。畢竟，當(dāng)涉及決策時(shí)部蛇，情緒經(jīng)常會(huì)覆蓋邏輯摊唇。

以下是Intercom的登錄頁(yè)面示例，這項(xiàng)服務(wù)可讓您更有效地與客戶溝通涯鲁。登陸頁(yè)需要一個(gè)相當(dāng)復(fù)雜的想法遏片，并使其易于理解產(chǎn)品如何工作，以及為什么它可能是有益的撮竿。

Intercom使用插圖來(lái)比較舊的工作方式，而不是一個(gè)簡(jiǎn)單的方法。

結(jié)論

考慮圖像的可用性是很重要的。您設(shè)計(jì)中的所有視覺(jué)傳達(dá)為用戶留下累積印象拌滋。令人信服的圖像具有獨(dú)特的啟發(fā)能力犁嗅，吸引您的受眾群體提供有用的信息⌒花時(shí)間在應(yīng)用程式或網(wǎng)站中加入每一張圖片，能強(qiáng)化用戶體驗(yàn)。

推薦閱讀

Deciding When Graphics Will Help (And When They Won’t)搭幻，Jared M. Spool
How To Use Photos To Sell More Online, James Chudley
Image-Focused Design: Is Bigger Better?, Kathryn Whitenton