设计好轮播区,就这3点

你好,我叫大中,是一家内容类创业公司的产品总监,此前在阿里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,第一次了解是走在去支付宝大楼的万塘路上,后来有一首歌《叔叔西湖怎么走》,转眼几年我也成公司运营妹子眼里的大叔了。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容