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

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

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

（编辑：PHP编程网 - 湛江站长网）

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