【移动端】一般B2C电商商城的布局设计

时间：2022-08-06 01:48:01 | 来源：网站运营

时间：2022-08-06 01:48:01 来源：网站运营

【摘要】简单了解一般B2C电商商城的布局设计

【作者】白金

前言

移动端B2C电商商城，作为面向普通消费者的，用于连接用户与商品关系的桥梁，现已渗透到日常生活之中。UI层作为商城的表象层，不仅需要清晰阐述商品在商城中的层级关系，还需要明确各个页面之间的逻辑关系，从美观和实用两个方面提升用户体验，最大限度降低用户的学习成本。随着行业的不断发展，国内外各公司都提供了相对成熟的移动端商城解决方案。我们也可从这些实例中学习到一些布局设计的经验。

一般用户移动端B2C商城的基本页面

以最简单的商城模式作为前提，我们姑且认为一个商城应该包含如下基础页面：

1. 首页（用于展示商城和主打商品及分类的主界面）
2. 商品列表页（以分类的方式，通过列表形式呈现出某一分类下的所有商品预览信息）
3. 商品详情页（展示具体商品的具体属性）
4. 购物车（预保存需结算的商品）
5. 确认订单（用户确认下单商品的基本信息，收货信息，支付方式，支付金额等）
6. 结算成功/失败（支付是否成功的反馈页面）
7. 个人中心（呈现用户的基本信息，订单入口，地址入口等与个人相关的信息入口）
8. 我的订单-订单列表（以不同的订单状态分别展示每个订单的基本信息列表）
9. 我的订单-订单详情（展示不同订单状态的详细信息，包含商品信息，物流信息，支付信息等）
10. 我的地址（管理或编辑收货地址）

作为门面的首页，它能够在一组页面中脱引而出，成为最能够代表商城布局的标志性页面。下面我们就以首页作为切入点，聊聊国内外电商在首页上的布局设计。

首页

首页作为商城的门面，在页面重要程度上不言而喻。国内外商家在进行商城首页设计时，都充分表达了自己对于布局的理解。我们在此选取国内外主流电商平台，粗浅的分析一下它们在首页上的页面布局：

针对国内主流电商平台而言，布局设计比较近似，甚至连排布的顺序都完全一致。如图所示，我们将淘宝和京东两大主流电商的布局做了元素提取，其布局展示通常分为以下6个维度：

①顶部搜索栏

②banner部分

③以Grid图标展示的商品分类入口

④专题/业务入口卡片

⑤按特定需求罗列的商品列表（如热门推荐，猜你喜欢等）

⑥底部Bar

虽然在布局上缺少了一些醒目的特色，但其所带来的益处也是显而易见。主流平台一致的界面排布，在一定程度上降低了用户使用商城时的学习成本，间接提高了商城内容转化率的同时，也体现出商城以服务用户为本的设计理念。当然，如此成熟标准化的排布方案，也就意味着它缺乏个性，缺少辨识度，没有真正属于自己的元素。诚然，标准和个性本来就是两个不同的维度，如果说国内电商平台都是如此「标准」的布局展示方式的话，我们不如再来看看国外的电商平台是如何展现他们眼中的设计排布的。

我们以Amazon的首页布局为例。其布局如图所示也可分为6个维度：

①顶部搜索栏

②商品分类导航栏

③banner部分

④快捷登录入口

⑤活动商品列表

⑥汉堡式导航栏

如果稍微留心观察，不难发现，国内外电商在布局设计中最大的区别就在于导航栏的设计。国内电商平台普遍使用的是底部导航栏的设计，而国外的电商平台则普遍使用汉堡菜单作为其导航栏。

抛砖引玉：汉堡式导航VS底部式导航的一些观点

相对于底部导航栏，汉堡图标有着更加悠久的历史。就像2020年软盘图标依旧代表着保存功能一样，这一枚长着三条线，总是出现在屏幕的左上角/右上角的图标，代表着这里有更多的选项如此排列着，正如图标本身所展示的那样。一直以来，很多国内的产品或设计师都在以「汉堡式导航栏不易被用户发现」、「隐藏式的菜单无法提高APP转化率」为借口打压汉堡式菜单，推崇底部导航栏设计。但笔者认为，盲目打压和推崇都是不可取的行为，如何选择合适自己的展示形式，首先必须了解它们各自的优势。

汉堡式菜单展开的抽屉页面，作为一个列表，可以容纳进不受限的功能菜单，如果你的商城有超过5项菜单需要进行展示，那么汉堡式菜单会是一个比较合适的选择。而底部导航栏，可以展示5枚以内的菜单图标，以更加直观的方式直接呈现在首页，不需要用户去进行二级操作。

虽然直观的设计一定程度上会提高流量的转化率，但问题也是显而易见的。国内电商千篇一律的底部导航式设计，过于标准化，以至于缺乏个性化的内容。既然秉承“以最少页面完成最多的事儿”的观点，那也就意味着需要通过首页底部导航栏来引流的设计，作为首页本身还没有做到最好。试想，如果第一屏的首页已经能够满足用户的需要，那么他们将没有理由切换到其他的页面。因此，笔者认为，国外商城保留汉堡式菜单的设计，也并非毫无道理，他们隐藏了菜单的直观可见，努力做好第一屏幕的体验，探索在电商商城上的更多可能性，而不是一味的用定式思维去思考问题，这些都是值得我们去借鉴的地方。

归纳总结：

对比国内外商城在首页面的表现形式不难发现一些共同特征。除了菜单的表现形式有所差异，剩下的四大天王：「搜索栏」、「主打banner」、「分类选择」、「商品列表」都是基本商城首页不可或缺的要素。

·「搜索栏」&「分类选择」：符合首页面快速展示商城功能的需求，便于用户结合自身需求快速跳转指定功能。为用户精准查找到某一个或某一类商品所服务。

·「主打banner」&「商品列表」：推销新品&热卖商品使用，商品列表一般按照热卖排行或者算法进行个性化展示，在第一屏尽可能提供能够吸引眼球的商品，最大程度提高流量转化率。

除此之外，便是上文提到的菜单导航栏。不拘泥于标准形式，其目的在于为用户提供更多的功能页面入口。因此，在进行页面布局设计的时候，可以结合自身情况进行适当调整。

商城包含的页面不仅仅只有首页，购物车、收货地址等其他页面也是十分具有标志性的。由于文章篇幅所限，不能够针对每一个页面依次例举，而仅仅从首页出发，浅谈B2C电商商城的布局设计，并提供一种分析的思路。只要形式不变，一般B2C电商的界面布局是不会跑出这个大范围。当然，知识和经验都是具有时效性的东西，若未来载体改变，界面的布局也可能发生翻天覆地的变化，到那时，本文所归纳的要点可能将不再适用。

---

欢迎关注 技术团队的本站账号 我们凭团队实例运作以下专栏， 必须干货！

互联网创业专栏 (我们小伙伴的创业历程)

与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

互联网产品研发管理 (我们公司对产品结构的管理思路)

产品君的案例库（产品小伙伴深刻总结）