设计师如何与程序员进行有效沟通？

[Yidadaa]

摘要

需求方如何清楚地表达自己的新需求，设计师和程序员如何清楚地理解需求，程序员如何高效地将需求落地实现，是实际团队开发工作中每天都要面对的问题。本文描述一个需求从提出到落地的建议流程，旨在提高团队的沟通效率，提高总体生产力。

需求的生命周期

实际开发都是以需求为中心，所以需求是绝对的主角。一个完整的开发流程，往往包括提出需求、理解需求、细化需求、实现需求这样几个大的阶段，本文假设一个小型团队存在需求方、设计师和程序员三个主要角色，下面将对各个阶段以及各个角色的分工进行详解。

1. 提出需求

参与者：需求方
涉及材料：需求文档、原型图
建议使用工具：墨刀、Microsoft PowerPoint

此阶段，需求方应尽可能详尽并不失条理地描述出自己的需求，并形成文档以便后续使用。本文建议需求方在需求文档列出功能要点，并辅以原型图加以解释。

原型图的作用仅仅是为了说明功能，应当尽可能地使用最简单直白的方式展现。如果提出的需求与现有项目无关，那么可以使用线框或者手绘；如果是在现有项目基础上提出，那么尽可能使用现有项目中的视觉元素来构建原型图。

当涉及到多页面跳转时，应使用相应标识如连接线、跳转标注符号等来展示页面间的跳转关系。

本文建议使用墨刀或者PPT来绘制原型图。

2. 理解需求

参与者：需求方、设计师、程序员
涉及材料：需求文档、原型图
建议使用工具：纸或者白板

此阶段，需求方组织设计师和程序员参与小型会议，需求方根据阶段一中的文档和原型图对需求进行详解，此时设计师和程序员应尽可能多地提出疑问并及时调整需求。

当各方意见一致以后，进入需求细化阶段，设计师准备提供高保真设计图。

3. 细化需求

参与者：需求方、设计师、程序员
涉及材料：高保真设计稿
建议使用工具：Photoshop、Adobe Illustrator、Sketch

此阶段，设计师着手制作高保真图像，高保真图像是最接近成品界面的设计稿，在绘制高保真图像过程中，设计师应及时就设计效果询问程序员是否有实现难度，比如某些动画效果可能会带来性能上的问题、某种阴影或者模糊效果无法用代码实现等等，这些风险应该在设计稿完成之前尽可能地消除掉，以免后续再次进行修改。

高保真图像完成后，由需求方和程序员进行review，一定要保证各方无异议后再进入下一阶段。

4. 实现需求

参与者：设计师、程序员
涉及材料：标注图、DEMO
建议使用工具：PxCook像素大厨(Windows)、Sketch Measure(Mac)

当高保真设计稿由各方review无异议后，应由设计师提供标注图给程序员，一份规范的标注图可以大幅提高程序员的编码效率，并且可以减少设计师与程序员的冗余沟通。

一份规范的标注图应当清晰地展示出设计图中各个元素的大小、位置、颜色、字号等信息。

程序员拿到标注图后，则立即投入开发。为了提高效率，此阶段应尽量避免对标注图进行修改，即设计图中的所有的修改都尽量保证在此阶段之前完成。

附录

• 在线原型工具墨刀快速上手指南
• 如何用科学的方法做出专业的原型图？
• 移动端界面标注：如何理清标注的思路？
• UI设计师在跟程序员对接的时候，需要做到哪些能让沟通最高效的完成?