CategoryResourceRepost/极客时间专栏/邱岳的产品实战/模块四：产品会客厅——场景化处理你的产品疑难杂症/产品会客厅 | 从“极客时间”App的信息架构上，我们能学到什么？.md

## 写在前面的话

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

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

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

## 邱岳分享

<video poster="https://static001.geekbang.org/resource/image/1d/8b/1dcadb76081aaef29d4515bbd661098b.png" preload="none" controls=""><source src="https://static001.geekbang.org/resource/video/02/a0/02f23f509a22e931764c2031684f0ba0.mp4" type="video/mp4"><source src="https://res001.geekbang.org/media/video/02/a0/02f23f509a22e931764c2031684f0ba0/sd/sd.m3u8" type="application/x-mpegURL"><source src="https://res001.geekbang.org/media/video/02/a0/02f23f509a22e931764c2031684f0ba0/hd/hd.m3u8" type="application/x-mpegURL"></video>

首先我们打开极客时间的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个工作日之内，工作人员会与你取得联系。

<img src="https://static001.geekbang.org/resource/image/92/7d/925b3173b285d34d844c79e92b3a717d.jpeg" alt="">

## 本期讨论

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