技术分享-商城篇系统首页（二）

一、介绍

        前面项目概览对B2B2C商城的首页做了部分介绍，现在我们单开一篇文章来详细说一下商城首页的业务布局和做法；平时我们在进行网购时，打开购物APP，进入软件的首页，除了开机广告外，更多就是发现这些大平台的系统，每个人打开内容其实都不一样，但是仔细一看，就会发现这些APP推荐的内容，基本都是近期自己浏览过的相关数据，那么恭喜各位，中奖了，我们的平时在不同平台的浏览的各种消息被大数据给研究透了（心里头其实有一万头草泥马飞过），其实吧也不用过于担心，其实对于普通人来说，这些信息的并不会给自己带来什么负面作用（骚扰短信和电话除外），还能为自己提供很多便宜的行为，毕竟大数据都已经给你把想要的大部分都找了出来，排除掉不必要的内容（不过有时也觉得要是做点坏事，都不是JC叔叔找来了，自己就可以自首了，内心还是很不愿意的），但是咋们也不能做什么不是是吧，总不能回到15年前，用回功能机，过上苦行僧的生活，所以拒绝不了就躺平享受吧。那么话又说回来，是不是所有的系统都要做成这种千人千面的呢？答案当然是否定的，要做到如此庞大的算法推荐系统，得需要公司投入多少成本，需要多少个程序员来祭旗（头发），熬了多少个日夜，发布了多少个产品迭代，才能一步步做到这个程度，这样不只是单独一个团队做不到，公司也受不了，开公司都是为了赚钱，而不是为了让大家提升自己的技战术水平的，所以阔有阔法，穷有穷道，只要让自己系统能够满足基础使用，赚了钱，才能一步步的进行打怪升级，接下来为大家介绍其他的“穷法”是怎么做系统首页的，本人粗略简单的归纳了一下，第一种刚才已经说了的利用大数据推荐算法的千人千面；第二种是DIY系统首页布局模式；第三种就是最原始的以产品UI设计的固定模块首页，对比以上两种，这种系统只是一种简单初级且笨拙的以解决当前问题所设计模式，属于基本不推崇的（不过现实中确实有不少这种，原因有以下几点，不是钱不够，就是时间不够，业务催得急产品研发就应付了事，想上线再说，其次就是外包项目了，他们是以开发速度提早完成项目为主要目的，至于后期的可维护可拓展不在他们的考虑范围，但也不能全怪他们，毕竟给的时间就只有这么一点，还能让人家做出花了不是），这个模式的首页，就固定死了整个首页的布局，非常的不灵活，上线时是什么布局，后期还是什么布局，对于用户来说，没有什么新鲜感，系统的留存时间也是越来越短，毕竟每次进去都是这些数据，看多也烦，想要什么害的自己去找，所以我此次分享的是第二种，DIY系统首页配置模式，接下来我会详细阐述这个模式的设计和逻辑，让各位看官可以清晰了解DIY首页技术逻辑，以便在日后的系统开发中，有一个相应的参考。

二、内容

        DIY首页比起千人千面设计上、逻辑上、复杂度上等都会简单极多，但是好处就是比固定模式首页，灵活不少，可以解放研发的手，交给运营区对整个首页的布局进行自由搭配，各个模组之间灵活配置，也能让用户每次进来都能体验不同业务布局，有一定的新鲜感，主要是可以配置用户关注高的内容，例如产品推荐，搜索词的优化，通过后台的数据分析（人工或者算法统计），挑出频率较高的词和产品放在首页显眼的位置，既能提升用户体验感，也能进一步增加业绩收入（这是主要的目的），而DIY首页又是怎么开发的能，其实简单一点就是我们把业务提出的需要，每一个模块做成一个可配置的组件，就像我们玩积木一样，都是通过一块块的拼块，组装成不同的形状和物品，高度自由化配置，所以结合之前的《项目概览》我就简单说一下，该怎么做。

模组集合

        模组的定义，由前端和后端沟通和讨论的之后，进行产品的设计，比如最常见的就是以下几个模组：Banner轮播图、TAB导航栏目、广告区（可以拆分为不同的形状的广告，如：首页弹框、一大两小、楼层商品、主播广告、广告大区等）、营销模块（限时秒杀、限时团购、优惠券等）、商品区（这个比较注意的是，可以直接使用产品库里的产品，在结合用户近期购买记录和浏览的记录等，用简易算法，进行相关产品排序和推荐，也算是一个小千人千面）、搜索区块、系统公告等

设计接口

• 既然是自定义，那页面的组合配置，就需要我们在后台，增加一个商城设计模块，需要把上面的提到的模组，给抽象一个个拼块，然后在通过培训运营人员进行使用，根据需要拼装出所设计产品首页，后期若是有其他的项目，只需在后台进行模组的调整即可，无需研发再去发版上线，灵活性和实用性大大提高
  • 既然说到要做成模组可视化编辑，那么其中涉及的逻辑又是怎么样的呢，接口和数据库的设计又是如何，我做一下总结
    1. 表设计：DIY设计表、DIY设计模组明细，根据后台可以设计多个首页模板，不同的首页模板内容皆不相同，即可以和第三方合作设计入口，单独为他们的配置内容，还可以为不同的业务端配置不同首页，例如：APP端（设计一）、H5端（设计二）、小程序端（设计三），还可以为不同节日活动设计模板，这样下一次活动的时候，可以直接使用，只需进行微调即可；所以DIY设计列表，目的就是为了多样性，不必重复操作，也可以避免因为后台修改页面时，导致前台的首页错乱等
    2. 后台接口设计
       1. 设计列表
       2. 设计操作：增删改查
       3. 设计装修
       4. 一键复制（因为我们在上面设计时，考虑到多端不同的页面呈现，为了避免重复工作，使用一键复制，就可以把之前做好的设计稿，直接进行使用，减省运营极大工作量）
       5. 初始化模组（释义：当我们新建一个设计模板时，我们使用初始化模组，就会默认创建基础标配的模组到设计表，运营进行装修时，也可以给他们一个参考）
       6. 上|下线（释义：存在多个设计首页，那肯定要以一个为主，不然都上线，那前台也不知道要用哪一个，所以同类型的设计首页，只能上线一个，以确保首页的唯一性）
       7. 模组列表（释义：模组列表接口，用于获取当前设计页所配置的模组，根据其先后顺序，前端通过接口返回的数据，顺序展示出来）
       8. 预览设计（释义：当我们设计好了首页，为了可以更好直观的看到前台效果，我们可以采用预览模式，查看具体效果，避免直接上线，导致生成结果不够理想）
       9. 发布首页（释义：顾名思义就是确认无误发布）
       10. 图片上传（释义：建议做成图片库，整合成通用组件，这样可以在后台全站使用，首页关乎系统门面，所以每个模组推广图片，其尺寸都是不一样，要根据不同的模组的设计不同的尺寸图片）
       11. 注意：之所以只是列出相应的接口（并不是全部，只是整个业务的核心骨架），就是为了方便各位在阅读时，可以直观知道其设计逻辑，且我并没有把DIY设计表和DIY设计模组对应的字段列出来，目的就是通过我提供的思路，参考设计更加适合自己的首页设计，因为千篇一律一个参考教程，不如提供可以参考的设计思路，来完善自己的产品更有价值，如下有几张附图，可以提供给给为阅看
       12. 附图

1. 前台接口设计
   1. 设计详情
   2. 模组列表
   3. 营销相关接口：如限时秒杀（当前秒杀中商品或预售中商品）、团购接口（推广商品）、优惠券接口等
   4. 商品列表（初始化推荐商品，控制在十屏以内，也就是划拉下滑时，最多拉取十页即可，太多了也无用，用户不会去操作，也会导致你的页面过长，可通过推荐算法，给用户推荐相关商品）
   5. 搜索商品（释义：历史搜索、热门搜索）
   6. 预览详情（释义：装修设计中前台的预览效果，需要通过提前预览，才能知道设计是否达到效果，之所以列出来，主要是为了给各位提个醒，别忘了它，这个接口和设计详情接口是同一个，我们只需控制到接口调用参与即可）
   7. 弹框广告（此广告要做好防骚扰性接口，避免用户每次来都要弹一次，这样就会导致用户极大厌恶，会导致画虎不成反类犬，得不偿失，可以使用前端记录缓存，前端记录缓存，通过后端返回版本号，进行验证，是否有更新进行收起，可侧边唤起也可以隐藏，前端缓存的优势，就是不会增加服务器资源的消耗，尤其是用户量大的时候，使用版本号缓存的目的，就是为了若是广告内容变了，可以及时通知前端，内容变了，可以再次弹起，具体的各自优化即可）
2. 注意：首页设计，会涉及过多的细节优化，前端和后端需要做好沟通，比如每个模组之间上下间距，四角的圆边等，通过对细节的处理，可以把多个模组通过组合，形成一个集体，让数据更加丰富，页面看起来更加美观。

三、总结

        通过上面的对首页的介绍，不说全部熟悉了，大家心里应该都有一定的框架了，因为首页的布局设计到的是整个系统的门面，首页的存在就是留住客户，让客户跟着设计套路进行交易，找到用户想要的内容，完成一次愉快的购物，当然也不是说把门面做好了，就能万事大吉了，我们还得再内部修炼好内功，给用户一个流畅的体验，这样才是一个商城存在的价值，毕竟这么多年我见过不少中小企业，每一个刚开始都是热情澎湃要做一个自己的商城系统，可是做好之后，后期就没有人维护，内容也没有进行更新，基本是上线时是什么样，闭站时又是什么样，所以系统不是万能的，重要还是要各个部门一起配合，做好自己的事，多站在用户的角度去体验自己系统，每个人都是产品体验师，都是自己产品专家，好了，首页的技术设计，暂时就聊这么多，若是有不明白可以评论或者私信在下，谢谢大家话那么多时间，看我废话，咋们下篇再见。