正如您可能在我上一篇文章之一中注意到的那样，我并不是不愿意在日常工作流中使用草图。尽管如此，为了创建UI模拟UPS，高质量的草图都是我最舒适的图形工具，因为它使我能够工作并非常迅速地构思。默认情况下，它具有经过深思熟虑的键盘导航和快捷方式。将它们内部化使您可以轻松地将“纸”带到您的脑海中。
在这篇文章中，我想快速概述草图符号以及如何将它们用于ICINGA Web2。它们非常方便地处理一种产品，并使您能够快速获得结果。
使用默认的艺术板尺寸使生活更轻松
起初，我想向前发送，我对所有项目都使用了很少的默认艺术板尺寸，因为它使工作流程变得更加容易。通过执行此操作，我避免将单个符号像素轻推，并冒着破坏它们的风险（自动划分功能很好，但并不总是完美的。
对于Icinga Web，我的主要艺术板尺寸为1280px x 1024px或更高，如有必要。由于我们更多地专注于桌面使用情况，因此从移动屏幕尺寸开始是没有意义的。我的后者默认尺寸为375px x 667px。确切的数字无关紧要，只需确保获得相应介质的标准值的良好平均值即可。
我几乎与这两个艺术板尺寸相处。
库设置
Over the years I’ve built a pretty extensive Library of Icinga Web 2 UI components, which is mostly contains the standard UI elements for Icinga Web 2. I went for pragmatism and quick usability when creating this and changed the structure from time to time, to make it as easy as possible to change components.
如果是一个新项目。我创建了一个新的艺术板，并从默认的UI框架开始，这已经是一个相当可靠的起点。
下一步通常是自定义侧栏导航，以突出显示活动视图的项目。
设置视口
之后，我通常几乎要设置用于在视口中创建UI的设置。如有必要，我还可以选择我的视图是否具有控制栏，要么是列表视图或自定义的默认值，也可以做完全不同的事情。这都是我创建的符号中的所有设置。它的工作原理几乎与侧边栏导航相同。
自定义基本元素后，我可以开始填充视口。在我的示例中，我选择在视口中有一个主机列表。因此，我导航到我的符号选择窗口，然后搜索“列表项目”（请注意，库不是最整齐的）。我选择了我需要的一个，在此示例“主机列表项目”中并插入它。
然后，我可以根据需要复制列表项目。为了使内容看起来更现实，我使用数据功能来填充预设符号字段。我将考虑对如何在草图中使用数据字段进行单独的帖子。
我希望这能提供一些见识，即在制作用户界面模拟UPS时如何使用习惯创建的ICINGA Web 2 UI库。当然，要设置图书馆很多时间和精力。但是我认为这确实值得。与模拟UPS合作主要是关于可视化思想的原因，这就是为什么在手头上尤其是在构想背景下至关重要的原因。
