交互设计五要素和交互设计五大流程

一、什么是交互设计

交互设计，又称为互动设计（Interaction Design），是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。交互设计在与定义产品（软件、移动设备、人造环境、服务、可穿戴设备及系统的组织结构等）在特定场景下反应方式相关的界面。通过对界面和行为进行交互设计，从而可以让使用者使用产品来完成目标，这就是交互设计的目的。

从用户角度来说，交互设计是一种如何让产品易用、有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点。同时还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及多个学科，以及交互设计领域人员沟通。

二、交互设计五要素

交户设计是一种有目的和计划的创作行为，其设计的对象是行为。

交互设计的五个要素包括：用户、行为、目标、场景、媒介。

用户：产品立项后，确定产品定位，去了解用户，互联网产品可能存在很多种用户，一定要以目标用户的研究为主，如网易云音乐的用户可能有学生、工人、音乐发烧友等，但更多是针对目标用户群体，对音乐喜好程度高，但年龄偏小的用户。从不同渠道去收集目标用户的需求、筛选需求、确定需求优先级，确保需求真实性。

行为&目标: 使用产品时，不同用户可能有不同目标，一个用户也有可能有多个目标。 研究用户的目标是为了确定定需求，清楚产品要满足多少个目标。交互计师在根据不同的目标去设计相应的行为，错误的目标、繁琐的路径都会导致用户放弃产品。

媒介：可以理解为产品形态，产品用 APP、网页、公众号、微信小程序、H5、宣传页...，还是其他形式，这属于媒介。不同的媒介有不同特 点，一定要根据自己的业务类型来选择适当的媒介，同时应该考虑到性价比。

场景: 场景是个很容易被忽视的问题，用户使用产品时的场景非常复杂，可能在嘈杂的地秩里，也可能站在路边、躺在床上等等。大家熟悉的打车软件，一般都会有两个 端，一个乘客端，一个司机端，司机端的用户是正在开车的司机，而司机为了安全一般会把手机固定在车载架上，这个场景就是司机端 APP 所处的主要场景，那么设计 APP时就考虑到车内光线的问题，司机操作便捷性和全性等问题。

三、交互设计五大流程

1、发现用户需要，建立明确需求

发现用户需要的方式有很多种，我们可以在用户反馈里收集到许多用户提出的想法，他们希望我们能提供帮助解决问题的产品；我们也可以主动去观察一些生活中的信息，为灵感的迸发做储备。

比如说网页的隐形加载机制项目，有不少用户跟我们反应说，他们有时因为网站的图片太多或太大，会导致网站页面加载慢，同时在加载的过程中页面显示都空白的，所以希望能提供一个专业的隐形加载机制功能，能够帮助他们有效的展示页面的显示情况。

确认了用户的这一需要，我们的产品同事就会组织立项，把用研和设计组的同事呼唤过来一起进行调研，确定我们的目标用户。

用研组会通过问卷调查等方式尽可能多的去收集信息，交互设计师也会参与分析调研，组织会议帮助用研组完善信息，我们会采取一些有趣的方式，比如一堆人在一起头脑风暴，大家回忆各种相关的生活场景，然后把一些关键词记录下来。

这一步我们的目的是要知道：用户想要什么？

通过这些步骤我们提炼出一些最重要的功能需求，接着产品组会整理出需求文档，设计师就位。

2、提出设计方案

通过调研，我们得到了大量数据信息，并建立了明确的需求，下一步就是开始提设计方案。

这个阶段会做一些概念设计，类似于做实物产品时设计一个水杯，我会描述它说：我要设计一个旅行用的水杯，它能叠成一个小圆盘，喝水的时候只需要把小圆盘的圆心部分往下按，就能变成一个杯子。

互联网产品也是这样，需要赋予它一个概念，例如日程管理：这是一个专业的日程管理功能，通过使用它，我们可以有效的管理自己每天的日程和时间，以提高工作效率，并且不会再错过每个重要的事项！

这些文字并不一定非是交互设计师所总结，但是交互设计师必须要做到对产品心里有数，明确我们要做什么。

同时需要进行的还有初稿设计，在这里我所谓的初稿，并不一定是严格要求中的交互原型，可以是用工具软件把主要的页面流程做出来，也可以手绘草图，只要能清晰表达设计构思的，什么样的方式都可以。

3、制作设计原型

制作设计原型，也就是常说的交互稿，区别于做设计方案时的初稿，这份交互稿我会尽可能细致的把流程和具体操作形式表达出来。

考虑到做交互是一个迭代过程，一般会在设计稿的首页为设计的产品做一份交互更新日志，记录下交互更新时间、版本名称、更新类型、更新内容、参考需求文档与交互负责人。

如下所示：

这份更新日志的意义在于：

1、更新时间：便于全程跟踪记录项目，掌握每个时间点。

2、版本名称：便于项目参与人员查找上一版本的交互稿。

3、更新类型：了解每次更新需求的性质。

4、更新内容：清晰呈现每一次更新的内容，并提供一个直接去到更新页面的链接，这样在进行迭代时我们的伙伴不用一页页去寻找更新点。

5、参考需求文档：便于项目参与人员查找对应的需求文档。

6、交互负责人：记录每次迭代的交互负责人，并能方便工作交接。

交互稿的制作过程，一般是要先做原型的，像一些视觉比较成熟且相对稳定的产品，会偏向做高保真模型，我们会整理一个控件库，这样能提高制作效率；做一个全新项目时，黑白稿线稿都是可用的方式，如果交互设计师能对大概的视觉效果有把握，也能做得精致些，同时，也要保证页面的合理性。

4、制作交互设计说明

之所以把这部分内容提出来单独写一段，是因为之前和很多做交互的朋友讨论过该怎样做好交互说明，大家各有看法，很难找到这部分工作的衡量标准。

交互说明书在整个设计过程中，也许只会占用小部分工作量，但是作用不小，它能帮助我们减少沟通成本，辅助交互稿描述设计理念，表达交互流程，更细致的展现我们的设计。

与做设计稿不同，交互说明这部分工作，需要我们更多了解它说明的对象，即产品经理、视觉设计师、开发人员的需求，从而达到真正的“辅助”效果，而不是盲目凭自己主观去长篇大论，否则我们要为此花费时间，而且这部分工作只能沉积为一堆我们自己欣赏毫无意义的文字。

为此我曾与合作过的各组同事进行沟通，提炼出一些他们对交互说明的需求，不求全面，但求能说明一些问题。

（1）、交互说明最好是图文并茂（all）

其主要作用就是便于阅读和理解。

（2）、页面跳转的说明（产品&程序）

页面跳转是涉及多个页面关系的操作，产品人员在看交互稿时，会更多去关注多个目的性的任务操作流程，而对页面跳转的记忆是有限的，所以需要页面跳转说明。

（3）、交互说明能否考虑与产品需求文档结合（产品）

开发文档会涉及产品概念、技术方案、业务执行角色等内容，和交互设计稿有着紧密关联，所以，交互说明书与开发文档是可以相互做补充，整理成一份文档，这样也能避免工作内容重复。

（4）、对交互稿中不明显的交互动作或隐藏的设置项作说明（产品&视觉&页面构架）

细节和动作需要描述清楚，比如说鼠标focus、click的动作，或click后是loading还是跳转，这些平时都是开会上讨论，但是参与项目的人员不一定都能记住，所以会需要在交互说明书里做说明，并需要考虑到页面构架组需要预留适应变化的结构。

（5）、产品风格定位（视觉）

商务风？休闲风？视觉需要一个准确的产品风格定位。这部分工作不一定是由交互人员来确定，但在产品孕育阶段中，设计稿讨论以及不定时更新的数据调查，会使得产品风格定位渐渐明确，视觉的同事更多是参与设计阶段的工作，这就需要交互人员将这些信息在交互说明中记录下来，以辅助视觉完成。

（6）、极限状态（前端）

比如一个列表最长和最短显示。

（7）、异常/出错情况说明（程序）

这一点在交互稿制作和与产品沟通过程中容易被忽略。

有的设计师会疑惑：为什么我做的设计说明书会没人看？我写的很详细了，但是他们还是会问我一堆设计的问题！甚至，问我为什么要做这个文档？

在这些情况面前，设计师应该做些思考，我们所制作的这份说明是否真正解决问题了呢？

一些基本的逻辑判断和文字内容，产品人员已在需求文档中列出且在交互稿中已清晰呈现，例如原型中完整呈现的设置内容，或一个单选复选关系，这些内容我们再花时间去大篇描述，并无太大意义。

我们可以在交互原型上注释，在图上写说明，或者是在和项目组发邮件时写为邮件内容，当然也可以是word文档，PPT…

总之，我们要做到的是真正解决问题，让交互说明书成为帮助项目中各组成员之间进行有效沟通、辅助理解设计内容从而达到提高项目效率的工具。

5、用户测试与评估

产品基本功能实现后，我们会做用户测试，设计是很主观的，并且会受各种因素影响，所以我们的产品难免会存在一些意料之外的问题，通过招募用户来使用我们的产品，我们能收集到一些使用场景中发现问题的反馈，并把这些整理成优化点，完善我们的产品。

同时交互设计师也要多用自己的产品，保证上线内容与设计保持一致。

这就是我对自己交互工作的一个相对完整的描述，我的感觉是，这是一份很有意思的工作，因为我自己也是一个用户，我会在使用产品的过程中发现这样那样的问题，所以我也自然而然的想去解决这些问题，并在寻求方法中得到一定的积累。

然而，这也确实是一份很需要花心思的工作，设计方式自由，但是设计内容需严谨，疏忽了一个问题，就有可能为产品带来极大的负面影响，甚至失去用户的青睐。要让我们的产品保持良性发展，就要求设计师们不断探索优秀的设计方法。