起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識不僅要漂亮：看圖像如何引導用戶體驗！
俗話說得好，“一圖勝千言”。圖片不僅要漂亮，還要夠意思！
俗話說得好，“一圖勝千言”，人類是高度視覺化的動物，能瞬間處理視覺傳達的信息，研究表明我們的大腦能感知和捕獲的90%的信息都是視覺信息。圖片可以迅速吸引用戶的注意力，并讓用戶迅速從眾多商品中認出你的商品。此外，圖像還可以跨越語言障礙，但是單純的文字卻做不到。
圖像不應該僅僅用于裝飾，他們有能力創(chuàng)造或打破用戶的體驗。在這篇文章中，我們將介紹一些有用的原則和最佳實踐，幫助您將圖像融入到您的設計中。
只使用相關的圖像
每張圖像都有它的故事。就像寫作一樣，在開始之前你要知道自己想表達什么才是極好的。引人入勝的圖像有激發(fā)用戶吸引力的獨特功能，但不是所有的圖像都能達到這種體驗，那些不合時宜的圖像僅僅起到了占位的作用，而更糟糕的是它們會混淆視聽，在設計中最危險的就是使用了傳達錯誤信息的圖像。
不能表達主題的圖片往往讓用戶困惑
用戶對圖像的反應速度要遠比文字快得多，所以務必確保你的內(nèi)容和圖像是高度匹配的。只選擇和使用與你的產(chǎn)品目標強相關的圖像，并確保上下文是有關聯(lián)的。
減少圖像中的視覺干擾
“越多越好”的原則不適用于圖像。你的網(wǎng)站或者app不是用來展示圖像的，反之，圖像可以用來表現(xiàn)產(chǎn)品。在設計中只使用能抓住用戶注意力的圖片，不求最多，只求最好。
使用高質量不失真的圖像
確保你要使用的圖像在跨平臺顯示時的尺寸是合適的。確保圖像不會失真，所以一定要對不同分辨率的設備進行反復測試。展示圖片或圖形其原有的比例，不要將其比例放大超過100%。沒有人想看到自己的圖像或藝術品看上去是變形的，要么太小，要么太大。
左圖：失真的圖像；右圖：正確的分辨率
在進行響應式網(wǎng)頁和手機應用設計的時候，常常會在為選擇什么圖像能最好的適配不同的用戶設備上產(chǎn)生爭議。很顯然，能適配所有屏幕和設備的的圖像是稀缺貨，然而，對不同像素的圖像的需求卻太多，一次性剪裁所有尺寸圖像的工作量是巨大的，特別是如果你有大量的圖像，整個人幾乎是崩潰的。
那么，怎么才能自動適配所有尺寸的圖像呢？還好我們都是這個時代的幸運兒，一些在線工具可以幫助你處理不同尺寸的圖像。Cloudinary就是一個能夠幫助你生成響應式圖片的在線工具。此工具使用先進的算法，將上傳的圖像生成最匹配的圖像斷點，以方便為每個上傳的圖像生成最佳匹配斷點，在圖像基礎上進行分析從而找出匹配的斷點，而不是創(chuàng)建所有可能的圖像分辨率。（關于圖像斷點的概念請自行度娘或谷哥，嫌棄臉）
Cloudinary就是一個批量剪裁、調整圖像尺寸的在線工具
圖像聚焦要適度
能夠吸引用戶注意力的美觀的圖片當然有其價值，但它的代價是有可能犧牲用戶對其他元素的關注和使用。
如果在圖像上用力過猛，往往會產(chǎn)生視覺過度，這樣會嚴重影響用戶對內(nèi)容的注意。以SoundCloud’s（如下圖app）為例，用戶將所有注意力都集中在了界面的圖像上，幾乎忽略了下面的兩個按鈕。
Soundcloud的主界面上的背景圖的吸引力已經(jīng)超過了下面的按鈕
雖然圖像聚焦的設計在多數(shù)設計中是合適的（以蘋果官網(wǎng)主頁面為例），應用程序和網(wǎng)站在設計時，應該遵循一個平衡的法則-向用戶展示的圖像要能表達產(chǎn)品理念，但不能喧賓奪主，掩蓋其主要功能。
使用多種介質
插畫和照片可以同時被運用在同一個產(chǎn)品里。
照片是用來展示一個實體或者描述一個故事很好的元素。例如，我們不需要展示各種各樣的花，只需要展示一朵玫瑰花。
對于特定實體，使用照片展示
- 插畫在表達概念和隱喻的時候尤為有效，這是照片望塵莫及的。
當總的特性不需要表達的時候，用插畫來傳達一個近似的內(nèi)容以幫助理解是極好的。
只有一個焦點
圖像是信息傳達的視覺交流工具，焦點明確的圖像只需一瞥就能領會其意思，反之則不然。
當圖像的視覺焦點變得模糊不清時，它的價值也就消失了:
Don’t：視覺焦點較弱的圖像能表達的意義也相對較弱
不要試圖讓你的用戶從你的圖像中尋找含義，要確保將清晰地概念通過顯著的方式傳達給對方。
Do：焦點明確的圖像只需一瞥就能領會其意義
盡量減少圖像上干擾表達圖像意義的元素。
展示真實的人像
人像是吸引用戶注意力的一個有效的方法，當我們看到其他人的面孔時，我們會感覺自己跟他們是相關聯(lián)的，而不是單純的在使用一個產(chǎn)品。然而許多公司的網(wǎng)站為了“建立信任”，雇傭模特，拍攝并使用過度虛假的照片，這往往適得其反。
Don’t：不真實的圖像，給用戶用戶一種膚淺的、虛假的感覺。
可用性測試結果顯示：純粹的裝飾照片很難給產(chǎn)品帶來任何價值，反而會對用戶體驗造成傷害。用戶通常忽略這樣的圖像，甚至這些圖像可能會讓你的用戶感到沮喪。
一個非常簡單的經(jīng)驗法則是使用與自己產(chǎn)品或者網(wǎng)站文字相匹配的高質量的人像照片。你使用的圖像應該能真實的反應出你的產(chǎn)品、公司或企業(yè)文化
Do：展示真實的，實實在在的人，并確保這些人像與你的產(chǎn)品是高度匹配的。
建議：
- 避免使用擁擠的人群，盡量選擇只有一個人物焦點的圖像
- 盡量使用真實的故事情景，如果你已經(jīng)有了一個實體產(chǎn)品，那么讓你的用戶與你的產(chǎn)品產(chǎn)生交互是極好的。
將圖像與設計融合
在你的設計即將采用一張圖像之前，請先問問自己，這張圖像是不是與你的產(chǎn)品或者網(wǎng)站審美相匹配。Squarespace（一個網(wǎng)站）就是一個在網(wǎng)站首頁以圖像為焦點的很好的例子。它簡潔又干凈，使用了大面積的白色背景，圖像占據(jù)整個屏幕，即大膽，又抓人眼球。
選擇一張含有符合產(chǎn)品要創(chuàng)造的用戶體驗理念的圖像是非常重要的。
改進你的電子商務產(chǎn)品
產(chǎn)品的圖像可以用來銷售產(chǎn)品。用戶往往依靠產(chǎn)品圖像來評估產(chǎn)品及其特性。無論你的產(chǎn)品是耳機或是玩具，產(chǎn)品照片是任何電子商務網(wǎng)站的最重要的元素。最終，越是能吸引你的訪客的產(chǎn)品，他們對你購買的東西就越有信心，你的轉化率也就越高。
圖片是讓用戶對產(chǎn)品產(chǎn)生感覺的
請把產(chǎn)品圖片整的漂亮點。一張好的圖片可以讓你省去很多工作：好的照片能迅速獲取用戶的注意，并且讓用戶辨識你的產(chǎn)品。但是，好的照片需要時間處理。
讓產(chǎn)品自我銷售。以下面的GORILLA POD 為例，這張照片充分展示了產(chǎn)品的優(yōu)勢。
優(yōu)先顯示最主要的圖片。不要試圖讓用戶通過滾動瀏覽來獲取產(chǎn)品最關鍵的信息。主要產(chǎn)品形象應該展示在最突出的位置，以此展示你最想讓用戶獲取的信息。
越大的圖像沖擊力越大，盡你可能的放大你的圖片！當圖像太大不能在界面正常顯示的時候，你需要具有整合放大圖像具體細節(jié)的能力，弄清哪些細節(jié)是用戶最關心的尤為重要。切記放大的圖像仍然需要保證是高質量的。
Don’t：讓用戶看到放大的圖片的某個特殊的部位
Do：讓用戶對圖片放大縮小有自己的控制權（這其中包括包括了深度和范圍）
表達個性的同時，激發(fā)用戶的情感
圖像可以傳達一個產(chǎn)品或服務的精髓，與此同時它還可以制造驚喜和喜悅。圖像可以盡可能多的傳達信息。如果你已經(jīng)有了一個滿意的客戶體驗，添加一些歡樂的風格有助于激發(fā)用戶和產(chǎn)品之間的情感。情感強大的圖像是確保你的用戶還愿意繼續(xù)深入了解產(chǎn)品體驗的重要因素。
圖像能夠喚起瀏覽者的情緒反應。幽默可以減輕認知負擔，用戶可能因此而愛上它。
大腦情緒受到照片和插畫的影響，尤其是人像和有故事情節(jié)的圖像。說道插圖，即使是網(wǎng)站或應用程序不能納入整體繪畫風格，仍然可以通過漫畫手法達到目的。例如，插圖可以用于說明用法、教程或者空狀態(tài).
選擇一張能夠吸引用戶注意，并能引人入勝的圖片
現(xiàn)實生活場景：如何為著陸頁選擇一張能達到目的的圖像
從本質上講，著陸頁就是展示商品的櫥窗，在大多數(shù)情況下，著陸頁也是商家給用戶留下印象的唯一機會。當用戶來到著陸頁，你希望用戶能在你的頁面上操作：從而提高轉化率。好的著陸頁能創(chuàng)造穩(wěn)固的用戶體驗，而圖像是創(chuàng)建用戶體驗的重要角色。當用戶來到著陸頁的時候的，多多少少會有不同的反應，無論是積極的還是消極的，很大程度上取決于他們所看到的。
請遵循如下建議“做而不說”：
（1）選擇的圖片需要符合你的產(chǎn)品目標
選擇一張能清晰闡述產(chǎn)品概念或服務理念的圖片尤為重要。這并不意味著圖片需要表述所有信息，單獨看一張圖片的時候可能不是很清晰，但是當它同界面上其它元素組合在一起的時候，就會變得條理清晰，請在視覺上強調你試圖傳遞給來訪者的信息。
（2）將圖片展示在正確的位置
如果當前圖像需要強調一個高優(yōu)先級的目標，就應該通過視覺加以強調；相反，次要目標不應該過度突出。最重要的圖像應該放在最顯眼的位置上（i.e.重點突出的是頂部的文件夾），成為界面上的最主要的視覺焦點。
（3）使用最直接能抓住用戶眼球的圖像
盡你所能的使用最引人入勝的圖像，就像Steven Snell說過的：“一張栩栩如生的圖像能夠讓人記憶猶新，文字可能被人忘記，但是視覺沖擊力強的圖像卻能在人心中留下深深的烙印?！?/p>
（4）選擇情感豐富的圖像
通過圖像本身具有的情感，加上設計師情感化設計的襯托，讓圖像試圖從情感上說服用戶。表忘了，往往情感能夠在用戶作出決策之前改變其想法（沖動是魔鬼，對卜？!）。
舉一個陸頁的栗子，如下圖：該服務可以幫助用戶高效的與他們的客戶進行交流。該著陸頁通過一個相當復雜的概念告訴用戶該網(wǎng)站提供何種服務，以及用戶可以從中獲取的好處。
通過兩張插畫將舊的的工作模式和簡單的工作模式作對比
總結
在設計中考慮圖像在可用性方面的影響是非常必要的，設計中的視覺傳達往往能給用戶留下了深刻的印象。引人入勝的圖像有激發(fā)和吸引用戶注意，并提供有用信息的獨特能力。寧可多花些時間，也要確保所使用的圖像成為你的應用或網(wǎng)站的體驗加分項。
譯者：豬滴
來源：微信公眾號【INUX】
本文由 @INUX?授權發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉載。
請問處理這一類事情，一般到哪里可以找到這樣的專業(yè)人士？