感谢：ai玩酷

　　面对很多公司产品研发流程很多方面都不正规，希望自己也可以尽力去改变，通过一些总结去反思当前产品存着的问题，同时也欢迎小伙伴们一起去探讨。

　　首先，总结下在工作中产品前期我所遇到的问题：

　　第一：研发时效太短，从获得需求到产品上线，时间太短，基本就是完全不够，根本来不及去执行前期调研，最终任务目的扭曲，基本就是满足客户就ok。

　　第二：前期调研的内容没有具体输出，产品交付到UI手上基本就是一个原型，一个需求文档，这样很容易导致流程缺失以及目的不明确。

　　第三：没有交互设计环节，基本就是产品自己意想出某些稀奇古怪的逻辑。

　　第四：根本没有考虑到后期运营维护的空间，后期修改的内容，常常让UI乱了阵脚。

　　第五：环节与环节之间的交付，没有形成具体出输出，导致app研发没有形成正规流程。

　　第六：产品自身对需求的不确定，以及思考不完善导致，需求总是处于变动。

　　... ...

　　记住几点：

　　产品不只是用户界面（所谓UI），页面上显示的东西是需要后端输出。

　　始终是客户端和serve端进行数据交互，客户端之间不做数据交互。

　　做需求是，PM应该尽可能的想多、想全。具体来说就是数据库表里的字段尽可能的多，serve端没有的，客户端肯定没有；serve端有的，客户端可以选择不显示。

　　产品需要的是时刻引导用户，而不是惯着客户，往错误路上走。

　　之所以整理这篇文档，就是为了让我们更好的处理产品衔接上的问题，想方设法的从UI出发更好的去完善前期交付文件的完整性，能够完整的将前期和产品沟通内容转交给研发才是重点。

　　整篇文章我希望从首先了解整体app研发流程，喜欢到产品分工，然后在延续到UI和产品的对接上，一切的重点都是以处理好PM和UI工作衔接为重点。

　　

　　这张图概括的是整套APP研发过程，可以看出PM将是整个项目的把控者，无论是需求阶段还是研发阶段到最后的发布阶段，产品都需要时刻把控软件的质量，作为UI必须要去了解这些细节，才能在工作中做的更好的辅助。

　　先来看看一个正规的产品流程：

　　

　　感谢玩酷兄提供他们公司的产品流程，但是其实对于大多数中小企业来说这样的研发流程并不合适，其中要投入的成本将是庞大的，但是我还是很乐意将这个流程收录进来，因为这意味着将来我们一定会可以做到这样。

　　但是无法否认这张流程能够很清晰的说明产品对应的产出物：

　　

　　前期基本上这样一个文件夹是输出给ui，逻辑是这样的：信息结构图-产品结构-用户流程图-产品原型图-产品设计文档-用例文档及流程图-需求文档 。

　　标注图是给前端看的。后面给技术的就是加上设计稿和设计相关的东西。

　　那么根据产品交付给我们的文件，我们需要输出什么，如何才能保证研发出app和设计稿0误差呢？

　　正规的ui输出文件如下：

　　

　　设计稿-设计效果图（png，jpg）

　　

　　2. 源文件（psd，ai）

　　

　　3. app流程图-通过整张大图将所有界面整体串联起来形成更加直观的流程走势（png，jpg）

　　

　　4. 交互类框架图-通过整张大图阐述交互流程转换（png，jpg）

　　

　　5. 切图（png，jpg）

　　

　　6. 交互动态图-需要强调额是要是web设计就可以采用gif导出动效，如果是app建议可以借助墨刀，demoo，pixate等工具（gif）

　　

　　7. 标注（png，jpg，pxc）

　　

　　通过这样一系列的文件，就可以基本保证研发的输出app和设计稿的差距，这个文件列表也只是属于我的的一种风格了，你也可以根据自己所需进行调整，我们所做的一切都是为了保证前期设定和最终产出物一致性，但是要是你身边有一个坑货一样的产品，我相信从你像这样从自身出发去完善设计上的方案，至少APP也不会那么让你失望，当然，我更鼓励UI能够走入程序员哥哥世界，和他们直接沟通，把他们当成你的客户，倾听他们真正的需求。记住我们所做的一切，都是为了让APP的用户体验更加良好。

　　本篇文章，个人主观色彩较重，勿喷。顺便感谢群里的小伙伴给与我提供的建议。