什么是线框？

线框是您的应用程序（或网站）的各个屏幕的整体结构的轮廓，就像蓝图一样。它是页面整体布局的插图。

这是构建移动应用程序的整体步骤的一部分。这使图形设计师和开发人员都可以轻松了解您的应用程序的功能以及所有内容的外观。

可以将其视为勾画出不同类型的数据（文本、图像、按钮、导航等）将如何在每个屏幕上呈现。在为应用程序线框图时，您希望避免细节并专注于全局。

无论您是与团队或您自己一起做，此活动的中心焦点应该是每个屏幕的布局和导航，而不是颜色、字体选择、图像或图形。那是在 UI 设计阶段的后期。您的应用程序的线框就像数字颜色一样。他们创建图片的轮廓，因此平面设计可以知道将蓝色放在哪里。

线框与故事板

虽然非常相似，但故事板通常用于描绘动画或电影序列，例如电影或图画小说中的场景。虽然在创建剧本时可能会使用故事板，但线框用于技术和 UX/UI 工作，因为与场景相比，建立屏幕布局更为重要。

线框与原型

理想情况下，线框图先于原型。实际上，原型只是线框的详细表示。如果线框确定了应用程序的格式，那么原型将显示特定的图像、主题、颜色和风格选择，这些选择会填充线框中的功能部分。

为什么线框图很重要？

线框有几个目的。一方面，它节省了大量在 UI 设计和 UX 开发阶段浪费的时间。线框图迫使我们思考某些功能如何适合屏幕。如果一个软件创意有问题，最好在这个阶段抓住它，同时它很容易修复。与查看草图并意识到需要调整设计相比，重做一个完整设计的主页以适应功能更改需要更多的时间和精力。同样，做出特定的设计选择变得更容易，因为设计师在选择细节时不必创建布局。

线框越准确，就越容易开发出错误最少的原型（或 MVP）。此外，它为所有利益相关者在开发过程中提供了一个共享框架供参考，帮助确保每个人都在同一页面上。

它还可以更轻松地讨论实际的应用程序概念，而不会因为专注于图形、字体和配色方案而偏离轨道。

如何绘制线框

如果您之前没有为某个应用绘制线框，您可以对熟悉的应用进行逆向工程以进行练习。选择一种操作路径，例如登录应用程序，然后在此过程中绘制每个屏幕的更简单版本。如果您做的足够多，您将能够了解应用程序拥有和人们期望的常见做法和 UX 模式。

如果您已经有了软件想法并且需要直接开始创建线框，那么您可以按照以下步骤操作：

1.研究细节

如果您不对细节做出假设，则更容易绘制线框。在你的笔勾勒出第一个方框之前，先问一些重要的问题。谁将使用此软件或应用程序？

创建用户角色可以为屏幕布局提供上下文。例如，如果应用程序面向老年用户，则可以制作线框以在每个屏幕上显示更少的功能以适应较弱的视力。

2.绘制用户流

术语用户流和线框有时会被混淆，但魔鬼在细节中。用户流应该在线框之前。

用户流列出了用户可能采取的路径。例如，有人登录应用程序后，他们会看到主页还是个人资料页面？如果一个人打算更新他们的帐户信息，他们将如何导航到正确的位置，以及需要多少步骤？用户流程使用基本形状，例如指示开始/结束点的按钮和用户做出决定以创建漂亮的软件地图的菱形。

一旦确定了可能的用户流程，就会出现线框图。这采用相同的路径并为该屏幕的外观创建蓝图。例如，线框勾勒出功能、图片和按钮应位于页面上的位置。它采用用户流程的基本指令集，并赋予它一些视觉结构。重要的是要注意，线框图停止只是确定这些特征的位置，而不是特征的外观。

3. 选择你的线框工具

简单可以是有效的，没有什么比纸和铅笔更简单的了。这避免了应用程序或其他复杂的软件妨碍或增加完成手头任务的摩擦。

但是，如果您对自己的艺术技能缺乏信心，有一些计划可以提供帮助。线框软件的范围很复杂。

4. 绘制线框布局

收集所有上述信息，如用户流和用户角色，并确定你的框架工具，为创建实际线框奠定了坚实的基础。

对于每个屏幕，尝试勾勒出五种或更多可以将所有内容组合在一起的方式。以真正的头脑风暴方式，设置一个计时器，并通过每个布局的变化来搅动，这样你就不会太快把自己锁在任何事情上。现在不要评判他们，你以后会有很多批评的机会。

5. 设计和开发注释

我们的线框图之旅即将结束。每个屏幕都是线框的，故事板是布局的。最后一步是在每个屏幕上添加注释，描述每个元素是什么以及它是如何工作的。但是，如果您已经对线框进行了彻底的工作，则可能不需要向它们添加太多注释。