当前位置：首页 > draw.io教程

案例研究 - 新网站的需求流程

drawio2年前 (2024-05-21)draw.io教程9

当您委托外部公司创建网站、移动应用或程序界面时，您需要提供清晰的需求——用户界面规范和模型、用户流程和用例，以及数据结构，并注明必须遵循的各项规则。您可以为每种情况绘制一套技术图表，也可以将所有内容整合到一张图表中。

流程图、模型和数据——网站需求文档。

你为什么要绘制如此复杂的技术图？

将所有关于系统和流程的视觉文档保存在一个文件中，即使它们分散在多个图表页面上，也能更轻松地确保该文件内容的一致性。这样就不会出现遗漏或丢失重要文档的情况。

这样一来，贵公司和外部合作伙伴提问和回答问题也更加容易——双方都将参考同一个文件。

绘制网站需求图

设计一个网站，提供授权软件的下载和试用申请。

一位通常使用 draw.io 制作数据驱动型仪表盘的工程师，受命负责记录公司网站新版块的需求。由于该版块的复杂程度超出了公司内部能力范围，因此将外包给一家外部开发公司来创建。

本网站的这一部分将为注册用户提供试用版和购买版软件程序的下载权限。

用户可以是个人用户，也可以是公司账户成员。
公司（和团队经理）可以允许所有员工下载购买的软件，或者只允许某些团队下载，并允许个别员工申请试用其他软件产品。
但是，所有类型用户申请的所有试用许可证都必须经过内部人工审核和批准，然后才能提供下载。

部分流程图和部分模型——登录和注册流程及规则

注意：这位工程师既不是技术文档专家，也不是艺术设计师——需要绘制和阅读技术图表的人中，很少有人是这样的。如果您不需要使用像BPMN或UML这样的特定技术图表标准，那么只要您的图表清晰易读、含义明确、易于理解，就足够了。

绘制需求流程概览

第一页的概览图中包含了主账户网页（标签页）和导航的模拟图，但并未详细记录。注册和登录用户账户以及申请软件许可报价或试用版的流程图均以步骤概括的方式呈现。这些步骤将在后续的图表页面中进行详细说明。

这些组件与它们需要交互的基础设施系统相连，但本概述中并未详细说明数据需求——这部分内容也会在本图表文件中的后续图表页面中进行说明。最后，概述周围附有注释，解释了各个组件的用途和局限性。其他图表页面中详细介绍的组件均可从本概述链接获取。

向图表中添加更多页面

在绘图画布底部，图表页面选项卡旁边，单击+即可在图表中添加新页面。右键单击图表页面选项卡或单击^其名称旁边的向上箭头，即可重命名或删除页面。您还可以拖动选项卡来更改图表页面的顺序。

如果您使用的是Sketch 在线白板编辑器主题，则图表页面位于右下角的列表中。

将形状链接到不同的图表页面

右键单击形状、连接线或文本，然后选择“编辑链接”。从列表中选择要链接到的页面，然后单击“确定”。接下来，将鼠标悬停在带有链接的形状上，此时会显示一个工具提示。单击此工具提示即可转到链接的图表页面。

在不同的页面上绘制子流程和子需求

在随后的图表页面上，工程师详细说明了登录/注册流程、下载页面、许可和试用申请流程以及团队管理流程的要求和流程。

提示：点击这些图片中的任何一张，即可在 draw.io 灯箱中打开图表页面。

登录/注册流程和下载网页的流程、界面和规则

许可规则和数据结构，以及申请新试用许可证的流程

经理用户在公司帐户中添加或编辑团队的流程和界面模型

注意：这并非一套完整的图表——可能还会有更多页面提供更多细节，以便外部开发人员确切地知道他们应该开发什么。

一张图中包含了流程图、接口模型和数据结构。

虽然默认的通用形状库可能包含了流程所需的所有形状和连接器，但您可能会发现其他一些形状库很有用，它们包含各种基础设施系统及其对应的符号。用于接口模型和数据需求的形状分布在多个形状库中。

点击形状面板底部的“更多形状” ，然后点击复选框启用要打开的形状库，最后点击“应用”。如果您使用的是 Sketch 编辑器主题，请先点击+并选择“形状”。

您启用的形状库将显示在形状面板中。Bootstrap

形状库在绘制软件界面原型时非常有用。

如需更标准化的流程图形状，请打开BPMN和UML形状库。
对于数据结构，可以尝试使用实体关系、UML和SysML形状库——实体关系表形状最适合创建数据类型列表。
基础设施组件大多位于“网络”类别中。Web Icons、Atlassian和Salesforce库也可能有用。
有关模型，请参阅Bootstrap、Android、iOS、Mockup和Material Design形状库。

您还可以通过形状面板顶部的名称搜索形状。例如，搜索“ Amazon AWS 图标”S3即可找到合适的Amazon AWS 图标。

使用模板来制作界面模型和系统架构

当您不需要指定确切的接口时，可以使用一些网站、应用程序和常见基础设施设置的模板图，将其插入到您的需求流程中。

点击工具栏中的“排列”>“插入”>“模板”或+“模板”打开模板管理器。在“云”和“线框图”类别中查找合适的模板。选择一个模板图，然后点击“插入”将其添加到绘图画布中。

提示：点击任意模板右上角的放大镜图标，即可查看更大的预览图。

处理大型技术图纸

通过将多种不同类型的技术图表组合在一起，每页上都可能出现庞大而复杂的图表。draw.io 提供了许多工具，使处理此类图表变得更加容易。

群组形状

在这个例子中，工程师在图表的某些部分后面添加了彩色形状，以清晰地表明这些组件之间的紧密联系。将所有紧密相关的形状和连接线组合在一起，以便更轻松地在绘图画布上移动它们。

选择所有要包含的形状、连接线和文本。
右键单击选定的形状，然后选择“组合”。或者，按Ctrl+G或Cmd+G进行组合。

向组中添加新元素

将一个形状（或多个选定的形状）拖到组（或容器形状）上。
等待组轮廓变为紫色——这表示您将把选定的形状添加到组中。
例如，拖动此网站模型模板并将其放入网页导航的容器/组中（Bootstrap 形状库）。
该组将在绘图画布上扩展以适应新的形状 - 之后您可能需要调整组的大小。

调整组的大小

调整组的大小时，组内各形状的大小和位置可能会随之改变，因为编辑器默认会尝试保持相对比例。如果您不希望出现这种情况，请在组的扩展形状属性中禁用“调整子项大小”选项。

取消形状分组

由于组可能包含容器形状，而容器形状又包含其他形状和组内组，因此先将所有形状取消组合，重新定位和调整其他相关形状的大小，完成后再将它们全部组合在一起，可能会更容易一些。

右键单击组并选择“取消组合”，或者Ctrl+Shift+U在 Windows 上按，Cmd+Shift+U在 macOS 上按。

在图表中查找和替换文本

在 Windows 系统中，按下快捷键Ctrl+F或Cmd+F在 macOS 系统中，即可打开查找/替换工具。当您更改了界面元素的名称，以确保其在需求流程图中保持一致时，可以使用此工具更新它们。此外，当需要对他人的流程图进行模糊处理以用作示例时，例如本案例研究中所示，此工具也很有用。

点击“查找”后，图表页面上第一个与您输入的字符串匹配的形状或连接线将被选中。再次点击“查找”即可移动到并选择下一个匹配的形状或连接线。

注意：请对多页图表中的每一页执行此操作 - 它只会在显示的图表页面上查找文本匹配项。