就經驗來講，大部分用戶是美學驅動的，冗長的文字信息，帶給用戶瀏覽負擔，而視覺化(內容多樣性，如圖文、視頻、信息圖等)的呈現(xiàn)，則可以降低閱讀壓力，讓用戶快速get到內容要點。然而，所有的列表信息是否都需要圖片？圖片排版是否有優(yōu)先級？凡事不要總問經驗，去追根溯源，說不定會撼動經驗這棵大樹，發(fā)現(xiàn)新大陸。

在電商類的平臺設計中，我們通常有一個直覺，我們需要高清大圖來渲染氛圍，通過視覺化的形式吸引用戶點擊，通常電商類的列表我們會采用大圖或者Gallery的形式進行設計，但這僅僅是從經驗和感性的角度所做的一個判斷。事實上這個問題并沒有一個準確的答案，但通過對移動端網站/APP設計的分析，或許可以找到一些規(guī)律。

了解圖片的作用和必要性

列表頁一定需要圖片嗎？首先要考慮圖片是否能輔助用戶理解，或起到幫助用戶決策的作用。檢驗的方式即如果只通過圖片，你是否能夠找到自己想要的東西。如果答案是否的話（也許是因為圖片過小以至于看不清細節(jié)或是因為這些只是再普通不過的通用圖片），那么請果斷放棄吧。舉個栗子：

Teavana 移動電商網站 (見下圖)，以下是茶葉列表頁面，這個列表設計是不太可能幫助用戶決定哪些茶能符合他們的口味的，一是因為圖片尺寸較小、無法辨識茶葉的細節(jié)，不同產品的圖片看起來十分相似，且用戶關心的咖啡因等構成成分在下一級的詳情頁當中，這樣的列表縮略圖和文本信息是沒有太大意義的。

若僅憑列表文字，用戶很難做出合適的選擇(至少在不來回跳轉頁面的情況下)，那么列表設計中就可考慮使用縮略圖。比如很多電商類網站都采用圖文列表的方式，用戶通過圖片對比進行初步篩選。倘若列表內容主要是視覺性的(例如，視頻或照片)，那么縮略圖用于引起用戶注意或引導用戶點擊再適合不過了，此種情況要確保縮略圖夠大，或是在保證相關必要文字展示的基礎上使用宮格排版。

圖片的位置：左還是右？

如果使用列表設計加入縮略圖，則需考慮縮略圖的位置。若確定房子關聯(lián)文本的左邊還是右邊，則需權衡對比圖片和列表項中的文本信息的重要性。如果圖片是列表中的必要條件，要將其放在左邊 (這指從左到右書寫的語言中)，以幫助用戶通過有縮略圖的列表快速篩選，而不必看文本。否則，如果圖片的重要性次于文本，將它放在說明文本右邊的位置。

圖片相對關聯(lián)文本的優(yōu)先級，也決定了縮略圖的大小。越不重要的圖片可以越小。但是如果縮略圖太小了，它將不再可識別或者可用 (要緩解此問題，可使用裁剪和縮放的組合來減小圖像大小，而不是只按比例縮小)。另一方面，太大的縮略圖可能會分散用戶注意力，使其注意不到其他有關信息，或導致關聯(lián)的文本縮小或截斷描述。較大的圖片也會導致加載時間過長，引起用戶不滿。

要確定圖像的相對重要性，需要進行用戶態(tài)度研究，比如調查或訪談，深入了解您的用戶喜好。一旦可以定義圖像的優(yōu)先級，就容易決定理想的縮略圖位置。

根據(jù)圖片的引導作用，可使用以下圖片策略樹，來判定是否需要圖片、圖片的位置以及圖片的形式：

1. 若圖片對用戶判斷沒有任何作用，則不需要縮略圖;

2. 若圖片對用戶判斷有至關重要的作用，則可使用大圖或Galley模式;

3. 若圖文作用相當，List模式下縮略圖的位置(左或右)取決于它相對于文字的重要性。

接下來對圖片設計形式做如下說明：

01.無縮略圖形式

下面的案例是百度地圖搜索列表，此列表沒有在文字前面添加一個對應的縮略圖，事實上也沒有合適的縮略圖值得放在前面。按照我們前面提到的判斷標準，如果這張圖片對于用戶識別這條信息沒有幫助，那么就不應該添加縮略圖，直接展示文字效率會更高。

但如果圖片是具有一定的普遍認知的,添加縮略圖會讓用戶的識別效率提高。比如 icon+文本，或國家列表中國旗標志+文本。

02.大圖及Gallery形式

這里提到的大圖是指通欄展示的圖片設計，需利用較大空間通過圖片進行信息傳遞的場景中，比如美食、藝術品、圖片社區(qū)等平臺。在這幾類產品中可以說一圖勝千言，一張精心設計的圖片就足以讓用戶進一步點擊，相比相關聯(lián)的文本，其作用就沒那么重要了。

這類形式下還有一個特殊的情景，那就是電商類產品。在很多標類商品或時尚品相關應用中一張圖片就足以讓用戶判斷出商品或引起用戶點擊的興趣，但同時還想在單位空間內(通常指一屏內)展示更多的商品數(shù)。Gallery 是一個折中但又不錯的展示形式。

03. List形式（縮略圖的左右分布）

List 是在各類平臺中最為常見的一種設計形式，圖片的位置或左或右，這里需從圖片是否比文字更重要及從左至右的瀏覽習慣來進行判斷。

圖片放在右側的案例相對較少，但也有幾個比較典型的案例,大致分為兩類。

第一類，如 ProductHunt 。發(fā)布者的圖片是該產品的重要信息之 一，但發(fā)布者的頭像對于其它大量的訪問者來說是沒有太大意義的，所以被放置在了右邊。

另外一類則是新聞類產品，很多平臺選擇將縮略圖放置到右邊。只看縮略圖用戶是無法獲取足夠信息來判斷是否要進一步瀏覽的(當然，也有通過圖片博人眼球的)。另外還有一個細節(jié)需要關注，新聞類產品有時為了確保時效性并沒有提供縮略圖，如果將縮略圖放置在左邊也會對排版帶來一定的影響。

列表的設計要根據(jù)平臺定位和用戶需求實際考量，合理的設計一方面會帶給用戶良好的體驗，一方面也會提升用戶的點擊意愿。

參考文章：

<移動設備上何時何地使用列表縮略圖>

作者：Aurora Bedford

<如何正確的設計縮略圖來提升用戶點擊意愿>

作者：不詳