購物app中商品展示列表有大圖展示、多圖展示、圖文列表等方式，您在做交互設(shè)計(jì)的是如何選擇呢？我們今天來看下公眾號(hào)海鹽社的作者風(fēng)箏KK是如何思考的。

一、前言

618我去逛了淘寶，本來是想去看看衣服，于是輸入了“半裙”然后選擇了他推薦的關(guān)鍵詞“半裙女下2018新款”，就出現(xiàn)了篩選列表，我習(xí)慣的分別看了各個(gè)分段控件（全部、天貓、店鋪、淘攻略、挑尖貨），發(fā)現(xiàn)其展示效果還不一樣。例如全部一欄和天貓一欄都采用雙圖展示；而挑尖貨則采用大圖展示。因此猜測(cè)不同品類的商品展示效果也應(yīng)該不相同。

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

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

看完了之后就進(jìn)入今天的主題，大家一起來想一下，為什么同樣是淘寶的產(chǎn)品其展示效果不同呢？當(dāng)然你會(huì)說我們的產(chǎn)品相對(duì)單一，不用考慮得像淘寶那樣復(fù)雜，但是你知道商品展示列表有大圖展示、多圖展示、圖文列表，你在做的時(shí)候又該選擇哪種展現(xiàn)方式呢？ 下面我們分別針對(duì)大圖展示、多圖展示、圖文列表，希望通過分析大家在做APP時(shí)能夠快速確定商品列表的樣式。

二，大圖展示

大圖展示是指一行只展示一張圖片，由于其圖片占比較大，因此往往一屏只能展示1到2張，適合以圖片為主單一內(nèi)容瀏覽型的展示。大圖也可以分為通欄和非通欄，通欄展示可以展示更多的信息；非通欄也就是我們說的卡片，其視覺表現(xiàn)力更強(qiáng)，同時(shí)它可以將一個(gè)模塊內(nèi)的信息集合起來，比較適合活潑年輕類的App。

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

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

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

2、有利于信息的有效傳達(dá)

圖片小或者一屏采用多列的形式時(shí)，一些不搶眼的圖片就容易被忽略，容易錯(cuò)過有用的信息。采用大圖的展示方式就可以避免這個(gè)問題。這是由于大圖展示視線是從上向下的，不容易被忽略，從而有利于信息的有效傳達(dá)。

左側(cè)是嚴(yán)選3列圖展示，右側(cè)是懶人周末大圖展示，我們可以看出采用小圖展示的嚴(yán)選列表人們的瀏覽視線從左到右，然后從上向下呈現(xiàn)一個(gè)Z字形。在用戶快速瀏覽時(shí)很容易被忽略掉。

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

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

如果你的商品圖片較少比如只有二三十個(gè)，那么采用多圖或者列表展示翻幾頁就沒有了。采用大圖展示可以讓商品列表看上去更飽滿。

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

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

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

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

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

2、不適合信息查找

大圖展示更加注重不同內(nèi)容模塊之間的排版，很少考慮它們之間的先后次序或重要程度。另一方面，由于圖片過大，信息查找就較慢，在重點(diǎn)突出某項(xiàng)內(nèi)容或方便用戶查找方面比較遜色。相對(duì)而言，多圖展示和圖文列表式可以更好的迎合用戶這一瀏覽特點(diǎn)，可對(duì)內(nèi)容作重點(diǎn)突出。

三，多圖展示

多圖展示是指一行并排展示二張或三張圖片，其中雙圖展示使用較為常見，你打開視頻、電商類的App大多都是這樣的展示方式。三圖展示在列表中相對(duì)較少，往往是在首頁中以某個(gè)推薦形式展現(xiàn)，其主要是盡可能多的展示商品。下面以一屏2張圖的商品展示為例來具體分析。

1、利于圖片類商品的對(duì)比選擇

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

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

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

時(shí)間就是金錢，你需要盡量短的時(shí)間讓用戶對(duì)比更多的商品。多圖列表其展示商品數(shù)往往是大圖展示的2倍。

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

3、適用于圖片對(duì)比為主的商品

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

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

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

2、圖片信息傳遞較弱

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

四，圖文列表

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

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

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

左圖淘寶我搜索“蘋果”其展示效果和搜索衣服完全不同，其采用列表的形式，其主要目的就是進(jìn)行介紹信息的對(duì)比。

右圖淘票票同樣的電影圖片只是起到視覺引導(dǎo)作用，我們真正進(jìn)行對(duì)比讓我們下單的還是這些介紹信息。我們可以通過快速掃描這些信息來決定是否有自己想要的產(chǎn)品。

2、可展示更多促銷信息

采用圖文列表往往商品圖片不太重要，因此圖片尺寸往往較小，而右側(cè)的文字信息，比如介紹信息、促銷信息是用戶購買的只要指標(biāo)。圖文列表的一大優(yōu)勢(shì)就是，添加或者減少促銷信息和標(biāo)簽時(shí)，對(duì)界面影響較小。

1、視覺樣式單一

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

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

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

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

五、總結(jié)

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

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

1、大圖展示：圖片質(zhì)量要求高；但是商品對(duì)比速度慢；圖片信息傳達(dá)高。往往適合文藝類商品或推薦商品展示。

2、多圖展示：圖片質(zhì)量要求較高；商品對(duì)比速度較高；圖片信息傳達(dá)較高。因此目前大多數(shù)商品列表均采用多圖的形式。

3、圖文列表：圖片質(zhì)量要求低；商品對(duì)比速度高；圖片信息傳達(dá)低。適合文字信息對(duì)比為主的商品。

本問轉(zhuǎn)載自公眾號(hào)：海鹽社。原創(chuàng)作者：?風(fēng)箏KK