他们说一个想法的好坏取决于它的执行。软件开发尤其如此。虽然伟大的应用程序通常源于伟大的想法，但并不都是伟大的应用创意成为优秀的应用。

过程中有许多因素在起作用将创意转化为连贯的移动应用体验.。

虽然将所有的想法和计划放在一个地方可能很有挑战性，但移动应用程序线框化在构建你长期以来预想的应用程序方面有着巨大的差异。

如果你对什么是移动应用程序线框以及如何创建一个感到好奇，这个一体化的线框指南将为你提供你需要知道的一切。

目录

什么是手机App线框？

线框应该包括什么？

为什么移动应用线框化很重要？

线框的类型

实体模型、线框和原型之间的区别

创建以用户为中心的应用程序线框的分步指南

移动应用线框化的顶级工具

结论

什么是手机App线框？

简单来说，移动应用程序线框是一个二维草图，用作视觉指南，并说明应用程序将如何工作。

线框并不代表应用程序的完整设计，而只是关键屏幕和界面元素。应用程序所有者和开发团队可以使用线框来同意和澄清整个项目的方向和范围。

尽管线框最初是专属于网页设计和计算机辅助设计(CAD)，这种做法已经成为应用程序开发不可或缺的一部分。

设计师使用方框、灰色线条、形状和占位符作为移动应用程序的线框，以实现易于理解的视觉呈现。

在初始阶段，线框不是一个高保真的图形设计，包含详细的设计元素，如标志，字体规格和实际图像。相反，它本质上类似于建筑平面图或示意图。

用户体验(UX)设计师经常把它作为开发人员如何开始整个开发过程的指南。

由于它的简单性，设计师、开发人员和生产团队可以协作地考虑和修改设计思想，而不会产生显著的成本影响。

线框应该包括什么？

设计师和开发团队有时处理线框的方式不同。例如，低保真度线框和高保真度线框在插图的复杂性和精确度上有所不同。

然而，不管采用哪种模型，每个标准的移动应用程序线框都必须包含某些设计元素。

一个好的移动应用程序线框至少应该反映以下内容:

内容层次结构

空间分布

应用程序用户可能的操作

应用程序功能

应用程序页面之间的过渡

本质上，通过浏览线框，任何人都必须能够识别出将集成到应用程序中的不同功能。他们也应该能够看到分配给这些功能的空间。

类似地，设计师希望包含重要的导航功能，比如搜索和过滤按钮，它们通常位于页面顶部。

最线框利用灰度只有。

这意味着设计师需要做大量的阴影处理：浅色用浅灰色，深色用深灰色。

在一些高保真的线框中，我们偶尔可以看到一些颜色。红色和蓝色通常分别用于显示警告和建议的操作。

由于这是一个基本的二维草图，APP线框在描绘某些交互式用户界面(UI)功能时可能表现不佳。

下拉菜单、显示-隐藏功能和悬停动作等界面元素可能很难说明。

为什么移动应用线框化很重要？

将你的移动应用做成线框的决定将会给你的开发项目带来很多好处。如果执行得当，一个应用程序的线框会在你最初的思考过程和最终以用户为中心的产品之间架起一座巨大的桥梁。

如果你从项目一开始就面临着可视化全包应用体验的重大挑战，线框化可以帮助你将众多的概念和想法拼凑在一起。

以下是移动应用程序线框在您的项目中证明不可或缺的一些最重要的方式:

1.线框有助于你更好地理解你的应用

虽然你的应用程序想法仍然是原始的，还有待实施，但有必要定义它的目的。这对于构建成功的应用程序至关重要。

用户为什么想要下载或使用您的应用程序?

回答这个问题的一个简单方法是记录用例。

通过投资线框，你可以(虚拟地)经历开发过程的每一步。这有助于你探索和阐明你的应用程序如何实现其目的。

2.它保持开发过程以用户为中心

借助用例，线框也有助于尽可能地关注用户。没有视觉表现，设计师很难衡量用户与界面的交互效果。

线框定义了用户行为背后的动机。记住这些，您可以修改您的设计，使任务执行尽可能无缝。

3.您可以在设计或代码检查上节省时间和金钱

与高级UI/UX设计元素不同，线框既便宜又容易制作。无论是纸笔还是数字线框，都有很多资源可以用来在几个小时甚至几分钟内完成一个线框画面。

如果有修改要实现，您也可以以很少的成本或根本没有成本来实现。相反，你需要大量的时间和金钱来重新设计或重写一个完整的应用程序代码。

同样，在开始设计或开发过程之前，您可以分析并可能增强UX。

通过优化执行不同任务所需的屏幕数量，您还可以使导航尽可能直观。

线框的类型

如前所述，并非所有的线框都是相同的。根据你想要构建的应用程序的类型，你可能需要调整你的线框化方法。

对于某些项目，线框只是简单地在纸上画草图。

对其他人来说，这需要创造非常接近最终产品的原型。无论哪种情况，主要任务都是有效地交流设计思想。

一般来说，设计师通常采用三种类型的移动应用程序线框:

低保真度线框

中等保真度的线框

高保真线框

当线框化时，重要的是要记住没有一种线框类型是放之四海皆准的解决方案。

在某些情况下，不太详细的线框可能足以与利益相关者达成一致。

无论哪种情况，确保测试、创新和实施反馈一路走来。

现在，让我们仔细看看不同类型的线框。

低保真度线框

这是最基本的线框图。低保真度线框是内容层次结构、页面结构和布局的不太详细的视觉表示。

它关注于用户工作流，通常作为建立项目目标和用户流的起点。

这种类型的线框通常包括图像占位符、块、填充文本等。

中等保真度线框

这种类型的线框在模型上有显著的改进。虽然它仍然省略了具体的高层次细节，如确切的图像，但它现在增加了更多的细化。

一个中档线框将包含不同的文本重量和适当的内容间距。设计师在这里仍然只使用白色和黑色，但是用灰色的阴影来表达颜色的变化。

高保真线框

高保真线框是最详细的像素特定类型的线框。

他们使用最终副本、文本层次、悬停状态和其他UI元素来表示最终设计中的所有内容。

实体模型、线框和原型之间的区别

现在，我们已经建立了线框的基本概念，让我们区分它们与其他两个设计组件，人们经常混淆它们。

虽然它们都是应用程序开发序列的早期步骤，但是线框、模型和原型在某些方面有所不同。

这些图表之间的主要区别在于它们的保真度或详细程度。

因此，它们中的每一个都有不同的用途，适用于不同的发展阶段。

从最低保真度到最高保真度，线框排在第一位，随后是实体模型，原型出现在天平的最后。

这是他们申请的顺序。

线框

无论是低保真度、中保真度还是高保真度，线框在设计过程中都是第一位的。

在设计的初始阶段，设计师使用线框来传达想法，将它们转化为相关的视觉概念。

尽管高保真线框可能是可点击的，或者模拟个人用户交互，但它们并不关注应用程序的最终外观和感觉。

实体模型

更进一步，实体模型可以被看作是一个更加详细和真实的线框。

虽然仍然是静态的，但它包含了更多的UI和视觉细节。

在这个阶段，设计师用丰富的颜色、图形和字体替换线框的灰色线条和占位符。实际的按钮和导航图形也在其中。

实体模型改善了在线框图阶段收到的反馈，并专注于用户对品牌的解释。

原型

在阶梯的最顶端，原型用高保真的UI元素和动画改进了模型。

与高保真线框不同，原型的行为和表现就像最终产品一样。在继续开发之前，您可以使用它们来测试潜在的问题。

线框、模型和原型在应用程序开发过程中都有它们的位置。而且还有很多数字工具可用于创建每一个。

创建以用户为中心的应用程序线框的分步指南

考虑到线框在其中扮演的重要角色移动应用程序开发，你要遵循正确的方法去做。从开发一个优化的用户流概念到生产一个工作原型，有一些实用的、易于遵循的步骤可以遵循。

在下面的段落中，我们总结了十个步骤，可以帮助你创建理想的以用户为中心的移动应用程序线框。

1.绘制出你的目标用户的流程

在落笔之前有必要清楚地定义你的目标用户的流程。简而言之，用户流是一个图表，它详细描述了用户完成一项任务的具体步骤。

这样的图表可以帮助你定义应用程序中要包含的屏幕数量，以及你希望用户如何与它们互动。

2.勾画核心元素

一旦你定义了你的应用程序的用户流，你需要可视化它的核心元素。

你可以从一个大纲开始，然后根据你的需要不断完善它。勾勒出形成用户交互的主要阶段。

在大多数情况下，这些将是入口点、完成步骤和最终交互。

为每个目标用户动作绘制这种类型的路径是一种有效且详尽地可视化用户流的简单方法。

在这个层次上，最好避免使用任何数字工具，严格坚持使用纸张。这个决定可以极大地提升你的创造力和灵活性，在这个阶段你需要这两者。

在勾画你的用户流程时，努力从目标用户的角度出发。特定应用程序页面的用途是什么？它在多大程度上帮助用户实现他们的目标？

在提供了这些问题的答案之后，获取反馈，并迭代以获得可能的最佳工作草图。

3.创建移动框架

你需要做的下一件事是建立一个特定的框架，你将在整个线框过程中使用。

除了提供视觉上的约束，帮助你优化每个屏幕上的空间，框架还为你的设计提供了结构，并密切模仿工作原型。

为了获得最佳效果，您应该选择一个与目标设备尺寸相同的简单矩形。当然，总会有一系列你正在设计的设备，但最好从基本设备模型开始。

对于iOS应用程序来说，这可能是一个容易得多的任务。

例如，当为2021年的iOS设备设计，iPhone SE的尺寸应该是理想的选择。

另一方面，Android设备稍微复杂一些，因为它们来自众多制造商的不同尺寸。在这种情况下，您应该关注目标设备的纵横比。

4.用方框确定布局

现在，你进入了线框化过程的主要任务。此时，你的首要任务应该是为你的内容建立一个清晰的视觉层次系统。

为此，您需要使用不同大小的框来创建内容布局。

请记住，这里的重点还不是内容本身，而是线框的结构以及您希望内容如何呈现。

布局框应该代表你希望用户如何处理每一页的信息。盒子的大小和它们的顺序应该适当地迎合这一点。

换句话说，更重要的信息应该从上到下从左到右放在更大的盒子里。这复制了用户扫描手机屏幕时通常遵循的顺序。

5.线框关键设计模式

一个好的UX设计的主要目标之一是给用户一个既直观又有吸引力的体验。使用熟悉的UI设计元素是实现这一点的好方法。

熟悉度有助于用户在尝试导航您独特的应用程序时依赖他们的设备使用历史。

在Android和iOS开发圈里，都有通用设计模式设计师雇佣的人。

这些关键的设计模式类似于可重用的内容块。它们是为不同应用程序创建熟悉的UX的简单可行的解决方案。

虽然设计模式对于解决诸如全球导航这样的基本问题很有用，但是保持创造性仍然是最重要的。设计者通常将这些模式的使用限制在某些元素上，如底部标签栏、侧边抽屉和浮动操作按钮。

6.添加副本

定义好你的线框结构后，是时候添加实际的拷贝了。这意味着您希望用最终文本的片段替换所有内容占位符和虚拟文本。

请记住，您需要在这个阶段删除所有的虚拟文本。

你也要保持开放的心态，随时准备在这里自由实验。

当你开始引入实际的副本时，你可能会发现有些UI元素并不完全适合屏幕。

因此，相应地调整你现有的布局，甚至抛弃你当前设计的整个部分是有意义的。尽可能多地创新、测试和迭代。

7.确保它具有良好的伸缩性

当我们讨论构建移动框架时，我们建议您从基础设备模型开始。

既然您已经建立了一个适当的内容层次结构，那么监控现有内容如何在其他屏幕尺寸上扩展是非常重要的。

即使在iOS上，为iPhone SE屏幕设计的内容在iPhone 12 Pro Max上也可能看起来不太好(750 x 1，334对1284 x 2778像素)。除了视觉外观，UX也可能受到影响。

因此，您需要检查每个设备框架上的布局，并决定需要进行哪些更改。

8.连接页面

到目前为止，你只设计了单独的应用程序屏幕。虽然这本身就是一项伟大的工作，但你的应用程序并不是一个个相互脱节的屏幕的集合。

相反，它是一个具有多个交互屏幕的功能性产品，其线框设计也应如此。

用UX流连接你的应用程序页面有助于开发团队理解你的应用程序作为一个整体将如何运行。

UX流也暴露了航行间隙这一点之前可能没有被注意到。例如，您可能会发现需要在两个连续的屏幕之间引入一个额外的屏幕，以提供更无缝的体验。

为方便起见，为每个应用程序页面分配参考编号。

参考编号系统帮助您更有效地连接屏幕，并增强与其他团队成员和利益相关者的协作。

9.测试你的作品

最后，你的线框现在看起来比以往任何时候都更有凝聚力和完善。然而，在交付之前，测试您的设计决策以了解每个元素如何有效和准确地实现其目的是很重要的。

在线框图的环境中，设计测试的重点是用户交互。

通常，设计师倾向于在开发出工作原型后才测试他们的设计。然而，即使在线框图层面，也可以测试设计流程和实用性。

数字线框工具(我们将在后面提到)允许你链接你的线框并生成简单的可点击的原型。

这里的目的是看看在一个典型的用户环境中屏幕是如何相互作用的。我们稍后会更多地讨论这些数字工具。

10.把你的线框变成原型

最后，是时候将你准备好的线框转换成原型了。正如我们前面提到的，这仅仅意味着给你的线框添加更多的细节，并产生一个类似于最终产品的高保真设计。

在一些开发圈子里，设计师将线框称为低fi原型。

通过添加更多的UI元素，高保真可点击原型提供了更真实、更吸引人的体验，帮助您:

将您的设计融入生活

更准确地传达您的设计决策

验证你的假设

收集更多反馈

原型软件，如Adobe XD在这里会派上用场。

移动应用线框化的顶级工具

从我们的分析来看，线框化似乎是一个复杂的过程，尤其是对新手来说。幸运的是，经过许多发展，现在有许多强大的数字工具可以大大简化这一过程。

尽管线框图没有一个通用的解决方案，但是某些特征使得一些线框图工具与众不同。

一个好的线框图工具应该有稳定的软件和现成的模板，可以在不同的保真度水平上增强线框图。

素描

这是另一个强大的线框工具，以其矢量编辑、原型制作和协作功能而闻名。

素描广泛依赖于称为“符号”的可重用组件并支持各种扩展其功能的插件。缺点是，它不像列表中的大多数产品那样基于云，只能在macOS上运行。

结论

线框化在移动应用程序开发中变得越来越普遍。

这背后的基本原理很简单：一个好的应用程序线框可以帮助你更好地理解你的应用程序和它的目标用户。它还优化了你花在设计上的时间和资源。

在这篇文章中，我们分享了重要的技巧和工具，可以作为你的应用程序设计之旅的良好基础。

从用户流映射到原型制作，您拥有成功创建理想移动应用线框所需的一切。