論位置的重要性:產(chǎn)品列表中的圖片放在哪?
在如今的手機(jī)產(chǎn)品中,圖片起著舉足輕重的作用,甚至是出奇制勝的神器,網(wǎng)絡(luò)流行語(yǔ)“有圖有真相”就體現(xiàn)出圖片的重要性。關(guān)于圖片的設(shè)計(jì)方法論也很多很多,本文主要講的是列表中圖片的放置和設(shè)計(jì)。
在大多數(shù)產(chǎn)品的列表中,圖片和文字的組織關(guān)系主要有這幾種:
- 圖片靠左對(duì)齊;
- 圖片靠右對(duì)齊;
- 圖片放在上方;
- 圖片放在下方;
- 圖片作為背景;
- 同時(shí)利用上述幾種方式;
圖片靠左對(duì)齊
正常情況下,用戶的注意力是從左向右的(以色列等人除外),在列表中,圖片放在列表開(kāi)頭有著無(wú)與倫比的優(yōu)勢(shì):
- 可以增加識(shí)別度,加快用戶對(duì)該記錄的識(shí)別速度,比如通訊錄左側(cè)頭像、IM消息列表頭像;
- 可以吸引用戶注意力,提高點(diǎn)擊率,比如購(gòu)物網(wǎng)站,突出的記錄經(jīng)常放個(gè)icon;
- 可以用圖片內(nèi)容引發(fā)用戶興趣,作為營(yíng)銷的手段提高轉(zhuǎn)化率,比如團(tuán)購(gòu)網(wǎng)站的美食列表經(jīng)常放一些看起來(lái)很有誘惑力的美食圖片,還有一些推薦內(nèi)容,例如有道詞典,結(jié)合時(shí)事新聞,通過(guò)圖片吸引用戶觀看;
缺點(diǎn):
- 如果圖片與內(nèi)容的相關(guān)性不高,就會(huì)增加惹眼的污染信息,影響用戶的閱讀速度;
- 如果圖片主要是以營(yíng)銷為目的的,久而久之用戶會(huì)下意識(shí)自動(dòng)過(guò)濾左側(cè)的圖片,圖片就成了無(wú)用的障礙信息;
【思考】不知道大家有沒(méi)有這樣的感覺(jué):現(xiàn)在圖片PS的太嚴(yán)重了,有點(diǎn)假,不管是電商還是團(tuán)購(gòu),用多了以后都會(huì)下意識(shí)的把圖片自動(dòng)過(guò)濾(可能是受圖片的當(dāng)太多了,也可能是看的太多了),直接看關(guān)心的內(nèi)容:比如價(jià)格、距離多遠(yuǎn)等等?后續(xù)電商和團(tuán)購(gòu)會(huì)不會(huì)也慢慢把圖片放到右側(cè)去了?之前一個(gè)O2O項(xiàng)目,自己嘗試過(guò)把圖片放到列表右側(cè),也評(píng)審?fù)ㄟ^(guò)了,可惜后續(xù)因?yàn)槠渌?,該?xiàng)目被終止了。
圖片靠右對(duì)齊
如果列表中,每條記錄的內(nèi)容比圖片更重要或者該內(nèi)容很難用相應(yīng)的圖片進(jìn)行表達(dá),同時(shí)又想充實(shí)頁(yè)面提高頁(yè)面美觀度,又或者想用圖片對(duì)文字進(jìn)行補(bǔ)充說(shuō)明的,可以考慮把圖片放在右側(cè)。
比如常見(jiàn)新聞?lì)悜?yīng)用:今日頭條、騰訊新聞、36kr等,以及知識(shí)類應(yīng)用:知乎、人人都是產(chǎn)品經(jīng)理等,這些應(yīng)用更重要的是內(nèi)容,配圖只是對(duì)內(nèi)容的一種補(bǔ)充,所以都把圖片靠右放了。
缺點(diǎn):用戶很可能看完文字就自動(dòng)跳到下條記錄,自動(dòng)忽略圖片,大大減少圖片的補(bǔ)充性,不過(guò)這與設(shè)計(jì)的初衷不違背。
【思考】下圖是一醫(yī)藥產(chǎn)品和網(wǎng)易新聞的截圖,他們把圖片放在了列表的左側(cè),這么設(shè)計(jì)是為了什么?或者說(shuō)這么設(shè)計(jì)是否合理?
至于這么設(shè)計(jì)的原因就不妄自揣測(cè)了,就說(shuō)說(shuō)我使用的感受吧:第一款醫(yī)藥產(chǎn)品,我感覺(jué)是內(nèi)容更重要,配圖跟內(nèi)容有時(shí)一點(diǎn)關(guān)系都沒(méi)有,我看列表的時(shí)候,會(huì)下意識(shí)的自動(dòng)把圖片給過(guò)濾掉,從圖片右側(cè)的內(nèi)容開(kāi)始閱讀,有時(shí)候圖片太惹眼了也會(huì)看幾眼,但是對(duì)我了解內(nèi)容真的沒(méi)有幫助。至于網(wǎng)易新聞,有時(shí)候圖片很有吸引力,我會(huì)先看圖片,看到圖片后腦子會(huì)自動(dòng)想象一個(gè)跟圖片相關(guān)的新聞,但是跟真正的新聞經(jīng)常不匹配,圖片畢竟不是文字,每個(gè)人的理解不一致,所以到后面我基本直接過(guò)濾圖片了,直接看文字了,雖然感覺(jué)影響也不大,但是個(gè)人感覺(jué)圖片更多的是對(duì)內(nèi)容的補(bǔ)充,可以放到右側(cè)去。
圖片放在上方
圖片放在每條記錄的上方,一般都是類似瀑布流列表的處理方式。此時(shí)圖片的重要程度比放在左側(cè)還要高的多,基本每條記錄的主要信息都靠配圖來(lái)呈現(xiàn),也主要靠圖片來(lái)吸引用戶,文字僅起到輔助作用。這種處理方式主要利用在視頻網(wǎng)站、圖片社交、部分購(gòu)物網(wǎng)站、旅游網(wǎng)站上,例如下圖的騰訊視頻、Pinterest、蘑菇街、攜程:
缺點(diǎn):如果一排只放一條記錄,很占空間;
圖片放在下方
圖片放在每條記錄下方的處理方式,主要利用于社交的狀態(tài)列表中,比如朋友圈、微博、空間,主要的優(yōu)勢(shì):可以把文字和圖片的結(jié)合優(yōu)勢(shì)充分發(fā)揮出來(lái),文字簡(jiǎn)要陳訴,圖片帶你身臨其境,還原真實(shí)情況:
圖片作為背景
圖片作為背景,可以加強(qiáng)其沉浸感,充分利用圖片喚起用戶的想象,把圖片的誘惑最大化以提高逼格,常用于旅游產(chǎn)品中:
同時(shí)利用上述幾種方式
有時(shí)候?yàn)榱藴p緩用戶審美疲勞、突出某些重點(diǎn)部分,可以同時(shí)利用上述幾種排列方式,利用不同排列方式的優(yōu)勢(shì)來(lái)最大化達(dá)到產(chǎn)品目的:
本文由 @BingoSun 原創(chuàng)投稿,并經(jīng)人人都是產(chǎn)品經(jīng)理編輯。未經(jīng)許可,禁止轉(zhuǎn)載。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!