如果不先创建一些用户界面模型,您就不会开始编写移动应用程序的代码。而draw.io使这个过程变得简单! 但是,一旦我有了一个应用创意,是否应该立即创建一个模型? 没有!首先,您首先要概述用户将在您的应用程序中执行的任务。在此阶段,您可能会发现以下图表很有用:
  • 用例图
  • 活动图或工作流程
一旦知道了用户将要采取的步骤,便会知道需要哪些界面元素。然后是可以帮助您对应用程序进行编程的模型和其他图表。

为您的模型启用形状库

有许多用于移动应用程序界面的形状库,这些功能库使轻而易举地创建应用程序原型-适用于iOS(Apple)设备和应用程序,以及适用于一般模型。 通过单击左侧面板底部的“ 更多形状...”来启用模型库和原型库,在“形状”对话框中向下滚动,并确保启用了iOS样机形状库,然后单击“ 应用” 您可以在下面的图像中看到当前的iOS和样机形状集。 当然,您可以使用其他draw.io形状库中的任何其他形状或剪贴画,或者使用自己的形状,形状和图像的集合为自己的模型创建自己的自定义库
draw.io-iOS形状库

建立你的模型

在设备的轮廓内构建界面时,总是很容易想象界面的外观。在我们的示例中,我们将使用iPhone。从iOS UI形状库中,插入iPhone轮廓。 然后,开始添加组件。您可以在下图中看到我在添加组件时采取的各个步骤。
  • 首先,我在纵向模式下添加了标准应用栏-这是显示在iPhone顶部的图标的形状的集合。
  • 然后,我添加了一些分隔线和应用程序名称。
  • 接下来是应用程序菜单,还有另一个分隔线(复制和粘贴是我的朋友!)
  • 然后,我想添加带有不同复选框的列表,以代表不同的习惯。
draw.io-插入iPhone轮廓
draw.io-将应用程序栏添加到iPhone轮廓
我一直走到完成一个屏幕,然后将通用组件复制到“新”屏幕/设备上,然后处理用户需要在应用程序中完成的下一个任务。 使用这些预先分组的形状集合来构建您的模型真的非常快! 提示:如果需要更精确地放置零部件,则在选择零部件时,请使用键盘上的箭头键代替鼠标。 当然,您的应用很少会是一个屏幕,因此您需要多次插入或复制设备轮廓和标准组件。按住CmdCtrl,然后单击要复制的所有组件,然后单击“ 编辑”>“复制”(或使用键盘快捷键Cmd + CCtrl + C)。
draw.io-移动应用程序模型
在draw.io中打开此图

创建良好的应用程序模型的提示

保持简单:太多的杂乱使移动应用程序难以使用。保持用户界面简单,使视觉线索尽可能容易理解。直观易用的应用会更频繁地使用!在开始设计之前,计划用户将用您的应用程序完成的任务–当您有明确的目标时,创建简单的UI会更容易。 保持一致:不要移动UI组件,保持所有内容一致–包括图标,对话框组件,标签及其位置。 使其保持最新状态:使用推荐用于最新设备的UI组件。专为iPhone 5新版本设计的UI在iPhone 7上看起来已经过时且疲惫。您应该为iOS应用程序使用iOS组件,为Android设备上的应用程序使用Android组件,否则用户将不满意使用您的应用程序。 保持轻巧:请勿尝试使用会使您的应用变慢的大型图像或视频组件。另外,不要试图像网站一样设计您的应用程序–并不是要在用大手指的小屏幕上浏览和使用它们!不要将按钮或组件的尺寸设置得太小-确保所有按钮或组件都易于阅读并且可以用适当的手指手势使用。 保持灵活性:如今,用户希望在多个设备上使用应用程序-它需要在不同尺寸的屏幕以及纵向和横向模式下工作。利用draw.io形状库中的各种设备轮廓来规划应用程序的不同布局。如果要开发iOS应用,请考虑拆分视图并滑过。还请考虑各种大小的键盘将覆盖多少应用程序。

我的应用程序模型已完成!下一步是什么?

首先,获得有关您的设计的反馈–查看您的目标用户对此有何想法。他们觉得它易于使用吗?这一切有意义吗? 一旦准备好开始编程,您就可以使用draw.io创建更多图,这将有助于最大程度地减少错误和调试时间。
  • 实体关系图
  • 事件或顺序图
  • UML图

开发iOS和Android应用程序的其他资源

轻松跟踪您的应用开发和图表

由于开发应用程序涉及很多步骤,因此最好使用Trello板之类的工具来跟踪应用程序的开发。 draw.io已集成到Trello,因此创建和共享图很容易,尤其是在与分布式团队合作时。
draw.io和Trello完美配合