• 全国400电话网上服务平台
    强大号码库资源任选,方便,快捷,快速开通。
    咨询热线:400-1100-266  

    3个要点,做好轮播区设计
    POST TIME:2018-12-03 21:35
     

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

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

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

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

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

    1.连结独立和开放

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

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

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

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

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

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

    2.优雅快捷的投放弹窗

    把一个素材(好比文章)投放到轮播区,从设计模式上来讲,其实有两种方式:

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

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

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

    要说的是,这个投放交互必需:

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

    3.统一路由

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

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

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

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

    
    Copyright © 2003-2016
    时间:9:00-21:00 (节假日不休)
    版权所有:巨人网络(扬州)科技有限公司
    总部地址:江苏省信息产业基地11号楼四层
    《增值电信业务经营许可证》 苏B2-20120278
    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信

    微信号已复制,请打开微信添加咨询详情!