互动设计师在专案体验设计过程中常常担任着承上启下的至关重要角色; 在专案评审时，互动设计师总是一个滔滔不绝，富有逻辑性的表达角色。除了语言的表达外，互动输出物文件是设计师表达自己态度和思考有力的语言，也是团队评估资源的重要考量和专案沉淀的理想途径。
一、互动输出物价值与型别
1. 原则
互动输出物是设计师思考结果的载体。承载您的想法和方案，使之能有效地传递给合作伙伴，用于协同团队工作。让您的设计观点视觉化，减少沟通成本，易于专案追溯。互动输出物的原则是在内容和形式上，易于理解，利于协同。
1) 易于理解：通过您的设计输出文件能有效清晰地传递出您的思考和方案想法是互动文件的重要的价值之一。互动设计师的输出文件，在文件内容的搭建和梳理，以及文件表达的形式上，都保证让团队每个成员能快速理解您对于某个需求所做的判断和设计解决方案，并能感同身受的领会其内涵。
在某些大中型的专案中会经常遇到，团队成员对于专案概念和目标的理解存在着偏差和不同。所以互动设计师不仅需要完成专案的设计方案，还需要将需求分析，专案目标拆解等思考过程融入到自己的设计方案输出中。设计输出文件需要能引领团队成员对于专案的思考和想法的认同，并确保设计方案能够有效执行，这对互动输出物提出了更高的要求。
2) 利于协同：当您面对专案中参与合作的角色众多，或者遇到需求变更频繁时，互动设计输出物需要做到设计师之间，或是上下游之间在内容的填充和形式的把控上能保证一定的协同和基本的认知，能快速地参与合作，保持统一风格的输出表达。 (如图 1)
图 1： 互动设计师上下游合作角色
2. 输出物基本型别
一旦踏入互动界，会有很多关于互动输出物的名词蹦出来，例如：线框图，原型，高保真，低保真等等。很多新人常常会被这些名词弄混淆。我觉得先可以先简单理解：线框图和原型是在不同设计阶段用到的两种不同的表达手法。而越是接近终产品的真实效果的输出我们称做高保真，反之我们称做低保真。
那下面我们就详细地说说线框图和原型他们各自的特点和用途。
1) 线框图 (Wireframe)
设计师或者需求方对于产品的一种快速的、静态的、清晰的表达手段。用于专案前期的讨论和沟通，给专案成员间或者和客户沟通时提供一个大致的概念和讨论方向，以便快速的理解和及时的提出自己的建议。
线框图需要达到以下 3 个目标：
能界定页面的大致结构和布局
能清晰表达内容资讯的展示位置
能包含介面的主体互动元素
线框图一般不会过多的要求细节和华丽度，在内容的真实性上也不会有过高的要求，但必须能表达您的设计思考和方案。主要以黑灰线框和简单的块面及占位符来组成整个线框图。 (如图 2)
图 2： 低保真线框图
线框图输出方便的就是手绘。在一张纸上呈现简易的介面布局和关键的注释，在敏捷专案流程中运用的比较广泛。通常在敏捷团队中，用快速迭代的线框图和团队中大量的沟通和讨论，产出专案关键的介面方案，视觉和前端开发即可开始下个阶段的工作，互动设计师则继续完善方案细节和状态的补充。多种角色齐头并进，这是敏捷设计相对传统的瀑布式合作方式来说独具特色的地方。
当然画线框图的工具也很多，常用的有 Balsamiq Mockups，Axure，PPT，Sketch 等。每个工具都有各具特色，也各有利弊。不要刻意地纠结于形式和工具方法，能使用的习惯和满足自己设计方案的表达即可。
2) 原型 (Prototype)
原型比线框图更接近产品终的形态，它用作对多用户进行可用性测试和专案的设计输出。专案早期的原型测试能够及时的发现问题和漏洞，节省后续的开发投入成本。原型是可互动的，并且尽可能接近终的产品介面的高保真设计稿。也是我们本文常提及的大家普遍的互动输出物。
二、高段位互动输出物
互动输出物是设计师对于产品或者需求的思考总结的一种表现形式。设计师将需求方提出的专案需求和已有的资料加以整理、分析，经过发散的创造性思维创新和严谨的逻辑论证后，得到了逐渐成熟的互动产物。这个思辨的过程贯穿于互动设计工作流程的每个环节。
有一些特别优秀的产品经理也能画出个看似正统的互动稿，眼看就要直接进入视觉阶段了。这也是有些视觉同学转互动的时候，常常遇到的问题，互动稿不知如何表达、草草收场，落得产品经理评价和我画的也无差。这时就要看互动设计师如何用自己的互动输出物说话。有追求的设计师会把自己的详尽的思考和的原型打造成同视觉稿一样精美的赏心悦目，甚至用工具诠释更丰富的动效，将自己的输出物提升至更高段位。有人会问，不就是个互动稿吗? 能高到哪去?
1688UED 对于互动设计师的产出内容范围要求不仅仅停留在完整的互动方案上，还上升到设计师对专案前、中、后三个阶段全程思考和创新的跟踪和记录 (如下图 3)， 并且根据专案的重要程度 (A+、 A 、 B 、 C 层级) 来确定专案互动阶段需要产出的内容范围。 (如下图 4)
图 3： 互动输出物内容
图 4： A 、 B 、 C 层级互动输出物
内容要求一个设计师对于输出物的层次把控和逻辑要求，能体现和大致还原出他的和深度。那普通的互动输出物和的互动输出区别在哪儿? 我们就以下面几个关键性内容来做详细解析：
1. 层层递进的文件逻辑
如果将互动输出物看作是您在专案中阶段性的输出文章作品的话，其中的文件逻辑就是您这篇文章的目录。如何能让人从阅读目录开始就能对您的设计推导过程和方案有初步的认识和信任，如何组织输出物里的内容是其中的关键。
构建互动输出目录，可以根据专案型别确定组织方式，初步确定架构和页面量多少。 常用的 4 种组织方式供您参考：(如图 5)
1) 按修改版本组织：适用重点单页面型专案，如网站页，行业频道等。
2) 按产品层级关系组织：适用整体平台类专案，如我的阿里。
3) 按操作流程组织，适用于业务流程型专案，如下单付款，会员开通等专案。
4) 按参与人员组织：适用多个互动设计师共同完成的专案，如专案共建。
图 5： 输出物文件结构组织方式
2. 元思考
在专案接手时，设计方案开始之间，设计师对于这个专案原始的需求分析，目标多用户诉求的理解等思考发散的过程我们称之为设计元思考。 也可以归纳为做设计方案前必须要搞明白的三个问题：
1) 为什么要做这个?(目标)
2) 这个需求针对的多用户群是什么?(多用户)
3) 什么场景下会使用到这个功能?(场景)
这个部分其实一直都在设计师的脑海中，只是有些同学觉得不必展示或者不会表达。 1688UED 团队总结了岗位工作的思考过程和规律，并将其进行抽象化和体系化，辅之以相关的方法和原则，形成了 “五导家” 这一套 think-flow 方法论。 (如图 6)
图 6：五导家步骤概要说明简图
支撑五导家推导过程的是大量的设计分析和资料梳理。我们会运用到竞品分析，眼动测试，问卷调研资料分析等方法，让我们在设计过程中更深入地探清多用户的痛点和诉求，让我们能在更好地为多用户解决问题的过程中，明确设计在其中发力的关键点。我们将这部分思考的过程放进我们的互动输出文件中，让我们的思考过程从神秘的黑盒变成理性透明的白盒，帮助别人信任我们的设计方案和推到结论，建立良好的合作关系。
3. 资讯架构规划图
在设计大部分的电子商务网站页、行业频道或者网站搭建等型别的专案中，经常会用到资讯架构规划图的设计思考表达方法，即用图形化的方式来描述出产品清晰的资讯构架。 (如图 7) 每一次资讯架构的重组都是互动设计师一次锻炼的好机会。资讯架构越庞杂，对互动设计师的业务理解、目标多用户场景设定、产品的全域性观把控等能力的要求就越高。
图 7：资讯架构图例
对专案全域性资讯架构有一定深入的了解后，我们会根据资讯的优先层次，多用户的关键路径，业务逻辑资讯来设计我们页面资讯的架构规划图 (如图 8) 包含以下 2 个关键点： 1) 介面的主体的布局和框架，比如搜索框位置，主体导航框架，产品坑位，页面区块划分等。 2) 多用户视觉流的规划。比如一个频道页面，页面的重点资讯的传达，多用户对于资讯认知的过程。
图 8：1688 页设计资讯架构规划图例
资讯架构规划图的描绘，能让您在着眼于细节、区域性的设计之前对整体产品节奏的把控，资讯全域性的分析，以及多用户传递的精准都能胸有成竹。它就像在行兵打仗时，将军台前的军事策略地图，不仅能帮助设计师用更敏锐的眼睛观察多用户使用情景和业务场景，以此做出更为准确的设计策略和布局方案，还能使上下游的团队成员一起快速决策与协同。
4. 任务流程图和页面流程图
流程图是将一些具有特定逻辑关系的步骤和过程，用图形化的形式表达，让其他人能快速理解。任务流程图和页面流程图是两种不同用途的表达过程和步骤的形式。
任务流程图：常常以一个多用户角色完成专案中从开始到结束的所有任务的流程图。其中包括各种多用户角色之间，多用户与产品介面之间，前端介面和后端资料之间在任务流程中的过程和关系的表达。任务流程图能让您的思维更清晰，让您在设计过程中细致到每个细节中。 (如图 9)
图 9：搜索任务流程图例
页面流程图：
这个专案或者产品中涉及到的页面，以及页面上下游之间的跳转的关系和组织表达的方法。通过勾勒专案页面流程图，能更清晰的表达多用户在产品使用功能过程中在页面间互通的互动关系，让设计师对于产品整体的流畅性和统一性有更好的把控。 (如图 10)
图 10：页面流程图例
您可以根据自己所负责的专案型别的不同需求，来选择任务流程图和页面流程图的使用。有时候一张清晰的流程图更能帮助您的团队成员快速了解专案，也能帮助您在设计过程中发现多用户痛点以及一些细节的创新。