本文主要講述作者對(duì)待商品列表頁(yè)的看法，以及結(jié)合實(shí)際的案例來(lái)分析，商品列表頁(yè)的框架如何選擇，如何設(shè)計(jì)？

相信大家在進(jìn)行電商類產(chǎn)品設(shè)計(jì)的時(shí)候，肯定會(huì)有關(guān)于商品列表的相關(guān)頁(yè)面，那么本文主要講述我對(duì)待商品列表頁(yè)的看法，商品列表頁(yè)的框架如何選擇，如何設(shè)計(jì)。

很多產(chǎn)品經(jīng)理在進(jìn)行自己公司的產(chǎn)品設(shè)計(jì)時(shí)，很容易陷入“瞎姬霸抄”的情況，首先我并不反對(duì)“抄”，但是要知道為什么抄，怎么樣抄才是對(duì)的。

很多產(chǎn)品經(jīng)理在進(jìn)行產(chǎn)品方案構(gòu)思的時(shí)候，往往緊盯大廠，或者盯著自己一直使用的某款產(chǎn)品，照搬過(guò)來(lái)，但是并沒(méi)有仔細(xì)思考別人為什么要這么做，我們這么做是否適合？

首先統(tǒng)一一下名詞解釋，本文所闡述的列表，為固定列表項(xiàng)的樣式后，根據(jù)分頁(yè)數(shù)據(jù)顯示的多少，按照固定樣式依次展示的頁(yè)面。【主要是區(qū)分列表頁(yè)和活動(dòng)頁(yè)】，定制結(jié)構(gòu)的活動(dòng)頁(yè)不在此討論范圍。

一、商品列表頁(yè)的幾種常用元素

我們先看一下幾種電商類App是如何選擇其頁(yè)面元素的：

二、關(guān)于頂部區(qū)域的分析

頂部區(qū)域的設(shè)計(jì)有一個(gè)很大的關(guān)系是：看用戶的前置行為是什么？

如果用戶是點(diǎn)擊某一個(gè)分類進(jìn)入，或者是進(jìn)行了搜索，那么用戶是有指定性的期望的，那么這個(gè)時(shí)候就要思考，用戶此時(shí)想要什么呢？

毫無(wú)疑問(wèn)，對(duì)于有指向性質(zhì)的，那么就是篩選、排序、搜索等一系列能夠為用戶縮小范圍的產(chǎn)品功能。

淘寶搜索“女裝”時(shí)的列表頁(yè)

京東搜索“女裝”時(shí)的列表頁(yè)

如果用戶在進(jìn)入一個(gè)列表頁(yè)面時(shí)是沒(méi)有指向性需求的，此時(shí)列表頁(yè)面要做的不是去滿足用戶需求，而是幫助用戶發(fā)現(xiàn)需求?？梢酝ㄟ^(guò)切換TAB，提供新的承接版塊等方式來(lái)解決。

云集首頁(yè)向上滑動(dòng)后，中部TAB吸頂，到底后上滑，自動(dòng)切換下一TAB

三、關(guān)于底部區(qū)域的分析

列表底部區(qū)域的設(shè)計(jì)比較簡(jiǎn)單，目前就幾種方式：

1. 無(wú)限列表，始終沒(méi)有底；
2. 有限列表，到底后上滑切換TAB；
3. 有限列表，上滑后到底，提供提示；
4. 有限列表，上滑到底后，尾部使用其他模塊拼接。

如何選擇和使用還是要看用戶需求和業(yè)務(wù)現(xiàn)狀，幾種情況：

1. 用戶有一定指向性商品需求，但是平臺(tái)的商品不多

這種情況，無(wú)限列表直接PASS掉，本來(lái)商品就不多，不可能使用無(wú)限列表。

一般情況下，如果是采用底部提示的情況，那么會(huì)給用戶造成一種平臺(tái)商品不足的情況（這種情況需要評(píng)估以目前的平臺(tái)定位用戶是否會(huì)由此對(duì)平臺(tái)產(chǎn)生負(fù)面評(píng)價(jià)），一般來(lái)說(shuō)，采用底部拼接其他模塊的方式，友好的告訴用戶：“你要找的商品沒(méi)有了，但是我給你推薦了一些別的，你再看看”的感覺(jué)，避免尷尬。

小米商城搜索手機(jī)，商品列表快結(jié)束后拼接了文章模塊和其他產(chǎn)品推薦模塊避免尷尬

2. 用戶有一定指向性商品需求，但是平臺(tái)的商品很多

這種情況，可以考慮采用無(wú)限列表(可以理解為很長(zhǎng)的有限列表)，當(dāng)然需要評(píng)估用戶平均滑動(dòng)多少屏才能到達(dá)列表底部，那么底部可以提供一個(gè)簡(jiǎn)短的提示。

3. 用戶有無(wú)指向性商品需求，但是平臺(tái)的商品很多

這種情況一般使用無(wú)限列表，此時(shí)用戶處于一種“逛”的心態(tài)，我們往往會(huì)分析用戶喜好給用戶推薦可能需要的產(chǎn)品，從而試圖讓用戶產(chǎn)生購(gòu)買。

4. 用戶有無(wú)指向性商品需求，但是平臺(tái)的商品不多

前提是平臺(tái)商品不多，但是用戶很多時(shí)候進(jìn)入商城是并沒(méi)有明確的購(gòu)買東西，是帶有“逛”的因素來(lái)看商品，那么這個(gè)時(shí)候怎么樣解決這個(gè)問(wèn)題呢？

一般情況下會(huì)在產(chǎn)品的首頁(yè)和活動(dòng)遇到這個(gè)問(wèn)題，在平臺(tái)產(chǎn)品不多的情況下，往往采用分類TAB的形式，用戶產(chǎn)生滑動(dòng)行為的時(shí)候，進(jìn)行TAB定位給用戶一定的告知。

如果在該TAB所綁定的商品沒(méi)有對(duì)用戶產(chǎn)生吸引，在滑動(dòng)的時(shí)候自動(dòng)切換到下一個(gè)TAB，試圖通過(guò)其他的TAB中的產(chǎn)品讓用戶產(chǎn)生購(gòu)買，同時(shí)TAB也能給用戶傳遞一定的認(rèn)知。

云集首頁(yè)向上滑動(dòng)后，中部TAB吸頂，到底后上滑，自動(dòng)切換下一TAB

4. 關(guān)于中間區(qū)域的分析

中間區(qū)域在我看來(lái)是最關(guān)鍵的區(qū)域，也是最能看出東西來(lái)的區(qū)域，首先如何進(jìn)行中間區(qū)域的產(chǎn)品設(shè)計(jì)呢？在我看來(lái)有幾個(gè)核心原則：

• 布局突出用戶需求，根據(jù)不同產(chǎn)品展示不同需求
• 根據(jù)列表頁(yè)的商品數(shù)量進(jìn)行列表頁(yè)的布局設(shè)計(jì)
• 避免用戶的視覺(jué)疲勞

（1）布局突出用戶需求，根據(jù)不同產(chǎn)品展示不同需求

商品列表頁(yè)中間區(qū)域的布局主要有兩種：一種是左右區(qū)塊，一種是單行區(qū)塊。

那么什么情況下使用左右區(qū)塊，什么情況下使用單行區(qū)塊這個(gè)問(wèn)題不知道大家有沒(méi)有想過(guò)。

首先如果一個(gè)用戶去買衣服，那么更加注重的是圖片；如果一個(gè)用戶去買電腦，那么圖片其實(shí)對(duì)于給用戶的選擇參考就少了很多，更多的是依靠產(chǎn)品的參數(shù)特點(diǎn)。

那么從布局的角度考慮，如果采用左右區(qū)塊，屏幕的大部分面積將會(huì)被圖片占據(jù)，用戶的視覺(jué)聚焦將會(huì)很明顯的聚焦在圖片上。如果采用單行區(qū)塊，左圖右文或者右圖左文的形式，那么用戶將會(huì)把視覺(jué)聚焦在某一個(gè)固定區(qū)域，不用來(lái)回轉(zhuǎn)移眼神就能清楚的看到產(chǎn)品的參數(shù)特點(diǎn)。

典型例子1：淘寶的女裝列表頁(yè)和淘寶的電腦列表頁(yè)

當(dāng)然了，淘寶也提供了用戶切換布局的功能，但是默認(rèn)進(jìn)來(lái)的布局就已經(jīng)能夠說(shuō)明大部分用戶的使用習(xí)慣了。

但是其實(shí)對(duì)于某一個(gè)具體商品列表頁(yè)，這樣的分析遠(yuǎn)遠(yuǎn)不夠，我們還要繼續(xù)深挖用戶的用戶進(jìn)行布局。打一個(gè)比方：假設(shè)一個(gè)用戶買電腦，對(duì)于大部分用戶來(lái)說(shuō)主要會(huì)考慮哪些因素？

大家看看那些手機(jī)廠商的發(fā)布會(huì)就知道用戶關(guān)心什么了：屏幕大小邊框、拍照、電池、價(jià)格。很多時(shí)候是這個(gè)在這些問(wèn)題上做文章。

那么我們接下來(lái)看下，如何在列表頁(yè)突出用戶關(guān)心的信息的。

典型例子2：淘寶搜手機(jī)的列表頁(yè)和天貓搜手機(jī)的列表頁(yè)

那么在這一步，天貓搜索手機(jī)的列表顯得更加突出產(chǎn)品特點(diǎn)，突出了大部分用戶關(guān)心的產(chǎn)品特性。更加符合用戶的體驗(yàn)。

（2）根據(jù)列表頁(yè)的商品數(shù)量進(jìn)行列表頁(yè)的布局設(shè)計(jì)

從用戶角度，我們可以根據(jù)產(chǎn)品對(duì)用戶的認(rèn)知，進(jìn)行左右布局或者單行布局，但是很多時(shí)候我們也要考慮平臺(tái)的產(chǎn)品構(gòu)成。假設(shè)對(duì)一個(gè)新興的電商平臺(tái)而言，本身的商品數(shù)量不是很多的情況下，我們也要考慮不同的列表布局給用戶的感受。

一個(gè)很明顯的點(diǎn)就是數(shù)量的多少，假設(shè)一個(gè)平臺(tái)的平均一個(gè)列表的商品只有20個(gè)不到（這個(gè)跟平臺(tái)的商品定位有比較大的關(guān)系），如果采用單行布局，用戶可能需要滑動(dòng)5屏，可一定程度上降低對(duì)平臺(tái)產(chǎn)品不足的心理認(rèn)知。

如果采用左右布局，用戶將會(huì)很快的滑動(dòng)至底部，此時(shí)用戶對(duì)平臺(tái)的信任感很難提升，所以此時(shí)通常需要文字提示或者交互的方式來(lái)提示用戶。

典型例子：網(wǎng)易嚴(yán)選由于嚴(yán)選的定位，某一個(gè)類目的產(chǎn)品的確是較少的，但是在滑動(dòng)至最底部的時(shí)候給了用戶文字提示-橫向滑動(dòng)切換分類。

在這里面 其實(shí)遇到這種情況，有兩種方式：一種是提示用戶橫向切換，一種是直接向上滑動(dòng)切換分類，我個(gè)人建議是提示用戶橫向切換更為合適。

打個(gè)比方：小A去商場(chǎng)買衣服，走著走了衣服快看完了都沒(méi)有中意的，這個(gè)時(shí)候如果小A再往前走就是褲子了，如果不告知一直讓小A往前走，小A會(huì)明顯的感到奇怪，我不是看的衣服嗎？怎么到褲子了？

如果是在衣服的盡頭給一個(gè)標(biāo)簽，上面寫(xiě)著【前方是褲子】小A就不會(huì)感覺(jué)到跳躍感，而是有準(zhǔn)備的去瀏覽褲子，如果有了這個(gè)心理預(yù)期，也不準(zhǔn)備買褲子，那么可能會(huì)再回去看看衣服。

（3）避免用戶的視覺(jué)疲勞

這一點(diǎn)很好理解啦，在長(zhǎng)列表的情況下，假設(shè)頁(yè)面布局單一，很容易產(chǎn)生視覺(jué)疲勞，很多情況下，為了滑動(dòng)而滑動(dòng)。很多情況下容易遺漏很多不錯(cuò)的商品，這種情況就要依靠布局來(lái)解決視覺(jué)疲勞的問(wèn)題。

一個(gè)例子就足夠證明了，請(qǐng)看：

典型例子：淘寶的女裝列表頁(yè)和京東的女裝列表頁(yè)

四、案例分析

那么我已經(jīng)把我的觀點(diǎn)的想法表達(dá)完畢，接下來(lái)，我們通過(guò)幾個(gè)案例來(lái)分析其商品布局是否合理。

1號(hào)店

1號(hào)店可以看出商品的分頁(yè)頁(yè)數(shù)，可以看出商品絕對(duì)充足，但是不管是手機(jī)電腦，還是服飾鞋帽，都默認(rèn)使用了單行的列表布局。從之前的分析看出，明顯是不適合的，對(duì)于服飾鞋帽這些商品而言，沒(méi)有突出圖片，文字占據(jù)了大部分區(qū)域。對(duì)于手機(jī)電腦，其產(chǎn)品本身的特點(diǎn)也沒(méi)有突出。

給用戶提供的視圖切換功能看似人性化，實(shí)則想的不夠周全并且太過(guò)明顯，為何不多做一步，給出最合適的視圖，弱化切換功能。

甘草醫(yī)生

甘草醫(yī)生商城的商品數(shù)量較少，從照片看出可能也是走精品路線，但是每個(gè)類目10個(gè)左右，總共商品相加40種不到，這里面存在三大問(wèn)題：

• 第一點(diǎn)：使用一個(gè)列表將不同分類的商品列表拼接，進(jìn)入列表時(shí)不會(huì)感覺(jué)馬上到底，但是總體商品數(shù)不足，整體列表也會(huì)迅速到底，如果采用單行布局可以拉長(zhǎng)整個(gè)列表長(zhǎng)度，可能更為合適。
• 第二點(diǎn)：從販賣的商品種類看，商品的圖片不是用戶購(gòu)買的核心動(dòng)力，核心動(dòng)力還是在于產(chǎn)品的功效，但是左右布局無(wú)法將功效很好的透出，所以采用單行列表+功效標(biāo)簽的形式可能會(huì)更加容易讓用戶找到滿意的產(chǎn)品。
• 第三點(diǎn)：定位無(wú)效，當(dāng)列表已經(jīng)切換到其他分類時(shí)，頂部的分類還沒(méi)有切換。

拼多多

拼多多關(guān)于手機(jī)搜索的商品列表的這種產(chǎn)品設(shè)計(jì)方式，把滿足用戶需求的大部分工作交給了設(shè)計(jì)師。

謝謝大家看到這里，個(gè)人拙見(jiàn)，多提意見(jiàn)~

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

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