案例分析：商品列表頁應(yīng)如何布局？
相信大家在進行電商類產(chǎn)品設(shè)計的時候，肯定會有關(guān)于商品列表的相關(guān)頁面，那么本文主要講述我對待商品列表頁的看法，商品列表頁的框架如何選擇，如何設(shè)計。
很多產(chǎn)品經(jīng)理在進行自己公司的產(chǎn)品設(shè)計時，很容易陷入“瞎姬霸抄”的情況，首先我并不反對“抄”，但是要知道為什么抄，怎么樣抄才是對的。
很多產(chǎn)品經(jīng)理在進行產(chǎn)品方案構(gòu)思的時候，往往緊盯大廠，或者盯著自己一直使用的某款產(chǎn)品，照搬過來，但是并沒有仔細(xì)思考別人為什么要這么做，我們這么做是否適合？
首先統(tǒng)一一下名詞解釋，本文所闡述的列表，為固定列表項的樣式后，根據(jù)分頁數(shù)據(jù)顯示的多少，按照固定樣式依次展示的頁面?！局饕菂^(qū)分列表頁和活動頁】，定制結(jié)構(gòu)的活動頁不在此討論范圍。
一、商品列表頁的幾種常用元素
我們先看一下幾種電商類App是如何選擇其頁面元素的：
二、關(guān)于頂部區(qū)域的分析
頂部區(qū)域的設(shè)計有一個很大的關(guān)系是：看用戶的前置行為是什么？
如果用戶是點擊某一個分類進入，或者是進行了搜索，那么用戶是有指定性的期望的，那么這個時候就要思考，用戶此時想要什么呢？
毫無疑問，對于有指向性質(zhì)的，那么就是篩選、排序、搜索等一系列能夠為用戶縮小范圍的產(chǎn)品功能。
淘寶搜索“女裝”時的列表頁
京東搜索“女裝”時的列表頁
如果用戶在進入一個列表頁面時是沒有指向性需求的，此時列表頁面要做的不是去滿足用戶需求，而是幫助用戶發(fā)現(xiàn)需求?？梢酝ㄟ^切換TAB，提供新的承接版塊等方式來解決。
三、關(guān)于底部區(qū)域的分析
列表底部區(qū)域的設(shè)計比較簡單，目前就幾種方式：
無限列表，始終沒有底；
有限列表，到底后上滑切換TAB；
有限列表，上滑后到底，提供提示；
有限列表，上滑到底后，尾部使用其他模塊拼接。
如何選擇和使用還是要看用戶需求和業(yè)務(wù)現(xiàn)狀，幾種情況：
1. 用戶有一定指向性商品需求，但是平臺的商品不多
這種情況，無限列表直接PASS掉，本來商品就不多，不可能使用無限列表。
一般情況下，如果是采用底部提示的情況，那么會給用戶造成一種平臺商品不足的情況（這種情況需要評估以目前的平臺定位用戶是否會由此對平臺產(chǎn)生負(fù)面評價），一般來說，采用底部拼接其他模塊的方式，友好的告訴用戶：“你要找的商品沒有了，但是我給你推薦了一些別的，你再看看”的感覺，避免尷尬。
小米商城搜索手機，商品列表快結(jié)束后拼接了文章模塊和其他產(chǎn)品推薦模塊避免尷尬
2. 用戶有一定指向性商品需求，但是平臺的商品很多
這種情況，可以考慮采用無限列表(可以理解為很長的有限列表)，當(dāng)然需要評估用戶平均滑動多少屏才能到達(dá)列表底部，那么底部可以提供一個簡短的提示。
3. 用戶有無指向性商品需求，但是平臺的商品很多
這種情況一般使用無限列表，此時用戶處于一種“逛”的心態(tài)，我們往往會分析用戶喜好給用戶推薦可能需要的產(chǎn)品，從而試圖讓用戶產(chǎn)生購買。
4. 用戶有無指向性商品需求，但是平臺的商品不多
前提是平臺商品不多，但是用戶很多時候進入商城是并沒有明確的購買東西，是帶有“逛”的因素來看商品，那么這個時候怎么樣解決這個問題呢？
一般情況下會在產(chǎn)品的首頁和活動遇到這個問題，在平臺產(chǎn)品不多的情況下，往往采用分類TAB的形式，用戶產(chǎn)生滑動行為的時候，進行TAB定位給用戶一定的告知。
如果在該TAB所綁定的商品沒有對用戶產(chǎn)生吸引，在滑動的時候自動切換到下一個TAB，試圖通過其他的TAB中的產(chǎn)品讓用戶產(chǎn)生購買，同時TAB也能給用戶傳遞一定的認(rèn)知。
5. 關(guān)于中間區(qū)域的分析
中間區(qū)域在我看來是最關(guān)鍵的區(qū)域，也是最能看出東西來的區(qū)域，首先如何進行中間區(qū)域的產(chǎn)品設(shè)計呢？在我看來有幾個核心原則：
布局突出用戶需求，根據(jù)不同產(chǎn)品展示不同需求
根據(jù)列表頁的商品數(shù)量進行列表頁的布局設(shè)計
避免用戶的視覺疲勞
（1）布局突出用戶需求，根據(jù)不同產(chǎn)品展示不同需求
商品列表頁中間區(qū)域的布局主要有兩種：一種是左右區(qū)塊，一種是單行區(qū)塊。
那么什么情況下使用左右區(qū)塊，什么情況下使用單行區(qū)塊這個問題不知道大家有沒有想過。
首先如果一個用戶去買衣服，那么更加注重的是圖片；如果一個用戶去買電腦，那么圖片其實對于給用戶的選擇參考就少了很多，更多的是依靠產(chǎn)品的參數(shù)特點。
那么從布局的角度考慮，如果采用左右區(qū)塊，屏幕的大部分面積將會被圖片占據(jù)，用戶的視覺聚焦將會很明顯的聚焦在圖片上。如果采用單行區(qū)塊，左圖右文或者右圖左文的形式，那么用戶將會把視覺聚焦在某一個固定區(qū)域，不用來回轉(zhuǎn)移眼神就能清楚的看到產(chǎn)品的參數(shù)特點。
典型例子1：淘寶的女裝列表頁和淘寶的電腦列表頁
當(dāng)然了，淘寶也提供了用戶切換布局的功能，但是默認(rèn)進來的布局就已經(jīng)能夠說明大部分用戶的使用習(xí)慣了。
但是其實對于某一個具體商品列表頁，這樣的分析遠(yuǎn)遠(yuǎn)不夠，我們還要繼續(xù)深挖用戶的用戶進行布局。打一個比方：假設(shè)一個用戶買電腦，對于大部分用戶來說主要會考慮哪些因素？
大家看看那些手機廠商的發(fā)布會就知道用戶關(guān)心什么了：屏幕大小邊框、拍照、電池、價格。很多時候是這個在這些問題上做文章。
那么我們接下來看下，如何在列表頁突出用戶關(guān)心的信息的。
典型例子2：淘寶搜手機的列表頁和天貓搜手機的列表頁
那么在這一步，天貓搜索手機的列表顯得更加突出產(chǎn)品特點，突出了大部分用戶關(guān)心的產(chǎn)品特性。更加符合用戶的體驗。
（2）根據(jù)列表頁的商品數(shù)量進行列表頁的布局設(shè)計
從用戶角度，我們可以根據(jù)產(chǎn)品對用戶的認(rèn)知，進行左右布局或者單行布局，但是很多時候我們也要考慮平臺的產(chǎn)品構(gòu)成。假設(shè)對一個新興的電商平臺而言，本身的商品數(shù)量不是很多的情況下，我們也要考慮不同的列表布局給用戶的感受。
一個很明顯的點就是數(shù)量的多少，假設(shè)一個平臺的平均一個列表的商品只有 20 個不到（這個跟平臺的商品定位有比較大的關(guān)系），如果采用單行布局，用戶可能需要滑動 5 屏，可一定程度上降低對平臺產(chǎn)品不足的心理認(rèn)知。
如果采用左右布局，用戶將會很快的滑動至底部，此時用戶對平臺的信任感很難提升，所以此時通常需要文字提示或者交互的方式來提示用戶。
典型例子：網(wǎng)易嚴(yán)選由于嚴(yán)選的定位，某一個類目的產(chǎn)品的確是較少的，但是在滑動至最底部的時候給了用戶文字提示-橫向滑動切換分類。
在這里面 其實遇到這種情況，有兩種方式：一種是提示用戶橫向切換，一種是直接向上滑動切換分類，我個人建議是提示用戶橫向切換更為合適。
打個比方：小A去商場買衣服，走著走了衣服快看完了都沒有中意的，這個時候如果小A再往前走就是褲子了，如果不告知一直讓小A往前走，小A會明顯的感到奇怪，我不是看的衣服嗎？怎么到褲子了？
如果是在衣服的盡頭給一個標(biāo)簽，上面寫著【前方是褲子】小A就不會感覺到跳躍感，而是有準(zhǔn)備的去瀏覽褲子，如果有了這個心理預(yù)期，也不準(zhǔn)備買褲子，那么可能會再回去看看衣服。
（3）避免用戶的視覺疲勞
這一點很好理解啦，在長列表的情況下，假設(shè)頁面布局單一，很容易產(chǎn)生視覺疲勞，很多情況下，為了滑動而滑動。很多情況下容易遺漏很多不錯的商品，這種情況就要依靠布局來解決視覺疲勞的問題。
一個例子就足夠證明了，請看：
典型例子：淘寶的女裝列表頁和京東的女裝列表頁
四、案例分析
那么我已經(jīng)把我的觀點的想法表達(dá)完畢，接下來，我們通過幾個案例來分析其商品布局是否合理。
1 號店
1 號店可以看出商品的分頁頁數(shù)，可以看出商品絕對充足，但是不管是手機電腦，還是服飾鞋帽，都默認(rèn)使用了單行的列表布局。從之前的分析看出，明顯是不適合的，對于服飾鞋帽這些商品而言，沒有突出圖片，文字占據(jù)了大部分區(qū)域。對于手機電腦，其產(chǎn)品本身的特點也沒有突出。
給用戶提供的視圖切換功能看似人性化，實則想的不夠周全并且太過明顯，為何不多做一步，給出最合適的視圖，弱化切換功能。
甘草醫(yī)生
甘草醫(yī)生商城的商品數(shù)量較少，從照片看出可能也是走精品路線，但是每個類目 10 個左右，總共商品相加 40 種不到，這里面存在三大問題：
第一點：使用一個列表將不同分類的商品列表拼接，進入列表時不會感覺馬上到底，但是總體商品數(shù)不足，整體列表也會迅速到底，如果采用單行布局可以拉長整個列表長度，可能更為合適。
第二點：從販賣的商品種類看，商品的圖片不是用戶購買的核心動力，核心動力還是在于產(chǎn)品的功效，但是左右布局無法將功效很好的透出，所以采用單行列表+功效標(biāo)簽的形式可能會更加容易讓用戶找到滿意的產(chǎn)品。
第三點：定位無效，當(dāng)列表已經(jīng)切換到其他分類時，頂部的分類還沒有切換。
拼多多
拼多多關(guān)于手機搜索的商品列表的這種產(chǎn)品設(shè)計方式，把滿足用戶需求的大部分工作交給了設(shè)計師。
