开始接触交互设计的童鞋，在选择学习软件上面总是有所懵逼和纠结，俗话说嘛，工欲善其事必先利其器，你可能是刚毕业的萌新，也可能是UI设计的进阶人员，还可能是跨领域的转专业小白。在缺少专业人事指引的情况下，很容易在五花八门的的设计工具里胡扎一通，浪费时间后还依旧云里雾里、恍恍惚惚。

在正式介绍交互设计师必备的软件前，我们必须明确一下交互设计的概念：交互设计是通过系统设计的方法，使人与机器在互动过程中更符合人的心理预期和既定目标，使用有效的交互方式让整个过程达到可用性高，用户体验好的设计方式（引自阿西UED-《交互设计那些事》）。交互设计师一门技术活，它要求从业人员有较强的业务理解能力，逻辑思维能力，数据分析能力，页面排版能力，用户研究能力，沟通能力，执行能力等等。所以我们应该先置身于交互设计师的日常工作场景中，了解其工作职责和输出内容，方可对应的来介绍需要用到的工具，这也是你交互设计能力进阶的第一步。

阶段一：业务探索

场景故事：

设计师小明被调入一个做外卖商家自配送的项目中，担任交互设计师，由于这是一个0-1的新项目，当前只存在一个概念方向，还未有任何落地的实物，小明决定先进行一波研究，再同上游（产品经理、业务方）及下游（开发工程师、视觉设计师）进行一轮头脑风暴，明确项目背景及项目目标，同时定位目标用户及其痛点，明确了“我们需要设计一款怎样的产品”这个问题。

工具1：纸和笔-快速记录

我们当前所置身的互联网产品设计工作，在本质上和传统的设计作业流并无不同，都是为实现其某种特定的商业目标而进行分工协作，区别也仅限在使用工具、思维、载体上罢了。在我们的产品概念还处于0-1突破阶段，任何思想火花都可以使用笔和纸进行快速的录入，这里可以是一句话，也可以是一张原型草图，还能是一张表格，当你在快速思考的时候，笔有时候比电脑更容易触发你的灵感，同时也来的更快更便捷！

工具2：Bear-整理归类

当你完成和同事的头脑风暴，在纸上记录了零零散散许多的功能点和灵感，但还缺乏总结性，无组织的观点语句并不能给你架构出一个粗略的设计思路，所以你需要将其汇总并归类成电子版，目的是将信息整理输出给自己，把讨论或则思考的内容正式变成一块你可以搭建的砖头。这里我习惯性是将笔记本上的内容先码到记事本或则Word上，然后再进行一波初步归类。我当前使用的记事本为Bear，中文名叫熊掌记，当然你用电脑上自带的便签、或则有道云笔记、印象笔记也都可以。

阶段二：架构搭建

场景故事：

交互设计师小明在经历了一轮血雨腥风的头脑风暴，并对目标用户、市面竞品进行分析之后，思路慢慢从抽象的概念逐步细化为可感知的流程链路，大致的交互框架、功能设计点、产品组建步骤，也便浮到他的脑海上。产品经理对小明说，后面的活归你撸了，明天下班前帮我搞定产品结构和信息架构哈！

工具3：Xmind-组织架构

事实上，很多小伙伴在头脑风暴时就会使用这款工具来记录点子，而我更倾向于在初略整理后用xmind来进一步清理复杂的想法和事项，Xmind提供了较为多项的结构图，比如思维导图、逻辑图、组织结构图、时间轴、鱼骨图、矩阵图等，多样化的视觉方式能让自己进行深入的对比分析。不管在桌面端还是移动端，都能随时联网互通，随时查看和修改制作的导图。

利用Xmind思维导图的方式，可以非常便捷的搭建产品的页面和功能结构，比方说微信，一级页面有：微信、通讯录、发现、我的。二级页面比如说发现页：朋友圈、扫一扫、摇一摇、附近的人、小程序等。

我们可以在Xmind上不断的添加枝干主题，将某功能页面的信息罗列开来，比方说微信朋友圈：朋友圈封面、个人头像及昵称、发朋友圈入口、朋友昵称、文案、配图、发布时间等等。

Xmind官网地址：[XMind思维导图 | XMind中文官方网站](https://www.xmind.cn/)相似推荐软件有：Mindnode。注意，MindNode只针对Mac端，Windows用户则推荐使用XMind，不过好在两款软件都比较简单，上手三分钟搞定！

阶段三：流程梳理

场景故事：

经过一夜的通宵后，小明用尽最后一丝力气在钉钉上，把产品架构图发了过去，倒头便睡在了键盘上。第二天中午产品经理大黄跑过来叫醒了他，思维导图做的真不错啊，不过这图信息量太大，枝干信息繁多，也不能详细体现其交互逻辑，能不能再帮忙分块细化，把功能模块、功能点、组织架构用流程图的方式展示出来。小明刚睡醒，还有些懵逼，但却还是下意识怼了回去，干嘛要做那么复杂啊，我做原型的时候直接说明不就拉倒了？产品经理大黄回答道：流程图制作可以清晰的刻录出用户触点，表达每个环节的跳转逻辑，便于查漏补缺，检验是否有遗漏逻辑和分支流程，你总不想弄个半成品交付上去后，被领导批再被开发批吧，搞不好上线后还有纰漏，这锅咱们不好背啊~

工具4：ProcessOn-理清逻辑

ProcessOn是一个在线作图工具的聚合平台，它可以在线画流程图、逻辑图、泳道图、UML、时序图、组织结构图等等，默认的组件库比较丰富，绘制时可以智能对齐，导出来也较为方便。缺点是不完全免费，免费版只支持9个文件数量，下载的图片也不够高清，由于是网页端的应用，不能离线操作保存。

业务流程是交互设计的核心，交互设计师需要根据需求设计出的功能进行布局，提取核心流程，同时设定体验目标。

*项目功能表：*设计业务流程时，我们可以对照着前面制作好的思维导图，将焦点放在你要梳理的那个业务模块上，将功能模块也要一并罗列出来。如果说功能模块和功能点是肉的话，那流程就是筋骨，两者相辅相成。

*组织结构图：*项目功能表可以很清楚的在你的面前构建出一个大致的项目形态和面貌，这时候可以进一步制作包含业务逻辑的流程图了。不同于在Xmind上的思维导图，此处的功能结构图更为细致。

*逻辑流程图：*确定业务流程后再针对功能点进行逻辑梳理，并区分不同流程节点上的正常流和异常流，确保逻辑走向无误。注意，这个图是交互设计师最经常使用到的，是重要的产出物之一！

*泳道图：*如果你的工作还涉及到多部门多层级协同作业时（比方说中后台的交互需求），你还可以使用ProcessOn绘制一张“泳道图”，便于你将各个业务线的需求都打通并且理清。

ProcessOn官网地址：[ProcessOn - 免费在线作图，思维导图，流程图，实时协作](https://www.processon.com/)相似推荐软件：Visio（仅支持Windows电脑）;WPS office(非会员导出有水印)

阶段四：原型设计

场景故事：

在交互设计师小明紧锣密鼓的倒腾流程图的同时，产品经理大黄也没日没夜的输出他的PRD，并在某天风和日丽的下午，约好了项目经理、产品经理、研发人员、视觉设计师等各方进行了第一轮的预评审。交代了整体的项目背景及目标后，阐述了大致的设计思路，以及需要开发的各个功能点及链路流程。每个人开始对需求进行评估，提出自己的意见，通过多次迭代最终形成最终的需求方案。那么接下来一周，交互设计师小明就正式开撸了！

工具5：纸和笔-快速布局

我们在面对不确定的事务形态时，常常会使用纸笔勾勒出其大致的轮廓和布局，模拟实验，即时验证其思路是否正确，以免浪费大量的精力后最终失败重改，这个阶段我们称之为“线框图“绘制，主要针对页面逻辑、架构、布局设计线框原型。我自己是习惯性使用纸笔快速绘制，当然”磨刀“、”Axure“都是不错的选择，这得看你个人喜好了。毕竟，工具只是用来解决问题的，掌握工具和设计能力完全是两码事。

工具6：Sketch-具化呈现

Sketch是一款轻量，易用的矢量设计工具，是搭建”低保真“原型的最佳选择之一。它主要优点是其开放的平台和资源，有海量的插件支持，你可以自由的编辑自己的组件库，或则直接内置第三方插件，这里推荐蚂蚁金服的kitchen，直接拖拽相应控件便可搭建低保真原型了。同样，Sketch能与多数软件进行对接，如Flinto，Principle，ProtoPie，轻松实现稿件动态化展示。对于交互设计师而言，在保证设计逻辑和制作效率的前提下，尽量将低保真搭建的规范整洁，能够规避掉很多布局问题，下游UI便可更迅速的为你制作高保真设计稿。最后，我们在制作交互文档的时候也会用sketch来排版，原型图直接拖拽进入相应画板来做注释，简直无缝对接，非常完美！原型设计完成后，如果对设计方案有不确定点，可以先进行一轮可用性测试，及时验证方案是否已经圆满地解决了用户的问题，然后达到最初设定的产品目标。

Sketch官网地址：https://www.sketch.com/，仅限于MAC端。PC端则推荐使用Axure。

工具7：Flinto-动态演示

动效设计是交互设计师的一项加分技能，当原型设计和注释说明不足以实现你要的交互结果，用动画方式来可视化表达就成了一种必要的手段。移动端的动效设计主要分为两种：页面转场动画&加载动画，前者是为衔接两页面的切换，后者是为缓解用户使用时的情绪。对于不具备编程技能的设计师来说，做微动效的话推荐使用Flinto，学习入门简单，还能与sketch无缝对接，可以轻松实现页面间的转场动画，也能做页面内的行为动作，同时支持添加音效，调整动效时间。如果将Mac和iPhone连接到同一网络后，还可以直接在设备上测试原型，完全模拟真实交互效果，效果相当逼真。在制作完成后，你可以在电脑端实时预览操作，并支持MOV格式视频录制和gif动图输出，是制作整体交互原型的必备良器！

大多数常规动效实际上Flinto都能实现，如果太过复杂（通常是实现加载类的路径动画），就只能通过AE实现了。当然，这个需要有一定的功底并且需要花费相当的时间才能完全掌握，初学者暂时不太推荐，另外交互设计师也没有太大必要在动效上投入太多精力，毕竟还有UI童鞋帮忙兜底，你只需要将重心放在产品的研究和设计上即可。

动画制作完毕后，你需要输出成品mov或gif格式给到开发哥哥们，如果配合默契的话也可以直接将Flinto源文件扔给他们，但记住一定要手写标注，交互动效核心要素有：手势动作，触发条件，元素属性，曲线数值，变换数值，起始、持续、延迟时间等，涉及位置联动的要特殊注明！千万别让其自行揣摩细节，如果不符合您的要求再让对方更改的话，很容易让其有抵触情绪，毕竟对多数开发工程师来说，动效常常被认为是”无法直接创造业务价值“的东西，实际工作中，动效是最容易被砍掉的体验需求了。

原先的Flinto中文网已经下架了，如果需要软件的童鞋可以私我。类似的软件推荐：Principle。注意，这两款软件都仅支持mac版的。

阶段五：文档制作

场景故事：

虽然交互原型已经能够兜住一部分逻辑，但缺乏可读性，没有文案填充、逻辑介绍、异常态说明等注释，根本无法阅读。为了将交互设计思路清晰的展现给产品经理、研发人员、UI设计师、测试工程师，便于他们快速理解产品定义及功能，交互设计师小明需要着手制作一份交互设计文档。这份文档就像一张多维藏宝图一样，为不同角色针对性指引前行路径，最终协助他们到达指定任务点。

工具8：Sketch-落地交付

不同的公司或团队，对交互文档的输出格式要求不同，但内核一致，都需要你能清晰的梳理交互事件和页面逻辑，并将原型界面正确的置入业务流程场景当中，同时附上相关注释描述，把事情讲明白说清楚并不遗漏逻辑。好的交互设计文档可以让团队中其他的人员能迅速了解产品的整体架构和逻辑关系，以便对产品进行评审和改进，避免产品设计的偏差。

至于用什么软件汇总说明，并不重要，常见的有Axure、Keynote、PPT、AI等，而我习惯性使用sketch，毕竟前面原型也是用这个工具制作。写文档的时候先绘制一个较大的画板，让后将之前做的低保真原型拖入，并绘制页面间的跳转示意。在单页面当中可以标记对应的说明点，在旁边做好注释即可。

交互文档，是交互设计师最最重要的产物之一，占其日常工作输出内容的80%以上，由于这里仅讨论软件工具使用，便不展开详细说明。我会在后面的文章《交互设计硬知识-交互文档制作》中详细介绍，朋友们到时候多多捧场！

阶段六：还没结束

场景故事：

小明是一个内向的人，习惯性坐在电脑前撸图，但他的交互工作并不允许他做一个安静的美男子。在正式评审时，他需要在产品经理大黄噼里啪啦讲完PRD后及时补位，毕竟交互图例比干巴的PRD文字来的更形象化些，他不仅要简明扼要的阐述设计方案，还要应对各种问题挑战，如果评审过程中暴露了的若干设计问题，便要迫使其返工走查，进行二次优化。

工具：上述所有的工具

交互文档制作完毕后，并不代表着交互工作的完成。一个完整的项目在进入完成视觉设计和产品开发后，你需要不断的与其沟通和跟进，确保其落地实现结果和你的预期一致外，还需要随时解答过程中可能出现的问题。对大多数的交互设计师而言，很难在制作原型和交互文档时将所有的逻辑兜住，多少还会有遗漏，因此开发、测试、灰度阶段时你需要不断的调整或补充设计方案。

写在最后

鉴于大家所处的工作环境和能力阶段不同，作为交互设计师，你可能还在公司担任着UI设计师或则产品经理的角色，所以还需要掌握更多的软件技能。但软件毕竟只是工具，重要的还应当是设计思维，千万别陷在工具列表里自嗨，工具只是用来解决问题的，掌握工具的数量和设计能力完全是两回事。

最后的最后，欢迎大家随时和我探讨交流，后面也会陆续更新交互设计硬知识系列文章-文档设计、进阶书籍、基础理论、数据知识、案例讲解等！

Powered by Froala Editor