在決定是否要在列表項(xiàng)目中展示圖片縮略圖以及在哪放置縮略圖時，要考慮縮略圖與與縮略圖相關(guān)聯(lián)的文本倆者重要性大?。灰惨紤]是否每個列表項(xiàng)目都有縮略圖展示；還要考慮那些小的縮略圖是否能相互之間區(qū)分清楚。

我們從顧客和我們的訓(xùn)練課程的參與者中聽到的一個普遍的問題是在移動設(shè)備的設(shè)計(jì)中是否要在列表項(xiàng)目中包含縮略圖；如果要包含的話，那把縮略圖放在文本的左邊還是右邊呢？正如大家所想的那樣，這個問題并沒有一個普適性的答案，但是還是有一些參考來幫助大家決定在不同的場景中使用不同的解決方法。

圖片對用戶有幫助嗎？

不要這樣想，僅僅因?yàn)槟愕牧斜碇幸恍┥踔了辛斜眄?xiàng)有可依賴的圖片，你就必須要展示這些圖片。

首先要考慮的是這些圖片是不是能幫助用戶決定他們從列表選擇哪個列表項(xiàng)。更進(jìn)一步，問問你自己是不是用戶僅僅就從這些圖片上就能決定選擇哪個列表項(xiàng)。如果單獨(dú)的圖片不是很有效（因?yàn)閳D片太小難以區(qū)分細(xì)節(jié)或者因?yàn)閳D片太一般），就去除圖片吧。

比如，在手機(jī)網(wǎng)站上Teavana的列表項(xiàng)目包含的茶葉縮略圖（下圖）不可能幫助用戶思考哪種茶葉更適合他們的口味，因?yàn)樵谌绱诵〉膱D片上區(qū)分清楚不同的茶葉和其他成分太困難了。 縮略圖所占用的屏幕空間能被更好的利用，比如展示茶葉的口味或者咖啡因水平——這些內(nèi)容比起茶葉的縮略圖更能幫助用戶考慮要不要點(diǎn)擊進(jìn)入詳細(xì)內(nèi)容查看。

相反的，如果單獨(dú)的文本會讓用戶選擇一個合適的列表項(xiàng)有困難，這時縮略圖就應(yīng)該被包括。這在電商網(wǎng)站中很常見，用戶會被圖片強(qiáng)烈的吸引要不要查看詳情，倆個列表項(xiàng)的不同比如衣服會被圖片很好地解釋清楚，甚至很小的圖片。當(dāng)然了，如果列表項(xiàng)目的視覺很重要（比如視頻和照片），那么圖片應(yīng)該被清楚地展示在瀏覽的頁面上，可以幫助用戶導(dǎo)航。

放置在左邊還是右邊？

如果你已經(jīng)決定了要在列表項(xiàng)目中包含圖片縮略圖，你需要考慮的下一個問題就是縮略圖放在文字的左邊還是右邊？為了想清楚這個問題，你需要仔細(xì)考慮圖片和文字內(nèi)容的權(quán)重優(yōu)先級。對于用戶瀏覽列表項(xiàng)視覺是最重要的一部分信息？還是圖片僅僅是一個輔助工具？

在列表中選擇一個項(xiàng)目如果圖片是基本的重要的，把它放到左邊（語言從左往右讀是這樣的，如果是從右至左的語言閱讀順序則相反），可以幫助用戶快速的通過縮略圖來過濾內(nèi)容，不必須看文字。否則，如果圖片相對于文字來說權(quán)重較輕，就把他放到文字描述的右邊。

這種圖片相對于文字的優(yōu)先級也應(yīng)該用來決定縮略圖應(yīng)該設(shè)置多大。圖片越不重要，他就應(yīng)該越小。然而，要記住的是，如果圖片太小，那它就不能被識別，沒有用了。另一方面，如果縮略圖太大，他就會不合適的分散用戶閱讀文字內(nèi)容的注意力，或者對于文字可讀性造成問題（比如，字號需要變小到一個難辨認(rèn)的程度或者描述內(nèi)容會被截?cái)?，這對用戶體驗(yàn)都會造成問題）。另外還需要記住大的圖片需要更長的加載時間，對加載速度也有影響。

當(dāng)選擇一個旅館的時候， 用戶對居住環(huán)境感興趣，因此旅館縮略圖是有用的，盡管相比于文字內(nèi)容不那么重要，比如價格和評分。上面的左圖， 縮略圖足夠大來識別圖片中的信息，但是旅館的名字被截?cái)嗔?。右圖，文本內(nèi)容有更多的展示區(qū)域，但是縮略圖太小了乃至于不可用。

另一個幫助你考慮把縮略圖放置在哪的因素是你的列表的每個列表項(xiàng)是否都有圖片展示。如果你的列表項(xiàng)并不總是都有圖片，就把縮略圖放到右邊來支持文字瀏覽。這將會保證所有列表項(xiàng)文字是左對齊的，用戶的視線移動順序是連貫的。

（譯者注：比如簡書現(xiàn)在就是這樣，但之前簡書的早期版本仍把圖片放到列表項(xiàng)目的左邊，導(dǎo)致閱讀會很不舒服，體驗(yàn)很不好，后來在某個版本之后將縮略圖放到了右邊）

結(jié)論：

為了決定圖片的重要性程度，進(jìn)行格外的研究比如調(diào)查和采訪來獲得你的用戶的觀點(diǎn)。一旦你的圖片的重要性程度搞清楚了，接下來理想的縮略圖放置就很容易決定了。

像往常一樣，確保用上紙質(zhì)原型來測試新的設(shè)計(jì)布局，來確定你走在正確的路上，而不必浪費(fèi)太多的時間和金錢。

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

#專欄作家#

法海，微信公眾號：uxd_design。人人都是產(chǎn)品經(jīng)理專欄作家。熱愛交互設(shè)計(jì)，熱愛用戶體驗(yàn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。