交互稿是交互设计师的主要产出。在实际工作中，交互设计师的主要职责，就是根据产品提出的不同需求，用交互稿的形式给出交互方案。而且，交互方案会在产品、UI、开发、测试同学中流转，因此也成为他们评判一个交互设计师能力的重要依据。因此可以这样说，交互方案质量的高低，会成为一个交互设计师能力高低的重要体现之一。

要想画出高质量的交互稿，一方面，要使用正确、高效的方法对需求进行设计分析，然后依据分析中形成的设计思路来进行设计，关于设计思路的养成，可以参与我的小密圈“交互小殿堂_格兰芬多”进行学习（https://t.xiaomiquan.com/Z7ieYfM）；另一方面，交互稿中需要具备完备的结构，以提现交互设计师的专业性。下面，我们来看看如何能保证交互稿的完备性，防止信息的遗失。

交互稿的“目标用户”

要讲交互稿，我们先来看看交互设计师的工作流程：交互设计师从产品经理那里接到需求，跟产品讨论之后，首先需要对需求进行设计分析；在分析之后，就可以开始画交互稿了。交互稿完成之后，要把它交接给UI的同学进行界面设计，再然后是给开发的同学进行开发、测试的同学进行测试。从这里可以看出，交互稿文档的主要“目标用户”，是产品、UI、开发和测试。其实仔细想想，交互设计师的职责，就是把一个功能给“说清楚”：产品同学需要知道这个交互稿是否包含了所有的功能点；UI同学需要知道这个功能都包含哪些界面，每个界面的元素都有什么，元素的状态都有什么；开发、测试同学需要知道功能的流程是什么，点击了页面的元素会有怎样的反应。所以，以上这些信息都必须包含在交互稿中。明白交互稿的目标用户对于画出高质量的交互稿十分重要。

交互稿的必备信息

上面我们提到交互设计师产出的交互稿是给谁看的。我们来总结一下，上面提到的交互稿中必须包含的信息有：

• 界面展现完整的流程
• 界面以及界面中的元素展现需求的所有功能点
• 界面中元素的各种状态
• 元素操作后的效果

对于第1点展现完整的流程，如果这个功能比较复杂，流程比较长或者流程中逻辑比较多，则可以附上流程图，方便产品、开发、测试同学理解；而对于一般相对简单的功能，依据你使用的交互稿的作图工具，分以下两种情况：

- 如果你使用的是sketch，那么可以把所有的界面都平铺在一张图里，UI、开发的同事通过图中的主要界面就可以get到流程；

- 如果你使用的是axure，建议axure里的一个页面只展现一个界面或分支流程（好处是可以充分展现一个界面或分支流程的各种状态，展现十分清晰），此时，流程是通过axure左边的树状结构来展现的，如下图：

树状结构示例

对于第2、3、4点，我们可以通过遍历的方法来走查流程和界面。遍历的方法，就是从头到尾看一遍自己的交互稿，注意其中是否包含了需求中所有的功能点；每个界面中的每个元素，如果用户点击了，它会有什么反应（颜色是否改变？是否需要动效？等等）？点击之后去到哪个页面？如果没有网络该展现什么？这里为大家总结一下：

• 按钮、图标一般就包含三个状态：默认态、点击态和点击之后的状态；
• 用户操作后可能发生的异常情况：无响应，无网络，空数据，大量数据，网络慢，是否有缓存，数据过期，状态的改变（如换城市），首次使用（新手引导）

这里给大家举一个之前做的案例（如下图）。在这个例子中，左边的树状结构反映了主要的流程。由于该需求流程中设计的逻辑较多，因此在最后附上了【流程图】这个模块，方便开发和测试的同学。在页面中，只展现了“我的宜定盈详情”这个页面的各种状态和操作后的结果。

交互稿的附属信息——项目概述

在交互稿的第一页，可以加上“项目概述”这个主题，主要展示该需求的基本信息和迭代说明。增加项目概述这一页，一方面可以记录交互的修改，在发生问题的时候方便追溯；另一方面让交互稿显得更专业，是提升交互稿气场的好方法。

项目概述示例

交互稿的附属信息——设计分析

有一些需求，如果需求本身比较庞大，涉及到的人员比较复杂，可以在交互稿中加入设计分析的部分。这可以帮助大家更好地理解你的交互稿是如何被设计出来的。由于是放在设计稿里，而不是一个专门的需要展示设计分析的PPT，因此设计分析里只需要放入最核心的信息就好，包括：场景分析、产品目标、用户目标，比如下面这个例子：

设计分析示例

以上为大家总结了一份完备的交互稿应该包含的要素。希望对大家有帮助。

小密圈“交互小殿堂_格兰芬多”

下面打个广告。交互小殿堂第二期开张啦！第二期的知识星球，我们有了更响亮的名字“交互小殿堂_格兰芬多”。使用这个名字，是希望大家可以更好的互动，并且就像格兰芬多学院精神那样，大胆探索交互的奥秘，不怕困难，勇往直前。下面我来详细介绍一下知识星球的用法。设置了6个主题，帮助你系统学习交互：

• 场景思维（2周）
• 心理模型（1周）
• 流程设计（5周）
• 正确使用控件（15周）
  
• 测试方案（3周）
  
• 用研（3周）
  

以上这些专题，将每周固定发布在我的小密圈“交互小殿堂_格兰芬多”。

同时，为了让大家更好地掌握每周的专题，安排每周的计划如下：

• 周一在小密圈“交互小殿堂”独家发布一篇主文，介绍本周主题；
• 周二至周五解答圈友们关于本周主题的问题；
• 周六分享优秀交互设计案例，并带领大家解析设计亮点；
• 周日公布文末问题的答案。

下面是交互小殿堂第一期周六优秀案例的截图：

6个专题结束后，会为大家提供7个需求，供大家实战，锻炼之前学到的技能。

具体的安排如下：

• 第一周，给出需求说明和重点提示；
• 第一周剩下的几天以及第二周，大家根据需求进行交互方案设计；
• 第三周集中点评大家的方案，给出建议。     

真的能学到东西吗？

其实在开始交互小殿堂第一期之前，怀疑过自己是否能hold住，犹豫过是否真的能为圈友带来价值，直到。。。大概是7月份，当时的小密圈发生了一次“服务器升级”事件，导致小密圈有两周无法使用，结果圈友们在微信群里的呼声真的让我暖到心底：

出于隐私考虑，以上头像和昵称均已隐去

这给了我极大的信心和鼓励！让我意识到这个交互小殿堂这个圈子的确能帮助大家学习到交互知识。要知道，在这个互联网时代，我可不想自砸招牌啊，哟喂。

加入圈子方法

说了这么多，相信你也有自己的判断啦。如果需要加入，请往下继续看：

点击链接加入https://t.xiaomiquan.com/Z7ieYfM。

现在圈子刚刚建立，实行短暂优惠：

• 两人一起报名，享8折优惠；
• 三人一起报名，享7折优惠；
• 四人一起报名，享6折优惠；
• 五人及五人以上一起报名，享5折优惠；

感兴趣的朋友请加QQ：605130227，以优惠价加入。