22年的Flag之一是要输出《交互设计基础课程》，所以计划每周一篇，欢迎大家持续关注和监督👀今天给大家讲讲《如何输出一份专业的交互设计文档》，抱着以终为始的理念，让大家以最终产物为目标，心态归零，看看需要输入哪些信息，经过哪些思考，才能最终输出一份专业的交互设计稿。交互设计 · 第 4 讲
👉如何输出一份专业的交互设计文档👈
工欲善其事必先利其器，先为大家简单介绍一下交互设计的创作工具。根据2021年底IXDC发布的《中国互联网行业体验设计工具报告》，Sketch、Axure和Figma是线框图工具的前三甲，Sketch是Mac电脑首选，Axure是Win电脑的首选，而国外异军突起遥遥领先的figma经过一年时间从20年的第6名跃升为21年的第3名，涨势非常迅猛。
我刚入行那会（11年），交互和产品都用Axture画原型，输出物是静态html，内容和形式都比较接近网页的体验，左边是导航目录，可以快速索引定位，右边是内容区，可以有锚点和链接方便点击跳转，不管是设计还是浏览都非常便捷的。（太难找我早期的作品了，所以从网上找了这张图给大家作参考）
▲图2 Axure原型图（图片来自呆呆龙的设计日记）
到了15年前后，随着扁平化设计的兴起，交互视觉设计产出物差异开始变小，国内很多UED设计师开始转型为体验设计师，由一个设计师负责产出交互+视觉设计稿，sketch因其UI创作优势开始逐渐流行。
到19年前后，Figma走进大家的视线，因其强大的在线协同创作优势（支持多名设计师同时在一份文档上协同创作、修改、分发）迅速吸引了一大批前瞻性的设计师。
我们vivo VMIC UED团队经过慎重考察和对比，也于2021年年中全员开始转投Figma，核心原因有三个：1、设计效率更高：Figma不吃内存，无需等待，工作更丝滑（Sketch卡起来让人头大，加了内存条也没用）。2、设计师协同更便捷：多人同时在线编辑、评审、修改，迭代一气呵成。3、项目协同更方便：文件不用来回发，不用命名多个版本，按需查看/取用切图。（再也不用命名终稿，终终稿，打死不改稿，打死不改稿2…，经过近一年的使用，设计小伙伴都反馈Figma真香）
作为交互设计师，我们需要了解一下各个设计工具的优劣势，根据自身团队和硬件的情况，选择合适的设计工具。
作为一名体验设计师，要时刻秉承和练习UCD的思维方式。我们的交互设计，是为了最终用户的体验而设计的，也是为了内部项目成员而设计的，只有很好的服务了内部项目成员，才能在大家的共同努力下，为外部真正的用户创造他们愿意使用的产品。
通过上图，我们可以很清楚的发现我们交互设计文档的直接用户：1、产品经理：需要根据交互文档完善产品需求文档PRD。3、研发工程师：需要根据交互文档进行页面结构、框架、状态、交互行为的编程。
4、测试工程师：需要根据交互文档编写各种状态和交互效果的测试用例并进行测试。
虽然大家的分工不同，但对交互设计文档都有一个相同的诉求：
1、交互设计方案合理：避免返工，浪费大家的前期投入。2、交互流程和状态全面：避免后期被研发测试催促，仓促补场景，一方面影响大家对自己专业性的评价，另一方面避免因为异常状态推翻主设计的灾难。3、细节描述简洁清晰：用户都是不爱阅读的，即使是为了工作，要把对用户界面设计的标准，运用到交互细节的撰写中，尽量做到言简意赅。4、视觉层次美观清晰：交互设计师也需要具备一定的视觉审美和排版能力，以保证我们的视觉设计稿能够给内部用户留下良好的第一印象。
所以，作为交互设计师，我们要有用户导向意识，也要有服务设计意识，不止为了最终用户而设计，也为了直接用户而设计，这能帮助我们做出更专业的交互设计文档。我以我们的交互设计模板为例讲解，大家可以把这种标准应用到各种设计工具的输出物中。（对比上图Axure/Sketch原型大家可以看出，Axure的导航层级相对深一点，Figma和skech相对扁平，二者各有利弊）
为了兼容ABC级各种需求，交互模板包含的模块较多，所以显得有些复杂。真实情况中，大家是按需择用，多数交互稿会比上图简单些。
我们可以把交互文档简单分为文档框架、项目背景、设计分析、设计方案4大部分，我们分别来介绍一下。
文档框架主要包含5类信息：业务logo或名称+需求名称+设计相关方+修订记录+版权信息。
跨业务协作时，方便其他项目成员一目了然确认是否是目标文档。 在业务正确的前提下，方便项目成员快速确认是否是对应的目标文档。
复杂需求建议显示修订记录，方便项目成员及时跟进最新变更，简单需求省略。 彰显设计团队品牌及理念，也时刻提醒设计师的设计价值观。在交互设计文档中展示项目背景，一方面是督促设计师在设计之前，和上游产品/运营/商务同学充分沟通，理解需求背景、产品目标以及目标用户，方便后续设计决策，另一方面也是为直接用户服务，有利于下游同学理解我们交互设计的背景和目标。
理解需求是设计师前期最重要的事，包括需求的来源、背景、业务价值、商业价值和用户价值，只有这步做到位了，后面的设计分析才不会出现偏差。 新功能或者重大功能改版时，需要根据目标用户的特征重新思考设计框架，所以需要目标用户的描述。日常小功能迭代，目标用户无变化，则可以省略。设计分析一方面可以帮助我们理清设计思路，做出更合理的设计方案，另一方面也可以帮助提升设计文档的专业性和说服力。设计分析一般包含4类信息：数据分析，用研支撑，竞品分析，设计目标/策略及衡量指标。 用户展示当前设计的数据现况，通过竞品对比/历史对比/分维对比等方式，发现并展示可以优化的机会点。比如我们的转化率10%，竞品30%，有较大的提升空间。
从用户研究中发现的可以指导设计优化的用户洞察。比如扫一扫在用户搜索方式占比中达到了45%，所以我们有必要接入扫一扫功能。
如果竞品中有值得参考借鉴的设计点，则需要把竞品分析页面和结论放进来，方便大家评估竞品的合理性，以及借鉴到本业务的合理性。
根据前面所有信息推导出来的设计分析结论及衡量指标，为接下来的方案设计指明方向。设计方案是内外部用户最为关注的核心产出，主要包含3类信息：产品信息架构、任务流程图、交互流程及交互细节描述。 从0到1做一个产品和功能时，建议绘制，方便自己和他人全览所有功能、内容，并理解它们之间的关系。可以从脑图中导入，也可以在原型文件中绘制。
涉及到3个及以上的交互触点或分支逻辑时，建议绘制，方便大家了解任务的复杂度，跳转逻辑，页面关系，也能帮助自己梳理场景逻辑，避免遗漏。
这是文档核心的核心，文档结构按照先整体后局部的4步方式进行呈现。 第一步，如果涉及到任务链路的，先把主链路流程绘制出来，让大家可以知道核心的任务路径及页面的之间的跳转关系。如果分支链路只有1~2条，可以直接在主链路上延伸，如果分支链路较多，则单独编号绘制。
第二步，如果涉及到重要页面重构的，需要把页面的信息框架描述清楚，定义好每个模块的定位及内容。
第三步，如果涉及到一个页面多个状态的，需要把多个状态全部罗列出来。
第四步，对于普通页面，或者页面模块，或者模块内细节优化的，则直接在旁边描述交互细节即可。
好了，如何输出一份专业的交互设计文档就介绍到这里了，如果你对任意模块的撰写有疑问，请加悦姐微信yuechats，加入悦姐交互小课堂，听悦姐为你详细拆解~下节课，我们将开始正式进入交互设计的专业课程：
交互设计 · 第 5 讲预告
👉 交互设计师的设计观👈
作为交互设计师，我们应该具备哪些顶层的设计观，指引我们设计的方向呢？悦姐将在下堂课为你揭晓，欢迎持续关注👀
🎉🎉🎉
悦姐最近新组建了【交互小课堂】
每周日晚8:00，腾讯会议开讲文章拓展知识，并免费解答大家的交互设计疑问。
系列课程20堂+，帮助大家交互设计从入门到专业。
前100名限时特价199元加入，101~200名限时定价299元。
有需要的小伙伴请添加悦姐微信yuechats，备注【交互小课堂】
我是悦姐，一个爱学习和分享的设计专家~
欢迎关注，2022年和悦姐一起交互进阶~