# 从 0 做出一个 App，要经历这 8 个阶段 \| 灵感早读

- 作者：APPSO
- 发布时间：2016-12-27 08:11
- 原文：https://www.ifanr.com/app/766587

![shutterstock_426119650](https://s3.ifanr.com/wp-content/uploads/2016/12/shutterstock_426119650.jpg)

> **A 君导读**：今天 AppSo（微信号 appsolution）分享的这篇文章，不是产品设计的某个原则，而是一个 app 从创意到成品的历程。希望能让各位从整体角度了解一个 app 产品，是如何炼成的。
> 
> 作者恽磊，[风泽科技](http://www.fenzotech.com/)有限公司运营总监。他带领团队经历了产品从 0 到百万用户的全过程。相信他的经验心得，能对各位有不一样的启发。

![414c7873c4ee2821af2bd9d64bc52ccf_b](https://s3.ifanr.com/wp-content/uploads/2016/12/414c7873c4ee2821af2bd9d64bc52ccf_b.jpg)

App 的开发过程主要分为以下阶段，本文会按顺序为大家简单地说明：

1. **需求梳理、分析**
2. **产品原型图绘制**
3. **UI 设计**
4. **项目经理 & 技术负责人对接需求**
5. **技术方案 & 架构设计**
6. **项目排期 & 任务分解**
7. **产品研发阶段**
8. **交付测试阶段**
9. **最后，按原计划上线**

### 第一步：需求梳理、分析

针对这个 idea 来一场从内到外的洗礼，在此假设用户需求分析已经确定，接下来根据提炼的真实用户需求来确定产品需求。

产品经理将会根据沟通中的相关资料的 Word、PPT、jpg 等等东西翻译成逻辑语言。最简单的就是产出一张产品功能脑图或者一份功能列表。

![065ec654d345a3f472b9bff4c4989b84_b](https://s3.ifanr.com/wp-content/uploads/2016/12/065ec654d345a3f472b9bff4c4989b84_b.jpeg)▲产品功能脑图

![ad1b5b5d0f4b2a75f5a7f2f335311f65_b](https://s3.ifanr.com/wp-content/uploads/2016/12/ad1b5b5d0f4b2a75f5a7f2f335311f65_b.jpeg)▲一份功能列表

### 第二步：产品原型图绘制

初步产品功能需求梳理清楚之后，产品经理持续跟进，反复沟通确定产品原型图。

PS：我们出一般是全局流的图，程序员哥哥们比较喜欢（白眼）。

![0d17460a1d71a1a25b27ea86955c47b7_b](https://s3.ifanr.com/wp-content/uploads/2016/12/0d17460a1d71a1a25b27ea86955c47b7_b.jpg)▲产品原型图

同时根据具体的项目需求，会搭配一套产品业务流程的泳道图：

![31c3dacebb6c5ebedcb90aad4526ee2f_b](https://s3.ifanr.com/wp-content/uploads/2016/12/31c3dacebb6c5ebedcb90aad4526ee2f_b.jpeg)▲产品业务流程的泳道图

常规的是用 Axure 出一份带简单交互的原型：

![015d0394dab73dc17858c5be54807a88_b](https://s3.ifanr.com/wp-content/uploads/2016/12/015d0394dab73dc17858c5be54807a88_b.jpeg)

![1d9bf179a31271a871450a0f467c285b_b](https://s3.ifanr.com/wp-content/uploads/2016/12/1d9bf179a31271a871450a0f467c285b_b.jpeg)▲简单交互的原型

简单点，用墨刀做一份带交互的原型。

![2bec5c40e6a6ae32cab32724a33fdddb_b](https://s3.ifanr.com/wp-content/uploads/2016/12/2bec5c40e6a6ae32cab32724a33fdddb_b.jpeg)▲墨刀带交互的原型

### 第三步：UI 设计

UI 设计，包含风格稿和内页设计。

**风格稿会根据产品需求提供的目标用户类型、客户倾向、LOGO 等信息，以及确定做风格稿的 2-3 个页面的原型图，来进行风格稿设计。**

待风格稿确认后进行内页设计，包括设计效果、页面元素、弹出页面等等。

![6de081bb0d497fa68661be44c7b386a0_b](https://s3.ifanr.com/wp-content/uploads/2016/12/6de081bb0d497fa68661be44c7b386a0_b.jpeg)▲风格稿

![9778303b052497174b550ba143c7d909_b](https://s3.ifanr.com/wp-content/uploads/2016/12/9778303b052497174b550ba143c7d909_b.jpeg)▲风格稿

所有页面设计完后会统一发给客户做进一步沟通，然后统一修改优化。

![0067725a683f90d4ac4c1173bcbabae4_b](https://s3.ifanr.com/wp-content/uploads/2016/12/0067725a683f90d4ac4c1173bcbabae4_b.jpeg)▲Zeplin

Zeplin 能够帮助前端更好地理解设计师意图，而设计师又能快速得到前端反馈的协作，从而减少设计师与前端的沟通错位，使得两者在「界面元素」和「交互动作」上形成一致。

![52abe6968b2b7b3fde8943c88a461f60_b](https://s3.ifanr.com/wp-content/uploads/2016/12/52abe6968b2b7b3fde8943c88a461f60_b.jpeg)▲Zeplin

InVision 用于设计先行能减少后端技术工程问题，设计的迭代越快，软件开发就越能在时间点的把控上做到极简。

![b2d92bbec1d655b7ec2cd033204afed2_b](https://s3.ifanr.com/wp-content/uploads/2016/12/b2d92bbec1d655b7ec2cd033204afed2_b.jpeg)▲invision

设计定稿后并不是设计师的工作结束了，之后还有一段周期的切图、标注工作。

![dec73cab070cd39f8cfad787b35c9c2b_b](https://s3.ifanr.com/wp-content/uploads/2016/12/dec73cab070cd39f8cfad787b35c9c2b_b.jpg)▲标注

![73cc84c7658c3f738c4fa058e6331364_b](https://s3.ifanr.com/wp-content/uploads/2016/12/73cc84c7658c3f738c4fa058e6331364_b.jpeg)▲切图

![f29697a944e741242c8dd9984d96d172_b](https://s3.ifanr.com/wp-content/uploads/2016/12/f29697a944e741242c8dd9984d96d172_b.jpeg)▲Sketch

多维度运用 Zeplin、Sketch、InVision 等等协作工具从细节上诠释产品开发的每一个产品需求，在时间上保证高效，在结果上保证了产品技术层面与设计层面的完美融合，以及项目的高效进度和最后的优质呈现。

### 第四步：项目经理 & 技术负责人对接需求

项目经理对接上这些需求，**第一个工作是细化需求**，将这些翻译成技术能更好理解地语言，搭配着原型图或设计稿来召开技术会议，统一讲解新项目的需求。

![d6266b2d1f5790c78172e2e1a5831d6e_b](https://s3.ifanr.com/wp-content/uploads/2016/12/d6266b2d1f5790c78172e2e1a5831d6e_b.jpeg)▲细化需求

### 第五步：技术方案 & 架构设计

技术负责人在清楚了解整个项目的需求之后会开始构思整个项目的技术方案，根据产品需求，提供易扩展、可持续迭代的技术框架方案。

![5ac65d6083cae385ab88928907b666ec_b](https://s3.ifanr.com/wp-content/uploads/2016/12/5ac65d6083cae385ab88928907b666ec_b.jpeg)  
▲整个项目的技术方案

![e0756b26129a2def76b6ba1bd5822d82_b](https://s3.ifanr.com/wp-content/uploads/2016/12/e0756b26129a2def76b6ba1bd5822d82_b.jpeg)▲可持续迭代的技术框架方案

### 第六步：项目排期 & 任务分解

同时，项目经理在和研发团队沟通确认后对项目进行分解以及排期，以此来保证项目进度和质量。

![b917d5c183fac821dbdd9c752f400cd7_b](https://s3.ifanr.com/wp-content/uploads/2016/12/b917d5c183fac821dbdd9c752f400cd7_b.jpeg)▲项目管理

### 第七步：产品研发阶段

这个阶段就是各端技术按照排期规划开始编码，期间各种对接、调试以及撕逼。我不是程序猿，这块就不多写了，贴几张他们技术 Wiki 的截图吧。

![06e867e413698e4fb8603261b458a855_b](https://s3.ifanr.com/wp-content/uploads/2016/12/06e867e413698e4fb8603261b458a855_b.jpeg)▲Wiki 对接

![9260e92d622378e019ab2c11e8bf632c_b](https://s3.ifanr.com/wp-content/uploads/2016/12/9260e92d622378e019ab2c11e8bf632c_b.jpg)▲Wiki 对接

Paw 让测试 API 变得轻松愉悦，可以构建内部和外部的资源。**它可以在不同的环境下进行测试，也可以引用来自其他请求响应的数据**。

![70f2a23626dc5bfea7f77d469dba2b3e_b](https://s3.ifanr.com/wp-content/uploads/2016/12/70f2a23626dc5bfea7f77d469dba2b3e_b.jpeg)▲PAW

它可以定义不同的环境，于是可以轻松地在开发、临时和生产环境中进行切换，而无需重新配置任何端点（endpoint）。并且还可以在一个请求的消息体中引用另一个请求中返回的值，这能够节省大量时间。

### 第八步：交付测试阶段

测试工程师基本全程跟进，从最早期对接完详细产品需求之后就开始编写测试用例：

![7d03c2fd4a80fe950de03ef81e7788e6_b](https://s3.ifanr.com/wp-content/uploads/2016/12/7d03c2fd4a80fe950de03ef81e7788e6_b.jpeg)▲测试用例

然后配合项目各个里程碑节点进行功能测试和性能测试，将问题按优先级划分统一反馈：

![b793ab67230ec7d53b08ea226252e69e_b](https://s3.ifanr.com/wp-content/uploads/2016/12/b793ab67230ec7d53b08ea226252e69e_b.jpeg)▲测试过程

### 最后，按原计划上线

以上均是理想情况下，一个 app 必经的几个阶段的简洁步骤说明，具体执行依然会根据需求穿插进行。

**不同的项目管理模式或许会有完全不同的流程步骤，但是专业性几乎是保证产品质量的唯一准则。**

接下来我会在 AppSo（微信号 appsolution）分享「做一个 app 到底要花多少钱」以及「为什么要花这么多钱」，请大家继续留意。

题图来自[站酷海洛创意](http://www.hellorf.com/)

文章授权转自 Fenzo Tech（微信号 fenzotech2014），原文链接：[我有一个 App 创意丨如何将其实现？](https://zhuanlan.zhihu.com/p/21719921)

**本文由让手机更好用的 AppSo 精选推荐，关注微信号 appsolution，回复「头像」看产品让用户上传头像的 4 个常用方法，你遇过几种？**

![AppSo qrcode signature](https://s3.ifanr.com/wp-content/uploads/2016/09/AppSo-qrcode-signature.jpg)