编辑指南:交互设计描述文档，即DRD指的是用于携带交互设计描述并交付给前端、测试和开发工程师参考的文档，这是一项基本技能。本文作者用Axure完成了一个交互文档，并通过一个案例，帮助理解了交互文档的细节，与大家分享。

我在网上搜索交互文档的规范，可以找到很多关于交互文档结构的文章，但是从来没有完整的案例Demo，主要是因为大部分商业项目的交互文档都是分类的，不能共享。

我相信每个人都和我一样希望看到交互式文档的实际情况。本着在交互行业学习的精神，我学习了飞书、钉钉、腾讯会议，最后搭建了这个“UEDART云办公APP交互案例”的虚拟项目，最后输出了交互文档中可以快速重用的框架和模块。本文的目的是通过实际项目来说明交互文档的整体构建，以便我们能够更多地了解交互文档的细节，并通过浏览案例从他们那里得到一些有效的帮助。

下面预览的整个交互式文档是由Axure制作的。

UEDART云办公APP交互案例预览:https://VIP . UEDART . com/works/cloud office/complete/index . html

整个云办公APP项目的需求分析、设计思路、业务流程图、页面流程图、原型图都在“UEDART云办公APP交互案例”文档中有所体现，本文就不赘述了。接下来，我们将主要谈谈如何使用Axure快速构建DRD互动文档，这将为我们的后续工作提供更有效的帮助。

通过本文结合“UEDART云办公APP交互案例”的阐述，可以更好的理解整个交互文档框架和实战交互案例，挖掘出每个环节中的细节。这样会比单独从一个角度切入更直观有效。同时可以初步了解如何将共性与项目实践分离，有意识地模块化共性是提高效率的好方法。

希望这篇文章能给大家传播一些知识，也希望在和大家交流的过程中，不断改正错误，学习新知识，和大家一起成长。

首先，清除用户对象

定义为其呈现交互式文档的文档用户对象是至关重要的。

根据文档的不同用户对象，对制作文档的方式和精细度会有不同的要求。

这次产生的交互文档主要针对工作流程，用于登陆开发和实现。它协助工作过程中的每个成员:产品经理、可视化设计、开发人员和测试人员了解产品交互的功能和流程细节需求，方便开发人员了解和实现需求。

二、文件制作现场

2.1我们产品设计中常见的几个场景

0-1产品设计:完全0-1产品，从零开始梳理产品业务、场景和业务，对应的业务和模块要求特别大

全新的业务线:现有的基础流程和业务沉淀需要迭代全新的业务线或大模块，有很多对应的业务流程和功能

大版本迭代产品功能:涉及多个平台，更多流程，更多对应的迭代功能

小版本迭代产品函数:涉及的流程很少，迭代函数也很少。相应的要求是快速响应在线

2.2如何让整个文档框架更加灵活？

针对以上场景，我将交互文档框架拆分为大、中、小三种形式，对应几种常见的产品设计场景

大型:0-1产品设计，迭代新业务线

这将通过一个完整的UEDART云办公应用交互文档案例来演示

UEDART云办公APP交互案例预览:https://vip.uedart.com/work s/cloud office/complete/index . html

中:大版本迭代乘积函数

这种总体结构与“大规模”没有太大区别，主要是因为一些基本信息的内容、流程和子服务的数量有所不同

互动描述框架(中)预览:https://vip.uedart.com/works/CloudOffice/mid/index.html

小:小版本的迭代乘积函数

小版本，时间短，功能少，所以简化为“页面流”和原型图显示

交互式描述框架(小)预览:https://vip.uedart.com/works/CloudOffice/little/index.html

第三，细化交互文档的特征

结合用户对象和使用场景，细化了交互文档的几个特征。

易于阅读：方便流程中的各个对象的阅读与理解，方便浏览与阅读灵活应用：适配于各个产品设计的场景，提升效率调整修改：在产品开发进程中进行错误点的调整或需求变更的标记与注释版本迭代：要做好版本管理，方便更新迭代，不只是项目的迭代，整体交互文档框架也需要不断更新迭代使其更加符合我们实际的工作所需

为什么要细化特征？-使生产具有方向性很重要。

做一件事，一定要搞清楚为什么。本项目的主要目的已在项目开始时确定。在明确为什么的基础上，如何更有效的实现目标，方向性很重要，它为下一步的项目制作提供了一个关键的着陆点，在一系列的提问和思考中不断完善和接近最终目标。下一步的制作思路将基于这一特点，进行制作方式的选择和整体交互文档构建的架构。

四、生产思路

最初主要是定义“UEDART云办公APP交互案例”的输出，这个案例是按照大规模交互文档框架搭建的，让大家了解制作交互文档的全过程。

4.1生产准备和产出

4.1.1生产方法

我称之为五环生产法:细化原则，确定方法，统一规范，拆分模块，提高效率。

原则：基于交互文档的四个特性，易于阅读、灵活应用、调整修改、版本迭代。方法：利用Axure+oss原型托管的方式来实现整体文档的架构与部署。方便不同制作场景下的应用、各成员的浏览阅读、修改调整、版本迭代控制。规范：基于统一的规则，方便保持元素的一致性，提升文档细节美观度和阅读感。模块：文档内部形成标准件模块化、流程模块化、页面模块化、组件模块化，方便复用与管理。效率：采用了原有已经制作好的PRD框架+手机组件作为基础素材，方便提升的制作效率，与此同时规范性与模块化也为后续的制作带来了高效率性。

4.1.2项目准备

项目名称：UEDART云办公APP1.0项目调研：了解竞品、分析竞品、竞品结构分析（主要针对飞书、钉钉）项目安排：周期安排，利用业余晚上和周末的时间完成制作工具：Axure9.0版本、xmind8.0项目启动：2020年12月1日启动，预计完成：2021年1月15日实际时间：2021年2月6日

温馨提示:回顾项目整个制作时间，2021年1月还有很多其他事情穿插，落后于预期。最后整个项目在春节前顺利制作安排。

4.1.3最终输出

脑图：云办公APP、交互规则、非功能性需求大型交互说明框架：UEDART云办公APP交互案例中型交互说明框架：交互说明框架_中型小型交互说明框架：交互说明框架_小型原型元素：原型元素规范

4.2文件结构

4.2.1浏览框架结构

标记1：交互文档标题，包含项目名称+版本号标记2：主模块频道切换，可根据需要自定义和调整排序标记3：模块内，切换菜单，可根据需要自定义增加或减少标记4：子菜单内容展示，可根据需要自定义内容页内容

提示:整体框架封装了自适应结构，方便笔记本和pc的阅读感。同时封装了切换点击动作效果，整体浏览感与平时浏览网站效果相同，方便读者阅读

4.2.2交互式文档结构

大结构分为四个模块:基本信息、交互描述、原型页面和回收站

部分内容显示:

更新日志:

产品介绍:

设计理念:

一般规则:

非功能性要求的描述:

交互式描述目录:

页面流程图:

4.3文件规范和模块化

4.3.1原型元素的规范

在整个文档制作的开始，首先要做好整个原型文档的原型元素，为后续制作的标准化和统一性提供了坚实的基础。基于统一的规则，便于保持元素的一致性，提高文档细节的美观性和阅读感。

这样可以保证后续的组件与页面的元素统一，保持一致性的原则。

主要定义品牌颜色、自定义灰色系、头像大小、字号、4px间距

4.3.2部件规格

我们在工作中经常使用一些固有的组件库，比如Ant Ant生产的axure组件。许多学生可能会将“takenism”直接应用到他们自己的项目中，这确实是一种简单易行的方法。

我个人习惯于用这些构件材料作为生产的基本材料，在实际应用中根据项目的业务需求对构件进行改造。项目中组件的生产是一个渐进的过程，不可能一蹴而就。在我们的生产过程中，拆分后的通用模块可以打包成一个组件样式，方便下一个流程或页面的重用。

在这次生产中，我使用了UEDART生产的手机组件作为基材，然后在成本子项目中对组件元素进行了优化。

这套组件规范也是我参与的项目。

预览地址:https://vip.uedart.com/demo/uedart _ 003/index . html

4.3.3模块化思维

我们不仅需要制作文档时的模块化思想，还需要设计产品和流程时的模块化思想，能够有效地将流程中常见的子业务流程串联起来，避免重复的子流程和重复的开发工作。

4.4调整和修改

4.4.1文件联动调整

框架页面名称，由函数制作，根据页面名称自动显示。

交互描述目录名:参照制作，名称自动识别页面名称进行显示。

页面和页面流的页面名称:页面通过引用自动识别对应原型显示，页面名称通过引用自动识别页面名称显示。

通过以上小应用，可以方便后续修改。不需要做太多重复的命名工作，只需要修改左边树形结构的页面名称，所有相关页面都会同步修改名称。而且当我们需要在页面名称上标注这个页面(修改)时，会显示在其他链接中，相当方便。

但在之前的生产中，要按照方法执行，以免修改名称进行后续调整，工作量大，容易忽略，造成名称不匹配。

4.4.2更新和修改

当文档被修改或更新时要采取什么操作。

更新日志添加:

根据修改时间、属性、描述、修改器添加。当天有多个更新(修改需求)时，可以根据调整模块拆分成若干块进行添加。

添加目录和页面注释:

将更新注释添加到与交互式描述相对应的流程目录中。

时间+更新，在页面名称后添加(添加)或(修改)。

添加页面流标签:

在页面流中标记，根据修改后的部分进行标记。

为了方便人们在页面过程中的标注，我把标注修改组件化了:多页标注修改、标注调整标注、单页局部标注、删除隐藏标注。

这里我举个例子，方便大家对标杆实践的理解。当我修改了一键登录页面和登录页面的注释描述。