## 产品研发的三个阶段 //   软件发展到现在已经标准化，工程化了。 > 根据**流程和参与成员的角色**，将一个产品从立项，讨论需求直到开发完成到上线的全过程分为三个阶段。 **第一阶段（产品经理）：** 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