产品研发的三个阶段
最后更新于：2022-04-02 08:02:49
## 产品研发的三个阶段
// 
软件发展到现在已经标准化，工程化了。
> 根据**流程和参与成员的角色**，将一个产品从立项，讨论需求直到开发完成到上线的全过程分为三个阶段。
**第一阶段（产品经理）：** ider，市场调研，需求讨论/确定，手绘图/稿，原型图；
**第二阶段（UX/UI设计师）：** 手绘图/稿，线框图，视觉稿，（高）低保真线框图，高保真设计稿，设计稿；
**第三阶段（程序员）：** 根据前两个阶段得到产品的逻辑和界面设计进行代码开发，出demo，出成品，不断迭代；
原型图：主要是前期确定产品逻辑用的，主要是项目经理控制的。
设计稿：UX/UI设计人员根据产品前期讨论确定下来的需求，即原型图来设计的。设计稿需要比较专业。对开发人员来说最重要的就是设计稿，设计稿是开发阶段所依赖的，设计稿包含高保真素材，开发人员最终是拿到高保真设计稿并还原成UI界面的。
所以不同阶段所需要的角色，一个产品的成型背后还有这些东西的身影。
#### 各个阶段所使用的工具、软件
第一阶段：需求管理，文档管理，原型图设计，Visio，Xmind，Axure，墨刀，Mockplus
第二阶段：UX/UI设计师，Photoshop，Adobe XD，Sketch
第三阶段：Visio，Xmind，Doc，Git，xxIDE，Sublime Text，Linux，PHP，Mysql，DevOps，……
>[danger] （用于做原型（设计稿/设计规范/设计规格）的设计软件必须要有`自动贴合`，`自动对准`，`微调/自动调整`，`标尺`，`度量值`，`自动标注`等功能，这很重要，不然手动对准很难调整对准这些尺寸，难免会有偏差，也不标准。对于设计来说，需要专注于设计本身，而不是这些繁琐又容易出错的事情。）
* * * * *
### 扩展
[Sketch和Axure画原型，哪个好用？-UI中国-专业用户体验设计平台](http://www.ui.cn/detail/114866.html)
> 总结一下，如果想表现产品的业务流程，那么我建议使用Visio来绘制流程图。如果想表现产品的页面图文布局和页面的跳转关系，我建议使用axure。如果想表现产品的信息架构，我建议使用Mindmanager或Xmind。如果想表现产品的视觉层，包括圆角＋投影＋布尔运算画icon，我建议使用Photoshop或Sketch来作图。
[error 69: -1: -1 when uploading design | Adobe Community](https://forums.adobe.com/message/10511750#10511750)（解决无法上传：`error 69: -1: -1 when uploading design` 问题的讨论）
[Adobe XD CC_Xd中文网](https://xd.94xy.com/)
[Adobe XD如何标注 标注插件_Adobe XD CC_Xd中文网](https://xd.94xy.com/zuixindongtai/57.html)
[PxCook - 最高效易用的自动标注工具，设计研发协作利器](http://www.fancynode.com.cn/pxcook)（自动标注工具，生成前端代码, 设计研发协作利器）
[FancyNode](http://www.fancynode.com.cn/)（设计软件）
[Framer教程 | Framer & Sketch: 一个有意义的工作流 - 简书](https://www.jianshu.com/p/fa86de31cb63)
[Cutterman - 为设计更专注](http://www.cutterman.cn/zh)
[Cutterman - 最好用的切图工具](http://www.cutterman.cn/zh/cutterman)
[运维开发融合 - CSDN博客](https://blog.csdn.net/u010098331/article/details/52825223)
[优秀的设计资源 · 产品设计 · 看云](https://www.kancloud.cn/xiak/product/643133)
[教程 | 与程序员进行高效沟通，三分钟带你掌握Zeplin](https://www.sohu.com/a/212650557_100087428)
[UI设计教程：APP切图适配规范](https://www.365yg.com/a6337139493007556865#mid=5891797386)
> 设计眼中的程序员，看她们切图时是怎么想我们的。
>
> 2倍图应该是制作时就按照最大的尺寸制作，不然放大的二倍图会模糊，不过缩小的倍图不会失真吗，这样的话岂不是制作时就要制作多份，还是这个导出多倍图并不是简单的缩放处理，不会导致模糊和失真吗。
[我有一个 App 创意丨如何将其实现？ - 知乎](https://zhuanlan.zhihu.com/p/21719921?refer=fenzo)
> 1. 需求梳理、分析（产品功能脑图、一份功能列表）
> 2. 产品原型图绘制（产品原型图、产品业务流程的泳道图、简单交互的原型）
> 3. UI设计（风格稿、标注、切图、sketch）
> 4. 项目经理&技术负责人对接需求（细化需求）
> 5. 技术方案 & 架构设计（整个项目的技术方案、可持续迭代的技术框架方案）
> 6. 项目排期 & 任务分解（项目管理）
> 7. 产品研发阶段（Wiki对接、PAW）
> 8. 交付测试阶段（测试用例、测试过程）
> 9. 最后，按原计划上线
>
> 以上均是理想情况下，一个App必经的几个阶段的简洁步骤说明，具体执行依然会根据需求穿插进行。
> 不同的项目管理模式或许会有完全不同的流程步骤。但是专业性几乎是保证产品质量的唯一准则。
* * * * *
### Adobe XD笔记
#### 框线、路径线、符号线之间的区别
**框线**只能按住顶点对元素进行横向和纵向上的缩放调整（只有在按住shift时为等比缩放），而**路径线**则更加灵活，可以通过随意拖动路径顶点来使元素变形，**还可以在元素边上点击添加更多的路径顶点（强大）。**
元素的框线和路径线颜色都为淡蓝色，**符号的“框线”为绿色，我们把它叫做符号线（符号线始终为正形矩形）。**
路径线默认有一个顶点为选中实心状态，可以根据这点区分路径线和框线的区别。
框线在元素为选中状态下就会显示，此时可以通过框线对元素进行调整。而路径线只有双击元素，使元素处于“激活状态”时才会显示。（单击符号元素选中的是符号元素本身，双击符号元素选中符号下面的第一个元素，当然也可以通过图层面板来快速进行操作）
任何元素都有:hover效果，鼠标移上去元素上会有一层正形矩形的轮廓。符号元素的轮廓颜色为绿色，其它元素为蓝色。
所有非符号的元素右键【制作符号】都可以制作为符号，可以同时选中多个元素一起制作为符号。
符号是一种特殊的元素，符号下面有其它元素。
实验：点击选中符号元素，显示绿色的符号线，再双击显示选中下面的元素，此时显示淡蓝色的框线（外层的符号线变粗变透明了一点），继续双击，元素变为“激活状态”，只显示路径线了，现在可以进行路径调整了。
任何XD项目中的元素（也包括路径、符号）都可以无缝复制到其它新项目中再次进行调整。实现了跨平台分享的能力，更重要的是XD竟然能打开sketch和ps的文件，这让我们有展望XD一统江湖的前景了。
强大！
~~~
之前错误短浅的理解
符号元素没有路径线，所以不能在对它进行形状上的改变了，但是依然可以通过框线进行横向和纵向上的缩放调整。（错！还可以继续双击是元素为“激活状态”显示出路径线再进行调整，任何元素都可以再变形）
~~~
* * * * *
last update：2018-7-24 19:12:00
';