作者：Linn Vizard。作者授權(quán)早讀課發(fā)表，轉(zhuǎn)載請(qǐng)聯(lián)系作者。
公眾號(hào)：UX設(shè)計(jì)小站（ID:ux-com）
歡迎投稿到早讀課，投稿郵箱：mm@zaodula.com
當(dāng)我們談及可用性的時(shí)候，我們首先想到的往往不是圖片。作為用戶體驗(yàn)設(shè)計(jì)師，我們要確保信息架構(gòu)可靠，導(dǎo)航流程可用，用戶行為號(hào)召（Call to Action）和標(biāo)簽清晰可見(jiàn)，然后再用圖片作為補(bǔ)充。有多少次，我們?cè)诰€框圖甚至是原型中用帶個(gè)叉的占位符來(lái)表示圖片。
線框圖中常用的占位符。這樣做的問(wèn)題是我們不能充分考慮到這里會(huì)用到什么圖片，最終的效果怎樣。 圖片來(lái)源：Flickr
不言而喻，圖片在網(wǎng)站或數(shù)字產(chǎn)品的用戶體驗(yàn)方面有重要的作用。一般的商業(yè)攝影圖片讓人覺(jué)得俗不可耐，倉(cāng)促放上去的圖片不走心也會(huì)讓用戶覺(jué)得反感?，F(xiàn)在的用戶其實(shí)非常善于選擇性“忽視”任何看著像廣告的圖片，“廣告盲點(diǎn)”會(huì)讓這些線上廣告變成毫無(wú)用處的圖片。
什么是可以用的照片？什么是好的圖片體驗(yàn)？這是一個(gè)需要我們?nèi)ヌ剿鞯膯?wèn)題，也會(huì)隨著網(wǎng)絡(luò)和技術(shù)的發(fā)展不斷變化，比如響應(yīng)式Web。一般來(lái)說(shuō)：
“最好的圖片能夠和用戶清晰的溝通并與品牌價(jià)值保持一致，喚起用戶的情感共鳴，然后按照設(shè)計(jì)意圖影響他們的決定和行為”
——James Chudley
Samsonsite網(wǎng)站用導(dǎo)航圖片向用戶說(shuō)明導(dǎo)航類別
Jared Spool把圖片分為3種類型：導(dǎo)航圖片、內(nèi)容圖片和裝飾圖片。第一類的導(dǎo)航圖片可以為網(wǎng)站的信息架構(gòu)、導(dǎo)航流程提供支持，幫助用戶進(jìn)行下一步操作。內(nèi)容圖片可以為用戶提供文案不能描述的額外信息，Airbnb據(jù)說(shuō)憑借為用戶提供將要入住的寓所的精美圖片就增加了一倍的收入。第三類圖片就是不包含主要信息的裝飾性圖片。這三類圖片需要有節(jié)制的使用，因?yàn)檫@些圖片往往會(huì)毀了美好的用戶體驗(yàn)。
這里有8個(gè)可以提高圖片可用性并提升產(chǎn)品用戶體驗(yàn)的建議或提示，供參考。
1.內(nèi)容優(yōu)先，包括圖片
即使在進(jìn)行UX設(shè)計(jì)的時(shí)候不會(huì)采用最終的圖片，養(yǎng)成一個(gè)使用定向圖片或原始內(nèi)容的習(xí)慣也是很有幫助的。Adobe Stock可以讓你方便的在Creative Cloud設(shè)計(jì)稿中預(yù)覽帶水印的圖片，這是一個(gè)在設(shè)計(jì)時(shí)簡(jiǎn)單快速導(dǎo)入圖片的方法。事先考慮類似的選擇并提供圖像的方向?qū)μ岣弋a(chǎn)品最終的用戶體驗(yàn)將有很大的幫助。
2.考慮好布局
產(chǎn)品設(shè)計(jì)的基本布局要避免突兀不適的中斷，還要選擇和設(shè)計(jì)布局或格式相符的圖片。雖然很簡(jiǎn)單，但是確保圖片擁有正確的比例也可以提高圖片的可用性。被拉伸的圖片往往會(huì)分散用戶的注意力。
3.恰當(dāng)?shù)氖褂梦淖?/strong>
在圖片上加文字對(duì)于可用性來(lái)說(shuō)是一個(gè)挑戰(zhàn)。為了保證文字的可讀性，我們需要利用它們之間的對(duì)比度來(lái)評(píng)估一下文字和背景圖片之間的對(duì)比關(guān)系。一般來(lái)講，在有大量留白的最小圖片（minimal image）上添加文字效果最好。
Othr.com 使用大面積留白的產(chǎn)品圖片讓他們網(wǎng)站的風(fēng)格更具美感，同時(shí)也提高了文字的可讀性。這些描述性文字和言之有物的圖片組合在一起產(chǎn)生了不錯(cuò)的購(gòu)物體驗(yàn)。
4.用眼睛吸引注意力
行為心理學(xué)研究表明我們會(huì)下意識(shí)的去看照片中的眼睛在看什么，這也可以用在我們的設(shè)計(jì)中——用在標(biāo)題和一些 CTA（Call to Action）控件上。我們會(huì)情不自禁的注視圖片中的人正在看的地方，甚至是動(dòng)物在盯著看的地方。
Chemistry.com 利用我們通過(guò)看別人眼睛去看他們注意什么的興趣把用戶的注意力集中到注冊(cè)表單。注冊(cè)數(shù)是這個(gè)頁(yè)面核心的轉(zhuǎn)化率，這樣就可以把用戶的注意力引導(dǎo)到注冊(cè)區(qū)域。
版權(quán)聲明：早讀課文章均來(lái)自作者投稿或者授權(quán)文章，部分文章為轉(zhuǎn)載均盡量注明作者和來(lái)源，文章版權(quán)歸作者所有，若涉及版權(quán)問(wèn)題，請(qǐng)?zhí)砑觤omo微信：qqj5211314，感謝。
聯(lián)系客服
