体验设计SOP - 标准设计流程的5个步骤

经常从销售、运营那儿听到SOP，其实SOP适用于各个职能部门，可以用SOP的概念规范产品研发的产品、设计、开发、测试等任何一个环节。

每个公司、设计团队都有自己的设计流程，不管是相对传统的瀑布流开发模式或相对新型的敏捷开发模式；不管是大公司或小公司，设计师的称呼从UI设计师到用户体验设计师再到产品设计师，不管怎么变，其实设计流程都万变不离其宗。

标准设计流程可以像灯塔一样照亮我们的设计之路，避免拿到需求就开干、跟着感觉做设计、不会跟进检验设计等问题。

01

什么是设计SOP

什么是SOP？即标准作业程序（Standard Operating Procedure），指的是把标准操作步骤和要求以统一的格式描述出来，便于指导和规范工作。SOP是将关键控制点进行细化和量化，但需要注意的是符合团队且可执行，不流于形式。

体验设计SOP也就是标准化的体验设计流程，其实网上很多大公司的标准设计流程，但不一定就适用于自己本公司，而且设计SOP也只是提供标准参照，实际工作中还是需要根据具体的需求灵活使用。

02

设计SOP制定的目的

为什么要制定设计SOP？每个设计师都有自己的工作习惯和经验，但是不一定规范和正确，特别是当团队里有新成员加入时，如何快速介入工作？标准设计流程可以帮助新成员快速了解设计步骤，面对不熟悉或复杂的需求时知道如何开展工作？设计SOP可以帮助大家在设计时不遗漏关键步骤，明确每个节点需要做什么，重点是什么？哪些节点是必要的，哪些是可以灵活删减的？从而提高工作效率和质量，让我们的工作更高效、更规范、更明确。

03

设计SOP的关键5个步骤

设计师从拿到需求到最后上线跟踪，我们把流程分成5个关键大步骤：需求提出 - 交互设计 - 视觉设计 - 交付跟进 - 检验优化。

一、需求提出

通常由产品经理提出需求，设计师在接到需求后，首先需要结合业务诉求和用户诉求，通过拆解推导，确定正确的设计目标，从而思考设计策略，最后得出合适的设计方案。（可参考“阿里五导家方法论”）

业务诉求的理解需要我们了解项目背景、了解业务和产品目标、还要了解竞品，用户诉求的理解需要我们了解用户。在对业务和用户充分理解后，设计师需要评估需求的可行性和必要性，协助产品经理完善需求。避免有损用户体验的需求，这就需要设计师平衡商业和设计价值，尽量做到不影响用户体验，但能让商业价值最大化。

综上可见，设计师需要尽早参与讨论，至少在需求明确时就可以介入，对设计师的更高要求是能够洞见机会点，共创共建，通过设计对业务产生正向价值。

1.1 需求分析

背景分析
了解背景通常是跟产品或者业务方去了解，可以借鉴5WH分析法深入了解需求。（5W1H分析法又成六何法、还有5W2H七何法、5W3H八何法）

What - 需求是什么？产品的定位、目标、价值等是什么？

Who - 给谁用？什么样的用户？人群年龄、性别、行为偏好、兴趣特征

Why - 为什么做？想要解决什么？

Where - 应用场景是什么？用户使用习惯是什么？用户体验地图、场景特征、用户心理

When - 什么时候开始和完成？也就是排期，需求节点、优先级

How - 应该怎么做？可以先了解讨论大致思路、参考、原型等

How much - 做到什么程度？指标如何？

有时跟产品/业务方了解相关信息还远远不够，设计师还要根据需求情况进行用户/数据研究、竞品分析。

用户分析

深入了解用户，挖掘用户行为习惯，可以帮助设计师更好地了解产品和用户，从而思考更全面、具体，找到合适的设计方向和策略（方法）。

用户分析（研究）通常需要了解：用户画像、用户需求、用户行为、用户路径、使用场景等。

用户分析方法有：定量/定性分析、同理心地图、用户体验地图等。

竞品分析

知己知彼百战不殆，竞品跟踪和分析是设计师日常工作之一，竞品分析可以帮助我们很好的了解对手和行业标杆，减少思维盲区，提供可量化的标准，基于竞品做出更优秀的方案。

体验设计师做竞品分析，分析维度主要有：竞品定位、主要功能、产品结构、页面布局、交互动效、视觉设计、优劣势对比、迭代动向等。

竞品分析方法有：从用户体验五要素拆解分析，也可以从市场、商业、产品、设计等维度分析。

对齐目标

设计最终是为业务和用户服务的，设计目标也是从业务 / 产品目标和用户目标推导出来的。因此设计师在设计前一定要问清楚该需求的目标，只有知道方向才能更好更快的抵达。

设计目标可以归纳为4类：解决问题型、提升数据型、体验优化型、创新项目型，同时还要看产品处于什么阶段：启动期、成长期、成熟期、衰退期。结合业务目标和用户目标推导+拆解设计目标，针对不同的设计目标制定相应的设计策略。(推荐“悦姐聊设计”的《设计师如何推导+拆解设计目标》)

需求评估

设计师对背景、用户、竞品、目标等方面都了解清楚后，就可以帮助产品经理评估需求，判断需求的可行性、必要性、优先级等。

针对不同类型的需求：0-1产品类、产品改版类、功能新增或优化类，策略也会有所不同。

需求评估方法有：KANO模型、马斯洛需求层次分析、逻辑树、用户调研访谈等。

1.2 需求评审

设计师参与需求评审，更多地从用户、设计、体验等角度参与讨论产品目标、需求功能、使用场景和流程等；需求明确且各方达成一致后进行设计。另外，还要明确需求验证的标准和指标，从设计侧补充埋点，便于后续验证设计。

二、交互设计

交互设计要做的是如何合理组织产品内容（信息架构）？并思考如何与用户互动？设计师需要充分理解业务和目标、整体流程和交互原型，基于设计原则判断其合理性，发现可优化的地方，并且能平衡产品、设计、开发的效益，提升效益的同时也能提升产品体验。

交互设计环节并不是每个需求都需要，可根据具体需求而定，对于流程比较简单的需求，可以直接进行视觉设计，但同样需要交互分析。

2.1 交互设计或分析

设计原则
在进行设计时，需要遵循公认的经验准则，其目的是避免出现常识性的设计问题。因此设计师需要熟知各类设计准则，并能融会贯通，作为设计依据和支撑。

除了需要了解常见的基础设计规范：ios、android平台规范，还要了解常用的设计原则，比如互动设计的费茨定律、雅各布定律、多尔蒂门槛、二八原则、防错/容错原则等；界面设计的交互四原则、格式塔理论、奥卡姆剃刀原理、席克定律等。

流程梳理
设计师通过流程再梳理和分析，可以快速理解和检查流程。

在做流程设计或流程时，需要注意：

• 功能是否完整？
• 链路是否走通？是否流畅？
• 步骤是否冗余？
• 是否易于理解？

好的流程设计不仅能够帮助用户完成目标，还能给用户带来很好的体验感和惊喜。

原型优化
不同的产品经理绘制的原型图细化程度有所不同，有的很粗糙，有的很细致，甚至有的产品经理是不画原型图的。无论哪种，设计师都需要在交互设计阶段优化产品原型，考虑得越全面和细致，视觉设计时就能更顺利，避免返工。

优化产品原型的过程，需要注意：

• 信息架构是否符合目标？
  
• 层级是否足够精简？
• 信息传达是够准确？
• 状态是否缺失？

交互稿输出
经过流程梳理和原型优化后，就可以输出交互稿了。该阶段主要是抓重点，注重思考流程梳理、思考不同场景等，输出关键页面和必要说明，次要页面和功能、极限情况等都可以等关键页面确定后再补充，或在视觉设计时体现。

2.2 交互评审

交互稿完成后，需要和产品经理、业务方等进行评审，由设计师讲述交互方案，其他人补充想法和建议。根据评审结论再次调整和修改完善，补充其他次要页面、极限情况等。

三、视觉设计

交互设计确定后就可以进入视觉设计阶段了。视觉设计是用户体验的表现层，离用户最近；用户主要通过视觉、听觉、触觉真切感受到产品的外在。好的视觉设计，可以让产品会“说话”，不仅能够正确地延续上层确立的产品思路，还能传递品牌印象、提升产品吸引力，助力相关指标提升。

不同的阶段视觉设计的侧重点有所不同：

从0-1时，侧重风格定义、设计语言定义；

迭代优化时，侧重视觉稿的细节、设计语言的规范性和完整性。

3.1 视觉设计

设计情绪板
情绪板有点类似于找设计参考。在设计初期，快速地找到能够反映设计方向和风格的参考素材，可以是图像、插画、界面、草图等。将通过情绪板明确视觉设计方向，具象化表达，有助于与设计同伴/领导/产品侧各方达成相关的设计共识，以此指导具体的视觉设计。

图片来自腾讯设计《情绪板设计：助你打开设计创意》

设计情绪板通常可以这样做：

1、前期分析：分析相关背景、产品定位、用户需求、战略规划等，以此进一步分析设计方向并收集相关素材内容；

2、筛选组合：大量收集素材后，需要二次筛选并组合，确定设计方案结构（都包含哪些方面）；

3、打磨呈现：打磨并细化，检查整体风格统一性和完整性，建议每个设计方案用一页呈现，只需出2-3个左右即可。

UI设计情绪板主要包括：图形风格、配色方案、字体字形风格、构成风格（界面形态）、质感材质、插画风格、动效方向等。

设计语言
设计语言作为一种“沟通方式”，有助于内容和信息的传递，也就是设计规范，完整的设计规范可以推动后续设计效率的提升。设计语言是情绪板的具象表达，是用户体验的表现层，用户的视觉感知层。

在确定设计情绪板后（也就是确定设计方向），设计师要基于选定的情绪板去定义设计语言，基本构成要素就是形 、色 、 字 、 构 、 质 、动。

典型页面
典型页面可以代表整个产品的基调和风格，也是设计语言最直接的体现。典型页面有助于制定设计规范，确定好了后，其他页面就可以参考进行设计了。

输出典型页面时，我们需要同步去规范颜色、文字、按钮、组件、模块等，力求达成最佳效果，为视觉规范打好基础。

视觉稿输出
设计好典型页面后，可以先设计内部讨论确定，然后和业务方、产品经理简单过一遍，确定没问题，就可以以典型页面为基准输出其他页面了。全部视觉稿输出完成，还需要在交互说明的基础上补充完善设计说明。

3.2 视觉评审

视觉稿完成后，需要先内部评审，设计leader、其他设计同学一起把控设计品质，检查是否符合规范、是否有遗漏和缺失、是否能够达成设计目标、细节设计是否到位等。内部确认后再进行外部评审，设计师在讲解时一定要阐述完整，说明开发时需要注意的地方。还需要收集整理会上大家的意见，会后修改完善，最终确定方案。

3.3 组件规范

新产品和迭代产品制定组件规范会有所不同：

1、从0-1时，不用太专注规范，而是要把重点放在视觉主题、页面风格的探索和确定。其实在设计典型页面时，一套设计规范和组件已经有雏形了，在后续迭代中，就可以梳理和沉淀规范组件，形成一套完整的设计系统，提高统一性和迭代效率。

2、产品迭代时，不同的设计师都需要按照一套规范进行设计，设计规范并不是定死了不能改，需要根据项目实际情况优化和更新。

组件规范的建立方法常用到形色字构质动和原子设计理论。

基础规范
基础规范是原子理论的最小单位-原子，包括色彩、字体、间距、圆角、透明度、阴影等，也包括输入框、按钮、图标、标签等。

图标库
一个产品通常会有很多图标，制定图标规范方便图标拓展。用标准栅格绘制，定义笔画、圆角、色彩等；同时还需要规范常用的图形，比如空状态插画等。有时设计师需要设定多套图标风格。

组件库
组件库是对功能和视觉表达中元素的拆解、归纳、重组，形成规范化的组件，结合开发封装成可复用的组件库；从而保证视觉风格的统一性、交互的一致性，能够快速构建各种使用场景。

一套完整的组件库通常包含：通用、布局、导航、数据输入、数据展示、消息提醒、反馈、其他等。除此之外，还需梳理常用模块，沉淀业务组件库。

四、交付跟进

设计还原度是设计最终展现结果的体现，通常对设计还原度要求在95以上，不然设计抠细节就失去了意义。决定设计还原度的两个步骤是设计交付和验收跟进。

4.1 设计交付

输出完整的设计稿、标注、切图、动效文件、设计说明等。设计说明包含对操作流程、布局、不同状态、极限情况等进行详细说明，特别是评审中开发特别确认的交互逻辑，标注清楚可以避免歧义和遗漏，减少反复沟通确认。

4.2 验收跟进

设计验收是为了确保满足需求、体验流畅、设计细节落地到位。

开发结束后进入测试阶段，设计师就可以进行设计验收了。验收结果以走查报告在线文档对接，跟踪检查开发二次走查情况，设计还原度通常要求达到95%以上才能上线。走查报告需注明优先级，方便开发优先调整，如果在上线截止时间还没调整完，需要和开发确定遗留问题修复的时间点，后续持续跟踪优化。

五、检验优化

有始有终，设计也是如此。都说设计目标非常重要，那怎么知道设计目标有没有达成，那就必须跟进检验，未达成还需要进一步优化。

5.1 验证总结

上线后设计师需要收集相关的数据结果，可以通过埋点，也可以通过需求方、用户等的反馈评价对设计价值进行评估验证。上线不是结束，需要总结亮点和不足，加以优化；大中型项目还需要总结沉淀方法和经验，便于提升未来设计的准确性，也便于复用提效。

5.2 需求迭代

上线后设计师需要收集和发现问题，通过复盘对设计策略的价值进行总结验证，发现流程中的不足之处，制定后续的优化计划，推动或者发起优化迭代需求。

04

总计

设计SOP并不是金科律令，我们需要掌握，但也不要被框死。在实际项目的运用中，大致的流程可以保证我们的设计不出错，让设计更严谨，但不同的项目和需求，根据需求的优先级和项目的复杂度，均可根据具体情况稍微调整流程。

作者：酥酥，微信公众号：酥酥设计原文

参考资料：《让设计更有价值-设计流程指南》

https://mp.weixin.qq.com/s/7PGVN-2MrP0iNTtFSawjcw