当我在上搜寻交互文档规范时，以搜到很关互文档的结构搭建的文章，但始终没有一份为完整的案例 Demo 展示，主要是因为大数业项目的互文档是涉密的，无法进行分享。
相信大和我一样想要一睹交互档实战案例的芳容，我本着在交互行习的精神，研究了飞书、钉钉、腾讯会议，构建了这个《UEDART 办公 APP 交互案例》的虚拟项目，最终输在交互档中可快速复的框架与模。旨在通过符合实际的项目来进行交互档整体构建的阐述，大通过案例的浏览，更为切实的了解到交互档的细节，从中得到一些有效的帮助。
预览的整个交互档全由 Axure 制作成
UEDART 办公 APP 交互案例预览： https://vip.uedart.com/works/CloudOffice/Complete/index.html
关整个云办 APP 项目的需求分析、设计思路、业务流程图、页面流程图、原型图内容已经在《UEDART 云办 APP 互案例》文档中现，文就不做赘述。接下来主要讲一讲，通次互案例的展示，何用 Axure 快速构建 DRD 互文档，为我们续的工提供更加有效的帮助。
通过本的阐述再结合《UEDART 办公 APP 交互案例》，双管齐，够大更好地了解到整个交互档框架与实战交互案例的全貌，深入各个环节挖掘细节知识。这样会单独从一个角切入更为的直观和有效。与此同时，大可初步了解到如何从项目实践中抽离共通性，有意识地将共通性进行模是效率的好方法。
希望本文能够给家传播一些知识，也希望家交流的过程中，我也能不断修错误汲取新知识，家一起。
交互档给谁看，定义档的户对象很键。
根据文档的用户对象不同，制作的方式与精细度也会不同的求。
本制作交互文档主要是针工作环节，用于落地开发实现，辅助工作环节各个成员：品经理、视觉设计、开发员以及测试员，了解品交互功能与流程细节需求，便于开发需求理解与实现。
2.1 我们产品设计中的5个常见场景
0-1 的产品设计：
完 0-1 的产品，从头梳理产品业务、场与业务，对应的业务与模块需求特别
新业务：
已有基础流程与业务的沉淀，需要迭代新业务或大模块，对应的业务流程和功能
大版迭代产品功能：
涉及平台、流程，对应的迭代功能比
小版迭代产品功能：
涉及流程少，迭代功能少，对应的要求是快速响应上
2.2 如何让整个文档框架更为的灵活呢？
针对以上场我将互文档框架拆分为：大、中、小三种形式，分别对应产品设计的几个常见场
大型：0-1 的产品设计，迭代新业务
此用 1 个完整的 UEDART 云办 APP 互文档案例来展示
UEDART 办公 APP 交互案例预览： https://vip.uedart.com/works/CloudOffice/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 日
Tip：回溯项目整的制作时间，2021 1 月穿插了很多其他事，比之预所滞后，终还算比较顺利的春节完了整项目的制作与整理。
4.1.3 终产出
- 脑图：云办 APP、互规则、非功能需求
- 大交互说明框架：UEDART 办公 APP 交互案例
- 中型交互明框架：交互明框架_中型
- 小型交互说明框架：交互说明框架_小型
- 型素：型素规范
4.2 文档结构
4.2.1 浏览框架结构
- 标记 1：交互文档标题，含项目名称+版本号
- 标记 2：主模块频道切换，可根据需要定义和调整排序
- 标 3：模块内，切换菜单，根据需要自定义增加或减少
- 标记 4：子菜单容展示，可根据需要自定义容页容
Tip：整框架封装自适应结构，方便笔与 pc 电脑的阅读感，同时封装切换点击动效，整浏览感就和平时浏览网站是一样的效果，方便读者阅读。
4.2.2 互文档结构
大结构分为：基础信息、互说明、原型页面、回收站四个模块。
部分内容展示：
更日志：
产介绍：
设计思路：
通规则：
非功性需求说明：
交互说明目录：
页面流程图：
4.3 文档规范与模块化
4.3.1 型素规范
在整体文档制作开始，先制定好整个型文档的型素是一件必要的事情，这为后续制作的规范统一性提供了坚实的基础，基于统一的规则，方便保持素的一致性，提升文档细节美观度和阅读。
样能够证续组件与页面的元素统一，持一致的原则。
要定义了牌色、自定义灰色系、头像尺寸、字号、4px 间距。
4.3.2 组件规范
我们在工中经常用到一固有的组件库，比 Ant 蚂蚁出品的 axure 组件，很同学能就“拿来主义”直接应用到自己的项目中，确也是一个比容易也很省的做法。
我个人较习惯于把这些组件素材作为制作的基础素材，在实际应中根据项目的务需，重塑组件。项目中的组件制作是一个循序渐进的过程，一蹴而就，在我们制作过程中，拆分来的通模，就可封为一个组件样式，方一个流程或页面的复。
本次制作中我应用了 UEDART 出品的手机端组件作基素，优化本次项目中的组件元素。
这套组件规范也是我参与制作个项目。
预览地址： https://vip.uedart.com/demo/UEDART_003/index.html
4.3.3 模块化思维
不止在制作文档需要模块化这种思维，在计产品流程计也需要带着这种思维，可以有效地将流程中公用的业流进行串，避免重复流程重复的开发工作。
4.4 调整与修改
4.4.1 文档联动调整
框架页面称，采用函数制作，称自动按照页面称展示。
交互明目录称：采用引用制作，称自动识别页面称展示。
页面流程的页面与页面称：页面采用引用自动识别对应原型展示，页面称采用引用自动识别页面称展。
通过以几小应用可以到方便后续修改时，不需过多的重复命作，只需修改左侧树结构的页面称，所相关页面都会同修改称，且当我们需页面称备注此页面（修改）时，其他环节也会展示，相当方便。
不过在前制作时要按法执，避免后续为调改名称，工作量大容易忽略，导致名称不应。
4.4.2 更新改
文档进改或更新时要做哪些动作：
1、更新日志添加
按照修改时间、属、描述、修改人进行添加，当同一天更新比时（修改需求），此时以按照整模块拆分成条来添加
2、添目录与页面备注
交互明对应的流程目录添加新备注，时间+新
在页名称后加上（新增）或（改）
3、添加页面流程标记
页面流程中的标，根据所做的修改部分进行标
为了方大在页面流程中的标记，我将标记修改进行了组件：多页面修改标记、注释调整标记、单页面标记、删除隐藏标记
这边我举个例子，方大对标记实操的解。当我修改了登录页面的一键登录页面和注释描述时。
借助型托管工：这我采用了阿里云 oss 传。主考虑浏览速度的因素，蓝文档的原型托会卡。当然也可以选择 Axhub 或蓝以及其他托平台都可以实将 Axure 的 html 行传。
浙公网安备33011002017549号