今天给各位分享交互设计说明文档模板的知识，其中也会对交互设计报告书进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、项目的交互文档怎么写
• 2、交互说明怎么写？
• 3、交互设计说明文档内容

项目的交互文档怎么写

1、交互文档用来记录在交互设计过程中的任何内容，供团队内人员或者其他相关人员使用。

2、从长远来看，交互文档对整个团队比较有好处。

一个好的交互文档：团队的新人通过文档可以轻松接手。

1、设计系统 (DS)的说明

设计团队有一个很大的DS，实际使用时有些组件的用法和DS里写的不太一样。这时需要记录下来到底怎么用、举列、说明建议的用法和不建议的用法等，以便团队所有设计师都能遵守。

还有整个UX pattern（模型）也可以记录，放截图和文字介绍，给新来的设计师或者相关人员查看。

2、记录UX设计时做的决定

做复杂的新产品时，可以记录整个设计过程。如PM给的设计要求、Tech的限制、research、设计上做决定的理由、最后的设计图等。

方便团队外成员了解设计的理由，防止忘记，方便回看历史设计决策并做优化迭代。

3、记录UI里面的所有文字

亚马逊特有的记录所有文案的部分。不建议把UI里面的文字只放到Figma里面，可在UX Documentation建一个表格，放一些截图并把各种UI文字放在截图下面，这样方便程序员们改文字，也方便UX writer查看所有设计师的作品里面用的文字是否有一致性。（有的团队有UX writer）。

1、使用独立文档，可以用Word文档等，不建议放在figma或sketch，给相关人员看的越简单越好

2、根据团队人员和其他相关人员的反馈，不断改善交互文档

3、亚马逊的交互文档模板如下文

1、项目时间年月

2、项目概述

3、商业需求或相关文档的链接

1、该项目解决了核心用户的什么问题

2、用户对于一定要到网页端支付感到很烦，因为这样……

3、用户的需求举证

产品战略：XXX

产品范围：如下图

产品经理：John Smith / john.smith@

开发主管：Jane Doe / Jane.doe@

软件开发工程师：Jack Li / jack.li@

1、相关调研的链接

2、相关调研的要点，例如：90%的用户有5个或者更多的银行账户；收款人的平均数量是16位

对比图【方案1图】【方案2图】

1、开发建议修改……因为……

2、设计团队建议新增……因为……

3、……的限制……

【图】

1、设计原则

2、版本迭代的反馈/限制： 相关人员对版本迭代的反馈或一些限制因素

【图】

1、相关人员评审和反馈记录地址XXX

2、交接文件地址XXX

3、设计系统更新记录

最终版反馈

1、设计团队评审一致通过方案的日期：2022-02-22，无异议

2、技术团队评审日期：2022-02-22，关于XXX有疑问，无其他异议

用户验收记录，例如：没有用户测试的预算，在测试版中跟踪用户数据

【图】

开发过程中的一些备注，例如：2022-02-22，开发提出XXXXX的方案

1、UX文档：XXX

2、产品文档：XXX

3、技术文档：XXX

交互说明怎么写？

所谓交互说明，简单的理解就是对交互原型的解释、强调或补充的说明文字。原型页面往往无法展示全部的交互细节，即便完全做到了，团队中的下游也不一定能够全部get到。所以，一份足够完整和详细的交互说明文档可以减少沟通成本及信息不对称。

相信大多数的交互设计师们都有写交互说明的经历。那么大家知道如何完成一份合格的交互说明文档吗?不妨从以下几个角度了解下到底该怎么写交互说明。

首先需要明确交互说明的读者和在项目中的作用：

很明显作为项目的 交互设计师 是交互说明的主要撰写人和维护者。

在项目进程中，交互说明应由设计师发起， 前端开发工程师 也会协助修订细节。交互设计师更多的关注点在需求到原型的转化，对于前后端能否实现并不是很确定。前端开发工程师对交互说明的的把关和疑问，能够帮助设计师将设计思想转为工程师能够理解和实现的语言。这样交互说明也能帮助前端开发工程师明确设计实际执行方案。

写交互说明文档时，很多人都会疑惑，到底需要写什么呢？我的意见是，站在下游的角度，视觉设计师和开发工程师在需要考虑的与页面相关的逻辑和用户操作相关的内容基本都是需要在说明中体现出来。另外我们应该尽量写得详细些，避免研发同事多次来讨论或者直接按照自己的理解直接实现，这样最终的验收效果也会比较好。那么具体的该写什么不该写什么，这里也做了整理供参考。

用户身份和系统功能页面紧密相关。比如后台系统常见的会区分管理员身份，普通管理员还是超级管理员。

表单校验逻辑：是实时校验还是触发按钮后做校验，还是两者结合，表达清楚逻辑并将相关的提示和反馈描述清楚。

根据项目内容特性和业务将逻辑细节和交互细节表达清楚。比如app可能有锁屏推送，项目是否有数据埋点。

提供一个参考的目录，可以进行适当的调整作为项目交互原型的目录：

相比较word等文本记录工具比较推荐Axure，原因有三：

根据项目类型和情况确定具体合适的排版，基本可以按照从上到下从左到右的顺序去排版。

以上都能理解和做到，已经可以完成一份合格的交互说明文档了。那么怎样才算是一份不错的交互说明的呢？

这里分享几个注意点：

对接的下游有时候是同一部门或同一个同事，目录保持基本的统一，可以降低下游的学习成本，另外也让自己在写说明时不必每次都去思考目录的划分。当然，针对不同的产品类型和产品特性需要去调整制订目录。

拒绝流水账式说明，另外当描述文字过长，可能需要重新考虑是否是设计逻辑存在问题。那么如何让说明文字尽可能的简单呢？

原型设计的过程中，需要展示数据，对数据的模拟尽可能的真实，撰写交互说明可以将场景还原更加贴近真实可能性。而且，真实符合逻辑的数据，研发也比较能更快理解页面逻辑，所以也可以减少沟通成本。

原型页面很多内容是复用，那同样的这些重复的内容，按照常见的处理方法，就会重复写很多次的交互说明（相信大家也会复制粘贴），但是这样带来2个问题，一是研发会不会怀疑前后的交互说明是否有区别，二是如果需要修改的话，需要对所有的相关页面修改，维护的工作量就变大了很多。有2钟解决方法：

每次更新都是一次改进的过程，添加新内容的同时，保留旧的内容，让其他人也看到走过的弯路，让他们知道每次修改都是深思熟虑后的决定。为什么要周知呢？下图，是不是很直接地解释清楚了：

另外，当我们在项目中写交互说明写多了就会发现，组件可以自己设计生成元件库，调用元件库就可以快捷使用，那么组件的交互说明也可以组件化进行归类入库，在需要的时候直接拿出来根据具体情况调整使用。附上，我整理出的交互说明组件库的部分页面供参考，大家可以根据自己的操作习惯和经常接入的项目特点制作一套适合自己的交互说明模板库：

通用交互说明：

页面交互说明：

表文结合形式：

以上就是我在项目进行过程中发现的问题和个人思考的解决方案。但是，并非所有人都喜欢写说明文档或者看说明文档。有必要的情况下，需要跟团队成员强调交互说明的存在意义，推动大家去阅读和反馈，这样辛辛苦苦写出来的说明才能对项目的发展起到真实的作用。另外在项目合作的过程中，除了做好自己的任务以外，要多站在项目的角度上去思考，要去考虑团队中其他角色尤其是下游伙伴是否能够较好及时地实现或完成相关任务，这样思考后才去决定自己手下急需和应该完成的任务项。

交互设计说明文档内容

完整的交互设计内容：

一、设计背景

1、产品定位(目标用户、竞争策略（差异化、控制成本））

2、具体设计内容

3、设计目标

二、流程图

1、业务流程图（各角色的协作运行）

2、任务流程图（用户的操作流程，有：主任务流程、次任务流程）

3、页面流程图（在原型图之前绘制、可便于整理页面间的逻辑，包括页面、行动点、连接线）

三、原型图

信息架构（页面的内容及排布、页面之间的跳转）

四、需求描述文档

功能点、触发条件（要穷尽异常的情况（情况1、情况2、情况3...））、结果描述、备注

五、其他元素

*网络异常处理

1、整页提示（插画、说明、重连按钮、小贴士）

2、预设图、占位符提示（不增加操作负担）

3、Toast/dialog提示（最好给出设置网络的通道）

*临时框（暂停主任务，关闭后回到主任务）

1、警告视图（不易过多，比如访问手机接口是获取用户许可）

2、Toast (1~1.5S,反馈信息但不中断操作流程）

3、操作列表（将不常用的功能入口统一打包）

4、模态视图（输入页面、用户须知等）

标志说明：

页面标题：

写在每一页的顶部。表明当前页所述的功能是属于哪个模块的

对齐：

单个界面之中元素的对齐、界面和界面之间的对齐，页面上任何东西都是应该能找到对齐点的。注释右对齐。

颜色：

使用黑白灰，避免使用黑色线条和黑底白字，灰色会显得更精致。

用深浅不同的灰来表现层次和重点。

合理留白，避免界面过挤或过空。

热区：

标明热区的范围。

紧密相连的热区区分方法：

图片：

使用图片时，要注意和背景融合。

若暂没有找到合适的图标，宁可统一用占位符替代，辅以文字注释。

若对图片内容或风格有想法，用各种形式在交互文档中表现出来。

流程图

主线和分支的走向要始终保持一致（是和否）。

善用辅助线

原型说明：

写清楚各种异常情况的处理

多去考虑一下 交互文档 阅读者的体验，可能就会想尽各种办法来满足他们。

交互设计说明文档模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于交互设计报告书、交互设计说明文档模板的信息别忘了在本站进行查找喔。