交互设计的步骤是什么

完整的交互设计流程主要分为八个方面：定性研究、确定人物角色、写问题脚本、写动作脚本、画线框图、制作原型、专家评测、用户评测。

如果你想要知道具体怎么做，请继续看。

一、定性研究（Qualitative Research）：

无论你用何种形式做调查，你的目的是了解用户的五个方面：

1、行为（Activities）：例如UI设计者用户多久用一次、一次用多久？

2、态度（Attitudes）：例如UI设计者用户怎样看待产品的？

3、资质（Aptitudes）：例如UI设计者用户的学历怎样？

4、动力（Motivation）：例如UI设计者用户为什么用？

5、技能（Skills）：例如UI设计者用户对使用相关产品是否熟悉？

二、确定人物角色（Persona）：

如果你的定性研究有所成功，这时你应该对你的用户有所了解了。根据上文中的五个方面，你需要挑拣出最典型的一个或几个形象。例如UI设计者的人物角色可能有：刚刚毕业的大学生、没有考上大学的高中毕业生、想要提升自己的上班职工、想要转型的平面设计师……

你不但要确定这些人物角色（Persona）的主要特点，还要确定他们的需求和目的。为了增加真实性，可以给人物角色（Persona）取名字，选一张照片，细化他们的背景资料。

三、写问题脚本（Problem Scenario）：

基于你对人物角色（Persona）的理解，你应该已经可以设想出他们在使用产品中可能遇到的问题了。你可以为每一个人物角色（Persona）列一个问题单，也可以把它们整理到一个简短的故事里。

四、写动作脚本（Action Scenario）：

首先你要为已列出的问题想好可能的解决方案，然后写一个简短的故事把这些解决方案囊括进去。写成故事的好处是代入感较强，对别人来说容易理解。国内比较推崇故事版，但是把所有情景画出来的效率是非常低的。

五、画线框图（Framework）：

此时你的交互方案已经有了抽象的想法，现在只要把它具象化就可以了。

六、制作原型（Prototype）：

就算没有程序员帮忙，可以使用的原型工具还是很多的。例如Axure RP和Pencil Project都比较有名，国内也有不少。不过我只用过InVision，感觉还可以。不论用什么手法，哪怕是PPT或者PDF，只要做出一个可以交互的东西就行了。

一个原型是不可能实现所有功能的，所以你要确定几个可以走通的任务。例如能够成功在知乎里发布一个问题等。

七、专家评测（Expert Evaluation）：

原型完成后召集至少两三个设计师或者对交互比较了解的人，使用并评测原型。你可以将原型所关注的几个任务列出来，以免专家不知道原型哪部分可交互哪部分不可交互。

比较常用的评测方法是启发式评估法（Heuristic Evaluation），而这种方法比较常见的标准是尼尔森交互设计法则（Nielsen Heuristic）。以下是十条尼尔森交互设计法则（Nielsen Heuristic）：

1、系统状态是否可见（Visibility of system status）

2、系统是否符合现实世界的习惯（Match between system and the real world）

3、用户是否能自由地控制系统（User control and freedom）

4、统一与标准（Consistency and standards）

5、错误防范（Error prevention）

6、减轻低用户的记忆负担（Recognition rather than recall）

7、灵活性和效率（Flexibility and efficiency of use）

8、美观简洁（Aesthetic and minimalist design）

9、帮助用户认知、了解错误，并从错误中恢复（Help users recognize, diagnose, and recover from errors）

10、帮助文档（Help and documentation）

在UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。

二、采集目标用户的习惯交互方式

不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。

三、提示和引导用户

软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。

四、一致性原则

有机会可以去问问中鹏的老师

原型通过专家评测后，你可以找一些典型用户使用原型。你可以把任务列给他们，让他们自己尝试完成任务。中间遇到的问题可以记录下来，设计师通过观察来进行评分。比较常用的用户评测方法是Think Aloud（对不起没有找到合适的翻译）。做法也很简单，你让用户使用原型完成指定的几个任务，让他们在使用过程中将他们的每一步和心中的想法说出来。如果他们忘记说或者不知道该怎么说，你可以适当提问。与此同时，你要将屏幕和声音录下来，可以用录屏软件或摄像头。完成后，你回放这些视频，把观察到的问题和用户报告的问题全部记录下来，与交互法则关联并且打分。值得注意的是，很多人更习惯给出建议而不是提出问题，例如“这个按钮应该更大一点，这样才看的到”。这时，你该记录下来的是“按钮不够引人注意”。

交互设计的重要核心就是用户体验。我是一家公司的前端工程师，老板天天告诉我，让我要提高用户体验度，那你知道一个完整的交互设计的流程是怎样的呢？

从一个客户的体验度来说，第一视觉。如果一个产品在视觉上不能带给客户一个号的印象，客户会对这个不感兴趣，产品的再好，客户压根就不会看。所有首要的是视觉设计。

然后就是在网页上的框架设计，一个好网站，给人的第一感觉就是清爽、亲民，如果一个网站打开速度慢，而且里面都是一些垃圾信息，客户肯定不会在你的网站做任何停留，那你的这个设计就是个失败品。

还有就是网站的内容，如果一个网站里面与客户想要的东西不一样，或者没有客户所需要的东西，你这做给谁看呢？所以，应该把网站的主打产品，或者说大多客户需求的产品放在客户一打开网站就能看到的地方，也不用麻烦客户在网站里找了，省了客户的时候，就等于省了我们的时间。

当一个产品上线的时候，这个交互设计就完成了。接下来那就需要把产品卖出去，这就是项目经理所考虑的事情了。

在产品的交互过程中，一个UI设计师的工作最重要，如果没有他，就没有好看的产品，也就不会有可以放在网站里的图片和网站的整体框架。其次就是前端工程师了，需要做一些网站上的特效来给客户带来视觉冲击。

1、分析阶段

需求分析、用户场景模拟、竞品分析（聆听用户心声）。

需求分析：对于一个产品来说，必然有对用户需求的分析内容，更多的是从MRD与PRD获得，或者从产品需求评审会议上得到需求分析的内容，当然可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点的话，那么用户需求就是本次设计的出发点。

用户场景模拟：好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要，了解产品的现有交互以及用户使用产品习惯等，但是设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。

竞品分析（聆听用户心声）：竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当市场上存在竞品时，去听听用户的评论，哪怕是骂声都好，别沉迷于自己的设计中，让真正的用户说话。

输入物：MRD、PRD、市场调查报告、竞品分析文档（或其一或全部）

输出物：设计初稿（或许只是几个简单的界面）

2、设计阶段

设计方法采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所等模拟，模拟用户在多种情况下产品使用的模拟。面向事件驱动则是对产品响应与触发事件的设计，一个提示框，一个提交按钮……这类都是对事件驱动的设计。面向对象，产品面向的用户不同对于产品的设计要求不同，不同年龄层的用户对于产品的要求不同，产品的用户定位将对UI设计师影响因素。

输入物：交互文档（高保真原型）

输出物：设计终稿（所有的设计稿）

3、配合

UI设计师交出产品设计图时，更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图操作，对于不同的开发人员的要求，切图方式也有不同，UI设计师需配合相关的开发人员进行最适合的切图配合。

输入物：设计终稿

输出物：设计修改稿（设计稿切片）

4、验证

产品出来后，UI设计师需对产品的效果进行验证，与当初设计产品时的想法是否一致，是否可用，用户是否接受，以及与需求是否一致。都需要UI设计师验证，UI设计师是将产品需求用图片展现给用户最直接的经手人，对于产品的理解会更加深刻。

输入物：产品

输出物：产品（面向用户最终版本）

产品UI设计中夹杂着许多设计原则要求，统一公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。UI设计师应该分析公司产品的特点，制定符合产品生命周期的UI设计流程。每个产品的生命周期中，UI设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。

交互设计的初衷就是解决用户的问题。不论设计什么产品，能够被用户认可的途径只有这个产品解决了他们生活中的一个问题。交互设计的第一步，不论是对成熟产品还是初创产品都一样，就是定义这个设计到底要解决用户的什么问题，这一步可以说至关重要。

2、确定人物角色（Persona）并建模

如果第一步的用户研究有所成功，这时你应该对你的用户有所了解了。根据上面提到的五个方面，你需要挑拣出最典型的一个或几个形象建模。例如逛知乎的人物角色可能有：比较普通的求知者、特定领域的专家、到处灌水的……

3、画线框图、制作原型

到了这里，你对你的交互方案已经有了一个很抽象的想法了，只需要把它具象化就可以了。这时候需要做的就是把流程图以及线框图画出来，它可以帮你把产品的逻辑理顺，同时也是跟PM以及程序员沟（si）通（bi）的利器，特别是对于比较复杂的产品来说，流程图、线框图显得尤为重要。

4、测试评估

丨专业人士测试评估

原型完成后召集两三个设计师或者对交互比较了解的人，使用并评测原型。你可以将原型所关注的几个任务列出来，以免专家不知道原型哪部分可交互哪部分不可交互。

丨用户测试评估

原型通过专家评测后，你可以找一些典型用户使用原型。你可以把任务列给他们，让他们自己尝试完成任务。中间遇到的问题可以记录下来，设计师通过观察来进行评分。

5、改善设计，持续迭代

说到最后，交互设计的精髓不就是产品的迭代么，哪里没做好改哪里。对于开发周期很长的产品，互联网行业赋予设计师最大的自由度，就是随时没做好，咱就改呗~具体步骤就是酌情重复前面四步啦~

大致分为需求分析，用户场景模拟和竞品分析三块。需求分析对于一个产品来说，是必须的。如果说设计原则是所有涉及的出发点话，那么用户需求就是本次设计的出发点。用户场景模拟，旨在了解产品的现有交互以及用户使用产品的习惯等。竞品分析是因为每个设计者的思维都会有局限性，看到别人的设计会有触类旁通的好处，也能给自己的设计过程带来启发。

设计阶段：

设计方法采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所等模拟，模拟用户在多种情况下产品使用的模拟。面向事件驱动则是对产品响应与触发事件的设计，一个提示框，一个提交按钮……这类都是对事件驱动的设计。面向对象，产品面向的用户不同对于产品的设计要求不同，不同年龄层的用户对于产品的要求不同，产品的用户定位将对UI设计师影响因素。

配合阶段：

UI设计师交出产品设计图时，更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图操作，对于不同的开发人员的要求，切图方式也有不同，UI设计师需配合相关的开发人员进行最适合的切图配合。

验证阶段：

产品出来后，UI设计师需对产品的效果进行验证，与当初设计产品时的想法是否一致，是否可用，用户是否接受，以及与需求是否一致。都需要UI设计师验证，UI设计师是将产品需求用图片展现给用户最直接的经手人，对于产品的理解会更加深刻。

交互设计是一种目标导向设计，所有的工作内容都是在围绕着用户行为去设计的。交互设计师通过设计用户的行为，让用户更方便更有效率的去完成产品业务目标，获得愉快的用户体验。

Ⅱ、交互设计在项目流程中的位置和任务：

项目前期的流程和节点：

职能的细化就是为了让产品在每个专业环节都做到极致，提高竞争力。如果是为了走流程，每个环节都是任务式的交付，臃肿的分工除了增加成本和拖慢项目进度，没有实际意义。所以交互设计需要做的足够好，才能将这份工作做的有意义。

Ⅲ、交互设计的具体职能：

从上图中可以看出，交互设计主要干三件事：

①定义部分需求 ②定义信息架构和操作流程 ③ 组织页面元素，制作原型demo

①定义部分需求

以前的惯性思维是需求应该由产品人员负责，设计人员只是实现和改善界面体验。而产品的真正需求不仅仅来源于业务，还包括使用者的情感需求。在情感分析方面，交互专业是具有优势的，举个例子：

一个增值服务的宣传模块，业务模型可能是这样子：

考虑到情感因素后，需求模型会不断完善：

上图仅仅是举个例子，真正的产品人员不会将业务模型想的如此简单。举这个例子就是想说明一下产品的需求设计不仅仅是业务模型，还需要考虑用户情感、用户行为和运营数据。当产品人员考虑不周全的时候，交互设计师有责任对需求进行修订和完善，这样的目标导向设计才是完整的。

②定义框架

这部分的内容属于交互设计师的核心工作内容，也就是我上一章节所讲的框架设计阶段。这个阶段的产出质量直接影响到业务目标和转化率。如果框架混乱，接下来的界面怎么优化都是无效的。这好比大型超市的走道设计，如果路线规划的不好，再多再大的指引图标都是低效的。交互设计做什么？让用户快速完成目标，提升操作效率，这才是框架设计的意义所在。

破洛洛文章简介：本章主要详述一下交互设计的职能——交互设计师具体做哪些内容？

什么是框架设计呢？这要分成两部分内容：

1.关于结构导航的设计

把我们的产品想象成一个巨大的图书馆，我们需要帮助用户（有目的性的、目的不明确的，无目的性的）寻找他们感兴趣的图书，怎么帮助用户准确的寻找完成目标任务，这就是导航设计。导航的设计任务一般在新项目或重构项目。

导航大概可以分为三种类型：结构导航、关联导航、可用性导航

在框架设计的阶段，交互设计师主要关注于结构导航的设计。

结构导航分两种：全局导航与局部导航。全局导航一般是指无联系的信息结构做的一级大分类，方便用户以最快速的方式了解整个网站有什么大概内容。而局部导航则关注于用户最方便的快捷操作和业务引导操作。

交互设计师的首要任务就是将业务内容信息组织分类，划分出主次关系，根据业务目的和用户习惯定义规划全局导航和局部导航的设计。那应该怎么规划呢？

回到第一个增值服务页面的例子（虚拟案例，非真实案例）：

将需求梳理后（怎么梳理，请google抽屉整理法），我们可以确认全局导航：

再详细规划局部导航：

局部导航的层级可以不断往下延伸，通过树形目录或面包屑的方法帮助用户浏览时不至于迷路。

2. 关于流程的设计

之前的案例我们已经基本上确认了模块需求有哪些页面，页面大概会放什么内容。但真实的用户任务并不是在一个页面上完成的，这时候我们就需要通过流程的方式把任务变得清晰和包容用户的各种误操作。

虚拟案例：

在流程的规划设计中要遵循：1.以业务目的为主要导向；2.兼容到用户的习惯；3.尽量让流程做减法，多一个流程就会丢一部分用户；4.任务是连贯和清晰的；5.考虑实现方式的复杂程度；欢迎补充…

③组织页面元素，制作原型demo

经过了需求的完善和框架的设计，之前的这些工作还是停留在抽象的想法阶段，怎么把想法转达给项目组的其他人员呢？交互还需要把想法和规划表达出来，那么最好的方式就是制作原型Demo。把Demo做出来，让产品，开发，测试直观的看到产品的雏形， 再广泛的接受意见，对原型进行不断的修正，改进，做简单的用户测试继续挖掘情感需求。

那么怎么去组织页面元素，制作原型Demo？哪些表现层面是交互设计师该重点表达的内容呢？原型的制作又有哪些章法可循呢？这个。.还是等下一个章节再讲吧！

UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。

UI设计目前的前景还是很不错的，很多企业都缺少 UI设计师。而且可以看到的是，现在社会的发展，更多的智能机和智能机器人研发出现，这些都离不开UI 设计师。所以说 UI 设计的是很有前途的，是不会失业的。而且 UI 设计门槛不高，要入门也不难的。

从工作内容来说，UI 设计在当前的互联网领域、科技领域可以说无处不在，

好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向，一个是交互设计,另一个是视觉设计。

总的来说，UI 设计相比较于编程而言，还是非常适合大众学的并且就业前景很广阔。学完 UI 设计，能获得一份稳定而又不失乐趣的工作，同时有利于追求更高品质的生活，在艺术领域可以获得更多的启迪。