UE在工作中真实的交互文档撰写

DRD文档的输出

DRD（Design Requirement Drawing）交互设计文档，一般用来承载交互说明，并交付给前端、测试以及开发工程师参考的文档。

由于交互稿件都是不适合外传的而且样式很自由，不用特地做什么规定，所以只说了一下主要的几个模块，希望大家自由发挥就好。

还是那句话，框架是死的，人是活的，不一定要拘泥于某种形式，你可以根据自己的需要自由修改。

一、封面

封面很简单，就是文档标题和作者，顶部有一个通用的文档标题栏，上面的内容包括：

· 项目名称：商品扶持策略（通常情况都包含版本号）

· 页面标题： 商品扶持策略V1.3-Top榜单.（根据每页的内容进行变化）

· 版本号：1.3（每修改一次都要＋ 0.1 ，当然你也可以直接变成 2.0 、3.0 等）

· 文档撰写者姓名：如有多人情况下，建议主责人姓名在前

大家如果用 Sketch输出的话这里可以为这个模板中需要改动的内容都定义 Symbol元件。

二、修订记录

修订记录页，记录了从文档建立开始，每次更新的主要内容，以及相关人员，方便后期交接的时候给对应的产品经理和设计师查看。有时交互稿更新一次只是修改一小处，如果不备注一下对方就会很难找，你自己可能以后都会遗忘。

三、目录

分页型的文档一定要有目录,备注好每个模块对应的页码,否则十几页看下来都晕了,每次想找到对应的界面还得重新翻一遍。

一般情况下我们会在模块后面加上产品同事的名字，目的是为了设计师和开发工程师可以快速找到对应的产品经理所写的PRD文档内容进行相互验证；

四、全局说明及项目背景

全局说明只要用来定义全局交互所设计的统一项问题，项目背景在立项之初说要做此项目的目的，明确出发点。

有些公司在这部分内容里也会有把项目目标加上，明确达成目的；

五、内容页面

在线框图中，基于前面的分析准备，为了展示信息结构、功能设置、用户操作我们要在里面做哪些呢？

1. 展示主要的内容、点击的交互前后展示状态
2. 信息的位置、顺序、可以用不同的字体字号、颜色（黑白灰色）展示出其层次、轻重
3. 页面交互说明书，交互操作，页面构成等进行描述；

交互说明这个文档更倾向于给具体的前端开发及后台开发人员用来查看页面构成及交互逻辑。

结构可以有很多种，比如上面这种竖屏的界面可以是左右结构，如果是横屏界面还可以是上下结构，根据情况自由调整吧。

当文字段落的样式已经定义好，之后的撰写者直接修改套用就好了。其中最重要的气泡也可以做成元件，选中之后直接在右边修改数字就好，交互设计师输出效率高低往往都是这些细节优化决定的；

六、组件库

我们对控件的定义

• 定义：它叫什么，具备什么功能
• 组成：由哪些组成
• 场景：应用在哪里，怎么用
• 类型：输入类型、前缀后缀
• 动效：出现、退出、关闭等

1、定义

控件叫什么，具备什么功能

2、组成、场景

独立控件由哪些组成、应用在哪里，怎么用

3、类型

输入类型、前缀后缀

4、动效参数表及动效演示文件

说到做动效，最经典的软件无疑是 Adobe 系列的 After Effects了。（在我之前的分享中详细的给大家讲了13节课的AE输出，大家想学习的话可以去看哦）多数的动效都可以先在 AE 里先做出 Demo ，确定最终效果后，我们在写出动画说明书，给开发同学进行还原就可以了。

一些很复杂的动画，可以在开发的时候，直接使用AE 导出的序列帧来还原动画效果，这样就一定能够保证百分之百还原设计了。不过相应的也会增加一些图片的数量和体积，这里需要做一个平衡和优化。

在动效参数表这部分输出没有具体的固定的格式，只要大家所在的公司研发同学能够通过这个表格把动态效果还原就可以了；

动效Demo展示：

动效Demo对于交互设计师的意义

• 交互不应该只有逻辑跳转交互动效的理解。还需要有过渡动效，掌握一个强大的动效工具可以加深我们对交互动效的理解
• 也可以作为高保真原型的一种补充，有些团队的高保真直接就是用 AE 做的。
• 它还可以用来做产品的宣传视频，当团队中没有这样的人才时，你可以果断补位

5、设计验证

测试验收

在交互设计师输出完所有的交付文件后，后面就可以正式的进入开发阶段了，如果说一个交互设计的工作量是100%，开发前是70%，开发完成后的测试验收，效果落地所占比一定在20%左右，这一步有很多交互设计师都会忽略它的重要性，我们输出文件后，最后开发完成的效果无法有效的还原没有及时发现问题，那您所做的创意和意图，最后上线后效果肯定会大大折扣的，

在此阶段每个公司记录问题的方法不同，我们记录问题跟踪的方法是Jira Software，属于公司内部平台，记录bug流转状态；

6、后期跟踪

在设计过程中团队想要验证两个方案，到底哪个方案更好一些，做个简单的测试和问卷就知道了。实在不行，还可以在上线后用 A / B Test的方式直接看关键数据。

产品或者功能上线前后，通过观察关键节点的数据变化，就能知道这次的改动是否成功。如果出了问题，就应该果断砍掉或者回滚。

这一部分工作不仅对我们上线后的效果进行了良好跟踪还可以对后续产品改进收集需求和优化点，但是可以做的这一步骤的公司真的是非常少，在工作中如果不是碰到一个良好的团队很难做到这一点的，这一环节可以卡驻它进度的因素太多，比如：项目周期，多项目并行，直属leader的不重视，甚至技术团队的不配合都无法进行，如果你之后所在的团队可以良好的推进这项工作，请珍惜吧；

以上就是跟大家分享的一些交互设计工作真实的输出内容了，有些地方写的细致一些有些地方一带而过，大家如果有什么好的想法和建议欢迎留言讨论吧；