ui的交互文档怎么做

一、交互文档目录

1. 便于查找信息的修改记录

2. 全局页面说明和全局交互

3. 全局性方案

全局性方案不仅包含404／403方案、全局请求异常、空状态、页面／信息流加载方案等，还包含一些业务全局性方案，比如平台性的欠费停服流程（所有产品模块均需要）。

二、交互文档布局

1. 单页面文档设计

2. 统一页面内容布局

1 页面头主要包括页面名称、设计师信息和时间信息；

2 主页面可在Y轴方向延伸，X轴方向尽量不做延伸，但是不排除有特殊的业务需求需

3 要在X轴方向做延伸（比如运营平台中有强需要在表格中横向显示十几项信息内容）；

4 交互说明主要包括交互点编号和交互逻辑。

三、色彩和字体

1. 尽量使用灰阶色

2. 统一字号和字体

四、内容

前面说了很多见面展示的东西，内容上的话主要是交互页面和交互说明了，这是个比较复杂的事情，要针对不同类型的业务需求做出不同的页面设计，我就简单说一下需要注意的几个细节点吧。

1. 不同类型的需求应有不同的方法呈现设计

2. 交互说明应便于阅读和查找

3. 交互说明应具有逻辑性

4. 交互流程应具有封装性

交互文档输出内容有什么呢？

***个是简要说明与信息结构，它包含了变更日记和版本说明还有信息结构。变更日志同需求文档一样，我们做原型设计的时候也不可能一次就做到位，一般都需要经过沟通评审后，然后略作调整，填写更新日记方便项目成员看到每次更新的内容，可以提升工作效率。

优途UI教育_交互文档1

版本说明和更新日记类似，只不过更新日志是以天为单位的，而版本说明是以版本号为单位，适合快速迭代且迭代周期比较固定的项目

信息结构就是产品内容，就是它里面有什么然后他们是如何组织起来的。页面的层级又是如何分布的等，信息结构可以让产品成员快速浏览到产品的一个内容、功能、结构等重要的信息，做到一览全貌。

优途UI教育_交互文档2

第二个是任务流程和页面流程，任务流程是指用户在使用产品时，他的每一个每一步操作都会遇到什么结果，系统会如何的去反馈。

页面流程它比任务流程图要更清晰，具体通过页面流程图，不仅可以看到一个具体的页面，还可以看到用户它是如何操作的，从一个页面跳转到另一个页面的一个完整过程。

优途UI教育_交互文档3

第三个是线框图和交互说明原型的话，它既包含了静态的页面样式，也包含了动态的一个操作过程，线框图它代表的是静态的部分，而交互说明则代表了动态的部分。

交互说明在原型中它是不可缺少的内容，逻辑严密，内容详细的交互说明可以让原型看起来更加专业，例如他的文字过多要怎么显示操作瞬间会出现什么样的提示？点击页面的某个部分内容又会出现什么反馈？然后跳转到哪一些页面，这些都是需要设计的，而且需要详细的说明。

UI交互文档的三个阶段

1.1功能架构––––用思维导图画出来

1.2页面布局––––把所有页面都列出来

1.3顺细节，所有的步骤都要有，越详细越好

2.1新问题，新需求，方向跑偏了的需求理解

2.2细节加强，更好的表现方式

2.3从开始***次打开用的时候，易用性的一系列设计

2.4开始考虑文案，特别是首次使用为空的引导

但是此时，在后期仍有问题出现，比如一个功能修改，要有一些细节再加强！

3.1及时跟进开发结果（这次跟进不够及时）

3.2这时候还会遇到很多问题。在以上环节页面都是静态的，有很大部分靠想象。

这时候会遇到实际操作中更多的问题。

及时修改，始终坚持有用的功能，易用的操作，及时的反馈，看得懂的流程~~~

写文档的目的：

1.梳理功能，交互细节

2.给相关开发人员查看，清楚简洁，便于查看。

3.专业性，交互的输出文档

关于交互文档和交互文档与需求文档的区别的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。