譯文 | 移動設備上的列表中如何使用圖片縮略圖

0 評論 11020 瀏覽 29 收藏 7 分鐘

在決定是否要在列表項目中展示圖片縮略圖以及在哪放置縮略圖時,要考慮縮略圖與與縮略圖相關聯的文本倆者重要性大小;也要考慮是否每個列表項目都有縮略圖展示;還要考慮那些小的縮略圖是否能相互之間區分清楚。

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

圖片對用戶有幫助嗎?

不要這樣想,僅僅因為你的列表中一些甚至所有列表項有可依賴的圖片,你就必須要展示這些圖片。

首先要考慮的是這些圖片是不是能幫助用戶決定他們從列表選擇哪個列表項。更進一步,問問你自己是不是用戶僅僅就從這些圖片上就能決定選擇哪個列表項。如果單獨的圖片不是很有效(因為圖片太小難以區分細節或者因為圖片太一般),就去除圖片吧。

比如,在手機網站上Teavana的列表項目包含的茶葉縮略圖(下圖)不可能幫助用戶思考哪種茶葉更適合他們的口味,因為在如此小的圖片上區分清楚不同的茶葉和其他成分太困難了。 縮略圖所占用的屏幕空間能被更好的利用,比如展示茶葉的口味或者咖啡因水平——這些內容比起茶葉的縮略圖更能幫助用戶考慮要不要點擊進入詳細內容查看。

1

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

放置在左邊還是右邊?

如果你已經決定了要在列表項目中包含圖片縮略圖,你需要考慮的下一個問題就是縮略圖放在文字的左邊還是右邊?為了想清楚這個問題,你需要仔細考慮圖片和文字內容的權重優先級。對于用戶瀏覽列表項視覺是最重要的一部分信息?還是圖片僅僅是一個輔助工具?

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

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

2

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

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

3

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

結論:

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

4

像往常一樣,確保用上紙質原型來測試新的設計布局,來確定你走在正確的路上,而不必浪費太多的時間和金錢。

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

#專欄作家#

法海,微信公眾號:uxd_design。人人都是產品經理專欄作家。熱愛交互設計,熱愛用戶體驗。

本文原創發布于人人都是產品經理,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!