交互设计的三个层次

维他命

交互设计是产品工作中的重要一节，一份优秀的交互设计文档可以高效地指导开发和测试展开工作，并减少不必要沟通，有利于提高产品的产出效率。

交互设计主要是将产品经理确定的需求进行细化，并以交互文档的方式呈现，指导开发和测试展开工作，也可以理解为开发使用的文档。下面我将从三个层面来探讨下交互设计，即：产品层、概念层、行为层。

一、产品层


产品层，主要是从正常的产品设计角度，即产品链角度来分析交互设计。

在用户体验五要素中，我们知道产品经理负责战略层和范围层，交互设计师负责结构层和框架层，视觉设计师负责表现层。

其中产品经理主要是从一堆需求中，通过需求分析找到低成本高价值的需求，并确定好范围以需求文档形式呈现，这里有产品需求和用户需求。

而交互设计师主要是分析已确定的需求，站在用户体验角度将其转化为可开发的交互文档，也可以简单理解为分析问题，解决问题。

1. 分析问题


我们可以对应交互模型和用户体验地图。

交互模型应该是一开始就要分析的，即用户、场景、目标；不同的用户在不同的场景下的不同任务目标，可以衍生出多个任务流程。其中用户分析，可以理解为用户画像，即模拟出几种类型的用户，并对其基本情况有个详细描述，后面针对某类型用户时便可以使用其虚拟名称。

用户体验地图，正常来说是需要找到一群真实用户来体验产品，并将真实的体验过程给描述出来。实操上可能并没有这么完善的条件，我这边的做法是利用同理心去模拟用户，体验通过交互模型分析梳理的任务流程，并将所思、所做、所感记录下来。

所思，可以理解为每步操作前的思考，例如：看到登录页时，页面中的元素摆放会让我有哪些思考或想法。所做，可以理解为静态的时候，我会怎么操作，产品有所反馈后，我又会怎么操作。所感，可以理解为整个流程体验下来，具体的一些心里感受，好的或者不好的地方。

通过用户体验地图可以很容易的找到产品的一些隐含痛点，并通过持续的改进让产品的体验越来越好。

2. 解决问题


我们可以对应任务流程、信息架构、页面原型。

通过交互模型可以很容易得到任务流程图，我这边不喜欢将很多流程画到一张图里面，而是区分不同的用户画出在不同场景下的任务流程图，将复杂的流程图给拆分简单化，这样后面画原型时，逻辑更清晰，也不会遗漏一些页面。

信息架构图，主要是分析产品的需求文档，也可以先梳理出功能架构图，在此基础上对产品的信息架构进行设计，原则就是脉络要清晰。

有了任务流程图和信息架构图后，再来画页面原型，感觉就清晰多了。页面原型可以理解为需求可视化，即将产品的概念通过实际的产品设计图表达出来，需要交互设计师有一定的页面排版能力和美感，原型在不影响效率的前提下应尽量美观。个人感觉，这部分能力就需要一定的项目积累了。我之前由于有几年的网页设计经历，所以需求可视化的能力就直接转嫁过来了。

3. 方案落地


我们可以对应交互文档。

交互设计师最终的输出物就是交互文档了，我们一般画好了原型后就会拉个会议，对交互方案进行讨论。我这边的做法是按照设计流程来讲，依次按交互模型、用户体验地图、任务流程图、信息架构图的顺序先过一边，再针对具体的页面原型进行讲解。

这个地方需要根据公司的实际情况灵活安排了，我们的原则就是尽量让交互方案顺利通过，所以先讲概念性的分析产物。而原型是通过前面分析而来，不容易被全盘否决，更多的是具体页面元素内容或者摆放上的调整。我这边的经验是，开发也会将一些难点抛出来进行讨论。

交互评审通过后针对每页原型都要附上一些说明，然后将所有这些输出物集合打包，就成了一份详细的交互文档，也可以理解为开发文档。后面会专门写一篇文章来描述交互文档如何来写。

我个人的想法是，产品经理输出的需求文档就不用给开发看了，后面开发和测试都统一以交互文档为依据，有需求变更或者开发难点反馈等，交互文档需要跟进，并附上修改时间和记录，作为详细的查阅资料应用于整个产品组。

4. 优化


我们可以对应数据分析、用户反馈、可用性测试。

数据分析，主要是产品上线后，用户的一些使用数据，我们拿到这些数据后，可以分析出一些真实的用户行为。

用户反馈，就是用户使用产品后的一些反馈，有好的也有不好的，例如：APP上线后，都会有一些用户的吐槽等。我们需要从众多反馈中提炼出可优化的用户需求，此处有个原则：不要让小概率事件影响大概率事件。

可用性测试，主要是模拟真实用户去体验测试阶段的产品，并将一些问题进行记录。这里可以请具有代表性的用户或者公司同事来体验，也可以自己去体验。

二、概念层


从概念上来说，交互设计是指：帮助用户更好地使用产品，达到用户目标，并在这个过程中有愉悦的感受。我们可以提取出“更好地使用产品”、“有愉悦感受”。

1. 更好地使用产品


更好地使用产品，我们对应认知和反馈。

认知，简单说就是一看就明白，会用。一个复杂的界面，第一次使用时用户可以很快上手，这样我们就认为拥有好的认知属性，可以节省很多用户思考的时间或者说节省用户的认知资源；一个产品如果复杂的界面都有这种认知属性，整个产品就不会太难用，可以节省很多培训用户的时间。

反馈，简单说就是操作顺畅，容错。每次操作界面时，系统都能给出很友好的反馈，对于很复杂的流程，用户也能很顺利操作，最终达到自己的任务目标；用户有一些错误的操作，产品通过合理反馈可以避免用户去犯错。

这样的一款有好的认知和友好反馈的产品，对用户而言，应该是用起来很舒服的。我们在产品设计时考虑更多点，做的更多点，用户用起来就更简单些，更舒服些。

2. 有愉悦感受


有愉悦感受，我们对应体验过程，即操作简单、界面美观。

操作简单，一款用户体验好的产品，用户在使用时，有愉悦的感受是必然的。这里我们可以去关注交互层的情感化设计，一个复杂的流程，每一步的衔接，每一步的转场动效，在用户完成目标的前提下，有更愉悦的精神体验。

例如：反馈时的方式，哪种体验更好；界面切换时，需要使用哪种动效等。

界面美观，这里主要是针对UI设计，视觉层的情感化设计。使用一款界面很漂亮的产品，在满足好用的前提下，有更多的愉悦感受也是必然的。

例如：一些报错页面的情感化设计，可以抚慰用户的焦虑；引导页的情感化设计，可以降低用户使用产品的难度等。

三、行为层


交互从广义上来说，是设计人与物的互动、人与人的互动、人与环境的互动。从侠义上来说，就是人与物的互动，而且这个物指产品界面。我们希望设计用户的行为，让用户按照我们的商业目标来使用产品。用户是难伺候的，我们的实操是通过设计物的行为即界面的行为，来影响用户的行为。

简单说就是——设计物的行为，影响人的行为；收集用户真实的使用行为，反过来决策产品行为应该如何设计，这样形成了一个良好闭环，不断的设计行为，达到更好的用户体验。

用户有很多：潜在的、实际的等，对于低动机低能力的用户，在此不考虑。

1. 引导，高动机低能力


对于高动机低能力的用户，我们的关键是提升用户的能力。

用户对我们的产品有很高的使用动机，无奈缺乏使用能力，这个能力可以理解为用户的负荷过重，理解能力不够；我们要提高用户的能力，自然就是降低用户负荷，降低产品的理解难度。

这类用户，我们只需要去引导他们，让他们跟着产品设计好的行为，一步步走，例如引导页，新功能的引导助手等。

在生活中，有个大家很熟悉的例子：贷款买房。

买房属于大件消费了，一般人缺少全款买房的能力，银行推出的个人贷款买房产品，就可以理解为是提高了购房者的购房能力，然后银行可以获得利息作为利润。其他的产品，例如贷款买车，花呗，借呗等都是一类的，都是提高用户的购买能力。

2. 提醒，高动机高能力


对于高动机高能力的用户，我们的关键是提醒。

一个好的产品，知道的人太少，导致用户量不高，其中很多高动机高能力的用户也错过了。生活中，常见的宣传手段是广告，提高曝光度，让大家都知道这款产品，对于有高动机高能力的，一点点提醒后，自然就会成为产品用户。

3. 激励，低动机高能力


对于低动机高能力的用户，我们的关键是激励。

用户缺少足够的刺激，可能拥有很高的能力，但是不会去用你的产品，我们要做的就是激励用户，一些好的广告也可以达到这个目的。

例如一些豪宅的广告，可以吸引到一些富豪；一些高端的手机广告，可以吸引到一些成功人士等。

四、总结


针对B端和C端的补充说明：

B端产品，我们必须以业务目标为前提，深挖不同用户不同场景的任务流程，提高用户的认知能力；提高产品的反馈能力；提高产品的智能性，有良好的感知和预见。

C端产品，我们必须以好用好玩为宗旨，深挖用户的愉悦感，然后通过设计产品的行为来影响用户的行为。

作者：D.cheerful，微信号：dcf8859，武汉地区野路子高级交互设计师，7年B端产品交互设计经验。

本文由 @D.cheerful 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

声明：以上内容来源于网络，如有侵权请联系我们(123@shiyan.com)删除！

胡37

好文啊

却写杂布计

转发了

忆困血馆闻

转发了

窗台上晒太阳

转发了