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

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

了解圖片的作用和必要性

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

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

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

圖片的位置：左還是右？

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

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

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

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

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

2. 若圖片對(duì)用戶判斷有至關(guān)重要的作用，則可使用大圖或Galley模式;

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

接下來對(duì)圖片設(shè)計(jì)形式做如下說明：

01.無縮略圖形式

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

但如果圖片是具有一定的普遍認(rèn)知的,添加縮略圖會(huì)讓用戶的識(shí)別效率提高。比如 icon+文本，或國家列表中國旗標(biāo)志+文本。

02.大圖及Gallery形式

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

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

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

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

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

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

另外一類則是新聞?lì)惍a(chǎn)品，很多平臺(tái)選擇將縮略圖放置到右邊。只看縮略圖用戶是無法獲取足夠信息來判斷是否要進(jìn)一步瀏覽的(當(dāng)然，也有通過圖片博人眼球的)。另外還有一個(gè)細(xì)節(jié)需要關(guān)注，新聞?lì)惍a(chǎn)品有時(shí)為了確保時(shí)效性并沒有提供縮略圖，如果將縮略圖放置在左邊也會(huì)對(duì)排版帶來一定的影響。

列表的設(shè)計(jì)要根據(jù)平臺(tái)定位和用戶需求實(shí)際考量，合理的設(shè)計(jì)一方面會(huì)帶給用戶良好的體驗(yàn)，一方面也會(huì)提升用戶的點(diǎn)擊意愿。

參考文章：

<移動(dòng)設(shè)備上何時(shí)何地使用列表縮略圖>

作者：Aurora Bedford

<如何正確的設(shè)計(jì)縮略圖來提升用戶點(diǎn)擊意愿>

作者：不詳