写这篇文章的初衷，是在实际工作中遇 PRD & DRD 文档，对于一些交互设计图，会产不理解，或者实际落画图的时候会发一些后不一致的问题，解释过于冗余，不清晰。接触新的业务时，很难把新理解的内从至下的消化完整。所以希望通过这篇文章帮刚接触交互的同学好展交互设作。
在传统瀑布式需求分析流程中，我们设师往往拿到的已型的信息架构图&产品结构图&关键业务流程图，只了解一下概什么类型的产品，很难发企业产品中真关键的流程价点哪里，或者也不清楚后续发展的走向，只能卯足了劲去图明，整理完整。时间紧迫压力，又照顾整项目。往往决产品功与否的，产品 20% 的主功能（二八原则）。所以面临初产品设中，应该将主精力重功能流程中。
目前，在互网产品中，敏捷开发是所有产品计者最推崇的。因在于，能够对业、计、开发更有前瞻性&敏捷性。
产品交互的成功一定是建立在业需求提炼清晰的基础上。业需求的价值提炼，也是计需要参完成的。业需求是一个比较大的任，来源可能是老板的要求，可能是产品提出的，也可能是用户的反馈。通过业需求，要析出相关的业目标。有个偶然的机会，了解彩色 UML 的计方法，在体实践中，觉这个方法能够快速适应任何业流程，简方便，易懂，并能快速发现业流程中的问题，加以修正完善。
有幸认识海鹏老，推了早年翻译的彩色 UML 建模一书，作者 Peter Coad，是将彩色和企业组件集成建模术之中的第一本书的主要作者，是界上经验丰的建模人员之一，所创建的模型乎涉及所有行业。
此书是第一本介绍彩色来表达软件设计的著作。作者 4 种颜色来代表 4 种架构，给定一种颜色，你就知道这个类可具有哪些属性、链接、方法和交互。得到的彩色构建创建更好的模，并获得应有的认可。彩色和架构仅仅是开始。作者更进一步将这些架构发展为 12 个类的领域无组件。作者在过 10 年中创建的每个模，都遵循这个组件表达的基本形状和职责。
笔者利用色 UML 模设计法，用于业务梳理工作，到了意想不到效。以下为色 UML 模基本概念（截取色 UML 模书介绍）。
△ 《色UML模书》第9页
△ 《色UML模书》第10页
△ 事例会员注册
1. 实体关系图（又称ER图）
定义：ER 图是用来描述现世界中的关系模型，所谓是指客观上或者逻辑上存在并且以区分的人物。
作用：促使以合技理解实的方法，规范的描述功能模块的核素，其实就数据库的理结构。这种描述无二义的，清晰传达 PM 的设思。
2. 功能结构图
功能结构图就是按照功能的从属关系画成的图表，在该图表中的每一个框称为一个功能模块。功能模块以根据具情况分得大一点或小一点，分得最小功能模块以是一个程序中的每个处理程，而大的功能模块则能是完成某一个任务的一组程序。用通俗的来说，功能结构图就是以功能模块为类别，介绍模块下各功能组成的图表。
作用
- 梳理需求，以鸟瞰的方式对整个产品页面中的功能结构形成一个直观的认识。
- 思考并明确产的功模及功组成。
3. 信息结构图
信息架构属于用户体验的结构层，产品的骨架。一般由产品理或者高层的理人员给出框架。除非的产品迭，否则不会改。
用
- 帮助 PM 梳复杂容的信息组成，避免信息容在展示过程中现遗漏、混乱、重复；
- 作为开发工程师立数据库参考依据。
息结构图构成要素
- 导航：网页访问者的访问途径。
- 频道：某一同性质的功能或内的共同载体，也可称功能或内的类别。
- 频道：某频道下细的另一类别。
- 页面：单个或附属某个频道或分类的界面。
- 模块：页多个元素组成个区域内容，可以有个或多个，也可以循环出现，如：文章列表。
- 模块元素：模块中的元素内容，以文章列表举例，文章标题、文章摘要、文章时间，是元素，是组成模块的内容，同时他们也是以循出现的。元素的类型以是：文字、图、链接等等。
4. 产品结构图
定义：产结构图是综合展示产信息和功逻辑的图表，简单说产结构图就是产原的简表达。
作用：它能够在前期需求评审或其他类似场景作为品原型替代，为品结构图相较于品原型，其实现成本低，能够快速品功能结构进增、删、改操作，减少 PM 在这个过程实现成本。
5. 业务流程图（泳道图）
务流程图，是操作流程图是页面流程图。它是产的整体务流程，直接和务挂钩，可说是产的核心流程。
作用
通过业流程图，钻研关键事件的流程，析为什要这做，探索出更深层次的问题，从而对现有不理的业流程进行重组优化，进而制定优化方案，改进现有流程；阐述在项目中各个角色是如何产生相关系的。
绘制规范/建议
- 让涉众参与，不要闭门造车：与业务流程图包含的各个参与角代表适时确认情的原流程。
- 恰当的层次分解，不将所的环节都到一张图。
- 逐渐深入，先抓枝干：切忌一开始就陷入细节。
- 流程一定有开始和结束：切忌交来的流程图，读者问：流程的开始点是么？清晰的代表开始和结束的符号来成第一步和最后一 步。
- 流程图符号绘制排列序：由上至下，由左至右。
- 同一流程图符号大小宜相对一致。
- 编：这让沟通效率高的优化措施。当了编系统，相当于对的流程图都赋予了唯一识别身份证。负责流程规则审核优化的部门能够清楚邮件里传达 H5.1 流程优化，家就明确指的什么。
- 路径符号应避免互相交叉。
6. 任务流程图
任务流程图就是通图形化的表达形式，阐述产品在功能面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时，产生的一系列操和反馈的图标。
用：基业务流程，进行任务流程梳理，阐述角和程序生互的流程，你何进行操，系统何进行反馈。
任务流程与需求文档中的业务流程并不一样。虽然它们都流程图，但业务流程偏向于业务限制、后台逻辑，并不过分注重用户的操作逻辑。任务流程则需关注用户如何操作、界面如何反馈，从引导用户完用户目标。
7. 页面流程图
义：指电子产品具体所呈的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。
作用：
- 交互设/原型设的底子，基本依据。
- 站在用户视角，代表用户所有可能的操作过程，页面流程能快速发现体验问题。
- 突页面元素与逻辑系，升原设计的效率。
8. 线框图/原型图
定义：页面的模块、元素、人机互的形式，用框描述的方法，将产品脱离皮肤状态下更加具跟生动的进行表达。
作用：用例阐释者，用了解用例的用户界面；系统分析员，用了解用户界面如何影响系统分析；设员，用了解用户界面如何施加影响及它对系统「内部」的求；类测试人员，用制测试划活动。
构成要素
- 页面标题：即每一个页面的对应标题，一般就是导航栏标题。
- 页内容：以黑白为主，保证信息规易读。
- 互说明：用标签将其对应来，包括互逻辑、操流程及反馈、元素状态、字符、异常/特殊状态、相关规则等等。
- 主流程线：只需画出主流程线即可，千万不可太多太杂，时刻考虑读者的感受。
9. 线框图/原型图交互说明的几种类型
限制
包含范围值、极限值等。
范围值主要指数据取值范围。比如，你界上出现了下菜单、筛选按钮、滑块等控件时，你必须标注楚它们选择范围，否则开发员不楚该如何设定，如图所示。
极限值主要指数据显示限制。比如，最多应该显示多少数，过时如何显示，是否折等，如图所示。
状态
包含默认状态、见状态、特殊状态等。
「默认状态」主要指默认显示文、数据、选项等。这些内容需要注明，否则开发员可能难以意识到这是用户填完效，是默认有。
「见状态」要指针对某一个模，经遇到的一些状态。这些状态都需要在原上表述来。如一个普通的积分模，一般会现 3 种状态：未登录状态、登录后未签到状态、登录后已签到状态，如图示。
「特殊状态」一般指非正情况的样式、案、说明等，如图示：
操作
包含常见操作、殊操作、误操作、势操作等。
「见操作」要指正操作时得到的反馈状态。如一个普通的翻页控件，在经过同操作后会立即现如的状态。
「特殊操作」要指一些极端情况的操作。一般，户会这么操作，但是一旦遇到极端情况，还是要想好应对措施，因为对于开发人员来说，管是正的还是极端的操作情况，他们都要编写对应的代码。如图，是填写户信息的例子，当写交互说明时，开放往往会遇到很多问题：如果已经勾了 2 个人，再勾第 3 个人，怎么办？如果勾了「张XX」，面区中会相应地现张XX的信息，那么这时候允许修改张XX的身份证信息吗？假如允许的话，修改后「张XX」还保持勾状态吗？表单交后要增一个被保险人信息吗？若修改的是除身份证号码外的信息，「张XX」 还保持勾状态吗？交表单时是覆盖原存储信息吗？若修改后生日期、性别与身份证号码吻合怎么办？等等。
面对各种复杂的情况，一方面要和开发人员积极探讨，看看有没有他的解决方法可简各种逻辑判断；另一方面，在得结论后，要把交互说明写清楚，避免现开发人员感到棘手的情况。
「误操作」主要指用户操作误时情况。不过我们在设计时要尽量避免有用户犯会。如图所示，提示已告诉用户「库存5件」，如这个时候用户在「数量」栏输入「6」会怎么样呢？系统会自动帮用户将其改为「5」省去用户手动正操作。
「手势操作」主要指用户使用移动品时操作。常见有击双击、长按、捏、伸、滑动等等。
反馈
用户操作后到反馈动作，含提示、跳转、动画等。
「提示」主要指操，系统反馈给用户的文字说明等，图所示。
「跳转」主要指点击某个链接，页面跳转到哪里。设计师需要在原型上注明跳转时是「原页面刷新」还是「新页面打开」。果是做手机应用的，需要注明跳转时的转场方式，图所示。
「动画」主要指用户操，系统通动画的方式反馈给用户。动画给人的感比、趣味强，是非常常见的一种反馈形式。比删除某条信息，该信息以渐变消失的形式告诉用户：条信息已经被删除。在移动应用中，动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式，必要时以 domo 动画演示效果给开人。
网站链接：https://about.draw.io/
浙公网安备33011002017549号