簡述：

對列表而言是否使用以及在哪使用縮略圖是基于圖片與相關(guān)文本的重要性來定的，與所有的列表項目是否都顯示圖片，或小圖片是否可被識別彼此不同。

在我們的培訓(xùn)課程上（英文作者），一個來自我們的客戶與參會者的常見問題是：移動端的項目列表是否需要使用縮略圖，如果是的話，應(yīng)該將縮略圖放置在正文的左邊還是右邊，正如預(yù)期的那樣，根本就沒有一個放之四海而皆準(zhǔn)的答案，但有一些原則可以幫助我們在各種變化的情況下采取正確的做法。

圖片是有用的嗎（對用戶而言）？

不要僅僅因為你有一些甚至列表中的項目所需的全部圖片，你就要必須展示它們。首先考慮圖片是否會有效的幫助到用戶決策選擇列表中的哪個項目，更棒的是：自問是否可以僅依靠圖片就決定去向哪里。如果僅使用圖片不足以確定的話（可能因為圖片太小無法區(qū)分相關(guān)細節(jié)或只顯示了普通的占位符圖片），那么放棄它。

例如，Teavana 移動網(wǎng)站上縮略圖片（下圖）貌似不可能幫助到用戶哪種茶葉更適合他們的口味，用戶很難通過如此小尺寸的圖片來明確茶葉的分類和成分，而被圖片占用的屏幕空間倒可以被文本信息更好的利用，如品茶筆記、咖啡因標(biāo)準(zhǔn)——內(nèi)容可以幫助用戶做出更明智的選擇，但目前這些信息被淹沒在詳情頁面中。

相反的，如果僅通過文本信息會造成用戶不太容易選擇到合適的項目（至少，without pogo sticking）則縮略圖應(yīng)以某種方式被顯示出來。對于零售與餐飲業(yè)這是最常見的情況，用戶在審美角度的強烈驅(qū)動下，也就是說，圖片是用來解釋兩件衣服之間區(qū)別的最好方式——即使只有一丟丟。當(dāng)然，如果列表內(nèi)容主要是視覺的（視頻、照片等等），那么圖片應(yīng)該在頁面上絕對被優(yōu)先考慮以便利于導(dǎo)航，采用大的縮略圖或基于網(wǎng)格視圖的布局取決于有多少相關(guān)的文本也需要要被顯示。

位置：左邊還是右邊

如果決定要顯示縮略圖，接下來的問題就是在哪里放置。權(quán)衡列表中的圖片與文本信息的重要性，當(dāng)用戶瀏覽時它是視覺的重要組成部分，還只是輔助的，以確定將圖安放在相關(guān)文本信息的左邊或右邊。

如果圖片是選擇列表中項目的本質(zhì)因素，就放在左邊，以幫助用戶通過縮略圖就能快速過濾而無需閱讀文本信息，否則，如果縮略圖相對于文本只是次要信息，就將其放置在文本信息的右側(cè)。

關(guān)于縮略圖的優(yōu)先級同時可以決定縮略圖的大小，重要性愈低圖可以愈小。然而，請記住如果縮略圖過小，它將起不到可被識別和有用的作用（可以同時使用裁剪或縮放來降低圖片尺寸大小，而不是僅僅用縮小圖片來解決這個問題）。另一方面，過大的縮略圖會以不太恰當(dāng)?shù)姆绞椒稚⒂脩魧ο嚓P(guān)文本的注意力（比如,字體大小變的無法識別或縮短項目描述信息——總之這兩種都會損害到用戶體驗），同樣的，越大的圖片越需要更長時間的加載———且相當(dāng)令人惱火的、緩慢的加載。

另一個可以幫助你選擇在哪里放置縮略圖的因素是你是否擁有適合所有列表項目的圖片。如果不能保證每個列表項目都有縮略圖的話，就將縮略圖放置在右邊，以利于瀏覽時更好的支持文本信息。這可以保證文本左對齊，也保持用戶的注意力在頁面的左邊并找到感興趣的項目。

結(jié)論

確定圖片的相對重要性并進行調(diào)研，比如調(diào)查或訪談，深入了解用戶的喜好，一旦圖片的優(yōu)先級確定，理想的縮略圖位置就很容易決定。

與往常一樣，一定要善用紙質(zhì)原型來測試預(yù)期的新布局，在投入大量的時間和金錢之前以確保你處于正確的道路上。

原文鏈接：https://www.nngroup.com/articles/mobile-list-thumbnail/

#專欄作家#

大偉，微信電影 產(chǎn)品經(jīng)理，人人都是產(chǎn)品經(jīng)理專欄作家，從用戶需求（在一大堆很酷的設(shè)想中砍掉當(dāng)中的絕大一部分）到產(chǎn)品定義（有價值且符合公司戰(zhàn)略發(fā)展），從產(chǎn)品原型到視覺設(shè)計，從交互到動效，毫無疑問，這些都是非常振奮人心和充滿能量的，希望你可以在我們的會話中找到有用的東東。

本文系作者授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。