深度长文｜如何输出一份让团队满意的交互设计交付物

考虑支线流程和异常流程后，合并掉共有的接触点后，我们的流程图就基本成型了。这里就简单放一个概览吧，一个小模块的流程图完成后大概就是这样的。

5线框图篇：逻辑大于形式

线框图是交互设计师主要的交付物，而文档具体的表现形式和工具，则因团队和设计师个人的习惯而异。除了国内互联网公司最常见的Axure外，AI、Sketch、InDesign，甚至PPT都可以用来做交互文档。毕竟交互设计的核心永远在逻辑层面，交互文档自然也不会拘泥于表现层面。

5.1 站点地图型 or 流程分解型

作为我个人来说，在实际项目用到的主要是以下两种表现形式，为了讲述方便，分别简称为“站点地图型”和”流程分解型”。

站点地图型是指按照产品的信息架构，将页面逐一绘制在目录树相应的节点上，使用的设计工具是Axure，最终的输出形式是HTML页面。

流程分解型则是按任务流，将任务拆解为若干个尽可能短小的子流程，将子流程版式相对固定地按顺序画在横向的A4纸上（一般我习惯一张最多排4个页面），工具可以使用Sketch、AI和InDesign中的任一种。

公司项目的具体线框图不方便放，用个人项目的线框图做例子吧。两种方法今年在公司的几个主要项目中都采用过，反响都还不错。

5.1.1 站点地图型（Axure）

优点：

页面带有目录结构，站点地图清晰

页面增删较为方便

可以便捷地制作高保真原型

相比Sketch、AI等可用于视觉设计的软件而言，Axure的功能更为精简，帮助设计师更好地将注意力放在逻辑层面，而不是视觉层面。

缺点：

缺乏规整的排版布局和明确的阅读顺序，难以对流程跳转关系有全局的认识，下游的UI、开发同学阅读时容易遗漏。

输出HTML以外的其他格式较为困难。

母版、元件功能相比Sketch偏弱。

5.1.2 流程分解型（Sketch/AI/ID)

优点：

1

分解成子流程后，逻辑和跳转关系非常清晰，逐张浏览不会漏掉任何页面和交互说明。

2

Sketch的Symbol功能比Axure的母版功能更强大，可以只修改字段值。这就意味着，Axure中只有文字、样式完全相同的组件才适合做成母版。而Sketch中，只要样式相同，就可以方便地做成文字、内嵌图片都可以单独编辑的Symbol，统一设计、统一修改，这就大大提高了组件化的覆盖范围，和组件使用的便利性。

3

版面范围固定，一切交互说明和流程指向都在一张A4纸的范围内，开发同学不容易看漏。

4

可以很方便地打印成规整的纸质版，用于会议时条理清晰地逐张过稿、记录笔记。

5

交互稿可以提供给下游的UI同学无缝对接。

缺点：

1.修改时排版工作量大：想象一下，在4张摆放整齐、且之间已经拉好流程箭头的页面中间，忽然要插入一个页面时，设计师心里一定是一万头羊驼奔过——不但要重新整理那些可爱的箭头，更意味着最后一个页面要移到下一页。

2.而这样的改动在方案初期和中期实在是太常见了。所以，虽然拆解成若干子流程后，页面的增删并不会引起大面积的排版变动，但在子流程内，还是不可避免会导致这样复杂的重复劳动。因此，更建议这种类型的交互文档用于方案定稿（或至少接近定稿）阶段的输出。

制作可交互的高保真原型没有Axure便捷，需要对接Flinto、Origami Studio等外部软件。

以上两种类型的划分仅供参考，工具各有自己的优缺点，实际项目中根据团队习惯和效率要求，灵活选择最适合自己的方式才是最好的。

5.2 向优秀的线框图进阶

线框图在完整地紧扣目标、体现流程的基础上，注意下面这些可用性问题，可以帮助自己的线框图更好地向“优秀”进阶。这里在总结时部分参考了鸿影的《交互设计方案衡量标准的五层总结》中提到的点，并结合自己的实际项目经历进行了补充、解释和完善。

1.信息层级简单清晰、密度合理，元素排布符合平台规范和排版习惯

2.建议使用黑白灰单色系（也有深蓝、蓝、浅蓝的做法，同样是单色系，这方面看个人喜好了）以避免色彩对下游UI同学造成先入为主的干扰。

当然，在项目配备的人数较少时有一种例外情况，如果一个项目是同一个人兼做交互和UI，而且方案已经大致确定的话，交互稿中的页面可以考虑同时作为视觉设计的产出物，只要将页面切出来加上标注就可以作为视觉稿使用。这种情况下，交互稿直接按真实的UI规范进行绘制也是可以的。

举个例子：

在办公管理平台APP和光缆巡检平台两个项目中，我同时兼任交互和UI，就采用了这种方式，根据开发同学习惯，两个项目分别使用站点地图型和流程分解型绘制交互稿，交互稿在基本定稿后就直接在交互稿上按照UI规范进行视觉设计，进而输出视觉稿，都取得了同事和PM不错的反响。

总之，要么就严格按UI规范进行文字和色彩设计，要么就用单色系，不要四不像。

和流程设计中同样的，不在APP内的页面同样不要在线框图中遗漏，容易忘记重要的接触点。

3. 操作控件易于发现和理解，符合用户已有的平台或者竞品使用习惯，有较好的自解释性，避免在成型的规范和习惯上大刀阔斧地发挥创意。跳转形式、手势、操作反馈等交互行为符合平台和产品自有规范，降低用户认知和学习成本。同时，产品内应注意组件的一致性，这点可以通过控件、信息元素的组件化解决（这也是Sketch作为工具最大的优势）。

4. 必要时可以设计引导提示，但不应打断用户。

5. 避免用户的误操作造成较大损失。涉及大段信息的文字、表单输入时提供自动保存功能，在合理的情况下提供撤销和恢复的可能性。

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!