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

# 摘要

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

# 需求的生命周期

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

1. 提出需求

参与者:需求方
涉及材料:需求文档、原型图
建议使用工具:墨刀 (opens new window)、Microsoft PowerPoint

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

1

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

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

本文建议使用墨刀 (opens new window)或者PPT来绘制原型图。

default

2. 理解需求

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

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

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

3. 细化需求

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

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

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

4. 实现需求

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

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

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

2

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

# 附录