交互设计说明文档模板（如何写一个完整的交互说明文档）

编辑导语：交互说明文档可以让项目人员更加快速地理解设计规划，进而推动后续项目的进行与落地。这也就要求交互说明文档的撰写需要清晰、明了、完整。本篇文章里，作者就如何书写一份完整的交互说明文档进行了总结，一起来看一下。

在0到1的产品开发流程中，项目经理经历过需求阶段，开完需求评审会议后就开始投入到原型的制作了。原型是公司内部的产品使用说明书，所以画原型的时候，项目经理应该去思考如何能让UI和技术人员更快速、准确的理解原型的交互说明？

所以今天就来和大家分享一下，如何制作出一份完整的交互说明？

当产品经理把原型图画好时，旁边都会写上一些关于产品原型的一些规则或者是一些操作等等，这些都属于交互说明。所以可以把交互说明简单理解为是对产品原型的解释、强调、补充。

在公司内部，会把交互说明当成一个简单的、初步的产品使用说明书。我们可以把交互说明想象成一座桥，桥的一端站着项目经理，另一端站着UI设计师和程序员，通过桥的连接，能让产品经理把产品操作规则、限制条件、变化形式等，准确的让程序员和UI设计师了解，快速地投入到产品制作的工作中，设计出产品。

当我第一次写交互说明的时候，我非常疑惑，到底交互说明要写什么内容呢？

做了几个项目之后，我的经验告诉我：首先，把自己假设成一个用户，当我在使用这个产品时，我希望这个产品能怎样的简化我的操作路径？

其次，我角色从用户变成产品经理，我希望让用户看到什么，使用什么功能？最后，我又从产品经理变成技术人员，这个功能到底可不可行？符不符合实际情况？根据这三种不同的身份，写出产品的交互说明。

1. 步骤一：统一思维

为了让文档的视觉性更强，就需要做到一个统一。比如你的机模要统一，操作规则、字体大小行间距都需要统一，包括思维也要统一。

统一思维，就是要把用户想象成猪，又笨又懒，不要认为用户肯定不会做这个错误，所以不写出来。要保证整个产品的严谨性，比如登录页面，如果你登录不了，那到底是手机出错，还是验证码出错，你都需要告诉用户，不然用户云里雾里登录得太麻烦，他就不登陆了，那你就失去了一个用户。

所以在写错误提醒说明的时候，只要说出错误的原因，也要给出解决的方法，让用户觉得你这个产品是人性化的，不会激起用户的愤怒感，从而继续使用产品。

2. 步骤二：明确每个要写的部分——页面、模块、交互说明

我在工作中习惯把交互说明文档分成三个部分，第一个部分是页面，第二个部分是模块，第三个模块是交互说明。

首先，你需要把你构思的产品在文档里画出来，把产品的每一个页面都画到交互说明文档来，放在页面这个部分。

所有页面两种状态：一种是进入即可看见的状态，另一种是操作后状态（隐藏状态），只需要画一种状态即可，另一种状态的变化规则要写进交互说明。页面需要整洁清晰，布局统一。不需要花里胡哨的颜色，只需要简单的基础色黑白灰等就行。我们不是UI，不需要为产品上色，只要能区别即可。

然后，把每一个会变化的、需要解释说明的模块，单独拖到模块这一部分。接下去的交互说明呢，就是根据一个个模块来写的。

第三部分的交互说明一定要写得很详细，千万不要吝啬文字，要写清楚限制条件。

我刚入行的时候那时候只是产品助理，遇到过一个情况：有一个项目，由两个产品经理负责，其中一个产品经理写的交互说明写得不够细致，导致程序员没有看懂。程序员就不断地问项目经理，被项目经理痛骂，说他脑子不好使，程序员吃了瘪。

再后来，程序员遇到自己看不懂的地方，就按照自己的想法来，搞得项目一拖再拖。两个人都被人事批了一顿。

从此以后，每当我写交互的时候，我常常反思：该怎么把交互说明写得细致呢？如何一针见血地把要点表达出来？那就要从以下3个维度分析：

1. 按钮、图标等操作以后出现的状态变化。
2. 刷新、加载（上划下滑）、数字显示等页面规则。
3. 错误提醒、弹窗等。

使用过微博的朋友应该了解，当你看到一篇你觉得写的不错的文章时，你给这篇文章点了个赞，它的爱心图标就由空心的爱心变成了红色爱心，并且爱心后面的数字也往上加一。如果超过100万人点赞的话，就会一直显示100万 。这些按钮的变化或者一些数字的显示规则，都需要写到交互说明里面。

你在刷抖音的时候，在刷新的时候，你有没有想过它一次能加载几条视频？我就这么无聊，还真的去数了，但我不记得准确的数字了，好像是30个。如果你在写加载规则的时候，也记得把加载出几条内容也写进规则里面。

我分析过36氪的账号密码登录页面，（除了账号密码登录页面还有验证码登陆页面、一键登录页面）。

例如用户再点击这个区号时，页面会跳出弹窗，这时候我们也得把弹窗的样子画出来，包括弹窗的一些操作规则也得说清楚。

如果用户在输入手机号，会获取光标提示文字消失，尾部出现删除的按钮，这些规则是需要写进交互说明的。

包括用户将手机号格式输入错误时，就是不等于11位开头也不为1时，点击按钮出现的错误提示，请输入正确的手机号。这个错误提示也是需要说明的。

分析一下以上操作时，最好把该页面的全局说明、页面说明、页面权限、使用场景交代清楚。就是要把页面进入的方式，跳转到哪些页面；是VIP才能使用的，还是普通用户也能使用的；用户是在什么样的场景下会使用该页面；等等关于页面的都可以说。这样可以让UI在设计的时候更加个性化、人性化。

3. 步骤三：检查

对一些隐藏状态的规则，和错误提醒的设计一定要写清楚限制条件。

比如返回键千万不要忘记画，既然能进入到这个页面，就要能往回退到前一个页面，要能进就能退。

同理，有成功就有失败，你既然能够操作成功，就有操作失败的时候。比如你使用发布功能，如果字数超出限制，就不能发送成功，就会失败，所以这些规则都得制定好。要睁大双眼检查自己可能会出错的地方。

四字真言：增删查改。对于缺少的内容，补充完整。

比如用户在发表评论时，需要限制评论字数，但在交互说明中并没有写，你就需要补充上去，留下能表达出意思的说明即可。如果你从元件库里拖出来的按钮，你还解释了一遍，说明这个解释是不需要的，因为从元件库库里拖出来的按钮，他已经有含义了，不需要你再去解释一遍。

产品经理在写交互说明的时候，需要不断地提出问题，思考：这个功能要为什么要这么放？它需要怎么变化？用户希望产品是怎么样的？

写清楚操作内容、限制条件，但要拒绝流水账式说明，另外当描述文字过长，看是自己在语言表达上存在问题，还是可能需要重新考虑是否是设计逻辑存在问题。

如果有一些核心功能、重点内容、复杂难懂的交互，可以在必要的情况下，需要先跟团队强调交互说明的存在意义，推动大家去阅读和反馈，才能对产品的发展起到真实有效的作用。如果交付文档后，UI或者程序员实在有看不懂的地方，也要欢迎他们随时来问，避免以后出现更复杂的问题。

本文由大吕不加班 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自Unsplash，基于 CC0 协议