设计，构建线框图和对Android应用进行原型制作：第2部分

在第一部分这两个部分组成的系列，我向您展示如何利用最初的想法一个Android应用程序，并将其发展成一个详细的计划，一直到映射出各个屏幕，会让你完成的应用程序。

以旅行应用程序为例，该应用程序将帮助用户与所有朋友一起计划和预订充满乐趣的夏季冒险，我们通过创建用户角色（还记得我们的朋友Sasha？）来确定目标受众，然后创建功能列表这对于我们的应用程序1.0版来说是完美的（对Sasha来说也是完美的）。 最后，我们创建了一个屏幕列表和一张地图， 准确显示了所有这些屏幕如何组合在一起。

在第一部分中，我们涵盖了很多基础知识，但是到目前为止，我们的所有计划都是有点高级和抽象的。 在第二部分中，我们将通过对构成我们应用程序的各个屏幕进行线框设计和原型制作，从而亲近个人。

在本教程结束时，您将创建一个数字原型，您可以在自己的Android智能手机或平板电脑上进行安装和测试。

让我们潜入并开始创建一些线框！

什么是线框图？

在线框图中，您可以草绘要放置在特定屏幕上的所有主要UI组件。 线框图的目的是概述屏幕的结构，而不是关于屏幕外观的更详细的信息，因此请尽量避免被平面设计的细节所吸引。 现在，足以知道您将要在屏幕A上放置一个菜单。 您无需担心此菜单的颜色是什么，也不必担心菜单文本的样式。

线框非常具有欺骗性-它们看起来可能像快速，粗糙和现成的草图，但实际上它是用于探索，定义和完善应用程序用户界面的强大工具。 他们还可以帮助您在最初的屏幕设计中发现任​​何缺陷，然后再花太多时间来完善这些设计。

与完全重写您已经花费了数小时工作的代码相比，在线框上打个大十字架，翻开笔记本中的页面然后重新开始，要容易得多。

因此，我唱了足够长时间的线框赞美！ 您如何创建线框？

您有几种选择：

• 使用铅笔和纸草绘线框。

我们应用程序“预订酒店”屏幕的纸质线框。

• 使用专业的图像编辑软件（例如Adobe Photoshop）或专用的线框图程序（例如Pidoco，Axure，InDesign，Sketch，Omnigraffle或Balsamiq Mockups）创建数字线框。

使用Balsamiq创建的主屏幕的线框。

但是，当您可以同时使用两种工具的好处时，为什么还要限制自己使用一种工具呢？ 纸和数字线框都有各自独特的优点和缺点。 数字线框图非常适合创建精美而精确的线框，但是导航多个菜单并不总是使这些想法得以流传的最佳方法，而且当您要快速测试多个不同的想法时，它当然也不是理想的选择！ 另一方面，纸线框非常适合进行快速头脑风暴会议，但是您可能很难创建足够精确和详细的纸线框，以用作要创建的屏幕类型的蓝图。

我建议使用钢笔和铅笔创建第一个草稿（这是使那些创意汁液流淌的理想选择），然后，当您对一组纸线框感到满意时，就可以花一些时间使用数字线框图软件来完善这些草稿。 。

这是我在本教程中将使用的方法，但是请记住，线框图是一种创造性的练习，因此这里没有硬性规定。 使用最适合您的方法。

创建您的第一个线框

为了给您最好的线框图和原型制作过程概述，我将在我的旅行应用程序中选择一个屏幕，并在本文的其余部分中继续进行操作。 我要选择的屏幕是清单，因为我认为该特定屏幕包含一些具有挑战性的UI元素，这些将构成一个有趣的示例。

为了刷新您的记忆，在第一部分中，我写了以下关于我如何想象完成的清单屏幕的描述：

在其默认状态下，此屏幕显示用户需要完成的所有任务的清单，以计划一次成功的行程。 轻按任何任务会将用户带到一个可以完成此任务的屏幕。 每当用户完成任务时，该项目便会从其清单中打勾。

要创建第一个草图线框，请抓住一些纸张和您选择的书写工具，然后绘制典型智能手机或平板电脑的矩形轮廓。

我将从将所有导航元素添加到线框开始。 查看我的屏幕地图，我可以看到用户需要能够从清单访问三个屏幕：

• 选择一个城市。
• 书籍运输。
• 预订酒店。

这些屏幕代表两种不同类型的导航：向后导航和向前导航。

“选择城市”是我的应用程序流程中的上一个屏幕，因此它表示用户在应用程序的历史记录中向后移动。 Android会自动处理这种向后导航（通常通过智能手机或平板电脑的“后退”软键），因此您无需在UI中添加任何明确的“选择城市”导航。

其他两个屏幕略有不同，因为它们代表用户在我们的应用程序中前进。 该系统不会自动处理向前导航，因此我们有责任向用户提供他们能够导航到这些屏幕的所有内容。

这些导航元素将采用两个TextView的形式，我将按照清单的形式进行排列（好的，因此，列表中的两项并不多，但是如果我继续从事这个项目，我最终将更多任务添加到此列表中）。 在默认状态下，每个TextView都会提醒用户他们需要完成此任务，例如“您仍然需要预订酒店！” 当用户点击TextView ，它将带他们到Book Transport或Book a Hotel屏幕，因此他们可以完成此任务。

当用户完成一项任务时，相应的TextView将更新以显示有关该用户的旅馆或其交通安排的信息（我现在暂时不将这些信息添加到我的线框中，但是要牢记）。

为了创建清单效果，我将为每个TextView创建一个对应的ImageView 。 在其默认状态下，每个ImageView将显示一个红色叉号，但是一旦用户完成任务，它将被一个绿色的选中标记代替。

最后，我将添加一个标题TextView ，它将显示用户选择调用此特定行程的任何内容。

在构建线框时，您可能会遇到可以在许多位置和不同大小下工作的UI元素。 创建纸质线框几乎不需要花费任何时间，因此，如果您有任何其他想法，请花一些时间对其进行线框设置。 实际上，您应该针对每个屏幕勾勒出一些替代方案，以便您可以决定哪个方案最具潜力。

冲洗并重复组成应用程序的每个屏幕，直到获得一整套纸线框。 下一步是将这些初稿转变为更精美的数字线框。

有很多专门为线框图创建的软件，因此值得花一些时间在Google上研究您的选择，尽管如果您愿意，也可以使用自己喜欢的图像编辑软件，例如Adobe Photoshop。

我个人是Balsamiq Mockups的粉丝！

花一些时间在您选择的软件中创建和完善您的设计，并注意寻找任何机会来调整和改进线框。 使用新工具也会引发一些新想法，因此，如果您突然对如何改进设计产生了灵感，那么请抓住这些文件并进行线框设计。 如果它们经受了纸线框的审查，那么请继续并将这些更改折叠到数字线框中。

再次冲洗并重复其余的屏幕。

制作项目原型

是时候根据线框创建数字原型来进行设计测试了。

原型制作使您有机会亲身体验真实的Android设备上的外观和功能，同时还可以通过Android虚拟设备（AVD）测试设计如何在多个屏幕配置之间转换。

那么如何创建数字原型呢？

最简单的方法是使用Android Studio，这要归功于IDE的内置图形布局编辑器，它可以兼作强大的数字原型制作工具。 在本节中，我将使用Android Studio 2.2中引入的许多新功能 ，因此，如果要继续学习，请确保运行的是Android Studio 2.2 Preview 1或更高版本。

要创建我们的原型，请启动Android Studio并创建一个新项目。 为简单起见，我将使用“空活动”模板。 由于您将在自己的Android设备上测试该原型，因此请确保将项目的最低SDK设置为与Android智能手机或平板电脑兼容的版本。

一旦Android Studio创建了您的项目，请打开其activity_main.xml文件，然后删除该讨厌的“ Hello World” TextView ，Android Studio默认将其添加到此布局中。 确保已选择“设计”标签，以便可以看到Android Studio的调色板和画布。

现在，我们准备将线框栩栩如生！ 让我们从屏幕的标题开始，从顶部开始。 很明显，这将是一个TextView ，但是其内容呢？ 当用户开始计划行程时，他们可以随意称其为“行程”，那么我们如何知道在原型中使用什么文字？

处理可变文本是该原型中经常出现的主题，因此，让我们花一些时间来更详细地探讨这个问题。

原型是应用程序开发人员中强大的工具，但请不要忘了它-当屏幕包含可变元素时，就无法为该屏幕的每个版本制作原型。 我们的清单肯定是这种情况，因为用户可以为旅行命名，从麻木的Trip 1到漫无目的的， 充满乐趣的充满乐趣的终极梦想暑假 ，以及介于两者之间的一切。

虽然不可能测试所有可能的标题，但原型是通过测试您可以想到的最奇怪和最奇妙的变量，使您的设计承受巨大压力的绝佳机会。

对于我的清单原型，我将创建三个字符串资源：一个代表我想大多数用户都会选择的“典型”标题，一个代表异常简短，另一个代表冗长。 测试这些极端情况是清除屏幕设计中可能隐藏的任何潜在问题的最有效方法之一。

一旦创建了这些字符串资源，就需要将该文本放置在某个地方以供居住，因此请从调色板中获取一个TextView并将其拖放到画布上。

Android Studio 2.2引入了约束的概念，这些约束对于快速构建数字原型（通常是用户界面）非常有用。 您可以手动创建约束，但是当Android Studio可以为您完成艰苦的工作时，为什么还要花那么多精力呢？

有两种方法可以让Android Studio为您创建约束，因此让我们一起探索这两种方法。 第一种方法是使用自动连接 ，因此请通过切换自动连接按钮（光标在下面的屏幕快照中的位置）来启用此模式。

现在，将TextView拖到布局中应显示的位置。 我希望标题居中，因此我将把TextView拖到画布的中间并释放。 释放TextView ，Android Studio会通过创建将TextView固定到位所需的所有约束进行响应。

请注意，当两个约束条件沿相反的方向拉动小部件时，这些约束条件显示为锯齿状，这就是为什么这些约束条件看起来与常规约束条件不同的原因。

如果不确定TextView是否居中对齐，请沿水平轴稍微拖动它。 工具提示将出现在窗口小部件的任一侧，沿着水平左右轴显示其当前位置。 拖动TextView直到获得均匀的50/50分割。

设置此TextView可以显示为标题创建的字符串资源之一-开头的字符串并不重要，因为无论如何都将对其进行测试！

接下来，我们将建立清单。 我将在清单中使用两张图片：一个绿色的勾号，当用户完成一项任务时将出现；一个红色的叉号，表示此项目仍牢固地位于用户的“待办事项”列表中。 创建这些图像并将其添加到项目的drawable文件夹中。

接下来，打开您的strings.xml文件并创建两个默认消息：

• 您需要预订酒店！
• 您需要整理运输！

从调色板中拖动两个TextView ，然后将它们拖放到画布上-不必担心现在一切都已对齐。 设置这些TextView可以显示默认的字符串资源。

接下来，从调色板中获取两个ImageView ，并将它们放到画布上。 释放每个ImageView ，Android Studio会提示您选择要显示的图形。 我们将从为该屏幕的默认版本制作原型开始，因此为两个ImageView都选择红十字图像。

至此，我们已经添加了所有必需的UI元素，但是由于我们将所有元素随机拖放到画布上，因此您的原型很可能与线框没有太大相似之处。 再次限制了救援！

Android Studio自动创建约束的第二种方法是通过推理引擎。 花一些时间将TextView和ImageView拖到画布上的完美位置，然后单击一下Android Studio的Infer约束按钮（光标位于下面的屏幕快照中）。

当您单击此按钮时，Android Studio将自动创建交付当前布局所需的所有约束。

这是该屏幕的默认版本，但是一旦用户开始从“待办事项”列表中检查任务，我们还需要测试该屏幕的适应方式。 最终，我希望这些TextView显示有关用户的酒店预订和旅行安排的一些基本信息。 这使我们遇到了一个古老的敌人：可变文本。

该屏幕必须足够灵活，以显示名称很长的酒店（以及机场，火车站等）信息，但与此同时，如果用户预订的酒店既酷又时尚，它应该看起来并不奇怪它的名称是一个字母或pi符号（是的， 就是那种旅馆）。

再次，解决方案是创建多个字符串，这些字符串代表您的布局可能需要处理的最尴尬的文本。 如果不确定字符串资源应达到的极端程度，则可以随时向互联网上的朋友寻求帮助。 在这种情况下，我将花一些时间研究旅馆和机场，特别是寻找那些名称长，短或完全奇怪的名称，然后在字符串资源中使用最佳示例。

创建所有资源后，可以通过在不同的字符串资源和可绘制对象之间进行切换，然后在Android Studio的内置布局编辑器中检查输出来进行一些初步测试。

虽然这不能提供与在真实的Android设备或AVD上测试应用程序相同的洞察力，但是它要快得多，是识别布局中任何直接而明显的问题的理想方法。

您可能需要稍微改一下TextView和ImageView的位置，以便在可以显示大量文本的布局和仅需显示的看上去不奇怪的布局之间找到完美的平衡几个字母。

如果确实需要进行一些调整（我知道我必须这样做！），则只需在画布中抓取小部件并将它们拖动到新位置即可。 对结果感到满意后，只需再次单击“ 推理约束”按钮，Android Studio就会为您创建一套全新的约束。

这是我完成的原型。

不错，但真正的测试是此布局在具有不同屏幕配置的Android智能手机，平板电脑和AVD上的转换效果如何，因此这就是我们接下来要做的。

测试您的数字原型

除了获得有关原型在实际设备上的外观和功能的实践经验外，还没有其他替代方法，因此，首先要在自己的Android智能手机或平板电脑上安装项目，并花一些时间与之交互，以使用户感觉到整体用户体验。 不要忘记在横向和纵向模式下测试您的原型！

如果您发现任何问题或机会来改进屏幕设计，请记下它们，这样一来，您将在完成原型测试后确切知道需要进行哪些更改。

如果您的应用程序要为所有用户提供最佳体验，则它必须足够灵活以适应各种屏幕配置。 在自己的Android设备上彻底测试了原型后，您应该创建多个具有不同屏幕尺寸和密度的AVD，然后在所有这些AVD上测试原型。 同样，如果您发现原型有什么“不足”，或者对如何改进设计有所了解，请记下这些更改，以免您忘记它们。

彻底测试了布局的默认版本后，您需要测试一旦用户开始在清单中打勾任务，原型将如何适应。

更新两个ImageView以显示绿色的可绘制勾号，并切换两个备用字符串资源的默认文本，同样，由于我们将测试所有字符串资源，因此从哪两个开始并不重要。

将这个新版本的原型进行相同的严格测试过程，这意味着将其安装在Android设备上以获得一定的动手经验，然后在具有不同屏幕配置的AVD上进行测试。 与往常一样，记下您的发现。 然后，冲洗并重复为清单和标题TextView创建的所有字符串资源。

测试完成后，您应该查看笔记。 如果只需要进行一些小的调整，则可以直接将这些更改应用于原型和数字线框，从而摆脱困境。 但是，如果这些更改更具戏剧性或完全重新设计，那么您应该花一些时间首先更详细地研究它们。 理想情况下，您应该将新想法与最初的想法通过相同的线框图，原型设计和测试过程进行处理，因为这仍然是解决设计中任何问题的最有效方法。

当然，当您似乎在整个设计过程中几乎都已完成时，回到线框图阶段实在令人沮丧，但是花在探索新思想上的时间总是花在时间上。

即使最终放弃这些想法而转向原始设计，至少您会知道您确实正在使用可以想到的最佳屏幕设计。 没有比在项目上投入大量时间和精力更糟糕的事情了，整个过程中，您总会心存疑惑，也许， 也许也许 ，您应该走另一条路。

基本上，如果原型激发了任何新的想法，那么现在是时候探索它们了！

在各种AVD上测试了所有版本的原型后，只需要做一件事：为屏幕图中的每个其他屏幕创建一个原型，并对每个最后一个屏幕进行相同级别的审查。

摘要

在这个由两部分组成的系列文章中，我们研究了如何初步构想并将其发展为详细的设计。

这听起来可能需要做很多工作（因为，老实说，这是很多工作），但是此过程中的每一步都将帮助您清除设计中的任何问题，并尽最大可能改善应用程序。

从长远来看，规划，线框设计和原型制作可以通过减少您不得不进一步处理重大问题的机会，从长远来看实际上可以节省您的时间。 只要你开始写代码不久，固定设计问题变得更加困难。

但是最终，花费大量时间和精力来完善应用程序的基础设计将帮助您为用户提供更好的体验。 这意味着更多的下载量，更多的正面评价，以及更多的人向他们的朋友和家人推荐您的应用程序，而谁不想这么做？

翻译自: https://code.tutsplus.com/tutorials/designing-wireframing-prototyping-an-android-app-part-2--cms-27060