作为一名交互设计师，撰写交互文档是我们的工作内容之一。通常情况下我们会使用一款名为“Axure”的软件来进行这一工作。不过这是一款2016年初推出的软件，因此已有几分“廉颇老矣”的味道，如：资源包老旧造成原型观感差、操作不便利导致出图效率低下、软件扩展性/兼容性差影响团队协作效率等，尤其是在Mac系统下，常常出现卡顿、延迟甚至崩溃等现象，极大影响工作效率。

 

虽然在官方更新的Axure 9 版本中，以上问题得到了一定程度的缓解，但由于不（买）可（不）抗（起）原（正）因（版）我并没有成功升级，因此我便将目光转向了我们今天的主角——Sketch。

 

但是问题也随之而来，Sketch无论从操作方式还是功能支持上与Axure都有较大的差异，而网络上也没有找到任何一篇文章对如何使用Sketch撰写交互文档进行过详细讲解，因此这里我就简单向大家分享下我在使用Sketch进行交互文档输出时遇到过的问题，以及我是如何解决它的，希望能够帮助到大家~

 

说在前面

在开始讲解之前，先让我们简单认识下Sketch文件的结构：

其左侧是按顺序依次排列的页面列表（相当于Axure的目录），右侧区域是一块无限宽高的画布（相当于Axure的画布），画布中包含多个画板。对比之下我们可以发现Sketch与Axure最大的不同在于：1.目录不支持相互嵌套；2.画布中存在嵌套关系，1个画布包含n个画板，1个画板可包含1个或n个界面。

 

这两点结构上的不同催生了以下问题，即：

1.如何打造清晰的目录结构？

2.如何创建界面并展示界面间的关联关系？

 

注：由于Sketch的最小粒度是画板，且许多功能均是针对画板进行设计的，故建议遵循“界面=画板”原则，即1个画板对应1个界面。至于1个画板到底对应1个界面还是N个界面，需根据实际项目中的具体表达意图再行定义，在此问题上这里不再进行讨论。

 

一、如何打造清晰的目录结构

 

首先，由上文可知Sketch不具备像Axure的复杂功能（页面与页面相互嵌套，且支持建立文件夹），先天上存在不足，那么为了在页面列表中能够清晰展现各页面（功能）间的层级关系，我们只能在后天上通过视觉化的手段进行补足，这里列举两个我正在使用的方法：

· 在功能名称前添加“空格”

即第一层级不作调整，第二层级在其名称前添加4~5个空格，第三层级在第二层级基础上再添加4~5个空格，以此类推…通过视觉上的相似性原则，实现伪嵌套效果，从而使我们可以一眼分辨出各个模块之间的从属关系。

· 在层级的结尾处添加“分割线”

虽然通过上边的方式我们已经得到了一个层级关系相对明确、结构清晰的页面列表，但是当功能模块比较多的时候，查找过程中时仍难免出现从属关系不明确的情况，因此最好在每个一级层级结尾处增加一页空页面，以“--------”来命名，充当分割线，从而使观者更加明确的知道各一级层级的起、终位置。

另外，需要注意一点的是，由于Sketch的目录功能比较单薄，层次区分不明显，大家在搭建目录结构时，层级最好不要超过3层，以免影响可阅读性。对于那些功能点众多的中大型项目，建议可先按一个主功能一个Sketch文件，每个Sketch文件下再下设3级的方式搭建，既可以防止文件过大造成卡顿，也可以增强文件的查找、阅览效率。

二、如何展示界面间的关联关系

 

接下来，我们说一说界面布局的问题，在Axure中为了清晰地表示页面之间的关联关系，我们常常会根据一个任务的操作流程，使用流程线将页面串联起来。而Sketch中的流程线只能通过程序在画板与画板间自动生成，流程线间相互穿插、交织，严重影响阅读，反而不能清晰地表示页面间的关联关系。既然传统的流程线已不再适用，为了能够明确、直观地标明各任务流程的起终点及中间过程，就需要我们在界面布局及界面命名上更具条理性，从而引导观者阅读，构建完整的任务流程。这需要我们注意以下几点：

 

· 对于一个任务流程中的一系列界面，应相邻、成组放置

过程中需要注意横向上按用户操作流程依次排列，若某一界面存在多个分支状态，则紧邻、并排放置（间距远小于正常间距），利用命名进行区分；对于分支状态存在较长流程的，则建议单独拎出展示，纵向依次排列。

· 应在任务流程上方标识流程名，流程名命名格式为「流程序号.流程名称」

 

· 应标识用户操作的先后顺序，即界面命名格式为「流程序号_编号+操作名」

需要注意的是，对于同一界面的不同状态，只需在操作名后注明状态即可，编号则依旧相同，即「流程序号_编号+操作名（界面状态）」

这样观者在阅读文档时，只需按照编号的先后顺序进行查看，即可了解到该任务流程中的全部过程，即使存在中间状态，由于编号一致，因此阅读上也不会受到过多的影响。

 

另外，如果是向客户汇报或关键方案评审时，为了进一步清晰表明逻辑关系，我们依旧可以延续在Axure的表达形式。在创建好界面后，新添加一个画板，在该画板中置入需要说明的界面及相应的流程线、以及说明的内容。

 

说到最后

不论是Axure还是Sketch，归根结底只是工具上的不同，重点还是在于表达想法，更高效地完成团队内的信息传递，提高协作效率，至于具体使用哪款软件以及文档规范问题，还需大家根据自身的团队特点及诉求，有目的性地进行选择。