2020年10月14日

使用draw.io模拟您的移动应用

如果不先创建一些用户界面模型，您就不会开始对移动应用程序进行编码。而draw.io使这个过程变得简单！

但是，一旦我有了应用创意，是否应该立即创建模型？

没有！首先，您首先要概述用户将在您的应用程序中执行的任务。在此阶段，您可能会发现以下图表很有用：

一旦知道了用户将要采取的步骤，便会知道需要哪些界面元素。然后是可以帮助您对应用程序进行编程的模型和其他图表。

有许多用于移动应用程序界面的形状库，这些功能库使轻而易举地创建应用程序原型-适用于iOS（Apple）设备和应用程序，以及适用于一般模型的应用程序。

通过单击左侧面板底部的“更多形状…”来启用模型库和原型库，在“形状”对话框中向下滚动，并确保启用了iOS和样机形状库，然后单击“应用”。

您可以在下面的图像中看到当前的iOS和样机形状集。

当然，您可以使用其他draw.io形状库中的任何其他形状或剪贴画，或者使用自己的形状，形状和图像的集合为自己的模型创建自己的自定义库。

在设备轮廓内构建界面时，总是很容易想象界面会是什么样。在我们的示例中，我们将使用iPhone。从iOS UI形状库中，插入iPhone轮廓。

然后，开始添加组件。您可以在下图中看到我在添加组件时采取的各个步骤。

我一直走到完成一个屏幕，然后将通用组件复制到“新”屏幕/设备上，然后处理用户需要在应用程序中完成的下一个任务。

使用这些预先分组的形状集合来构建您的模型真的非常快！

提示：如果需要更精确地放置零部件，则在选择零部件时，请使用键盘上的箭头键代替鼠标。

当然，您的应用很少会是一个屏幕，因此您需要多次插入或复制设备轮廓和标准组件。按住Cmd或Ctrl，然后单击要复制的所有组件，然后单击“编辑”>“复制”（或使用键盘快捷键Cmd + C或Ctrl + C）。

保持简单：过多的杂乱使移动应用程序难以使用。保持用户界面简单，使视觉线索尽可能容易理解。直观易用的应用会更频繁地使用！在开始设计之前，计划用户将用您的应用程序完成的任务-当您有明确的目标时，创建简单的UI会更容易。

保持一致：不要移动UI组件，保持一切一致–包括图标，对话框组件，标签及其位置。

使其保持最新：使用推荐用于最新设备的UI组件。专为新iPhone 5而设计的UI在iPhone 7上看起来已经过时且疲惫。您应该为iOS应用程序使用iOS组件，为Android设备上的应用程序使用Android组件，否则用户将不满意使用您的应用程序。

保持轻巧：请勿尝试使用会降低您的应用速度的大型图像或视频组件。另外，请勿尝试像网站一样设计您的应用程序–并不是要在大手指的小屏幕上浏览和使用它们！不要将按钮或组件的尺寸设置得太小-确保所有按钮或组件都易于阅读并且可以用适当的手指手势使用。

保持灵活性：如今，用户希望在多个设备上使用应用程序-它需要在不同尺寸的屏幕以及纵向和横向模式下工作。利用draw.io形状库中的各种设备轮廓来规划应用程序的不同布局。如果要开发iOS应用，请考虑拆分视图并滑过。还请考虑各种大小的键盘将覆盖多少应用程序。

首先，获得有关您的设计的反馈–查看目标用户对此的看法。他们觉得它易于使用吗？这一切有意义吗？

一旦准备好开始编程，您就可以使用draw.io创建更多图，这将有助于最大程度地减少错误和调试时间。

由于开发应用程序需要执行许多步骤，因此最好使用Trello板等工具来跟踪应用程序的开发。 draw.io已集成到Trello，因此创建和共享图很容易，尤其是在与分布式团队合作时。