在如今的手機(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)載。