对于商城内的产品，【商品列表页】是很关键的一环。好的布局可以让用户快速寻找到目标商品，文字or图片更优先？选择合适的布局，可以大大增加用户进入到【商品详情页】的概率。

本文主要选择如今市面上的商城类产品，浅析各种布局的优劣势，**再附上用中继器实现淘宝wap端商品列表页的切换教程。文末附下载链接。文中部分思路来自《App中列表、卡片和双栏卡片的布局思考》，但本文更多描述商城类商品。

先睹为看看看原型效果吧：（可以对比淘宝WAP，记得F12）

一、列表形式

列表形式常见于各类新闻客户端，下图为今日头条，天天快报，搜狐新闻的主页，均是采用列表形式。稍有不同就是三图和单图，图片放左侧或右侧的区别，整体来看还是整齐列表形式。

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

淘宝app商品列表页

列表形式其实可以再细分为【列表+卡片】或是【列表+极简】，一张图解释：

可以看出上面列表形式的布局差异，左侧是【列表+极简风格】，每个单元的商品横向贯通，个人感觉这种设计更符合现代的设计，而且在商城内商品数量较多时此种布局是不二选择。

右侧是【列表+图片】相对于左侧的布局略有收缩，当客户浏览商品列表的时候会有间断感，更适合于商城内商品较少的情况。

小结：列表形式的布局可以在相同空间内展现最多的商品（图+文），特别是商城内商品较多时，可以参考【新闻资讯类】app的布局，列表形式主要是文字为主，图片为辅助。在这种列表形式的布局下，文字占有的地位更高。缺点是略显拥挤，特别是在文字（商品名称）过长的情况下。

二、双栏小图

双栏小图在商城内的应用也很广泛，，但是双栏小图也可以再细分为【小图+卡片】【小图+瀑布】【小图+极简】，三张图说明吧：