概述
我使用 draw.io (diagrams.net) 创建屏幕规格，并总结了与工程师分享它们的好处。
什么是draw.io？如果您有兴趣，请参考以下文章。
如何引入 Draw.io 和日文本地化
背景
客户提供的画面提案和设计师提供的模型（或实现它们的HTML/CSS等）对于理解“设计、外观和对它们的想法”非常有用。，我认为经常缺乏信息时实际上试图实施。
除了上面的画面提案和模型，我们还制作画面规范，比如画面移动和显示条件、要检查的项目、尺寸和颜色等，并与实际动手的工程师分享。去。
到现在为止，我用的都是 Google Slides/Spreadsheets 和 Adobe XD，但最近 draw.io 成了主打色。
这一次，我想重点介绍它的好处。
目标读者
- 定义需求并考虑 UI 的项目负责人和工程师
使用 draw.io 创建屏幕规格的优势
- 您可以在网格上创建屏幕
- 您可以指定尺寸和颜色等细节
- 还提供屏幕部件库
- 可导出为 PDF、PNG 等。
- 易于在 Google Drive 上共享和工作
- 无需安装 / 免费且易于使用
- 系统配置图、处理流程等容易成套制作
您可以在网格上创建屏幕
打开draw.io，你会看到一张方格纸。
您可以通过在方格纸上排列基本图形（矩形、圆形、三角形等）来轻松创建屏幕布局。通过对齐网格纸块，您可以轻松对齐零件的放置。
当然，您也可以添加文字和颜色。
此外，您可以在 A3 和 A4 之间切换方格纸本身的纸张尺寸，并指定自定义尺寸，因此可以轻松创建考虑屏幕尺寸的布局。
您可以指定尺寸、颜色等。
您还可以根据您实际想要表达的设计指定尺寸和颜色等细节。
当您选择要更改的部分时，右侧会出现一个带有“样式”、“文本”和“对齐”选项卡的格式面板，您可以在其中进行以下设置。
- 填充颜色
- 线条颜色/粗细/类型
- 文字字体、颜色、纵横显示位置、间距
- 零件尺寸（可以在保持纵横比的同时进行更改）
我实际上应用了它。
还提供屏幕部件库
在组成屏幕的部分中，我觉得有一些经常用到的部分，比如下拉菜单、单选按钮、表格等。
fontawesome等图标字体也有，我也经常使用。
drawio字体真棒
https://github.com/webketje/drawio-font-awesome
请参阅下文了解如何导入外部库。
我想在 draw.io 中使用 Font Awesome 图标
可以导出为 PDF、PNG 等。
创建的布局可以导出为 PDF 或 PNG 文件，
我很欣赏它易于用作文档，例如将其作为屏幕布局的文档呈现给客户。
为您的客户将您的屏幕布局导出为 PNG
我在 Google 幻灯片上添加解释并提交。
我也很高兴能够仅对选定范围进行成像。
在 Google Drive 上轻松分享和工作
与工程师分享时，如果是在创建过程中，则使用 Google Drive，如果已完成，则使用 Github 等。
另一个优点是易于与工程师共享。
在 Google Drive 上分享时，在屏幕上添加说明以及工程师是否有任何确认或问题
我们将它们直接列在 draw.io 上。
易于使用，无需安装
只要你有浏览器，draw.io 就可以使用。它是免费的。
感谢您提供的便利。
https://www.diagrams.net/
您还可以下载并安装桌面版本而不是浏览器。
除了前面介绍的 Google Drive，您还可以将创建的图表保存到本地或保存到其他服务。
系统配置图、处理流程等容易成套制作
draw.io 是一个可以创建系统配置图和处理流程等各种图表的工具。
因此，除了屏幕规格外，屏幕事件的流程和相关信息
另一个优点是它们可以组合在同一个文件中。
当我想到屏幕的规格时，我真的很想在屏幕上组织事件的运动，所以我很感激能够使用它。
屏幕事件流示例
概括
使用 draw.io 作为屏幕规范的优势是什么？
最近在示范项目中有些想实现的东西和模棱两可的需求，
你使用什么样的用户界面？你如何在你的系统中实现它？
我发现 draw.io 对进行调整非常有用。
当然，我们充分利用 Adobe 产品等工具来创建高级设计，
我认为原型设计可以提高准确性。
我认为 draw.io 是一款出色的工具，它可以让您快速创建屏幕规格，而无需花更多的钱来学习该工具。
我想继续尝试更方便的用法。
如果有你认为对每个人都有好处的东西，请好好利用它。
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308623156.html