在如今的手機產品中，圖片起著舉足輕重的作用，甚至是出奇制勝的神器，網絡流行語“有圖有真相”就體現出圖片的重要性。關于圖片的設計方法論也很多很多，本文主要講的是列表中圖片的放置和設計。

在大多數產品的列表中，圖片和文字的組織關系主要有這幾種：

• 圖片靠左對齊；
• 圖片靠右對齊；
• 圖片放在上方；
• 圖片放在下方；
• 圖片作為背景；
• 同時利用上述幾種方式；

圖片靠左對齊

正常情況下，用戶的注意力是從左向右的（以色列等人除外），在列表中，圖片放在列表開頭有著無與倫比的優勢：

• 可以增加識別度，加快用戶對該記錄的識別速度，比如通訊錄左側頭像、IM消息列表頭像；
• 可以吸引用戶注意力，提高點擊率，比如購物網站，突出的記錄經常放個icon；
• 可以用圖片內容引發用戶興趣，作為營銷的手段提高轉化率，比如團購網站的美食列表經常放一些看起來很有誘惑力的美食圖片，還有一些推薦內容，例如有道詞典，結合時事新聞，通過圖片吸引用戶觀看；

缺點：

• 如果圖片與內容的相關性不高，就會增加惹眼的污染信息，影響用戶的閱讀速度；
• 如果圖片主要是以營銷為目的的，久而久之用戶會下意識自動過濾左側的圖片，圖片就成了無用的障礙信息；

【思考】不知道大家有沒有這樣的感覺：現在圖片PS的太嚴重了，有點假，不管是電商還是團購，用多了以后都會下意識的把圖片自動過濾（可能是受圖片的當太多了，也可能是看的太多了），直接看關心的內容：比如價格、距離多遠等等？后續電商和團購會不會也慢慢把圖片放到右側去了？之前一個O2O項目，自己嘗試過把圖片放到列表右側，也評審通過了，可惜后續因為其他原因，該項目被終止了。

圖片靠右對齊

如果列表中，每條記錄的內容比圖片更重要或者該內容很難用相應的圖片進行表達，同時又想充實頁面提高頁面美觀度，又或者想用圖片對文字進行補充說明的，可以考慮把圖片放在右側。

比如常見新聞類應用：今日頭條、騰訊新聞、36kr等，以及知識類應用：知乎、人人都是產品經理等，這些應用更重要的是內容，配圖只是對內容的一種補充，所以都把圖片靠右放了。

缺點：用戶很可能看完文字就自動跳到下條記錄，自動忽略圖片，大大減少圖片的補充性，不過這與設計的初衷不違背。

【思考】下圖是一醫藥產品和網易新聞的截圖，他們把圖片放在了列表的左側，這么設計是為了什么？或者說這么設計是否合理？

至于這么設計的原因就不妄自揣測了，就說說我使用的感受吧：第一款醫藥產品，我感覺是內容更重要，配圖跟內容有時一點關系都沒有，我看列表的時候，會下意識的自動把圖片給過濾掉，從圖片右側的內容開始閱讀，有時候圖片太惹眼了也會看幾眼，但是對我了解內容真的沒有幫助。至于網易新聞，有時候圖片很有吸引力，我會先看圖片，看到圖片后腦子會自動想象一個跟圖片相關的新聞，但是跟真正的新聞經常不匹配，圖片畢竟不是文字，每個人的理解不一致，所以到后面我基本直接過濾圖片了，直接看文字了，雖然感覺影響也不大，但是個人感覺圖片更多的是對內容的補充，可以放到右側去。

圖片放在上方

圖片放在每條記錄的上方，一般都是類似瀑布流列表的處理方式。此時圖片的重要程度比放在左側還要高的多，基本每條記錄的主要信息都靠配圖來呈現，也主要靠圖片來吸引用戶，文字僅起到輔助作用。這種處理方式主要利用在視頻網站、圖片社交、部分購物網站、旅游網站上，例如下圖的騰訊視頻、Pinterest、蘑菇街、攜程：

缺點：如果一排只放一條記錄，很占空間；

圖片放在下方

圖片放在每條記錄下方的處理方式，主要利用于社交的狀態列表中，比如朋友圈、微博、空間，主要的優勢：可以把文字和圖片的結合優勢充分發揮出來，文字簡要陳訴，圖片帶你身臨其境，還原真實情況：

圖片作為背景

圖片作為背景，可以加強其沉浸感，充分利用圖片喚起用戶的想象，把圖片的誘惑最大化以提高逼格，常用于旅游產品中：

同時利用上述幾種方式

有時候為了減緩用戶審美疲勞、突出某些重點部分，可以同時利用上述幾種排列方式，利用不同排列方式的優勢來最大化達到產品目的：

本文由 @BingoSun 原創投稿，并經人人都是產品經理編輯。未經許可，禁止轉載。