电子商务网站主题背后的故事

无需加好友免费技术支持

相信大家都很熟悉专题页面。各大电商网站经常在。banner在图片中，放置各种特殊页面的广告图片，什么是199-100，什么是主要品牌的联合反馈，等等。不小心点进去，这是一个深坑。为什么？钱包被掏空了。

有多少人知道电子商务网站主题背后的故事？或者，有多少人想知道？我不想知道你可以出去左转，因为在这篇文章中，我希望通过我自己的数据收集、内容分析和实践结果，告诉你各种各样的主题和背后的故事。

在这里分享一个真实的故事，作为一个系统建设还不完善的电子商务平台，很多时候专题推出，采用的是比较传统的，oh不，非常传统的建筑方法。

中秋节快到了。领导说，我们的月饼制造商强烈要求他们的广告挂在主页上，并在整个单独的页面上进行营销！

运营伙伴收到需求，好吧！让我知道他们想推广什么商品，重点推广什么。blabla

因此，刷刷整理出一张表格，里面有我需要推的商品，想要放的位置，文案，活动说明等等。

然后把它交给设计伙伴。

设计合作伙伴收到要求后，立即在网上搜索材料，灵感爆发，整个非常节日的特别页面，包括商品的各种状态，需要逐一标记，什么已经售罄，不支持销售，等等。

这些都不能少，少一个，产品同学可以回来。

当设计稿出来时，前端学生不能闲着。我敲了敲我，我敲了敲。嘿，这里的阴影不容易实现，也不容易实现。嘿，这里的风格很奇怪。我换了。好吧，就这样。产品学生，你可以看看。

产品学生此时心情沉重，这个设计草案和静态页面的区别，怎么有点大。无论如何，最后或接受，后天将在线，快速开发学生。

发展学生心里想，又是这个话题，每次都写同样的内容，烦死了。然后默默地完成它。

测试学生心里想，又是这个话题，每次测试类似的内容，烦死了。然后默默地测试它。

操作学生心里想，每次这么久，效率能不能更高，但不要把我的产品联系错了！

因此，在我们的最后一个话题中，我们完成了整个开发过程。在中间，由于各种因素，不断返工和撕裂X。

所以，有没有可能，这一切，都少一点套路，多一点真诚？让我们直接，快点，不就是整个话题吗？

所以，做一个工具。建立一套定制的模板。每次我们去专题的时候，我们都会把必要的设计好，把商品联系起来，自己传播，自己看，自己检查。

那么以上七个催魂步骤就变成了:

第一步:操作分类需求第二步:输出设计稿第三步:操作编辑专题和自我检查简单:完美:

产品学生想了想，这个，想法很好，那么如何实现呢？别担心，我们分析了一个主题的结构，我们知道什么样的工具可以支持我们的业务需求。

我们就不多说特别复杂和花哨的话题了。作为一个实用主义者，我一直坚持以最低的成本实施和尝试新的想法。有了基础设施，我怕有什么不能迭代的吗？小步走，同志们。

我们可以看到，大多数的专题页面，其实无外乎几个核心元素：全屏的banner图(带链接，无链接)、商品标题区(带链接区，无链接区)、商品展示区(每行展示的商品数量不同)、广告区、统一背景色

当然，商品标题区和广告区本质上可以通过模板来处理，只是链接和图片不同。

好了，通过分析一个特殊页面的核心元素，我们可以开始构建我们的特殊工具。想想看。操作这样的页面最想要什么效果？

简单快捷，设计图纸，我把它传到上面，设置好商品。当编辑可以看到实际效果时，主题页面的内容相对丰富，意外错了，但扣除工资。综上所述，为了综合实用和美观，我们可以使用视觉编辑的形式来实现主题编辑。

什么是可视化编辑？我的理解是，我所看到的就是我所得到的。这不再是传统背景以表单的形式填充页面的内容，而是一种模块化页面、编辑和实时预览真实效果的方式。

上图是淘宝店铺装修的界面。这套工具构建了我们日常购买的商店、主页和相关页面。其核心是拆卸模块并随意可视化组合。

同样，专用工具也是如此。我们拆卸主模块，定义每个模块的内容组成，编辑操作，基本形成可视化工具。

总结方案方向的核心在于两点

找出内容核心的关键要素(主题的核心组成部分)，找出合适的实现模型(可视化编辑的形式)

话不多说，通过以上分析，我们可以开始搭建自己平台的专题编辑工具！

首先，结合公司的业务，通过编辑页面的核心内容，明确介绍编辑页面的核心内容）PART在介绍情况时，我们应该对业务需求有一定的概念：

商品模块自定义模块整个页面的结构规划如下：

顶部:固定基本操作栏 。因为可视化编辑是编辑整个页面，为了方便整体操作，选择将基本操作栏固定在顶部，这样无论编辑在哪里，都可以快速进行一些基本操作。

编辑区：通过添加每个模块来编辑内容。在编辑区域中，我们添加了整个页面的核心模块，然后将内容填充到每个模块中，以实现实时预览的效果。此外，每个模块之间的位置可以通过拖动来调整。

以下是广告模块和商品模块内容构建的重点分析。

广告模块：PART2中提到，我们看到的商品标题，带链接的，没有链接的，或者一些带链接的广告地图。优惠券的收集渠道也可以通过广告模块来实现。

为什么？如何在限制模块上传图片的情况下如此灵活地使用？

很简单，在广告地图上的加热区域。换句话说，我们的设计师可以制作一张符合尺寸的图片，可以是不同的商店渠道或优惠券接收渠道，只要操作在上传广告地图后添加不同的热区，不同的热区可以链接到不同的网站。

商品模块：商品模块属于特殊页面的主要内容。为了丰富页面显示，在有限的条件下创造无限的可能性。商品模块的设置可以设置每行显示不同数量的商品，以满足不同的排版需求。在早期阶段，设计师只需要制作一个固定的模板。

很简单吗？当然，这些可变因素可以根据业务要求进行调整，你可以根据自己的业务做出不同的选择。

需要注意的是，当阅读我们的商品列表时，商品ID，因此，需要考虑商品不同状态(已售罄、已删除等)的效果。

一般来说，专用工具的构建理念就是这样，从业务分析到选择构建模式，再结合自身需求进行设计。有了最小版本，未来的迭代无非是丰富模板内容，支持更丰富的页面内容。

同时也可以应用到类似的需求上，比如店铺装修。你觉得很棒吗？

本文由 @苏眉鱼。 每个人都是产品经理。未经许可，禁止转载。

题图来自PEXELS，基于CC0协议