中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、列表形式

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

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

淘寶app商品列表頁

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

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

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

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

二、雙欄小圖

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

1）雙欄小圖+卡片

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

2）雙欄小圖+瀑布流

上圖為天貓商城+小紅書

3）雙欄+極簡

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

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

三、大圖（單圖）形式

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

1）大圖+卡片

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

2）大圖+極簡

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

四、中繼器實現一個切換效果

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

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

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

我們現在已經有了一個列表形式的中繼器：

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

影分身之術

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

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

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

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

影分身+變身術

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

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

用一個套套把他們三套一起，注意一下擺放順序，然后依次放好。

4）加個切換按鈕

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

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

5）添加用例

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

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

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

相關下載：

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

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

相關閱讀：

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

Axure實現兩種滑動的方式（附源文件下載）

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

Axure 8.0 拖動滑塊設置數字和日期

作者：浩程君。簡書：七光年。任何轉載請簡書私信聯系作者。

本文由 @浩程君 原創發布于人人都是產品經理。未經許可，禁止轉載。