先来学习如何制作高段位的交互输出物

【 tulaoshi.com - 平面设计 】

如何制作具有全局把控和细节专注的高段位交互输出物是交互设计师一直需要淬炼的能力。今天阿里的同学把多年的经验写出来，内容超多，全是干货，来收。

交互设计师在项目体验设计过程中常常担任着承上启下的至关重要角色;在项目评审时，交互设计师总是一个滔滔不绝，富有逻辑性的表达角色。除了语言的表达外，交互输出物文档是设计师表达自己态度和思考最有力的语言，也是团队评估资源的重要考量和项目沉淀的最佳途径。

一、交互输出物价值与类型

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：页面流程图例

你可以根据自己所负责的项目类型的不同需求，来选择任务流程图和页面流程图的使用。有时候一张清晰的流程图更能帮助你的团队成员快速了解项目，也能帮助你在设计过程中发现用户痛点以及一些细节的创新。