如何创建线框图：终极指南

获取有关如何为您的移动应用或网站创建线框图的分步指南

从空白页开始你的产品设计是令人望而却步的。但是与其尝试从头开始创建完美的设计，为什么不使用您最有用的设计工具之一 - 线框图来激发您的创造力呢？

在本文中，我们将介绍如何从头开始创建线框图，以及您为什么可能需要它。

为什么要创建线框图？

当您处于设计过程的构思阶段时，有一种快速的方式来传达您最重要的想法会很有用。想象一下，在没有蓝图的情况下开始建造房屋——这是行不通的。在将大量资源分配给项目工作之前，您需要微调您的计划，并清楚地了解最终结果是什么。

通过在线框图这种极简主义的结构设计中构建您的设计概念，您可以进行快速调整。此外，您可以让每个人都了解您未来的设计将如何。最重要的是，这意味着您可以尽早分享您的想法，而无需担心更复杂的设计元素，例如颜色、阴影或复杂的菜单。

如果您想了解更多关于什么是线框图的信息，或者如果您想查看一些线框图示例，请查看我们的博客。

我们将专注于如何专门创建中等保真度的线框图。您可以使用数字设计工具来设计它们，我们将使用Sketch作为我们的指南。您可以使用这些步骤来创建您自己的线框图——但在这个例子中，我们将为旅游应用程序创建一个蓝图。

在您开始任何设计项目之前，真正思考您想要实现的目标非常重要。研究可以帮助您。首先查看其他类似的产品——专注于哪些有效，哪些无效，以及您想做哪些不同的事情。

用户研究也是开始产品发现的好方法。调查潜在用户可以帮助您找出您的产品可以解决的痛点。它还可以帮助您专注于产品的主要用例。不要忘记记录您学到的一切——您肯定会想在以后参考它。

现在您已经了解了您想要构建的内容以及用户的痛点，现在是时候将您的想法付诸行动了。目标是弄清楚屏幕在最终产品中应该是什么样子。问问自己——从用户打开您的应用程序的那一刻起，他们将如何实现他们的目标？这就是您所说的用户旅程。

就我们的旅游应用程序而言，我们知道用户会想要查找旅游目的地、酒店详细信息和价格。他们还需要一个个人资料，以便他们可以跟踪自己所做的事情。我们可以使用这些信息来规划我们的用户旅程并创建我们的线框图。首先在纸上绘制您的线框图。这不是必需的，但它可以帮助您可视化并将您的低保真草图转换为线框图。

准备工作完成后，就可以创建您的线框图了。在本指南中，我们将使用 Sketch 来创建我们的线框图。打开 Mac 应用程序并创建一个新文档以开始。但在我们开始绘图之前，您应该记住一些基本的线框图规则

仅限灰度——线框图不使用任何颜色——尽量减少阴影。
没有图像——同样，我们试图尽可能地简化事情，因此占位符可以完成大多数图像的工作。您可以使用临时素材图像，或者只是在您的图像框架中添加一个十字以表示最终图像将位于那里。
有限或没有副本——一些设计师更喜欢为主要菜单和对应用程序功能重要的任何内容添加副本。除此之外，您应该避免文本或使用占位符副本。
有限的字体——如果您要添加任何类型的文本，请将自己限制为两种字体——一种用于标题，一种用于正文。
缩放，但不要测量——重要的是要考虑缩放比例——即平铺、图标或图像的大小——但不要担心精确的测量。在您拥有最终图像和副本之前，您的设计无论如何都必须更改和发展。

现在，让我们继续创建我们将用于线框图的构建块。