在移動(dòng)端的列表設(shè)計(jì)中，可能很多人都遇到這樣的問(wèn)題，是加圖片縮略圖好呢，還是不加好呢?那如果加的話，是放在文字的左邊好呢，還是右邊好啊?這不是一個(gè)能簡(jiǎn)單回答的問(wèn)題，對(duì)于圖片縮略圖，要根據(jù)不同的情況找到不同的解決方式。
圖片是否有用？
你可別因?yàn)榱斜眄?xiàng)有圖可配，覺(jué)得理所應(yīng)當(dāng)要展示出圖片。
首先想一想圖片是否對(duì)指引用戶選擇列表中的條目有幫助。更好的檢驗(yàn)方法是問(wèn)問(wèn)自己如果只通過(guò)圖片你是否能夠找到自己想要的東西。
舉個(gè)例子：下圖Teavana移動(dòng)端網(wǎng)頁(yè)的設(shè)計(jì)中，列表中的縮略圖似乎并不能幫助用戶選擇茶葉，因?yàn)樵谌绱诵〉囊粡垐D中，用戶根本無(wú)法看清茶葉的細(xì)節(jié)以及其他材料的情況。被圖片占用的這部分空間，如果用作展示一些獨(dú)特的信息會(huì)更好，例如描述一下該品種茶葉的口味或者含量——這樣的內(nèi)容是能夠幫助到用戶去做出選擇的，然后現(xiàn)在卻被深埋在了下一層的詳情頁(yè)中。
Teavana移動(dòng)端網(wǎng)頁(yè)茶葉縮略圖并沒(méi)有什么用：用戶無(wú)法通過(guò)這種級(jí)別的視覺(jué)信息去選擇他們想要的茶葉，因?yàn)樵谶@樣的視圖下，它們本質(zhì)上沒(méi)有任何區(qū)別。
相反，如果僅憑借文字，用戶很難做出合適的選擇(至少在不來(lái)回跳轉(zhuǎn)頁(yè)面的情況下)，那么設(shè)計(jì)中應(yīng)該考慮使用縮略圖。這種情況多發(fā)生在商品或是服務(wù)購(gòu)買(mǎi)中，用戶往往都被喜好情緒主導(dǎo)。如果列表的內(nèi)容本身是可視化的(比如視頻或是照片)，那么縮略圖用于幫助用戶瀏覽頁(yè)面和導(dǎo)航是再合適不過(guò)了，確保使用足夠大的縮略圖，或是保證相關(guān)必要文字展示的基礎(chǔ)上使用宮格排版。
位置呢？左還是右
一旦決定要在列表中使用圖片縮略圖，那么問(wèn)題來(lái)了，放在哪呢?縮略圖應(yīng)該放在說(shuō)明文字的左邊還是右邊，應(yīng)當(dāng)取決于圖片與文字信息的權(quán)重比較。究竟圖片是用戶瀏覽列表的重要信息?還是只是輔助的信息?
如果圖片使用戶瀏覽列表的首要因素，那么將它放在左邊(適用于從左至右閱讀習(xí)慣的語(yǔ)言，如果是從右至左閱讀習(xí)慣的語(yǔ)言，反過(guò)來(lái))，這樣能幫助用戶在瀏覽列表是快速的過(guò)濾查找。反之亦然，如果圖片相對(duì)于文字次要一些，那么將圖片放在文字的右邊。
圖片相對(duì)于文字的優(yōu)先程度同樣也應(yīng)當(dāng)用于決定縮略圖設(shè)計(jì)的尺寸。圖片越不重要，尺寸應(yīng)當(dāng)越小。然而，需要注意的是，如果縮略圖過(guò)小的話，識(shí)別性會(huì)大大降低，甚至失去在列表中存在的作用(在減小圖片尺寸的處理中，可以同時(shí)使用剪切和縮放，這樣可以緩解由于過(guò)度縮放造成的識(shí)別性問(wèn)題)。從另一方面來(lái)說(shuō)，過(guò)大的縮略圖一定程度上也會(huì)不合時(shí)宜的吸引用戶過(guò)多的注意力，或是引入相關(guān)說(shuō)明文字的設(shè)計(jì)問(wèn)題(例如，為了顯示出完整的說(shuō)明文字，字體大小有可能會(huì)受到影響變得難以辨認(rèn)，或者保證閱讀效果的前提下，說(shuō)明文字可能無(wú)法全部顯示出來(lái)——這些都是對(duì)體驗(yàn)的傷害)。還有，大圖片需要更多的加載時(shí)間——這也是不容忽視的問(wèn)題。
用戶在選擇酒店時(shí)，對(duì)酒店的實(shí)際環(huán)境十分在意，所以縮略圖是很重要的，哪怕它相對(duì)于其他一些信息例如價(jià)格或是酒店星級(jí)要次要一些。左圖：Hotel Tonight中的縮略圖的尺寸足以讓用戶識(shí)別細(xì)節(jié)，但是酒店的名字卻被截?cái)嗔?。右圖：Hotels.com的設(shè)計(jì)中，給予文字區(qū)域更多的空間，然后縮略圖卻小到幾乎沒(méi)有任何作用。
另一個(gè)能幫你決定將縮略圖放在哪兒的因素是，對(duì)于列表中的所有項(xiàng)目，是否都有合適的圖片。如果沒(méi)有的話，可以把縮略圖放在右邊，用于輔助文字信息。這樣能確保文字都是左對(duì)齊的，而用戶的視線流可以沿著左側(cè)往下，幫助用戶更快的找到感興趣的內(nèi)容。
左圖：LA Times’ 下面的三張縮略圖都太小以至于無(wú)法辨認(rèn)圖片中的細(xì)節(jié)，也無(wú)法吸引用戶，可是受到設(shè)計(jì)模式的影響，每一條新聞都必須在左側(cè)配一張圖片。右圖：New York Times則使用了右對(duì)齊的縮略圖設(shè)計(jì)，沒(méi)有合適縮略圖的時(shí)候還可以不顯示。當(dāng)可視化在新聞的傳播中占據(jù)主導(dǎo)因素時(shí)，還可以使用全尺寸的圖片。
如何決定相關(guān)圖片的重要程度，可以引入一些例如問(wèn)卷或訪談這樣的調(diào)查用戶態(tài)度型的研究，洞察用戶的傾向。一旦圖片的優(yōu)先級(jí)確定了以后，縮略圖的設(shè)計(jì)方案很容易決定了。
推薦閱讀
400-685-0732(7x24小時(shí))
關(guān)注文軍
