设计好轮播区,就这3点

作者: 大中云上读书 | 来源:发表于2017-06-12 20:37 被阅读380次

你好,我叫大中,是一家内容类创业公司的产品总监,此前在阿里5年,负责过虾米音乐等产品。平常关注内容、社区和电商类产品

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

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

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

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

1.保持独立和开放

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

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

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

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

1.如果我想投放另外一种类型的素材比如活动报名,就需要在活动库里去增加操作入口,极限情况下,如果活动模块没人维护了如何解决?

2.如果我想投放的只是一个外部合作页面,你不能跑到合作方那里,在他的系统里加一个投放吧

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

2.优雅快捷的投放弹窗

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

1.自上而下:先到轮播区管理界面,然后点击“选择文章”从下面的文章库里选择文章上来。

2.自下而上:先到文章库管理界面,点击“投放”,把文章投放到轮播区上去。

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

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

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

1.轻量,比如一个弹层,而不是和内容深深的纠结在一起(比如下图)。

2.必须统一,在文章库里,在活动库里,投放的弹层都是同一个。

3.根据上下文设置好默认值,比如把文章的标题或活动的名称自动作为轮播图上的标题。这其实就是解耦基础上的快捷设置。

3.统一路由

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

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

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

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

老版本如果不升级就没有办法像新版本那样支持新功能,但是我们应该设计一种机制,可以做到优雅降级。这是不是说我们需要考虑为新老版本提供不同的轮播区数据呢?其实不用,诀窍都在统一路由里。一般app都支持webview,能打开url。实践中我们建议将浏览器可访问的url直接作为统一路由的路由参数,只不过在新版本里面可以解析出url跳转到体验更好的原生页面,而老版本用的就是h5页面。

总结一下

对于像轮播区这样的资源位的设计

第一步要做到独立和开放;

第二步,提供各种便捷的投放控件优雅地嵌入到各个业务中去;

第三步使用统一路由灵活支持跳转且老版本可优雅降级。

这种设计方式其实是使用了着眼于中长期的最低成本的策略,说到策略大家可能想到了MVP(最小可行性产品)。比较而言,前者更适合相对稳定的业务环境,后者更适合初创。说起MVP,第一次了解是走在去支付宝大楼的万塘路上,后来有一首歌《叔叔西湖怎么走》,转眼几年我也成公司运营妹子眼里的大叔了。

下集预告:一个县城社区冷启动过程中的产品设计

相关文章

  • 设计好轮播区,就这3点

    你好,我叫大中,是一家内容类创业公司的产品总监,此前在阿里5年,负责过虾米音乐等产品。平常关注内容、社区和电商类产...

  • 地理答啦:山东菏泽定陶——撤县设区之后,会有哪些变化和不同?

    撤县设区、撤市设区、撤县设市、撤地设市、撤乡设镇、撤镇设街等是很受关注的话题,但是“撤x设x”成功之后,对当地经济...

  • 学UI设计好还是平面设计好?发展前途哪个好?

    本文由:“学设计上兔课网”原创,图片素材来自网络,仅供学习分享 学UI设计好还是平面设计好?发展前途哪个好?ui设...

  • 新、旧轮播图

    传统轮播苹果风格无缝轮播 旧版思路: 使用排队思维实现,即多人跳大绳思维,当前第一张离开后,立即进入轮播区的等进入...

  • 撤县设区

    撤县设区一般是指直辖市或地级市将其所辖的县改设为市辖区。 也就是在名义上,这个县变成了市的一部分。 这是发展的必然...

  • 2018-11-09这就是您想要的

    开发需求: 前台: 1:首页:轮播图3--5张轮播图,轮播图下方为展示图片区8--10个位置,有竖的有横的 2:门...

  • 极致反馈

    有时也混沌,有时也刷抖音,有时也玩游戏,在一个个设计好的反馈里浮沉。 反观另一种“设计好”的反馈里奔赴,设...

  • 用jQuery做一个轮播

    轮播中一些知识点 实现轮播 行为样式不分离轮播深度截图_选择区域_20180320142314.png 结构分离这...

  • MilsBanner——可同时显示多个Page的轮播图

    因为毕设需要这么一个轮播图,之前都是直接用别人的框架,但这次轮播图的要求稍微有点不一样,得是圆角的且可同时显示多个...

  • 移动端swiper轮播图

    完整轮播图: spaceBetween:轮播图每张图之间的空格,设置为0就没有间距autoplay:自动轮播-- ...

网友评论

    本文标题:设计好轮播区,就这3点

    本文链接:https://www.haomeiwen.com/subject/rhlejttx.html