今天给大家介绍一下电商APP首页设计，这边讲的设计不是技术上的设计，是产品上的设计。本来其实没有这么多问题的，可是因为安卓和IOS不是很精通react native或者vue技术来开发APP商城首页，最重要的是上线时间比较赶，没办法给他们大量的时间来学习，所以这边只能通过APP原生来实现这个首页功能了。我们先看一下我们要实现的首页长什么样子。
需求分析
大家从这个结构其实可以看到有四个部分，分别是：banner轮播图、分类列表、活动主题、推荐商品。
这边我们先说明一下首页的需求，因为所有的设计都是针对于需求来的，需求如下：
- 不同的用户需要看到不同的首页信息
- banner图是可以配置的。
- 分类的图片，类型名称字体、背景图都要求是可以配置的
- 推荐内容和背景图都必须是可以配置的。
- 活动样式可以不做修改，但是活动内容一定要可以配置，比如活动跳转地址，可以是商品详情、商品列表、分类、具体活动详情页面，这边活动的样式目前固定有五个，具体样式如下所示：
活动一：
活动二：
活动三：
活动四：
活动五：
那我们应该怎么来设计才能满足上面的这些需求呢，这些设置的功能，全部都是加在平台管理上面的，商城app端主要请求配置好的数据就可以了。
banner设置
首先我们需要设计一张banner表，用来配置banner轮播图的数据，在设计banner的表字段的时候，大家想想点击banner会跳转到哪些地方呢？我们先来分析一把，做什么事情都要先动脑子，然后开始干活，千万不要盲目开始工作。
banner点击我们一般会有如下跳转：活动页面、商品首页、分类、分类商品列表等。跳转信息有了，剩下其还有我们刚才说的，不同角色看到的banner是不一样的，所以必须有一个banner角色区分的字段。最后就是banner自己的一些信息，比如名称，banner图片等等之类的，基本信息如下所示：
分类设置
banner设计完之后，接下就是分类的设置，分类我们这边需要做的设置和banner类似，一个是不同角色对应的分类是不一样的，另外一个其实是细节的注意点，就是分类的字体也必须是可配置的。分类其实比较简单，基本信息如下所示：
推荐商品设置
商品推荐设置其实最简单了，我们只需要将商品推荐设置表和商品id相挂钩就可以了，然后再绑定角色就可以了。因为比较简单，所以这边我就不做过多的解释了，我们直接看最难的一部分，活动设置。
活动设置
未什么说活动设置是最难的呢，难点如下：
- 不同的角色看到的活动内容是不一样的。
- 相同样式的活动模块可以查看多个。
- 活动可以配置跳转地址很多。
- 活动会有各自的过期时间。
针对上面四点，我们这边需要两张表来实现，一个是模板表，另外一个是活动模板表。需要两张表的原因，因为如果我们想要实现第二点，我们就必须要两张表来配合。模板表和活动模板表就犹如课程和学生的关系，一个课程有可以有多个学生，一个学生也可以选择多个课程，它们之间是多对多的关系。
我们先来看一下模板表需要怎么设计，模板表其实相对比较简单，只需要设置角色、活动模板的关联就可以了，我们看一下具体的数据。
活动模板表就相对有点复杂了，不过缕清思路其实就没那么难了，首先需要配置跳转的地址，其实是活动的有效时间、最后就是活动是否显示等。
然后我们通过这两张表就可以进行活动模块的随意配置了，我们可以在模板表里面关联活动模板表多次，就可以做到样式一样的活动显示多次了，我们也可以设置优先级来设置谁排在前面。
总结
这边我们就讲一个大概，没有深入到代码级别，不过产品原型设计都出来，写代码还有那么难嘛。有时候并不是技术先进就能马上使用，因为还要看时间成本、人力成本，机会成本等。既然技术不能采用最灵活了，我们只能在设计上面进行更加灵活的配置了。好了今天的内容就到这边了，有什么疑问欢迎咨询~
要更多干货、技术猛料的孩子，快点拿起手机扫码关注我，我在这里等你哦~
