作为交互设计师，天天画的就是交互稿了。而对于许多新手交互设计师以及想转行做交互的同学们来说，一定都很是想知道大厂的交互设计师画出来的交互稿详细是什么样子的。但和视觉稿差别，交互稿内里体现了太多产物自己的逻辑，难免涉及到一些敏感内容，所以详细的交互稿不太适合直接分享，这就是比力尴尬的问题了。

不外，这不故障我为你们做一份交互稿模板。一来我自己也在用，二来可以资助大家，何乐而不为。但我必须重点强调一句话：框架是死的，人是活的，纷歧定要拘泥于某种形式，你可以凭据自己的需要自由修改。模版一：PPT 型的分页交互稿第一个是 PPT 型的分页交互稿，这个样式最早是从腾讯 CDC 团队流传下来的，我在第二家公司的时候就从他们的博客中看到过，其时还用 InDesign 做过一个模板。

而我现在所在的团队用的也是这个，因此我过来后就自己重新用 Sketch 做了一版，利便以后使用。1. 封面封面很简朴，就是文档标题和作者，顶部有一个通用的文档标题栏，上面的内容包罗：项目名称：阿尔法项目（示意）页面标题：iOS 主界面框架（示意，凭据每页的内容举行变化）版本号：1.0（每修改一次都要 + 0.1，固然你也可以直接酿成 2.0、3.0）修他日期：2018-07-24页码：分为当前页码和总页数我在 Sketch 中为这个模板中需要改动的内容都界说了 Symbol，好比这个标题栏，你只要选中之后，就可以在右边的属性面板中自界说内里的内容。

2. 修订记载修订记载这页，记载了从文档建设开始，每次更新的主要内容，以及相关人员，利便后期交接的时候给对应的产物司理、游戏筹谋和设计师检察。有时候交互稿更新一次只是修改一小处地方，如果不备注对方就会很难找到，可能以后你自己都市遗忘。这一块我也界说了 Symbol 元件，你可以直接复制一行，然后修改内里的内容，「更新内容」的文本支持多行输入。

3. 目录这种分页型的文档一定要有目录，备注好每个模块对应的页码，否则十几页看下来都晕了，每次想找到对应的界面还得重新翻一遍。4. 内容页面详细的内容页面才是交互稿的焦点，一般会用小气泡和箭头举行标注，然后在右侧用对应的数字和它们对应，写下详细的交互说明。

结构可以有许多种，好比上面这种竖屏的界面可以是左右结构，如果是横屏界面还可以是上下结构等等，凭据情况自由调整。文字段落的样式我已经界说好了，直接修改套用就行。其中最重要的气泡我也做了元件，选中之后直接在右边修改数字即可。

5. 导出方式使用这套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可将交互稿导出成 PDF 文档。我很喜欢这个花样，与 PPT 相比，PDF 在任何平台都可以通用，包罗手机、Mac，不用特地装什么软件都能很好地打开。模版二：长图型的流程交互稿另一种是更常见的交互稿形式，这也是我这几年进腾讯后一直使用的花样。

如果你曾经用过上文先容的 PPT 型模板，你一定会发现：它的利益是 PDF 分页花样很是整齐，比力适合一次性做一个大产物的交互功效先容，而不适合小功效的频繁修改。今天先容的这第二种，则是越发轻便快捷的类型。1. 内容模块这种长图型的交互稿，优点很显着：发挥空间大，可以直接在一片空缺上恣意地阐释每个界面、每个流程，展开说种种细节。

分享和阅读都很利便，最终花样是一张 PNG 长图，能随手发给老板、产物司理和其他相关同事，电脑手机都能看。不存在分页和种种花样限制，所以画起来和修改起来都很快，小迭代要的就是效率。来看一张基本样例：它的结构分为：交互稿标题、日期根据项目、模块和功效的方式命名（如：电脑管家 V12 -清理垃圾-深度清理图标化改版），可以最大水平地规范交互稿名称，让其他人很容易明白交互稿涉及的是什么内容。

相关卖力人对应的产物司理，交互稿的作者，利便评审时或者交接后找人。需求配景简朴先容为什么要做这次设计，出发点是什么，遇到了什么问题。主要界面这次设计中，涉及到的所有主要界面，先陈列出来利便大家快速评审和讨论，视觉接手后可以凭据这些来举行气势派头设计。

流程说明有了主要界面后，我们还可能需要对一些操作流程举行说明，好比怎样发送一条语音消息，怎样删除一条会话等等。异常状态最后还要记得检查一下，每个界面在没有内容时的空状态、断网时的异常状态，弹出种种通知的位置等等，千万不要等到开发同学找你的时候才想起来。

上面所说的，就是一份交互稿的常见内容模块了。2. 模板使用该模板是专门给 Mac 平台的 Sketch 用的。下载后（下载方式见文末），打开你会看到这个界面：内里的每个模块我都做了 Symbol 元件，你只要选中就可以在右侧更改内容了。

好比下面的文档基本信息：我还把可能会用到的种种字体巨细、颜色、对齐方式都做成了文字样式：选中文字后，在右侧下拉框中选择你要的样式就好。交互稿用的都是黑白灰，另有蓝色作为标注。

我一直用的这几种，足够用。是不是很心动？别着急，先把这个 Sketch 文件生存成 Template（模板）。然后，你就可以在新建文件时，选择从模板处新建，直接用这个模板开始画稿。源文件下载下载链接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA提取码：npq2备用链接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA作者：WingST（寇敬），男，33岁，腾讯高级交互设计师、腾讯学院认证讲师，9 年事情履历的资深互联网人，曾任 MIG 桌面宁静产物部轩辕设计组组长，现在在腾讯游戏 NEXT Studios 事情室卖力《乐高无限》缔造型沙盒游戏的用户体验设计。

卖力过的产物有腾讯电脑管家 V11.0、加速小火箭 V2.0、腾讯手游助手、腾讯网游助手等。曾在 OPPO 手机、金蝶软件等企业事情，有着 PC、Web、移动端等多平台的富厚设计履历。

结语谢谢大家的阅读，末尾做个小广告，我的新书《交互思维：详解交互设计师技术树》马上就要上市了，这是我自己九年多来做交互设计师的履历总结，也是市面上第一本详细先容交互设计师所应该掌握的职业技术的书，适合所有希望相识交互、学习交互的设计师和产物司理。同时书中也有我进腾讯的发展故事，以及一些小我私家事情和学习方法的分享，绝对物超所值。

本文来源：mile米乐体育官方网站-www.yzjxsh.com