歡迎投稿到早讀課，投稿郵箱：mm@zaodula.com 當(dāng)我們談及可用性的時(shí)候，我們首先想到的往往不是圖片。作為用戶體驗(yàn)設(shè)計(jì)師，我們要確保信息架構(gòu)可靠，導(dǎo)航流程可用，用戶行為號(hào)召（Call to Action）和標(biāo)簽清晰可見，然后再用圖片作為補(bǔ)充。有多少次，我們在線框圖甚至是原型中用帶個(gè)叉的占位符來表示圖片。 線框圖中常用的占位符。這樣做的問題是我們不能充分考慮到這里會(huì)用到什么圖片，最終的效果怎樣。 圖片來源：Flickr 不言而喻，圖片在網(wǎng)站或數(shù)字產(chǎn)品的用戶體驗(yàn)方面有重要的作用。一般的商業(yè)攝影圖片讓人覺得俗不可耐，倉促放上去的圖片不走心也會(huì)讓用戶覺得反感?，F(xiàn)在的用戶其實(shí)非常善于選擇性“忽視”任何看著像廣告的圖片，“廣告盲點(diǎn)”會(huì)讓這些線上廣告變成毫無用處的圖片。 什么是可以用的照片？什么是好的圖片體驗(yàn)？這是一個(gè)需要我們?nèi)ヌ剿鞯膯栴}，也會(huì)隨著網(wǎng)絡(luò)和技術(shù)的發(fā)展不斷變化，比如響應(yīng)式Web。一般來說：
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é)制的使用，因?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í)簡單快速導(dǎo)入圖片的方法。事先考慮類似的選擇并提供圖像的方向?qū)μ岣弋a(chǎn)品最終的用戶體驗(yàn)將有很大的幫助。 2.考慮好布局 產(chǎn)品設(shè)計(jì)的基本布局要避免突兀不適的中斷，還要選擇和設(shè)計(jì)布局或格式相符的圖片。雖然很簡單，但是確保圖片擁有正確的比例也可以提高圖片的可用性。被拉伸的圖片往往會(huì)分散用戶的注意力。 3.恰當(dāng)?shù)氖褂梦淖?/strong> 在圖片上加文字對于可用性來說是一個(gè)挑戰(zhàn)。為了保證文字的可讀性，我們需要利用它們之間的對比度來評估一下文字和背景圖片之間的對比關(guān)系。一般來講，在有大量留白的最小圖片（minimal image）上添加文字效果最好。 Othr.com 使用大面積留白的產(chǎn)品圖片讓他們網(wǎng)站的風(fēng)格更具美感，同時(shí)也提高了文字的可讀性。這些描述性文字和言之有物的圖片組合在一起產(chǎn)生了不錯(cuò)的購物體驗(yàn)。 4.用眼睛吸引注意力 行為心理學(xué)研究表明我們會(huì)下意識(shí)的去看照片中的眼睛在看什么，這也可以用在我們的設(shè)計(jì)中——用在標(biāo)題和一些 CTA（Call to Action）控件上。我們會(huì)情不自禁的注視圖片中的人正在看的地方，甚至是動(dòng)物在盯著看的地方。 Chemistry.com 利用我們通過看別人眼睛去看他們注意什么的興趣把用戶的注意力集中到注冊表單。注冊數(shù)是這個(gè)頁面核心的轉(zhuǎn)化率，這樣就可以把用戶的注意力引導(dǎo)到注冊區(qū)域。   版權(quán)聲明：早讀課文章均來自作者投稿或者授權(quán)文章，部分文章為轉(zhuǎn)載均盡量注明作者和來源，文章版權(quán)歸作者所有，若涉及版權(quán)問題，請?zhí)砑觤omo微信：qqj5211314，感謝。 |
|
|
