用户体验设计的工作流程

最早的时候国内管用户体验设计师叫美工，后来升级到UI。这个体系是从国外建立起来的，但这种UI的叫法仍然不是很正确，所以笔者现将概念说明一下。

用户体验设计师（User Experience Designer，简称UXD）目前主要包含三类设计师：交互设计师（Interaction Design，简称IxD），界面视觉设计师（User Interface Design, 简称UI。国外其实叫Visual Designer，简称Visual）和动效设计师（Animation Designer）。

用户体验设计始于了解用户需求&痛点及商业目标。一般聚焦在交互设计、视觉设计和动效设计领域。向前可以触及到市场分析、用户定位、产品策略阶段；向后必然会参与产品研发、测试阶段。并且，随着设计重要性越来越突出，界面设计与品牌设计、营销宣传的交集也越来越多。

这个领域在国内发展至少已经10年了，但笔者这么多家公司看过来，还是有很多公司对UX的概念比较陌生，所以，萌生了写这篇文章的想法。

下面将简要介绍下界面设计涉及到的主要环节：

1，市场调研

市场调研一般公司会由市场部组织进行，或者找专业的咨询公司。设计师从市场研究获得的最有价值的输入包括用户的需求及其变化、产品使用中的问题、痛点、用户的期望、目标用户群的定位和变化等。

市场调研的输入一般是给整个公司（有时是集团）的，更多的是从市场空间、定价策略、销售行为、竞品分析等角度考虑。设计团队如果需要获取特定方面的输入，需要在调研开始前将要求反馈给调研团队。

2，用户研究

用户研究最基础的贡献在于统一各方对目标用户的理解。其结论不仅可以直接的指导设计，也可以用来证明设计的正确性。

设计师要关注用户研究输出的用户审美、色彩偏好、行为特征、需求变化、消费观念、产品关注点、教育背景、文化观念、技术能力、情感诉求等，这些将影响交互设计的梳理、视觉风格的定义等方面。

3，Workshop

Workshop，即工作坊。参与者可以是设计师，也可以是不同专业的人一起，取决于要解决的问题是什么。广泛应用在产品定义阶段，个人觉得它是一种非常彻底的可以想清楚整个产品怎么做的设计方法。为什么这么说呢？

Workshop实施过程中，会用到brainstorming、投票法（收敛idea）、HMW(how might we)、归类法，yes and等方法，最终的输出物可以是线框图、流程图式的解决方案，故事版（诉说用户痛点或使用场景等）等。Workshop还可以从用户（User Advocate）、乐观主义者（Optimist）、悲观主义者（Pessimist）、技术可行性（Feasibility）、点子大王（Idea Generator）这五个不同的角度提出意见，给小组团队更多的反馈，这样，结论将更加切实可行。

Workshop伊始，组织者就主题、目的、阶段、要求等一一说明，然后大家就可以分组讨论。注意在ideation 阶段，可以尽量不考虑技术、时间、工艺等的限制，这样，产生的想法会具有一定的前瞻性。

4，产品定义

我个人始终认为，优秀的产品经理关注的应该是市场情况和产品战略，而不是细节的button怎么放、此处是否需要给出弹出提示等细枝末节。

产品定义需要说明清楚的是：这是个什么产品？为什么设计它？为谁服务？解决了什么需求和问题？与市场同类产品相比，它有什么独特的价值？

其次，说明做的这个事儿时间上的大概规划。因为在公司里，一般是产品经理控制整个项目流程和节点。如果这个信息获取不到，设计师等于摸黑画图，工作无穷无尽。

再者，产品定义阶段需要get到产品的主要功能模块和基本的逻辑关系，尤其是交互设计师，一定要把这些基本信息摸清楚。否则，交互设计师的角色要么变成产品经理的小助手，随时根据他的需求变化调图；要么，变身为半个产品经理和项目经理，交互反而做不好。

同时，要确保产品经理给的输出所有相关同事是知晓的，包括项目经理、研发、测试、市场、运营、品牌等，有时，甚至包括老板。不要做各个环节沟通的传话筒。

5，交互设计

交互设计正式拉开界面设计工作的帷幕，其目的是使产品有组织、吸引人、清晰、高效和易理解。

在交互设计阶段，创意、想法和思路将被翻译成有机框架（即information architecture）和流程，以创造流畅的、关联的、富有启发性的使用体验。产品的功能将以模块、控件等形式，按照优先级和合理逻辑，一一分布在不同的界面上。

需要注意的是，交互设计师同样要具有美学意识，输出物必须是符合美学标准的。随便用ppt拼一个界面的线框图，这不叫交互设计，交互设计的最终输出是严谨的、科学的、美的。

需要特殊提到的是像竞品分析、趋势研究等是界面设计的基本功，无论在设计的任何环节都是要做的。

6，视觉设计

视觉设计紧随交互设计之后。一般当交互设计关键界面的线框图设计完成，视觉设计就可以开始了。

视觉设计不是眉毛胡子一把抓，设计工作开始于关键界面的视觉设计，由关键界面视觉设计定义整个界面的风格。为了完成这个阶段的工作，设计师需要综合考虑品牌、竞品、趋势、设计历史等因素，创造多个方案，最终抽取两个（而不是一堆，因为好的设计需要专家小组先筛选），用于做最终效果评审。

如果说交互设计偏理性，视觉设计就相对偏感性。这也就更要求视觉设计师想透彻最终自己推出来的两个方案它的设计哪个点你认为是跟产品契合的，其优缺点各是哪些，在这两个方案里，最终推荐的是哪一个。设计师要对自己的设计有信心和判断，帮助其它相关人员选出最好的方案，而不是随波逐流。

视觉设计是色彩、形状、字体等设计元素的游戏。我遇到的最多的问题是设计师埋头画图，忘了产品的初衷和期望的用户体验，最终设计毫无根据。例如，给汽车进行界面设计，直接套用平板电脑的设计处理方式，结果字体过小，layout过于均衡，用户根本看不清楚字，也够不到某些关键操作。

7，动效设计

自从Material design发布后，动效越来越受到关注。尤其是近一两年出现了一些创新的动效，如背景图的微动效等。

产品的动效也是有分类的，一般包括基础动效和特殊动效。基础动效主要是控件的动效；特殊动效则是一些相对较难实现，给用户眼前一亮感觉的动效，它是动效设计的招牌。动效设计工作我建议从特殊动效做起，它跟整个产品的调性相关。基础动效如果时间实在来不及，还可以沿用平台的默认动效。

动效要准确、及时、反馈合理，清晰的表明状态和结果。节奏要控制合理，不可太缓慢或突兀。某些动效有引导用户操作的作用，这样，要求这类动效要关联合理、动作流畅。当然，最基础的符合物理规律和逻辑规则要时刻记住。

8，研发

设计师要跟进研发，根据研发反馈，对设计做出微调。注意，是“微调”，不是大改。大改尤其是推翻重做成本巨大，而且极其打击各方士气。我们要确保的是设计是按照前期内外部多轮沟通的结论进行的，这样设计相对更客观、公正。

在研发的后期，设计师需要定期检查实现情况。App产品可以请研发同学发出apk自己安装校核。这个工作非常重要，评价设计好坏最终的节点是上市的产品，而不是交完图和动效就结束了。

9，可用性测试

可用性测试时间可长可短，取决于测试点的大小和时间。如果仅是想快速调研下A、B两个方案的用户偏向，可以通过邮箱在公司内部做一个open survey；如果想问问具体界面的反馈，可以将设计图打印，拿着图或者将电子图片放到设备里，在办公室里随机问下。一般5、6个人就能收集到很多反馈；如果是相对较大、较多的测试点，一般可以通过用户访谈、4周时间将结果输出；特大的用户测试可以请公司的用研部门或者外部研究公司一起工作，周期可能会几个月。

设计师需要掌握一些基本的可用性测试方法，如用户测试、专家小组、A、B test等。很多公司都没有专门的用研部门，所以，这部分工作其实需要设计师自己主导。

10，市场和运营

这里把市场和运营加入主要考虑到现代企业对品牌的诉求越来越强烈。所以，设计一致性的重要性就越来越突出。例如，如果app设计的很高大上，公众号却很粗糙，很明显会给产品减分。运营的相关输出物，如海报、宣传视频、广告、易拉宝、公众号、微信H5宣传页等都需要仔细斟酌视觉效果。

总结：以上是对设计流程的粗略总结。所有用户能够看到的都是设计，所以，就要求ID、graphic、interaction、CI/VI等统一，产品的调性、品牌的诉求、用户的体验、设计的理念高度一致。视觉的、听觉的、触觉的有时甚至是味觉和嗅觉一致。所以，即使我们做的是界面设计这个门类，也要跳出这个圈子思考。设计就像是在讲故事，故事要有铺垫、重点、高潮。好的故事使听着有满足感、愉悦感和情感上的共鸣，这是一个长期的磨练过程。