很多設計師在進行產品方案構思的時候，往往緊盯大廠，或者盯著自己一直使用的某款產品，照搬過來，但是並沒有仔細思考別人為什麼要這麼做，我們這麼做是否適合？
首先統一一下名詞解釋，本文所闡述的列表，為固定列表項的樣式後，根據分頁數據顯示的多少，按照固定樣式依次展示的頁面。【主要是區分列表頁和活動頁】，定製結構的活動頁不在此討論範圍。
1
商品列表頁的幾種常用元素
我們先看一下幾種電商類App是如何選擇其頁面元素的：
2
關於頂部區域的分析
頂部區域的設計有一個很大的關係是：看用戶的前置行為是什麼？
如果用戶是點擊某一個分類進入，或者是進行了搜索，那麼用戶是有指定性的期望的，那麼這個時候就要思考，用戶此時想要什麼呢？
毫無疑問，對於有指向性質的，那麼就是篩選、排序、搜索等一系列能夠為用戶縮小範圍的產品功能。
△淘寶搜索“女裝”時的列表頁
△京東搜索“女裝”時的列表頁
如果用戶在進入一個列表頁面時是沒有指向性需求的，此時列表頁面要做的不是去滿足用戶需求，而是幫助用戶發現需求。可以通過切換TAB，提供新的承接版塊等方式來解決。
△雲集首頁向上滑動後，中部TAB吸頂，到底後上滑，自動切換下一TAB
3
關於底部區域的分析
列表底部區域的設計比較簡單，目前就幾種方式：
- 無限列表，始終沒有底；
- 有限列表，到底後上滑切換TAB；
- 有限列表，上滑後到底，提供提示；
- 有限列表，上滑到底後，尾部使用其他模塊拼接。
如何選擇和使用還是要看用戶需求和業務現狀，幾種情況：
1. 用戶有一定指向性商品需求，但是平臺的商品不多
這種情況，無限列表直接PASS掉，本來商品就不多，不可能使用無限列表。
△小米商城搜索手機，商品列表快結束後拼接了文章模塊和其他產品推薦模塊避免尷尬
2. 用戶有一定指向性商品需求，但是平臺的商品很多
這種情況，可以考慮採用無限列表(可以理解為很長的有限列表)，當然需要評估用戶平均滑動多少屏才能到達列表底部，那麼底部可以提供一個簡短的提示。
3. 用戶有無指向性商品需求，但是平臺的商品很多
這種情況一般使用無限列表，此時用戶處於一種“逛”的心態，我們往往會分析用戶喜好給用戶推薦可能需要的產品，從而試圖讓用戶產生購買。
4. 用戶有無指向性商品需求，但是平臺的商品不多
前提是平臺商品不多，但是用戶很多時候進入商城是並沒有明確的購買東西，是帶有“逛”的因素來看商品，那麼這個時候怎麼樣解決這個問題呢？
一般情況下會在產品的首頁和活動遇到這個問題，在平臺產品不多的情況下，往往採用分類TAB的形式，用戶產生滑動行為的時候，進行TAB定位給用戶一定的告知。
如果在該TAB所綁定的商品沒有對用戶產生吸引，在滑動的時候自動切換到下一個TAB，試圖通過其他的TAB中的產品讓用戶產生購買，同時TAB也能給用戶傳遞一定的認知。
△雲集首頁向上滑動後，中部TAB吸頂，到底後上滑，自動切換下一TAB
4. 關於中間區域的分析
中間區域在我看來是最關鍵的區域，也是最能看出東西來的區域，首先如何進行中間區域的產品設計呢？在我看來有幾個核心原則：
- 佈局突出用戶需求，根據不同產品展示不同需求
- 根據列表頁的商品數量進行列表頁的佈局設計
- 避免用戶的視覺疲勞
（1）佈局突出用戶需求，根據不同產品展示不同需求
商品列表頁中間區域的佈局主要有兩種：一種是左右區塊，一種是單行區塊。
那麼什麼情況下使用左右區塊，什麼情況下使用單行區塊這個問題不知道大家有沒有想過。
首先如果一個用戶去買衣服，那麼更加註重的是圖片；如果一個用戶去買電腦，那麼圖片其實對於給用戶的選擇參考就少了很多，更多的是依靠產品的參數特點。
那麼從佈局的角度考慮，如果採用左右區塊，屏幕的大部分面積將會被圖片佔據，用戶的視覺聚焦將會很明顯的聚焦在圖片上。如果採用單行區塊，左圖右文或者右圖左文的形式，那麼用戶將會把視覺聚焦在某一個固定區域，不用來回轉移眼神就能清楚的看到產品的參數特點。
△典型例子1：淘寶的女裝列表頁和淘寶的電腦列表頁
當然了，淘寶也提供了用戶切換佈局的功能，但是默認進來的佈局就已經能夠說明大部分用戶的使用習慣了。
但是其實對於某一個具體商品列表頁，這樣的分析遠遠不夠，我們還要繼續深挖用戶的用戶進行佈局。打一個比方：假設一個用戶買電腦，對於大部分用戶來說主要會考慮哪些因素？
大家看看那些手機廠商的發佈會就知道用戶關心什麼了：屏幕大小邊框、拍照、電池、價格。很多時候是這個在這些問題上做文章。
那麼我們接下來看下，如何在列表頁突出用戶關心的信息的。
△典型例子2：淘寶搜手機的列表頁和天貓搜手機的列表頁
那麼在這一步，天貓搜索手機的列表顯得更加突出產品特點，突出了大部分用戶關心的產品特性。更加符合用戶的體驗。
（2）根據列表頁的商品數量進行列表頁的佈局設計
從用戶角度，我們可以根據產品對用戶的認知，進行左右佈局或者單行佈局，但是很多時候我們也要考慮平臺的產品構成。假設對一個新興的電商平臺而言，本身的商品數量不是很多的情況下，我們也要考慮不同的列表佈局給用戶的感受。
一個很明顯的點就是數量的多少，假設一個平臺的平均一個列表的商品只有20個不到（這個跟平臺的商品定位有比較大的關係），如果採用單行佈局，用戶可能需要滑動5屏，可一定程度上降低對平臺產品不足的心理認知。
如果採用左右佈局，用戶將會很快的滑動至底部，此時用戶對平臺的信任感很難提升，所以此時通常需要文字提示或者交互的方式來提示用戶。
△典型例子：網易嚴選由於嚴選的定位，某一個類目的產品的確是較少的，但是在滑動至最底部的時候給了用戶文字提示-橫向滑動切換分類。
在這裡面 其實遇到這種情況，有兩種方式：一種是提示用戶橫向切換，一種是直接向上滑動切換分類，我個人建議是提示用戶橫向切換更為合適。
（3）避免用戶的視覺疲勞
這一點很好理解啦，在長列表的情況下，假設頁面佈局單一，很容易產生視覺疲勞，很多情況下，為了滑動而滑動。很多情況下容易遺漏很多不錯的商品，這種情況就要依靠佈局來解決視覺疲勞的問題。
一個例子就足夠證明了，請看：
△典型例子：淘寶的女裝列表頁和京東的女裝列表頁
4
案例分析
那麼我已經把我的觀點的想法表達完畢，接下來，我們通過幾個案例來分析其商品佈局是否合理。
1號店
1號店可以看出商品的分頁頁數，可以看出商品絕對充足，但是不管是手機電腦，還是服飾鞋帽，都默認使用了單行的列表佈局。從之前的分析看出，明顯是不適合的，對於服飾鞋帽這些商品而言，沒有突出圖片，文字佔據了大部分區域。對於手機電腦，其產品本身的特點也沒有突出。
給用戶提供的視圖切換功能看似人性化，實則想的不夠周全並且太過明顯，為何不多做一步，給出最合適的視圖，弱化切換功能。
甘草醫生
甘草醫生商城的商品數量較少，從照片看出可能也是走精品路線，但是每個類目10個左右，總共商品相加40種不到，這裡面存在三大問題：
- 第一點：使用一個列表將不同分類的商品列表拼接，進入列表時不會感覺馬上到底，但是總體商品數不足，整體列表也會迅速到底，如果採用單行佈局可以拉長整個列表長度，可能更為合適。
- 第二點：從販賣的商品種類看，商品的圖片不是用戶購買的核心動力，核心動力還是在於產品的功效，但是左右佈局無法將功效很好的透出，所以採用單行列表+功效標籤的形式可能會更加容易讓用戶找到滿意的產品。
- 第三點：定位無效，當列表已經切換到其他分類時，頂部的分類還沒有切換。
拼多多
拼多多關於手機搜索的商品列表的這種產品設計方式，把滿足用戶需求的大部分工作交給了設計師。
謝謝大家看到這裡，個人拙見，多提意見~
閱讀更多 鑄優教育zuui 的文章
