簡(jiǎn)述：

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

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

圖片是有用的嗎（對(duì)用戶而言）？

不要僅僅因?yàn)槟阌幸恍┥踔亮斜碇械捻?xiàng)目所需的全部圖片，你就要必須展示它們。首先考慮圖片是否會(huì)有效的幫助到用戶決策選擇列表中的哪個(gè)項(xiàng)目，更棒的是：自問是否可以僅依靠圖片就決定去向哪里。如果僅使用圖片不足以確定的話（可能因?yàn)閳D片太小無法區(qū)分相關(guān)細(xì)節(jié)或只顯示了普通的占位符圖片），那么放棄它。

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

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

位置：左邊還是右邊

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

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

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

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

結(jié)論

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

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

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

#專欄作家#

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

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