做好这个交互文档细节，让你和工程师的合作效率提高50%

怎样的交互设计才算清晰完整，下面是从实际项目中总结出来的一些经验，分享给大家，共同学习进步。

产品交互设计稿和研发结果不一致

从毕业到工作，作为一名交互设计师，经手的项目也不算少数了，时间久了，会发现一个问题：无论设计书中的内容架构多么清晰，理论多么详细，我们在实际的项目中还是无法做出完美的产品设计，还是会容易忽略一些问题。这让我想到了我们念书时，虽然教科书上的知识我们都学习了，老师也给划重点了，但是考试的时候，也不会全是满分。在学校的时候，我们会整理错题集，把错题的原因和需要注意的知识点记录下来便于后期复习。同样，今天我也把自己在实际工作中遇到的一些问题整理出来，和大家一起学习进步。

让研发工程师苦恼的交互设计文档

产品需求：用户可以将文件重命名。

交互设计第一版：

iOS研发工程师看了设计稿后，QQ发来信息：

• 研发工程师A：从一个文件点击重命名进来，是否保留原来的文件名字还是自动清空？
• 研发工程师B：支持的字符数有限制吗？

Android研发工程师看了设计稿后，微信发来信息：

• 研发工程师A：文件名称可以是空的吗？
• 研发工程师B：是否支持特殊符号？
• 研发工程师C：特殊符号有哪些啊？

为什么会遇到这样的问题？

分析原因：交互设计文档只给出了一种情况，就是重命名文件的过程中。但是没有给出重命名文件的初始前，空值、极值、默认值和异常状态是什么样子。

研发人员在编写程序的时候会遇到以上问题的，但是交互设计文档上没有说明，所以他们当然要追问了。追问的研发工程师其实还算好的工程师，有些研发人员遇到交互设计文档中没有标注的情况会按照自己的想法做，这样就会导致同一份设计文档，iOS和Android会研发出两种不同的交互方式。

有时候交互设计师在做设计的时候，脑子里会想到这个动作的开始，过程和结束，但是没有落实到纸上。以为研发工程师也会和你有同样的解决方案，但是万万没想到，研发做出来的效果是截然不同的。

不同的职业，背景不同，思考问题的思维也不同，所以如果想让对方和你有同样的想法，最好的方式就是把你的想法说清楚，说详细，越详细越好。

解决问题

分析了原因之后，我们就要想办法解决问题。细化交互设计，把异常情况和动作的开始及结束会遇到的各种状态都详细的说明出来，保证产品设计的一致性。这样无论是哪位研发工程师，拿到交互设计文档之后，都会做出同样的产品，这样用户的体验就有保证了。

补充后的设计文档如下：

怎样才能考虑周全

那么问题来了，有一些刚接触交互设计的朋友会问：我也知道交互设计文档需要细化，但是有时候不清楚需要细化哪些地方。产品经理在给需求的时候也没有给的那么详细，有时候一个需求仅仅就是一句话。说到这里，可以分享给大家一个方法，我在做设计的时候是这样用的，而且效果还不错。

拿到需求后，我们通常会想到最常见的情况，那就先把这个常见的情况画出来，然后心里暗示自己，「应该还有其他情况」，「总感觉好像少点什么」，然后就转变自己身份为「测试」，给自己的设计提问题：

• 是否有空值情况，如果有怎样处理？
• 是否有默认值，默认值是什么？
• 功能是否有范围？如果有，最大值和最小值是什么？如果超过了此范围应该怎样处理？
• 这个操作的上一步是什么？它是怎么过来的？
• 这个操作的下一步是什么？还有其他情况吗？
• ......

我们再来看一个类似的功能设计，需求是用户可以自定义房间名称，用上面的方法设计后，文档内容如下：

按照以上的方法训练自己，不出很长时间就会设计出很标准的交互设计文档。。当UI设计师、研发工程师、测试拿到你做的交互设计文档后，也会被你的专业震撼到的。平时工作中就注重细节，规范设计文档，这样到了你想跳槽的时候也不会花太多时间和精力准备作品集，机会总是留给有准备的人。

「新人要知道的交互文档」

• 《超全面！教你打造美观清晰易使用的交互文档》
• 《专业的交互输出文档应该怎么写？高级设计师来教你！》
• 《专业干货！如何写一份全面易读的交互说明文档？》

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备： http://hao.uisdc.com