我是如何输出一份完整的交互设计文档？

很多大厂的优秀的设计师都有写过此类文章，但是光看大神的宝贵经验无法转化成自己的实际行为。所以我通过总结大神经验和结合自己实际形成自己的设计方法体系, 为自己所用。

 

一、交互文档的作用

我们先来看一下产品研发团队其他岗位的输出物，产品经理：需求文档，视觉设计师：视觉稿，开发：Emmm代码？那么，交互设计师的输出物是——原型图？NO! NO! NO! 是交互设计文档，原型图只不过是文档的其中一部分。

优秀的交互设计文档可以为产品开发流程带来什么好处？

1.交互设计文档是交互设计师连接上下游的重要工具，团队其他相关者可以通过文档对设计方案有个简单的认识，有助于工作开展；

2.交互设计文档可以使得项目有序的开展，并且作为后续产品测试的依据；

3.统一的文档有利于交互设计师工作的开展，专业的交互设计文档是交互设计师的加分项。

 

二、交互文档的结构

团队成员可以通过交互文档的结构对产品有一个整体的认识，一个清晰明确的结构可以提高整个文档的可读性。交互文档的结构主要由封面、更新日志、设计过程、交互稿、控件库和草稿箱六大方面组成。

1.封面

内容：产品简介、版本信息和人员分工等项目简介。

2.更新日志

内容：产品新增或修改的更新记录

组织：日期+【修改/新增】+页面名称（新增的页面名称）+修改/新增点+修改人+备注

Tips: 可以设置链接方便成员直接跳转查看；更新迭代的信息可以在修改/新增的页面的交互说明中进行标识，以示区别。

3.设计过程

内容：需求分析、用户研究、竞品情况、业务/交互流程图和信息架构等等。

Tips：可根据情况筛选上述内容放上，方便交互设计师用于理解产品。

4.交互稿

内容：界面、流程+交互说明

Tips：这是整个交互设计文档的重中之重，后面单独详解。

5.控件库

内容：放上常用的控件，可提高设计师在设计时的效率。

6.草稿箱

内容：用以存储草稿或废稿

Tips：在设计过程中的草稿和废稿千万不要手残的删掉，说不定以后就是宝贵资源呢！

 

三、交互文档的内容（交互稿）

交互文档的内容主要有页面、流程+交互说明三大方面组成，交互说明中又包括页面元素说明、交互逻辑说明、异常情况说明等等。

1.页面

页面是对界面信息的设计，展示产品功能和元素布局，在设计程中注意页面的布局规范、层级关系和跳转关系。

2.流程

流程展示任务的逻辑关系，流程是如何跑通的都要通过设计清晰的表达出来。

流程设计的原则：一个页面一个任务；每个任务有始有终，即每个任务都有起点和终点；页面的不同状态最好在同一个页面展示，不要忽视极端情况。

3.交互说明

3.1页面元素说明，主要是元素内容和对内容的规则定义。

元素内容，如：控件、字段、按钮等。

对内容的规则定义，如：字段的显示规则、截断规则（超过10个字以外用…表示）、输入限制（最多输入500字）、格式要求等；如：按钮的默认状态、特殊状态、视觉样式等。

3.2交互逻辑说明，主要是触发、操作反馈、特殊情况说明等等。交互逻辑说明遵从先整体后局部的原则，如先页面后页面元素。

○页面交互逻辑说明，如：从哪里可以进入这页面；操作成功/不成功/取消后分别进入哪些页面；怎么进入/离开这个页面（转场方式）。

○触发（触发也可以看成是上一步操作的反馈，但是我喜欢把它单拎出来）,如:点击删除控件，弹出对话框为例。

对话框是在哪里被触发的？什么时候触发的？怎么触发的？它是怎么出现的？要怎么消失？

○操作，常见的手势操作，如：双击、长按、滑动、单击、夹捏等等。

○反馈，如：跳转页面，下一级页面从右往左滑入；状态改变，按钮从未激活状态到激活状态。

○特殊情况，如：页面空状态；加载状态；加载成功进入哪个页面；服务器错误；网络异常等等。

○其他还有动效说明、音效说明、视觉风格注明等交互说明。

 

以搜索为例，启发撰写交互说明思路。

四、交互文档的设计规范

1.字体

字体：微软雅黑，系统自带的字体，在团队协作过程中不丢失

大小：16pt，方便开发阅读

颜色：主要文字颜色#333333；次要文字颜色#666666；说明文字颜色#999999；警示文字颜色#ff0000

2.颜色

尽量使用黑白灰；通过深浅不同的灰色来表示层次和重点，彩色（如红色）用户警告、错误提示。

3.命名

每一页面/界面都要有标题；迭代更新在页面标识。

4.布局

对齐：元素与元素、界面与界面、界面与说明之间保持左对齐

留白：画面留白，不过挤或过空，不能因为是交互稿而忽略美观性

5.格式

交互设计文档可选择的格式有PPT/PDF和HTML。

个人偏好HTML，团队协作时直接发送压缩包就好，提高协作效率。

五、交互文档的设计原则

1.易读性

功能完整、描述简短、逻辑严谨。交互设计文档的用户是下游的视觉设计师和开发，功能缺失会导致拖慢整个项目进度。开发会根据交互说明进行开发，保证描述的简短性可提高开发小哥哥的阅读效率。逻辑严谨，将所有的可能性都考虑到，大大提高用户体验。

2.易于迭代

这也是我不推荐PDF的原因，PDF不能更改啊。但是产品是需要不停的迭代的，所以我们也需要一个可以实时迭代的交互文档来跟上产品迭代的节奏。

3.规范统一

交互设计文档是一个产品，产品的规范统一保证产品的易用性，降低用户的学习成本。统一的交互设计文档还可以提高团队的工作效率。保证文档统一可以在不同的页面使用一致的控件、组件和交互方式。

Tips：一个基本的交互设计文档模板，每次只要使用模板往上填充内容就好了；有些交互说明是很通用的，如：字段的显示规则啦，可以做成笔记，以后直接拿来复制粘贴即可，我一般用有道云笔记，也可以利用思维导图，我一般用Xmind。

4.美观性

不能因为是交互设计文档就忽略美观性啊，好歹也是拿给别人看的，考虑用户体验啊。虽然我感觉我自己的交互稿很丑，hhh

5.创新

保持创新是一个设计师成长不可或缺的道路啊。

 

六、制作交互文档的工具

工具：Axure、Sketch、Keynote、Princile等。

我用Axure，很多大厂也是使用这个软件，在功能层面已经很完善，而且可直接发布成HTML，方便协同。

Anyway，没钱买Mac，没钱买Mac，没钱买Mac，所以，你懂得~

 

最后，我想说输出一份完整的交互设计文档也不是一蹴而就的，也是通过不断的学习积累，这里介绍一下我是如何积累整理出属于自己的设计方法的。

奥野宣之在《如何有效的阅读一本书》中介绍有效阅读的五个步骤，选书、购书、读书、记录和活用。我想可以运用到交互学习中来：

1.找到自己在交互学习中的薄弱环节，如：交互设计文档；（选书）

2.通过各种途径找到优秀书籍或大神文章。（购书）

3.学习优秀的设计师是如果撰写交互设计文档。（读书）

4.学习的过程中要进行笔记。（记录）

5.提炼规律，结合自己工作实际，让设计经验变成自己的设计方法。（活用）

所以，就这样，8~