设计沉思录｜58商城项目总结：我的野蛮设计观

人人都是产品经理 07-07 618

前言：

现时姐妹们对“设计商品展示模块”大约比较注重，咱们都需要知道一些“设计商品展示模块”的相关知识。那么小编也在网上搜集了一些关于“设计商品展示模块””的相关内容，希望姐妹们能喜欢，小伙伴们一起来了解一下吧！

58商城是针对B端商户的全新的会员套餐售卖系统，长期以来一直依赖于线下的销售人员。未来战略规划，希望从线下销售到线上的模式进行转变，打造一个以客户为主的智能服务中心。而58商城就是转变的核心所在，也是商城项目的核心目标。本文是关于58商城的项目总结，enjoy~

一、项目背景1. 58商城是什么？

58商城是针对B端商户的全新的会员套餐售卖系统，58的会员商品及套餐的售卖，长期以来一直依赖于线下的销售人员。未来战略规划，希望从线下销售到线上的模式进行转变，打造一个以客户为主的智能服务中心。而58商城就是转变的核心所在，也是商城项目的核心目标。

58商城项目地图

58商城包括PC/M两个端口，以及我们58的全部的业务线，招聘、房产、二手车、黄页等等。同时，除了这些业务线的接入之外，还包括积分商城，支付系统，数据后台，合同系统、发票等等一整套的售卖和支撑体系。

2. 阶段性目标

如果从产品生命周期的曲线来看，起步阶段的商城，处于一个野蛮开荒的时期。初期目标需要产品功能的快速搭建，多业务、多平台覆盖，让用户快速上手，并得到初步的认可。

二、面临问题

在参与商城这样体量大、时间紧、资源少的项目时，我们设计师也会面临很多的问题。比如说我们的资源很有限、很难去支撑这么大、快速的产出的项目。以及商城覆盖的业务线多，早期设计风格过度视觉化等等这些问题。

三、设计策略

求同存异策略解决平台个性与共性问题

经过整理归纳，基本上分为成两种：

共性问题：设计的风格、设计资源有限，整体一致性需求；个性问题：涉及业务线多、功能结构复杂、场景多样化。

面对新产品野蛮生长期中共性与个性的问题，我们通过求同存异的策略来解决，快速搭建商城的基础能力。

求同：如何面对共性问题？

共性的问题基本上可以说是标准的问题，那么商城应该建立什么样的标准呢？

结合早期的用户调研，目前会员套餐的购买基本都是公司销售代买、帮买的模式，以及我们商城用户的属性，如何把信息高效的传达给用户才是最重要的。

早期设计风格

我们对商城早期的产品设计风格进行了梳理，最大特点就是非常的视觉化，通过大量的插画来吸引用户注意。

但是也带来了以下的缺点：

信息干扰大：信息干扰会非常大，B端用户消费更加理性，强视觉化的设计，对其引导性并不会很强。设计成本高：强视觉化的设计，会给我们带来非常高额的设计成本。我们需要不断的去做这些视觉和插画来适应。风格统一难：设计风格非常不可控，不易统一。

所以针对这些问题，我们提炼出了新的标准，就是去视觉化。从而延伸出轻量、清晰，一致的设计原则。

（1）去视觉化

根据轻量的设计原则，我们对商城的首页和详情页进行了去视觉化的设计。我们让信息展示更加简洁轻量，最重要的是可以让我们的设计成本变得非常的低。

（2）卡片式设计

卡片式的设计，我们生活中随处可见，如扑克、身份证、指路牌等这些卡片形式。它们拥有简单易懂、信息整合、信息传达清晰直观的优点。

58商城的视觉设计中，也采用的卡片设计的形式，将不同的信息之间快速进行区分和整合，让信息传递更加高效。

（3）组件库

整体的方向确定之后，接下来就是怎么将标准有效的实施起来。我们通过建立规范化的组件库，为设计快速产出提供保障。同时，不断优化、更新公共组件库，与开发团队同步。也很好的解决我们平台一致性的问题。

统一性：单位金额的组合，选取规范中基础组合进行搭建，确保整个商城价格展示上的呈现统一性。

可兼容性：在底部栏，对操作按钮，图标、内容等等元素进行组合，保证设计的兼容性与交互逻辑的一致性。

可拓展性：信息结构复杂的商品展示模块，进行功能划分。根据业务需求进行功能模块的增减，增强商品模块的可拓展性。

（4）模板化商品图

同时，我们还把最耗费设计师工作量的的商品详情页进行了统一模板化的设计，大幅提高我们设计的生产效率。

通过这一设计原则以及标准的实施，以及标准的推进落地，基本上解决了商城共性的问题。

存异：怎么满足个性需求？

个性问题主要体现在，业务线多，带来的差异，以及商品套餐售卖的信息差异。对应的解决方案分两种，通过低成本的个性化和高包容的模块化来解决。

（1）低成本的个性化

比如用色彩去区分业务线，我们对每个业务线的会员卡片的颜色进行了定义。让每条业务线具有独特性，加强用户对业务线身份的认知，让用户快速准确区分并了解会员套餐的使用情况。

（2）高包容的模块化

商品套餐的展示其实是我们非常重要的一环，商品套餐的内容非常复杂，用户更关注套餐内容和价格本身。但实际上，随着我们业务线的不断更新迭代，套餐的更新，活动促销的内容上新等原因。使得我们原来标准化的套餐展示，信息展示不清晰、层级模糊、不能很好兼容新的商品需求。所以我针对这样的问题，在标准化的基础上，通过模块化的设计进行升级。

针对商品信息的基础元素进行梳理，并提炼其中的重要元素，重新组合成样式，同时保证的整个商品展示逻辑的统一性。

通过模块化的设计使得商品展示的价格信息更加直观，内容展示更丰富且清晰，但最重要的是它具有了更良好的可拓展性，重点信息更加突出。

同时，很好的兼容了不同商品的展示需求，也能看出卡片式设计在其中起到了关键性的作用，在共性问题上选择强包容性的卡片式设计的正确性。

这样的设计思路，也在其他模块中得到了很好的复用，比如合同列表、套餐列表、购物车等等。

通过整体的求同存异这样的设计策略，基本成功完成了会员商城基础功能的搭建。达到了产品和设计的初期目标。

四、需求管理

但其实我们这一年所面对的项目需求非常非常多的，在2019年我们也得到了一个非常野蛮的结果。但是我们面对这些需求的时候，怎么去规划我们的资源？制定我们的设计策略？对接的需求进行求同，还是存异？

所以我们使用四象限的方法，对项目进行有效的管理。分为平台型和业务线、个性和共性两个区分。

其中，平台型-个性：利用已有标准，快速产出；

业务型-个性：点对点的考虑，进行个性化设计；

业务型-共性：从全局来考虑，制定标准化，并在已有的标准规范上进行迭代完善；

平台型-共性：着重的进行规划，去制定严格的规范，然后进行迭代维护。