起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識列表中的縮略圖：何時使用&何處放置
簡述：
對列表而言是否使用以及在哪使用縮略圖是基于圖片與相關文本的重要性來定的，與所有的列表項目是否都顯示圖片，或小圖片是否可被識別彼此不同。
在我們的培訓課程上（英文作者），一個來自我們的客戶與參會者的常見問題是：移動端的項目列表是否需要使用縮略圖，如果是的話，應該將縮略圖放置在正文的左邊還是右邊，正如預期的那樣，根本就沒有一個放之四海而皆準的答案，但有一些原則可以幫助我們在各種變化的情況下采取正確的做法。
圖片是有用的嗎（對用戶而言）？
不要僅僅因為你有一些甚至列表中的項目所需的全部圖片，你就要必須展示它們。首先考慮圖片是否會有效的幫助到用戶決策選擇列表中的哪個項目，更棒的是：自問是否可以僅依靠圖片就決定去向哪里。如果僅使用圖片不足以確定的話（可能因為圖片太小無法區分相關細節或只顯示了普通的占位符圖片），那么放棄它。
例如，Teavana 移動網站上縮略圖片（下圖）貌似不可能幫助到用戶哪種茶葉更適合他們的口味，用戶很難通過如此小尺寸的圖片來明確茶葉的分類和成分，而被圖片占用的屏幕空間倒可以被文本信息更好的利用，如品茶筆記、咖啡因標準——內容可以幫助用戶做出更明智的選擇，但目前這些信息被淹沒在詳情頁面中。
相反的，如果僅通過文本信息會造成用戶不太容易選擇到合適的項目（至少，without pogo sticking）則縮略圖應以某種方式被顯示出來。對于零售與餐飲業這是最常見的情況，用戶在審美角度的強烈驅動下，也就是說，圖片是用來解釋兩件衣服之間區別的最好方式——即使只有一丟丟。當然，如果列表內容主要是視覺的（視頻、照片等等），那么圖片應該在頁面上絕對被優先考慮以便利于導航，采用大的縮略圖或基于網格視圖的布局取決于有多少相關的文本也需要要被顯示。
位置：左邊還是右邊
如果決定要顯示縮略圖，接下來的問題就是在哪里放置。權衡列表中的圖片與文本信息的重要性，當用戶瀏覽時它是視覺的重要組成部分，還只是輔助的，以確定將圖安放在相關文本信息的左邊或右邊。
如果圖片是選擇列表中項目的本質因素，就放在左邊，以幫助用戶通過縮略圖就能快速過濾而無需閱讀文本信息，否則，如果縮略圖相對于文本只是次要信息，就將其放置在文本信息的右側。
關于縮略圖的優先級同時可以決定縮略圖的大小，重要性愈低圖可以愈小。然而，請記住如果縮略圖過小，它將起不到可被識別和有用的作用（可以同時使用裁剪或縮放來降低圖片尺寸大小，而不是僅僅用縮小圖片來解決這個問題）。另一方面，過大的縮略圖會以不太恰當的方式分散用戶對相關文本的注意力（比如,字體大小變的無法識別或縮短項目描述信息——總之這兩種都會損害到用戶體驗），同樣的，越大的圖片越需要更長時間的加載———且相當令人惱火的、緩慢的加載。
另一個可以幫助你選擇在哪里放置縮略圖的因素是你是否擁有適合所有列表項目的圖片。如果不能保證每個列表項目都有縮略圖的話，就將縮略圖放置在右邊，以利于瀏覽時更好的支持文本信息。這可以保證文本左對齊，也保持用戶的注意力在頁面的左邊并找到感興趣的項目。
結論
確定圖片的相對重要性并進行調研，比如調查或訪談，深入了解用戶的喜好，一旦圖片的優先級確定，理想的縮略圖位置就很容易決定。
與往常一樣，一定要善用紙質原型來測試預期的新布局，在投入大量的時間和金錢之前以確保你處于正確的道路上。
原文鏈接：https://www.nngroup.com/articles/mobile-list-thumbnail/
#專欄作家#
大偉，微信電影 產品經理，人人都是產品經理專欄作家，從用戶需求（在一大堆很酷的設想中砍掉當中的絕大一部分）到產品定義（有價值且符合公司戰略發展），從產品原型到視覺設計，從交互到動效，毫無疑問，這些都是非常振奮人心和充滿能量的，希望你可以在我們的會話中找到有用的東東。
本文系作者授權發布，未經許可，不得轉載。
- 目前還沒評論，等你發揮！
