3个要点，做好轮播区设计

　

文章分享了关于轮播区设计的几个要点，希望对各位的产品工作带来些启发。

无论是内容类产品，还是电商类产品，一般首页上都会有一个滚动的轮播区。运营妹子往往会在轮播区里放一些期望推给用户看的内容。以我现在负责的当地头条为例，我们就会把热门的资讯文章放上来。

于是我们的前产品经理（为了藐视他就叫他小中吧），直接按照需求做了这样的后台设计：

运营妹子可以从隔壁的文章库里选择文章，投放到这个轮播区。

放在当时的情景下，这样的设计看起来自然，实际上却成了后面所有坑的源头。我们一一来细数。

1.连结独立和开放

上述设计，其实是直接复用了文章的标题作为轮播的标题，文章的图片作为轮播图，这样就产生了第一个问题：如果文章没有图，标题太长轮播区放不下，文章图片丑，怎么办？

答案是：解耦。解耦是架构师经常用的一个词，意思是系统的各个部分连结灵活独立，极端场景下可替换或丢弃。仔细看上面后台的截图，名义上它叫轮播区办理，但表格里面的每一行素质上是一篇文章，而我们期望它是一个“轮播素材”。轮播素材不成以没有图，有图也不能丑，图不丑标题还不能长。

轮播区要办理的实际上是一张图一句话一个链接所构成的“轮播素材”，文章只是这个链接背后的一种类别罢了。正因如此，一个轮播区首先要做到的是让本身变得独立，独立之后是开放。解耦就是独立，那开放是什么呢？

根据小中的设计，要把一篇文章投放到轮播区，需要先去文章库，从那里投放过来。而在轮播区办理里面自己却没有任何入口。这会发生什么事情？

如果我想投放别的一种类型的素材好比活动报名，就需要在活动库里去增加操作入口，极限情况下，如果活动模块没人维护了如何解决？如果我想投放的只是一个外部合作页面，你不能跑到合作方那里，在他的系统里加一个投放吧

答案也明显：轮播区本身应该有一个“创建”按钮，它所创建的就是它所办理的“轮播素材”，并且这种素材应该是极具开放性的，开放到只要求背后的是一个链接。 顺便说一句，互联网力量就在于开放，这种开放表示为一个个简单到极致的超链接。

2.优雅快捷的投放弹窗

把一个素材（好比文章）投放到轮播区，从设计模式上来讲，其实有两种方式：

自上而下：先到轮播区办理界面，然后点击“选择文章”从下面的文章库里选择文章上来。自下而上：先到文章库办理界面，点击“投放”，把文章投放到轮播区上去。

哪种方式好？应该说两种方式各有各的场景。如果你现在考虑的是给轮播区找一篇热文，你可能会第一时间想到自上而下的方式1。如果你现在是在文章库里审核文章，看着一篇觉得合适，那你就会选择自下而上的方式2。

我们的业务中更多的是第2种方式。在这种方式下，根据产品经理都熟悉的“最短路径”原则，，文章库里每一篇文章的后面就会有一个“投放到轮播区”的按钮。

要说的是，这个投放交互必需：

轻量，好比一个弹层，而不是和内容深深的纠结在一起（好比下图）。必需统一，在文章库里，在活动库里，投放的弹层都是同一个。按照上下文设置好默认值，好比把文章的标题或活动的名称自动作为轮播图上的标题。这其实就是解耦基础上的快捷设置。

3.统一路由

好，现在已经把轮播区和文章解耦开，也可以投放文章、活动等类型的素材了。小中给每个类型的定义了类型值，然后让客户端程序猿支持这些类型。接着某个节日来了，运营妹子想把第3种类型“投票”放到轮播区，但是这个时候程序猿说：我们还不支持，要支持新类型得发版本。

这个问题怎么破？实践中，我们的建议是提前建立一个统一的路由。

其实除了轮播区可能会到达各种页面之外，push，消息等场景也会到达各种页面。我们最好和团队约定，每设计一种新类型的页面，都应该把它加到这个统一的路由里（甚至首页也应该这样做，以我此前在阿里熟悉的电商业务而言，付款完成之后往往会引导用户去首页）。然后无论是轮播区还是push需要跳转的时候，都使用这个统一的路由器，跳转到对应的页面去。一句话概括来说就是：哪里都能去。

如果从开发伊始就使用这种方案，那么轮播区自然也就支持各种类型页面了。但是，老版本如何支持新的“投票”类型呢？

标签：盐城 东营 九江 乌鲁木齐 林芝