本文分別針對大圖展示、多圖展示、圖文列表進行舉例分析，希望能夠讓大家在做APP時能夠快速確定商品列表的樣式。

這篇文章在我所寫文章里面，耗時最長，不是因為它很復(fù)雜，而是要寫清楚它的可操作性確實是一件不易的事情，這里要感謝為我指出文章問題的@劉清@W.T.Y；同時要感謝在我茫然不知如何下筆時為我提供幫助的小伙伴@角馬@小溜Epik@橙子的橙子。

以下是正文部分，大家有疑問可隨時留言。

618我去逛了淘寶，本來是想去看看衣服，于是輸入了“半裙”，然后選擇了他推薦的關(guān)鍵詞“半裙女下2018新款”，就出現(xiàn)了篩選列表，我習(xí)慣的分別看了各個分段控件（全部、天貓、店鋪、淘攻略、挑尖貨），發(fā)現(xiàn)其展示效果還不一樣。

例如：全部一欄和天貓一欄都采用雙圖展示；而挑尖貨則采用大圖展示。因此，猜測不同品類的商品展示效果也應(yīng)該不相同。

于是我又分別輸入了《最好的UI設(shè)計師》一書，發(fā)現(xiàn)其展示效果和衣服的展示效果果然不同，其全部一欄展示效果采用的列表式設(shè)計，天貓和挑尖貨和衣服類的樣式保持一致。

懷著研究的精神我再次輸入了“蘋果”，出來的是蘋果手機其可以歸類到數(shù)碼類，這次全部和天貓的展示效果均采用了圖文列表的形式。

看完了之后就進入今天的主題，大家一起來想一下，為什么同樣是淘寶的產(chǎn)品其展示效果不同呢？

當(dāng)然你會說我們的產(chǎn)品相對單一，不用考慮得像淘寶那樣復(fù)雜，但是你知道商品展示列表有大圖展示、多圖展示、圖文列表，你在做的時候又該選擇哪種展現(xiàn)方式呢？

下面我們分別針對大圖展示、多圖展示、圖文列表，希望通過分析大家在做APP時能夠快速確定商品列表的樣式。

一、大圖展示

大圖展示是指一行只展示一張圖片，由于其圖片占比較大，因此往往一屏只能展示1到2張，適合以圖片為主單一內(nèi)容瀏覽型的展示。大圖也可以分為通欄和非通欄。

通欄展示可以展示更多的信息；非通欄也就是我們說的卡片，其視覺表現(xiàn)力更強，同時它可以將一個模塊內(nèi)的信息集合起來，比較適合活潑年輕類的App。

優(yōu)勢：

1. 呈現(xiàn)細(xì)節(jié)更豐富

圖片小，往往看不清細(xì)節(jié)，需要點進商品詳情進行瀏覽，因此，圖片大細(xì)節(jié)展現(xiàn)更豐富，即使不點進詳情頁能夠清晰的查看商品。

以2列圖片的嚴(yán)選和采用大圖展示的挑尖貨為例，同樣采用界面較為簡潔的摳圖形式，但是采用大圖的挑尖貨明顯圖片更大，我們看到的商品細(xì)節(jié)也就更多，給人的視覺感受也更強烈，從而提高轉(zhuǎn)化率。

2. 有利于信息的有效傳達

圖片小或者一屏采用多列的形式時，一些不搶眼的圖片就容易被忽略，容易錯過有用的信息。

采用大圖的展示方式就可以避免這個問題。這是由于大圖展示視線是從上向下的，不容易被忽略，從而有利于信息的有效傳達。

左側(cè)是嚴(yán)選3列圖展示，右側(cè)是懶人周末大圖展示，我們可以看出采用小圖展示的嚴(yán)選列表人們的瀏覽視線從左到右，然后從上向下呈現(xiàn)一個Z字形。

在用戶快速瀏覽時很容易被忽略掉。右側(cè)懶人周末采用大圖展示，其瀏覽視線直接是從上向下，同時圖片大，展示細(xì)節(jié)多，傳遞的信息就越多，往往看到圖片大概就能決定是否感興趣。

3. 商品數(shù)量少時，可豐富界面效果

如果你的商品圖片較少比如只有二三十個，那么采用多圖或者列表展示翻幾頁就沒有了。

采用大圖展示可以讓商品列表看上去更飽滿。

例如：懶人周末的今日推薦和嚴(yán)選的識物，在展示數(shù)量上都比較有限，采用大圖展示會讓整個界面更加豐富。

值得注意的是，采用大圖設(shè)計往往對圖片的要求較高，如果你的商品質(zhì)量差，或者商品圖片為第三方提供，從而圖片質(zhì)量無法保證時，建議不要采用大圖展示。

左側(cè)我將愛彼迎原有的圖片換成一般旅館的圖片，你發(fā)現(xiàn)瞬間品質(zhì)感降低，往往這種價格便宜的旅館的用戶人群更喜歡去對比價格和各種參數(shù)，因此采用大圖設(shè)計并不是很適合。

缺點：

1. 頁面空間的消耗大，一屏可展示信息少

移動屏幕寸土寸金，采用大圖比例一屏只能展示1-2個內(nèi)容模塊，一屏信息太少，比較商品很不方便。因此如果你的商品列表式想要讓快速閱讀和購買那么最好不要采用大圖展示。

2. 不適合信息查找

大圖展示更加注重不同內(nèi)容模塊之間的排版，很少考慮它們之間的先后次序或重要程度。

另一方面，由于圖片過大，信息查找就較慢，在重點突出某項內(nèi)容或方便用戶查找方面比較遜色。相對而言，多圖展示和圖文列表式可以更好的迎合用戶這一瀏覽特點，可對內(nèi)容作重點突出。

二、多圖展示

多圖展示是指一行并排展示二張或三張圖片，其中雙圖展示使用較為常見，你打開視頻、電商類的App大多都是這樣的展示方式。

三圖展示在列表中相對較少，往往是在首頁中以某個推薦形式展現(xiàn)，其主要是盡可能多的展示商品。

下面以一屏2張圖的商品展示為例來具體分析：

優(yōu)勢：

1. 利于圖片類商品的對比選擇

圖片往往更能吸引用戶，因此多圖展示對于以轉(zhuǎn)化率為目的商品，更具有優(yōu)勢。賣貨的商品你采用大圖列表顯然不太適合，它會浪費很多時間用于瀏覽，然后采用多圖的展示方式，在一定時間下，可瀏覽更多的商品。

比如：愛彼迎和嚴(yán)選我們可以通過圖片確定商品是否有興趣，然后通過關(guān)鍵文字信息，可以快速滑動選擇自己喜歡的商品。

2. 頁面空間的消耗小，一屏可展示信息多

時間就是金錢，你需要盡量短的時間讓用戶對比更多的商品。

多圖列表其展示商品數(shù)往往是大圖展示的2倍。

比如：嚴(yán)選的大圖展示和下廚房的多圖展示，左圖是2個商品，而右圖是4個商品，明顯多圖展示展示數(shù)量更多。

3. 適用于圖片對比為主的商品

在淘寶里輸入衣服、鞋、書出來的展示效果均為多圖展示，其主要原因是衣服、鞋都是需要通過圖片對比進行樣式對比從而購買。

缺點：

1. 圖片呈現(xiàn)細(xì)節(jié)不如大圖豐富

圖片越小呈現(xiàn)的細(xì)節(jié)越不豐富，因此當(dāng)商品采用多圖展示，當(dāng)你發(fā)現(xiàn)感興趣的商品時，需要點擊詳情才能看到商品細(xì)節(jié)。

2. 圖片信息傳遞較弱

當(dāng)商品一屏展示2列或者3列時，圖片越小，被忽略的可能性就越高，因此你會看到在商品列表往往很少出現(xiàn)3列的商品樣式。

三、圖文列表

圖文列表可以是左圖右文，也可以是左文右圖，但在商品展示中往往使用左圖右文的方式。在電商團購類的產(chǎn)品中較為常見。

優(yōu)勢：

1. 有利于文字信息的瀏覽

圖文列表以從上向下貫通的形式展現(xiàn)，圖片往往較小，視覺流程往往是從上向下，更利于信息快速的掃視，利于商品之間的快速對比，往往適合于以文字為主的商品列表。

左圖淘寶我搜索“蘋果”其展示效果和搜索衣服完全不同，其采用列表的形式，其主要目的就是進行介紹信息的對比。右圖淘票票同樣的電影圖片只是起到視覺引導(dǎo)作用，我們真正進行對比讓我們下單的還是這些介紹信息。我們可以通過快速掃描這些信息來決定是否有自己想要的產(chǎn)品。

2. 可展示更多促銷信息

采用圖文列表往往商品圖片不太重要，因此圖片尺寸往往較小，而右側(cè)的文字信息，比如：介紹信息、促銷信息是用戶購買的只要指標(biāo)。

圖文列表的一大優(yōu)勢就是，添加或者減少促銷信息和標(biāo)簽時，對界面影響較小。

缺點：

1. 視覺樣式單一

圖文列表在界面樣式上較為單一，不如大圖展示、多圖展示的視覺效果好。因此不太適用于以圖片為主，或者用戶需要對比圖片的商品中。

2. 信息過多，容易導(dǎo)致視覺疲勞

圖文列表往往圖片較小，文字較多因此長期瀏覽容易造成視覺疲勞，因此可考慮一個列表采用多種形式進行展示。

例如：淘寶搜索“蘋果”手機，淘寶會推薦一個最適合的展示樣式，然后如果你想換成多圖展示也是可以的，點擊篩選欄上的多圖展示按鈕即可。

四、總結(jié)

通過上面的分析，大致可以總結(jié)為：大圖展示、多圖展示、圖文列表的區(qū)別分別在于圖片質(zhì)量要求高低；商品對比快慢；圖片信息傳達高低。

因此，商品列表展示主要根據(jù)產(chǎn)品屬性決定，同時根據(jù)我們實際要求來進行列表選擇：

1. 大圖展示：圖片質(zhì)量要求高；但是商品對比速度慢；圖片信息傳達高。往往適合文藝類商品或推薦商品展示。
2. 多圖展示：圖片質(zhì)量要求較高；商品對比速度較高；圖片信息傳達較高。因此目前大多數(shù)商品列表均采用多圖的形式：
3. 圖文列表：圖片質(zhì)量要求低；商品對比速度高；圖片信息傳達低。適合文字信息對比為主的商品。

參考：

《通用設(shè)計法則》留白恐懼128頁

《方寸指間》細(xì)節(jié)設(shè)計-圖片布局 69頁

《我用這個極限推敲法，有效推進視覺設(shè)計》https://www.uisdc.com/limit-push-method-to-promote-visual-design

作者：風(fēng)箏KK，公眾號：海鹽社

本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議