對于商城內(nèi)的產(chǎn)品，【商品列表頁】是很關(guān)鍵的一環(huán)。好的布局可以讓用戶快速尋找到目標商品，文字or圖片更優(yōu)先？選擇合適的布局，可以大大增加用戶進入到【商品詳情頁】的概率。

本文主要選擇如今市面上的商城類產(chǎn)品，淺析各種布局的優(yōu)劣勢，最后再附上用中繼器實現(xiàn)淘寶wap端商品列表頁的切換教程。文末附下載鏈接。文中部分思路來自《App中列表、卡片和雙欄卡片的布局思考》，但本文更多描述商城類商品。

先睹為看看看原型效果吧：（可以對比淘寶WAP，記得F12）

一、列表形式

列表形式常見于各類新聞客戶端，下圖為今日頭條，天天快報，搜狐新聞的主頁，均是采用列表形式。稍有不同就是三圖和單圖，圖片放左側(cè)或右側(cè)的區(qū)別，整體來看還是整齊列表形式。

列表形式的布局形式在商城中應用也很廣泛：

淘寶app商品列表頁

列表形式其實可以再細分為【列表+卡片】或是【列表+極簡】，一張圖解釋：

可以看出上面列表形式的布局差異，左側(cè)是【列表+極簡風格】，每個單元的商品橫向貫通，個人感覺這種設計更符合現(xiàn)代的設計，而且在商城內(nèi)商品數(shù)量較多時此種布局是不二選擇。

右側(cè)是【列表+圖片】相對于左側(cè)的布局略有收縮，當客戶瀏覽商品列表的時候會有間斷感，更適合于商城內(nèi)商品較少的情況。

小結(jié)：列表形式的布局可以在相同空間內(nèi)展現(xiàn)最多的商品（圖+文），特別是商城內(nèi)商品較多時，可以參考【新聞資訊類】app的布局，列表形式主要是文字為主，圖片為輔助。在這種列表形式的布局下，文字占有的地位更高。缺點是略顯擁擠，特別是在文字（商品名稱）過長的情況下。

二、雙欄小圖

雙欄小圖在商城內(nèi)的應用也很廣泛，，但是雙欄小圖也可以再細分為【小圖+卡片】【小圖+瀑布】【小圖+極簡】，三張圖說明吧：

1）雙欄小圖+卡片

上圖為京東商城和蘇寧易購的商品列表頁

2）雙欄小圖+瀑布流

上圖為天貓商城+小紅書

3）雙欄+極簡

小結(jié)：雙欄卡片和列表形式是目前商城采用最多的布局方式，許多商城可以在列表頁由用戶自主選擇，切換排列方式。雙欄+卡片布局較為工整，圖片大小一致，在系統(tǒng)默認圖片大小時雙欄卡片是最優(yōu)選擇；雙欄+瀑布流，主要是由圖片大小決定的，在需要用戶上傳圖片，允許存在尺寸差異的情況下是最優(yōu)選擇；雙欄+極簡用得不多，更適合價格敏感的用戶，通過價格吸引用戶點擊。

在雙欄布局時，圖片和文字的地位基本持平，相對于列表形式，圖片占有了更重的比例。

三、大圖（單圖）形式

大圖形式更多是在圖片社交類的app，不過也有許多商城采用了此種布局，大圖可分為【大圖+卡片】和【大圖+極簡】

1）大圖+卡片

大圖+卡片，特點就是圖——大

2）大圖+極簡

小結(jié)：大圖樣式的布局，意圖很明顯，圖片的重要性已經(jīng)完全蓋過了文字，為了過度展示商品的圖片，通過商品圖片吸引用戶，文字起到一點補充的作用，大部分這樣布局的其實只需要商品圖片和價格就足夠了。在確保用戶對商品有足夠的熟悉的前提下，此種布局為優(yōu)。在很多圖片社交中也不乏此種布局。

四、中繼器實現(xiàn)一個切換效果

因為正好想做一些商品布局的總結(jié)，所以順便用中繼器來模擬了一下淘寶wap端的切換排列功能。

1）閱讀此文需要有一定中繼器知識

相關(guān)閱讀——用過那么多原型軟件，為什么我還是最愛Axure

我們現(xiàn)在已經(jīng)有了一個列表形式的中繼器：

然后我們將此中繼器再復制兩份：

影分身之術(shù)

2）分別修改另外兩個中繼器內(nèi)部的排列樣式

因為我們的目標是列表（list）、雙欄卡片（card）、大圖（img），所以我們依次來修改

分別修改為圖示樣式，為了方便看，所以我把內(nèi)部拿出來，放在一起比較了。

注意：雙欄卡片的中繼器樣式為水平排列，每行兩個。

影分身+變身術(shù)

然后我們有了三個目標樣式的中繼器，小伙伴應該知道我后面會干什么了，奧義——后宮術(shù)。

3）用個面板把他們套一起

用一個套套把他們?nèi)滓黄?，注意一下擺放順序，然后依次放好。

4）加個切換按鈕

按照淘寶的樣式加個可以控制布局的按鈕。

同樣是三層套套，記得把不同的圖標找好。

5）添加用例

如右圖所示。點擊切換按鈕（Transform）時切換按鈕面板0（Transform）和套中繼器的面板（content）為下一個，并且循環(huán)。OK了。

個人觀點的總結(jié)總結(jié)：不同的布局主要取決于圖片和文字的重要性，也就是圖片和文字誰能更準確的向觀眾傳遞信息。根據(jù)不同的商品、用戶群體選擇合適的布局，使用大圖布局時需謹慎。

中級器教程寫得比較略，還有一種方法些微麻煩，懶得寫了，夠用就行。有補充希望在留言區(qū)告訴我。謝謝閱讀。

相關(guān)下載：

作者鏈接: http://pan.baidu.com/s/1pLs7heb 密碼: w1t9

官方鏈接: http://pan.baidu.com/s/1gfM9DsB 密碼: ty75

相關(guān)閱讀：

用過那么多原型軟件，為什么我還是最愛Axure

Axure實現(xiàn)兩種滑動的方式（附源文件下載）

給開發(fā)人員看原型，一個鏈接就夠了

Axure 8.0 拖動滑塊設置數(shù)字和日期

作者：浩程君。簡書：七光年。任何轉(zhuǎn)載請簡書私信聯(lián)系作者。

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