作者：Linn Vizard。作者授權(quán)早讀課發(fā)表，轉(zhuǎn)載請聯(lián)系作者。
公眾號：UX設(shè)計小站（ID:ux-com）

歡迎投稿到早讀課，投稿郵箱：mm@zaodula.com

當(dāng)我們談及可用性的時候，我們首先想到的往往不是圖片。作為用戶體驗設(shè)計師，我們要確保信息架構(gòu)可靠，導(dǎo)航流程可用，用戶行為號召（Call to Action）和標(biāo)簽清晰可見，然后再用圖片作為補(bǔ)充。有多少次，我們在線框圖甚至是原型中用帶個叉的占位符來表示圖片。

線框圖中常用的占位符。這樣做的問題是我們不能充分考慮到這里會用到什么圖片，最終的效果怎樣。 圖片來源：Flickr

不言而喻，圖片在網(wǎng)站或數(shù)字產(chǎn)品的用戶體驗方面有重要的作用。一般的商業(yè)攝影圖片讓人覺得俗不可耐，倉促放上去的圖片不走心也會讓用戶覺得反感?，F(xiàn)在的用戶其實非常善于選擇性“忽視”任何看著像廣告的圖片，“廣告盲點”會讓這些線上廣告變成毫無用處的圖片。

什么是可以用的照片？什么是好的圖片體驗？這是一個需要我們?nèi)ヌ剿鞯膯栴}，也會隨著網(wǎng)絡(luò)和技術(shù)的發(fā)展不斷變化，比如響應(yīng)式Web。一般來說：

“最好的圖片能夠和用戶清晰的溝通并與品牌價值保持一致，喚起用戶的情感共鳴，然后按照設(shè)計意圖影響他們的決定和行為”

——James Chudley

Samsonsite網(wǎng)站用導(dǎo)航圖片向用戶說明導(dǎo)航類別

Jared Spool把圖片分為3種類型：導(dǎo)航圖片、內(nèi)容圖片和裝飾圖片。第一類的導(dǎo)航圖片可以為網(wǎng)站的信息架構(gòu)、導(dǎo)航流程提供支持，幫助用戶進(jìn)行下一步操作。內(nèi)容圖片可以為用戶提供文案不能描述的額外信息，Airbnb據(jù)說憑借為用戶提供將要入住的寓所的精美圖片就增加了一倍的收入。第三類圖片就是不包含主要信息的裝飾性圖片。這三類圖片需要有節(jié)制的使用，因為這些圖片往往會毀了美好的用戶體驗。

這里有8個可以提高圖片可用性并提升產(chǎn)品用戶體驗的建議或提示，供參考。

即使在進(jìn)行UX設(shè)計的時候不會采用最終的圖片，養(yǎng)成一個使用定向圖片或原始內(nèi)容的習(xí)慣也是很有幫助的。Adobe Stock可以讓你方便的在Creative Cloud設(shè)計稿中預(yù)覽帶水印的圖片，這是一個在設(shè)計時簡單快速導(dǎo)入圖片的方法。事先考慮類似的選擇并提供圖像的方向?qū)μ岣弋a(chǎn)品最終的用戶體驗將有很大的幫助。

產(chǎn)品設(shè)計的基本布局要避免突兀不適的中斷，還要選擇和設(shè)計布局或格式相符的圖片。雖然很簡單，但是確保圖片擁有正確的比例也可以提高圖片的可用性。被拉伸的圖片往往會分散用戶的注意力。

在圖片上加文字對于可用性來說是一個挑戰(zhàn)。為了保證文字的可讀性，我們需要利用它們之間的對比度來評估一下文字和背景圖片之間的對比關(guān)系。一般來講，在有大量留白的最小圖片（minimal image）上添加文字效果最好。

Othr.com 使用大面積留白的產(chǎn)品圖片讓他們網(wǎng)站的風(fēng)格更具美感，同時也提高了文字的可讀性。這些描述性文字和言之有物的圖片組合在一起產(chǎn)生了不錯的購物體驗。

行為心理學(xué)研究表明我們會下意識的去看照片中的眼睛在看什么，這也可以用在我們的設(shè)計中——用在標(biāo)題和一些 CTA（Call to Action）控件上。我們會情不自禁的注視圖片中的人正在看的地方，甚至是動物在盯著看的地方。

Chemistry.com 利用我們通過看別人眼睛去看他們注意什么的興趣把用戶的注意力集中到注冊表單。注冊數(shù)是這個頁面核心的轉(zhuǎn)化率，這樣就可以把用戶的注意力引導(dǎo)到注冊區(qū)域。

互聯(lián)網(wǎng)早讀課

www.zaodula.com

微信ID：zaoduke