很多同学可能会觉得，产品设计不关自己的事，产品把需求文档写好，我只负责开发就行，但是事实真的如此吗？

我记得我刚入职百度，我的领导对一个刚入职的应届生非常重视，给他起了一个外号“产品鉴定师”，就是因为这位同学经常反馈产品存在的问题。包括目前我身边很多同学，对产品有自己理解和领悟的，都比一般纯 Coding 的同学混得好很多。

所以这篇文章，并不是告诉大家，要转型当产品，而是作为一个研发，我们需要拥有产品思维。

当然，这篇文章肯定达不到标准产品设计文档的要求，毕竟我也不是产品经理，但是我还是会用我仅有的产品专业度，去告诉大家如何设计一款产品。

产品设计

承接上篇文章，经过一系列的调研，我们最终确定如下模块需要进行产品设计，其中 V1.0 是本次迭代需要做的功能。

因为 V1.0 模块非常多，我就只选取几个比较有代表性的模块，讲述我们的设计过程。

首页设计

我们最开始就需要设计首页，首页需要包括顶部的 title、标签、文章列表、侧边栏这 4 个模块。

对于顶部 title，需要包括 logo、宣传图、文章、教程、通知、个人图像等元素，这个是我们最开始设计的版本。

对于宣传图，我们最开始没有做成 4 宫格的模式，采用的是传统的侧滑图。

对于文章卡片，需要包括文章标题、摘要、头图、标签、阅读、点赞、评论、作者信息、发布时间。

对于侧边栏，包括公告、热门文章等信息，我们直接就看一下当时给出的整体设计图。

其实设计图中的元素，并不是我们自己设计的，这个是需要专业的 UI 设计师，但是我们又需要能尽快看到成品图，怎么办呢？

我就用一款设计软件 figma，将竞品的界面，通过截图的方式，组合到这款软件中，就有了上面这个首页版本的雏形。

当然，如果你们团队有专业的设计师，那就只需要产品画好原型，然后让设计师去设计，为了减少工作量，我们连原型都省略，就直接采用上面的这种模式。

文章设计

文章的内容，基本大同小异，需要包括文章标题、头图、文章内容、文章目录、点赞、收藏、评论、相关文章等。

这个就直接贴一下我们的设计稿。

对于发布文章，就是我用 figma，纯手工画的，包括每个按钮的排版和布局，小小一个界面，画了我 2 个多小时（主要是自己不会玩，边画边摸索）。

教程设计

教程的设计，基本是借鉴掘金的课程模块，包括教程列表和教程详情页。

教程列表，需要包括教程宣传图、标签、教程标题、教程简介等。

对于教程详情页，和掘金的基本一样，只是有的教程需要登录，所以教程文章往后面滑动时，会提示用户去登录，才能继续查看教程内容。

后台设计

对于后台，我们也提前梳理了后台需要支持的功能。

不过在后来的开发过程中，有的功能其实有些不变化，但是主要的功能还是保持一致的。

标准的需求文档

因为我们没有专业的产品，也没有专业的 UI 设计师，所以我们的产品方案简单粗暴。

为了让大家知道大厂的需求文档是写的，我给大家看看标准的大厂产品文档，里面需要包括详细需求，通过用户故事划分，精确到每个需求细节。

对于流程稍微复杂的需求，需要有详细的流程图。

对于需要交互的需求，需要包含产品原型图，因为 UI 设计师需要根据原型图去设计界面。

写在最后

第一次当产品，也算是一种别样的体验，不过因为我们的产品方案写得非常粗略，所以我们很多时候是一边开发，一边去优化，所以我们的几个合伙人，除了肩负研发的角色，基本都算是半个产品。

但是我们最后上线的产品，其实和最开始设计的还完全不一样，其实还是我们前期工作没有做好，这个我会在后面的文章再给大家讲，也给需要创业的小伙伴提供一些避坑素材。