【校招VIP】推推产品项目课:从脑图到原型图，重点在于功能细节和用户交互

VIP的服务，不一样的校招。大家好，我是校招VIP的大拿老师，我们今天继续商业实战项目：【推推】的小说详情模块原型图部分。在上节课中我们把脑图的逻辑讲完了，这节的原型图对产品同学来说是尤为重要的，因为它是我们对外产出重要的展示工具。但是产品同学自己做的时候，一定要注意功能点跟你脑图分析的功能点对应起来。很多同学特别是新手在做事情的时候，总是把它当成作业来做，脑图做完做原型图的时候就把脑图给扔掉了，然后原型图自己再重新的去做，这样的话是相当于废掉了脑图的功能。

我们为什么在工作中会分为脑图、原型图，甚至PRD文档呢？在工作中脑图是思维整理：有什么功能点，功能点应该怎么解决，最后怎么去办。如果脑图出问题了，整个团队进行总结哪些功能点要做，解决方案行不行的时候，大家可以很轻松地去讨论。当你做原型图的时候，如果这个功能你不知道要做，或者忘了怎么做，包括做的方法如果错误的话，那等到你做完再发现不行，页面的修改要远比文字的修改难得多，并且也浪费时间得多。所以说一定要注意原型图是依赖于脑图的进阶过程。产品新手一定要注意在做脑图的时候，能够理的多细就理的多细。

本期小说详情模块，因为它是一个定时任务的章节展示，所以页面逻辑本身不复杂，但是它的底层逻辑是稍微复杂一点的，而且这个里面有很多功能点是一些比较细节的。在考虑这个产品的时候，你就要考虑它的功能细节是什么情况，你就会发现哪怕是同样的产品，最终原型展示出来也是有差别的。这就是我们产品同学在产品能力上，包括在后面的校招或者实习的面试里面跟别人的区别。一定要重点关注“我为什么要这么做”，“为什么我做的功能点跟别人不一样”。

好，我们来看一下今天的原型图。

这个原型图只有一个页面，相对来说比较简单。上面是一个标题栏，这个并不是特别重要，我们一般来说会有一个公共的部分，把它放上去就好，主要看它的功能的页面部分。

首先呢，左边上部是一个封皮，封皮我们在设计的时候可以有两种方案。一种方案是直接用占位符，这样我们做原型的时候就会比较清楚，但是有时候为了更好看，可以给出一些典型的页面，这样放出去的好处是看的更清楚，坏处是可能会对UI同学的页面的布局或者颜色造成一定的影响啊，因为你后面放的时候可能会使UI产生一些设计的倾向性。

第二部分是它的标题。很多同学发现这里有些细节要注意。这个书名叫文体之路四个字就放开了，但是我们做产品一定要注意原型图是对外展示的，后面的开发同学，不管是前端后端还是测试UI都是根据原型图的功能去做的。那么我们尽量要给出一个比较有典型性的，一眼就能看出来是什么情况的原型图。所以这个原型图默认我们的标题就展示一行，超出使用点点点。有的产品同学会提出质疑：不能省略，省略掉的话就没有别的地方可以展示完全的书名了。所以说这个地方我们采用点点点省略的方式一定要明白为什么这么做。这个为什么就是用来写在简例上面：因为什么原因，我们采用什么方式，然后怎么怎么解决。面试官就会问“为什么别人那么做，你为什么你不那么做”。给面试官讲清楚你的逻辑，那你就是比别人可以。因为他是在正规的商业的实战中，需要考虑到思维

那我们为什么可以用点点点省略呢？实际上这里面有两个思路，一个思路是说，我们做的是订阅书籍，这个书籍的名字一般来说用户是知道的；第二个呢，我们书名一般来说要多少字，我们要提前去调研一下，大部分书籍都在十个字以内，那这个标题正常的设计里是能够完全展示的，除非那种有副标题、双标题的，但基本上看前面也能知道是什么书籍，所以说这个针对我们这种订阅为主，老用户为主的，基本上10个字够用了。有的人说如果他不知道怎么办呢？实际上我们这里的详情页并不是这个功能的最终页面。有同学说这个不是吗，详情页面都是最终页面，你怎么可能还有比这个更细的页面呢？当然有啊，是什么呢？因为我们在之前的脑图中也也说过我们自己不会做阅读，因为没有版权，早期我们做的事情就定位在核心工作上，就是做更新提醒，推推小说，一更新就通知。我可以蹦到别人家的地方上去，比如说正版园或者盗版园是吧。我们自己不做非法阅读，因为我没有版权，但是他蹦过去之后，他就可以很清楚地在阅读页看到详细信息。而且我们这个页面原本也有百分之九十七八的人，他是能够完全看清楚的，所以没有必要去设置两行展示。所以这个思路要讲到位。

第三个是它的作者名以及小说类型。小说类型呢，我们产品在原型图中已经给出了六种，如果是不在其中的五个明细里面的话，就放在第六种“其他”里面，然后这块有个订阅，订阅和非订阅是进行切换的，订阅人数怎么样？其实这个地方如果订阅人数更多的话，要做一个折叠，但是因为早期嘛，这是个创业项目，目前订阅人数肯定不是那么多，所以我们暂时就不用去考虑那一点，等到后续我们会增加这个功能点。

第四个是它的简介部分。简介部分默认三行，但是这个地方做原型的时候，发现脑图思考的部分不对。所以有的时候说脑图是一个最终确定，但是你做原型图的时候会发现有些地方可以修改。在工作的时候一定要注意，这个时候要考虑到是不是要跟其他人去商量一下，因为这个时候脑图我们已经定下来就这么做，如果到时候出问题的话，可能就要你自己承担了。

我们这里是哪个地方要修改呢，就是我们原来说在这个地方有展开收起的功能，就是原型这个介绍，我们说大部分人过来是要看到哪章更新，他不是很在乎简介，因为他已经看了一遍了，所以我们默认是折叠的。但是我希望有些新人过来，或者是有人看过我们首页、列表，发现一本书可能还不错，就点进来看一下，但是我不知道这个书籍真实的内容是什么，所以他可能会看一眼。但是实际上我们现在设计是把这个展开给省略掉了，那还是这个问题，大家做产品同学一定要注意，不要看一个很简单的变动，这个变动的后面存在的意义是什么，它的道理是什么，必须要想清楚，如果你想不清楚的话，是不太适合做产品的，产品就必须讲道理。尤其小的东西，在很多人眼里看来是个很小的变动，单作为产品这个角色，他就不能无所谓，他必须需要知道为什么要这么改，改原因是什么？

这里面有两个原因，一个原因是说，我们看了一下大部分的数据。简介部分是比较随意的，就是有的小说主要还是介绍部分比较简单，特别是一些不是很出名的书籍。第二个原因是这个书籍的介绍它一般都是副文本。副文本有很多换行回车，但是我们这个地方如果换行回车的话，省略三行，非常不好看，所以这个地方反而生成了一个新的一个需求点，要求开发同学把书目上面的副文本变成非副文本，把它们压缩起来。第三个原因是大部分人实际上不是很在意这个简介，但如果有人真想去看这个简介的话，他是可以去另外的数据去看的，所以说大家基本上看几眼，知道这个书大概写什么东西就好了，因为这个书的简介基本上是这个书在开始之前，作者写的一个框架或引言，书后面的内容跟这个简介的相关性可能没有那么大。这里面有三个原因可以去说明为什么不，所以你会发现如果不正常去看的话，你是想不到做展开还需要在非副文本和副文本之间做切换的，那这个功能就比较复杂了。

最后更新时间和最新章节。在脑图里面已经把最后更新时间规则给出来了：多少分钟前，多少小时前，几天前……最新的章节，第多少章，然后有立即阅读按钮。

这个模块原型图就是这个样子的，但是还有一些补充的逻辑，那个不在原型图部分，会在我们最后的PRD文档里面进行补充。比如说我们产品同学知道，如果这个书经常会在一个时间点，比如下午两点更新，那么这个时候有的人会提前打开这个页面，看看是不是有更新。那就有个产品需求：这个页面需要不断的进行数据刷新，要不然这个页面就不知道有没有更新。所以说我们的目的一定要明确，是为了能够给用户在一个确定的时间点内，一个非常好的及时可靠的更新提示，所以说这里面就会增加一个新的功能点。

我们推推这个项目呢，它的几个功能点虽然看起来比较简单，但是它的核心特色就是更新的及时性，后面还有个可靠性，你会发现每个点都是可以讲很多道理的，在简历上也可以写的很清楚，简历描述在后面的章节也会给到大家。

那么今天的课程就讲到这个地方，我们脑图和原型图是提供下载的，大家可以关注【校招VIP】公众号回复9510获取脑图，9511获取原型图 。