写在前面的话

极客时间的专栏读者你好,我是邱岳。

我们在之前的产品会客厅中,分享了产品经理如何从一个App入手,去研究和学习。有朋友给我们留言,说希望可以用一个App从头演示一下。这次我们用“极客时间”App作为例子,一起研究一下。

由于篇幅有限,我们就不按照之前说的整体逻辑全部过一遍了,我们着重来看信息架构方面的拆解和分析,其他的部分就留给你自己来发挥。

邱岳分享

首先我们打开极客时间的App,这个结构大家应该都已经非常熟悉了,共有三个Tab页。

第一个是首屏,它是一个根据运营属性的一个页面,第二个是知识产品的一个索引和列表,它就是一个跟信息架构直接相关的一个结构,第三个是个人中心。

我们直接从第二个Tab页看,因为它背后的东西,就是极客时间App里的所有的概念实体。

在App里面,其实有四种不同的知识性产品,它们是文字专栏,视频课程,每日一课和微课,接下来我们去看每种知识产品的信息结构,以及它的设计是怎样承载信息结构的。

文字专栏的信息架构

首先我们来看文字专栏。如果我们来看一个没有买过的文字专栏,可以发现一个信息页面,我们可以在这里进行订阅,通过信息页可以进到免费试读,通过免费试读,可以再进入到Detail页,在Detail页我们可以完成订阅。

我们再去看一个买过的专栏。因为订阅过,它着陆进来之后是一个更详细的信息页,在信息页里,我们直接就看到了信息的List,还可以点进去直接听音频,这个信息页的结构跟之前不一样,是一个已购信息页的结构。

大家可以注意到的是,它的样式是完全不同的,大家记住这一点,因为我们再看下一页产品类型的时候,还有些不同,我们从已购信息页也可以进入到Detail页,这个是专栏整体信息架构的一个组织。

视频课程的信息架构

我们再去看视频课程,首先我们还是看一个没有买过的视频课程,大家可以看到视频课程Nginx课程,我是没有买过的,一进来跟专栏页面类似,也是一个信息页,信息页可以去看课程信息,以及课程类目,点击免费试看,它直接进入视频页的播放页面,也就是进入到Detail页面。大家可以看到这个信息页,同时肩负了呈现视频课程的简介信息以及目录,也就是视频课程List的两个职责。

我们再去看一个已经买过的视频课,有趣的是在视频课程里,已购和未购它的着陆的信息页的结构是一样的,只不过默认缺省的Tab页,如果是已购的话,会直接放到课程目录里边,如果是未购的话,是放在课程信息里面,这个页面是通用的。

它的路径也是一样的,我们可以从产品目录里面点到“开始学习”,或者点某个具体的课程,跟刚才的免费试看是一个结构的详情页,也就是说,在视频课程里面的结构,它相对来说比较简单,也比较统一。

但在专栏里面,我们刚看到它的信息架构不是非常一致的。尤其是看我们打开一个未读专栏的免费试读,就是这个页面,我认为是从整个信息的逻辑结构来说,稍微有一点突兀。

当然我一定要在这说明一个事情是,千万不要把App设计和画出来的逻辑图完全划等号,我们不可能说逻辑图是它的下一级,它是它的下一级,我们就把所有的入口和它的路径就按照这个逻辑图去排布,这是会有问题的。

如果我们根据信息架构去设计的话,整个App看起来会非常死板,很没有意思,就好像是一个很大的黄页一样,我们一定要去根据场景做设计。

我不知道极客时间的产品经理是不是有意去设计了这样一个路径,去帮助文字性质的专栏去做落地和转化,因为我猜测,有可能是文字和视频的专栏,用户的转化路径和理解的过程可能是有不同的,所以说会有这样不同的设计,不过,我个人更为喜欢视频课程这种统一和简洁的设计 。

社群的设计

我们还可以去看有一个有意思的事情呢,我不知道大家有没有注意到,当专栏已经购买后,专栏的已购信息页中,有“进入社群”的一个路径,这里面是与专栏相关的用户交流社区。

这其实是一个信息架构的取舍。

我们在打造社群,或者设计社群的时候,我们有可能会考虑把社群提到整个信息架构之外,也就是说可以看到这里有专栏、视频、每日一课,这一类都是知识产品,与它们并列的叫社群。这个社群就是一个更偏向于泛化的,是面向整个极客时间的一个社群。

同时我们还可以选择把社群对接到专栏这里面,也就是我们可能为一个专栏组织一个社群了,为整个专栏组织一个社群,也有可能就是像现在这样的设计师为每一个专栏定义一个社群,这都是在信息架构上的选择,

当我们决定了社群不是放到知识产品并列的这个位置,而是放到了某一个专 栏下面的时候,我们的路径就是从已购的信息页进入到社群里面去,它的入口在设计上必须跟信息架构的设计是吻合的,那也就是放在已购信息页的右上方,这样的设计是没有问题的。

音频的设计

除了这个之外,大家还可以看到,在所有的信息架构之外,还有一个东西就一直停留在右上角,这其实是极客时间的一个音频的控制系统。

比如说我们随便打开极客新闻去读一下本周新闻,然后它就会在右上角有反应,你会发现不论我们去到哪里,这个东西都是一直在上面,就是凌驾于整个信息架构之上的。

这种设计在音频类型的App里面是非常常见的,就是有一个能够凌驾于整个信息架构之外的设置机制,无论别的地方是否在转场,它也不会受到影响。

当然,除了音频这样的App形式之外,我们也经常会用到类似的这样的设计,比如把一个跟运营相关的东西,或者把一个我们希望独立于整个信息架构之外的控件,我们把它提出来。

在极客时间里也有这种例子,今天是双十一有运营活动,所以当我们点到专栏的详情页之后,我们会发现这里就有一个“特价拼团”的浮窗。你可以点进去利用它做拼团。

这个东西跟它的整个购买流程相不相关?也是相关的,但是你很难把它插到某个具体的结算页面,或者某个信息架构深处,因为它可能不具备特别强的抓取流量能力,所以说我们就用这样一个设计把它提出来,这是一个很常见的东西,大家也可以在自己的App里面去用。

个人中心

说到这里,极客时间还有一个设计是整体的专栏索引,当我们想要看订阅过的专栏,我们可以进入中心页里去看已经买过的专栏。

同时,在这里有一个我觉得是设计上的挺有意思的东西,在“已购”里有“每日一课”,但是,在个人中心里面又有单独的“每日一课”入口。

就像我刚跟大家说过的,并不是“每日一课”是“已购”的下一级逻辑,就一定把“每日一课”放在“已购”里,这就是为了满足某些用户使用的场景,我们很可能把下一级的实体提到跟它同级,这在设计上没有问题的,但是我们要把场景考虑清楚,才能这么做。

一些需要优化的地方

还有一点,我们刚刚是在第二个Tab页说到了整个极客时间的知识产品之间的信息架构和逻辑关系。但是我们首次点进来,肯定会进到第一个Tab页。

这里地方有一点小问题,我个人觉得应该去调整。我们看见“推荐阅读”下面是专栏内容,“热门课程”是视频课的内容。但是刚才看过第二个Tab页的列表后,我们会发现这里突出的内容和是有点不同的。

这样放的话,是很有可能让第一次来到这个App的用户感到有一点困扰的,像这“推荐阅读”,这有“热门课程”,“推荐阅读”和“热门课程”的内容会不会重复呢,这其实是一个有一点交叉的概念。

并且,我们看热门课程里面是视频,每日一课里面也是视频,在这个整个App最下面又有一个视频合集,尚不了解极客时间信息架构和它背后的概念实体的时候,我可能会把这几个东西混淆,我们就会以为在视频合集里面有可能有“每日一课”的视频,以及视频课程的视频,但事实上这里面并没有。

当然这些并不是严重的问题,只是我在使用的过程中,被困扰到的一点小细节,也许这样的设计带有运营的属性,大家也可以分享并探讨一下。

那我们今天对于极客时间信息架构的分享先到这里,不知道这个过程对你能不能有什么帮助呢,你可以留言分享,我们下期再见,谢谢。

精选留言

恭喜幸运用户@功主i ,你的留言被抽取成为本周的精选留言。极客时间将送出价值68元的极客福袋一份。1个工作日之内,工作人员会与你取得联系。

本期讨论

你是否有过类似的App体验呢,有没有一些新的发现和线索,可以留言与我分享,我们一起讨论。