預(yù)計(jì)閱讀時(shí)長(zhǎng)：5m 44s（1773 字；8 圖）
配圖制作工具：Figma、OmniGraffle
是否添加縮略圖？
- 若列表本身的內(nèi)容就是視覺(jué)化的，例如視頻、圖集等等，那使用縮略圖來(lái)作為導(dǎo)航就很合適。這種情況下，可使用尺寸足夠大的縮略圖，并將其放在重要的瀏覽位置上?；蛘撸鶕?jù)相關(guān)文字信息的長(zhǎng)度，合理使用宮格排版。
若圖片有助于指引用戶選擇列表中的條目，則展示縮略圖。
反之，如果圖片過(guò)小導(dǎo)致識(shí)別性很差，或，都是非常普通的通用圖片，根本不起任何作用，則不需要展示出來(lái)。將騰出來(lái)的空間用于展示其他必要的、有用的信息更好。高質(zhì)量的圖片能讓界面更豐富、美觀，更具視覺(jué)吸引力，同時(shí)也可避免瀏覽純文本長(zhǎng)列表帶來(lái)的視覺(jué)疲勞和壓力。因此，大部分列表都是圖文結(jié)合。
若圖片對(duì)用戶沒(méi)有幫助，且從視覺(jué)設(shè)計(jì)的角度而言，無(wú)需使用圖片作為排版的輔助元素，則不展示縮略圖。
縮略圖放在左邊還是右邊？
人們的閱讀習(xí)慣一般為從左至右，以下的設(shè)計(jì)規(guī)則都基于這一點(diǎn)。
-
若列表中，不是所有條目都有合適、可用的縮略圖，則將縮略圖放在右邊，用于輔助文字信息。
這樣，不管是顯示縮略圖的條目、沒(méi)有合適縮略圖的條目，還是使用全尺寸圖片的條目，文字都統(tǒng)一為左對(duì)齊，用戶的視線流可以沿著左側(cè)向下，提高瀏覽、獲取信息的效率。例如：聚合類新聞客戶端，通過(guò)抓取互聯(lián)網(wǎng)內(nèi)容為用戶推薦新聞信息。圖片的質(zhì)量和數(shù)量均不可控，可能出現(xiàn)封面圖質(zhì)量很差或者沒(méi)有封面圖的情況，因此將縮略圖放在右邊。
例如：UGC 內(nèi)容列表，不一定有圖片，且圖片質(zhì)量不可控，因此將縮略圖放在右邊。
- 根據(jù)縮略圖與文字信息的權(quán)重比較，確定縮略圖的位置。
-
商品或服務(wù)購(gòu)買類列表（例如購(gòu)物、訂外賣、訂酒店等）：圖片比文字更重要，放在左邊，有助于用戶快速篩選查找。
1）用戶往往無(wú)法僅憑文字信息做出合適的選擇。
2）圖片一般更能直觀地展示出產(chǎn)品的相關(guān)信息和不同產(chǎn)品之間的差異，是用戶瀏覽列表的首要因素。
3）一般對(duì)圖片質(zhì)量要求較高。例如，在馬蜂窩上訂酒店時(shí)，我們首先關(guān)注的是酒店的環(huán)境，酒店的圖片非常重要，比這個(gè)酒店叫什么還重要，所以放在左邊。
例如，在京東上買餅干，我們僅看圖片就可以判斷這個(gè)餅干是不是我想要的，然后再關(guān)注價(jià)格和其他次要文字信息，所以將商品縮略圖放在左邊。
例如，在淘寶上買保溫杯，我們首先看這個(gè)保溫杯長(zhǎng)啥樣，視線沿著左側(cè)圖片一直向下，瀏覽更順暢，可更快找到喜歡的保溫杯。
-
娛樂(lè)生活類資訊列表（時(shí)尚娛樂(lè)、生活搞笑等）：圖片比文字更重要，放在左邊，吸引用戶注意力。
1）往往使用吸引人眼球的圖片，第一時(shí)間抓住用戶的注意力，激發(fā)用戶的好奇心、點(diǎn)擊欲。
2）圖片也可傳達(dá)出資訊相關(guān)的信息，幫助用戶理解內(nèi)容，用戶不需要仔細(xì)、完整地閱讀標(biāo)題。
-
新聞資訊類列表（時(shí)事、科技、汽車、財(cái)經(jīng)、軍事等）：文字標(biāo)題最重要，圖片僅為次要信息?？s略圖放在右邊，可保證用戶在瀏覽信息時(shí)，不受到圖像的干擾，獲取信息的效率不受影響。
1）用戶更關(guān)注新聞標(biāo)題。
2）圖片質(zhì)量一般不高，往往無(wú)法清晰傳達(dá)內(nèi)容，是相對(duì)次要的輔助信息（尤其是時(shí)事新聞?lì)悾?/li>
- 以上為一般情況的設(shè)計(jì)原則。針對(duì)特定的產(chǎn)品，可通過(guò)問(wèn)卷或訪談等方法調(diào)查、研究用戶的態(tài)度和傾向，確定圖文優(yōu)先級(jí)。
- 與產(chǎn)品性質(zhì)、定位等因素有關(guān)
- 現(xiàn)在大部分的資訊列表，都是左文右圖。
- 有些應(yīng)用的列表和以上提到的設(shè)計(jì)規(guī)則有所不同。例如，搜狐新聞、IT 之家的資訊列表就是采用的左圖右文。
有些應(yīng)用的列表在產(chǎn)品迭代的過(guò)程中出現(xiàn)過(guò)不一樣的排版設(shè)計(jì)。例如，網(wǎng)易新聞客戶端之前是左圖右文，后來(lái)又改為了左文右圖。
以上這些情況可能是與產(chǎn)品的性質(zhì)、定位等因素有關(guān)，或者，有其他具體的原因吧。畢竟，沒(méi)有放之四海而皆準(zhǔn)的絕對(duì)方案，具體情況具體考慮～
縮略圖的尺寸多大合適？
圖片相較于文字信息的重要程度決定了縮略圖的尺寸?？s略圖越不重要，尺寸應(yīng)當(dāng)越小。
縮略圖不宜過(guò)大。
1）過(guò)大的圖片會(huì)吸引用戶過(guò)多的注意力，分散用戶對(duì)其他內(nèi)容的關(guān)注；
2）圖片過(guò)大可能導(dǎo)致文字信息因顯示空間不足而被截?cái)?，從而影響可讀性；
3）圖片過(guò)大可能導(dǎo)致加載時(shí)間過(guò)長(zhǎng)。縮略圖不宜過(guò)小。
1）若尺寸過(guò)小，識(shí)別性會(huì)大大降低，甚至失去其在列表中的作用；
2）在減小圖片尺寸時(shí)，可結(jié)合裁剪和縮放進(jìn)行處理，以緩解過(guò)度縮小造成的識(shí)別性問(wèn)題。
- 以上內(nèi)容包含個(gè)人理解，僅作為個(gè)人學(xué)習(xí)筆記使用。如有錯(cuò)誤，歡迎指正啊，非常感謝～
- 以下為參考文章鏈接，非常感謝這些作者～
APP列表頁(yè)配圖，放左邊好呢，還是右邊好？（作者：三圈兒哥；來(lái)源：站酷）
左圖右文與左文右圖（作者：Ricky_W；來(lái)源：UI 中國(guó)）
List Thumbnails on Mobile: When to Use Them and Where to Place Them（作者：Aurora Harley；來(lái)源：NN/g）
APP設(shè)計(jì)｜移動(dòng)端縮略圖設(shè)計(jì)攻略（翻譯：Terry；來(lái)源：人人都是產(chǎn)品經(jīng)理）
移動(dòng)端界面列表設(shè)計(jì)里的縮略圖：何時(shí)使用？放在哪里？（翻譯：小球娘；來(lái)源：知乎）
