UED 设计流程与原则

UED 设计流程在各个公司之间可能存在不同，国内的设计师在知乎社区上讨论了各自公司 (包括腾讯、百度等) 的 UED 设计原则、流程等，其中的经验值得读者借鉴。

来自腾讯的交互设计师 eviliu 强调设计流程主要考虑两方面的问题：一是设计原则从何而来，二是如何配合设计的上下游团队。就设计原则来说，从四个方面进行了阐述：

• 始终将用户体验放在第一位——在设计流程中将用户体验融入其中，将其贯穿于设计的始末，使用户体验的结论能够直接影响到设计的方向。同时设计过程中通过展开脑暴、竞品分析、焦点小组等方式对设计需求进行深入的挖掘，需求从何而来，为什么会有这样的需求，准确把握设计的方向。
• 细化分工——在设计流程中，将设计任务分解为用研、交互、视觉，各个角色职责明确并相互配合，在各领域有专业的表现。
• 引入专家设计师和项目 PM——专家设计师通过设计评审，将自己的设计理念传达给设计师，引导设计方向，把控整体项目的质量。项目 PM 对项目进度、需求任务、设计人力的把控，保证设计工作有条不紊的展开，并最终完成项目目标。
• 设计规范的建立——设计项目完成后，设计师对设计内容进行规范文件的梳理，保证设计理念的沉淀以及风格的统一。

就“如何配合设计的上下游团队”，eviliu 认为应该从以下几个方面来采取措施：

• 参与产品的前期规划——把握产品的规划与目标是后期设计工作展开的重要依据。
• 产品与项目 PM 接洽，需求排期——通过对设计需求进行排期配合产品开发的节奏，保证项目的顺畅。
• 体验走查和可用性测试——设计完成，跟进开发实现，实现输出中，进行体验走查和可用性测试，保证设计实现的质量和是否否和用户的预期。

除此之外，流程的实施也是必须要重点关注的：

• 有效的管理工具——好的管理工具能够帮助团队规范化管理。我们为自己量身打造了一系列工具来提高设计管理效率，如 Prowork 工具，能提供项目流程、工作任务、文档等一系列线上管理。还有 TAPD、UID 等一系列工具。
• 敏捷式项目管理——通过关注设计效率，改进工作方式，修正设计流程促使团队高效、快捷的响应任务。
• 提炼式操作——针对不同的产品预期与目标，灵活操作，设定不同的流程路径。
• 持续改进——定期对项目流程回归、探讨，调整是非常重要的。

百度的李书福则谈了细节上两点很深的体会：

• 用户研究——每完成一次对用户的深访，回来当天需要在组内做一次简报。相互述说今天调研的情况，让参加的极大的追溯调研中的一些洞察，让没有参加的也能感受到调研中信息探索的过程。
• 产品设计——不论是视觉设计，还是交互，完成的第一稿都需要讨论，完善及迭代优化。同时提升设计师对产品思考深度与广度。

FaceUI 的朱佳明结合自身的项目经验，描述了一个比较清晰的设计流程：

1. 产品应用分析。在设计启动之前先了解产品应用，明确产品的用途及市场类似应用概况，再精心计划下一步的工作，因为在设计最初做改变是在整个过程中付出代价最小的。
2. 概念设计。通过对产品的了解，创意设计人员或者项目经理形成初始概念，将交由文案策划完成第一步设计文档，或者由创意总监或项目经理直接精华概念。
3. 可行性研究分析。根据市场行情与产品应用综合评估技术可行性、社会可行性及风险因素，并制定规避风险对策。
4. 用户需求详细解读。设计团队项目经理与产品经理详细核对需求，以用户为中心，让用户体验实际指导设计方向与流程规范。实际操作中还可以组织设计小组人员一起深入挖掘用户需求。
5. 设计实施。

• 交互设计。交互设计师需要先开展设计工作，进行产品架构评估 / 主逻辑设计、界面原型设计、原型可用性测试等，将用户研究与需求解读结果在产品上展现出来。
• 视觉设计。视觉设计师作为前端设计人员，却在工作流程的后端，他们需要进行产品形象分析、风格定位、视觉方案定稿、视觉效果原型、视觉设计完成。

6. 可用性测试（易用性测试）。这个步骤必不可少，主要内容包括：计划可用性测试、可用性测试实施 、处理可用性测试、分析可用性测试数据 、编写与演示可用性测试报告、逐条探讨报告中的建议是否采纳。
7. 产品发布。这个步骤是客户来完成，但是对于设计团队，也算是令人兴奋的一件大事。

另外一位设计师 diff 也勾勒出了一个完整的设计流程，包括九个方面：

1. 产品找茬。前提：读懂 PRD。确保在需求理解上，与 PM 保持一致。查找遗漏。人无完人，再成熟的 PM，也难免有疏漏。找出遗漏，与 PM 反馈、沟通。提出产品新想法。读 PRD 时，总会有一些产品的好想法冒出来，及时与 PM 和团队沟通。开始构思交互。
2. 草图快速沟通。通过草图，快速将“产品关键流程”、“关键交互及界面布局”呈现纸面，以此与 PM、技术沟通至达成共识。目的：再次扫遗漏； 收拢想法；达成共识。
3. Wireframe 表现产品流程、界面，包含：产品流程图；全部的页面原型。Wireframe 让团队对产品的理解无异议，对最终的产品有直观的了解。这个阶段，产品需求冻结。开发人员可以依据原型对 UI 关联较小的部分进行技术开发。
4. 视觉设计。有前面两个“扫清障碍”的过程，这个阶段，视觉设计是非常舒服的事情…在有相对完整的设计规范、控件规范的前提下，视觉包括：风格探索、关键页面的视觉设计、关键的交互动画表现。
5. 视觉素材输出、设计文件标注。素材用 Dropbox 或酷盘存储、管理。Markman 是不错的标注工具。
6. 整理、提交设计方面待数据验证的跟踪点，主要包括：待验证的产品功能点、设计过程中争议比较大的部分（产品、交互、视觉）、设计师没有完全把握、需要数据验证想法的部分，比如：“点击式的菜单”与“下拉手势式的菜单”，哪个更被用户接受？
7. 设计文件整理、新的设计控件入库，主要包括：整理设计文件，方便团队其他人查阅、使用；将设计过程中产生的新的控件，纳入控件库，更新控件设计规范。
8. 开发后期，细节跟进。与开发跟进细节，是设计过程的一部分。在我们团队，完全依靠规范作业、设计文件标注（不和开发人员说一句话:P），能够确保 80% 的交互、视觉细节能够被还原。剩下的 20%，就要设计师与开发人员肩并肩坐在一起打磨了。开发过程中，一定要预留这个时间。主要包括：边距、字体、界面动画的数值微调。
9. 项目设计总结，包括：设计过程中遇到的问题，以及解决方法；犯的错误是？你是如何纠正的？以后如何避免？分享整个设计过程中，你最有成就感的部分。

对 UED 领域感兴趣的读者可以关注即将于 2014 年 4 月 25~27 日在北京国际会议中心召开的QCon 北京 2014 大会，讲座包括豌豆荚前端实践：从数据到用户体验、跨越不可能：让WebApp 如Native 般顺滑、 Cardkit & DOMO UI - 移动时代技术与设计的十字路口、产品设计中的逆向思维等，许多讲座都与 UED 相关。读者可点击大会主页查看详情。