从一个空白页面开始您的产品设计会让人感到畏惧。但是，与其尝试从头开始创建完美的設計，为什么不使用您最有用的设计工具之一 - 线框图来激发您的创造力呢？
在本文中，我们将介绍如何从头开始创建线框图 - 以及您可能需要它的原因。
为什么要创建线框图？
在设计过程的构思阶段，拥有快速传达您最大想法的方式非常有用。想象一下，在没有蓝图的情况下开始建造房屋 - 这将永远无法实现。在将大量资源投入到项目之前，您需要微调计划，并清楚了解最终结果的样子。
通过将您的设计理念框架化为简化的结构化设计，您可以快速调整。此外，您还可以让每个人了解您的未来设计的外观。最重要的是，这意味着您可以尽早分享您的想法，而无需担心更复杂的设计元素，如颜色、阴影或复杂的菜单。
如何创建线框图
我们将重点介绍如何创建中保真线框图。您可以使用数字设计工具进行设计，我们将使用Sketch作为我们的指南。您可以使用这些步骤来创建您自己的线框图 - 但在本例中，我们将为旅行应用程序创建一个蓝图。
1. 研究和构思
在开始任何设计项目之前，重要的是认真考虑您想要实现的目标。而研究可以提供帮助。从查看其他类似产品开始 - 关注哪些有效，哪些无效，以及您想做些什么不同的事情。
用户研究也是开始产品发现的好方法。调查潜在用户可以帮助您找出您的产品可以解决的痛点。它还可以帮助您关注产品的核心用例。不要忘记记录您学到的所有内容 - 您肯定想以后再参考它。
2. 绘制用户旅程
现在您已经了解了要构建的内容以及用户的痛点，是时候将您的想法付诸行动了。目标是确定最终产品中屏幕的外观。问问自己 - 从用户打开您的应用程序的那一刻起，他们将如何达到他们的目标？这就是我们所说的用户旅程。
以我们的旅行应用程序为例，我们知道用户会想要找到旅行目的地、酒店详细信息和价格。他们还希望拥有个人资料，以便跟踪他们已经完成的事情。我们可以利用这些信息来规划我们的用户旅程并创建我们的线框图。首先在纸上草拟您的线框图。这不是必需的，但它可以帮助您可视化并将您的低保真草图转换为线框图。
3. 基本线框图规则
完成准备工作后，是时候创建您的线框图了。在本指南中，我们将使用 Sketch 来创建我们的线框图。打开 Mac 应用并创建一个新文档以开始。但在开始绘制之前，您应该记住一些基本线框图规则
- **仅限灰度** - 线框图不使用任何颜色 - 将阴影降到最低。
- **无图像** - 同样，我们试图尽可能地保持简单，因此占位符将为大多数图像完成工作。您可以使用临时的库存图像，或者只是在您的图像框架中添加一个交叉符号，以表示图像最终将位于那里。
- **有限或无文本** - 一些设计师更喜欢添加主菜单的文本以及对应用程序功能至关重要的任何内容。除此之外，您应该避免文本或使用占位符文本。
- **有限的字体** - 如果您要添加任何文本，请将自己限制为两种字体 - 一种用于标题，另一种用于正文文本。
- **缩放，但不要测量** - 重要的是要考虑比例 - 也就是说，一个瓷砖、图标或图像将有多大或多小 - 但不用担心精确的测量值。在您拥有最终图像和文本之前，您的设计必须不断变化和发展。
现在，让我们继续创建我们将用于线框图的构建块。
4. 创建您的构建块
创建线框图涉及许多具有基本设计的构建块。为了帮助我们更快、更高效地工作，我们将使用 Sketch 中的符号来为我们的线框图创建这些构建块。
根据您要制作的内容，您可能拥有不同的构建块。但是，对于我们的旅行应用程序，我们将重点关注显示目的地选项、酒店价格和其他详细信息。我们将使用符号来创建一系列占位符框、卡片、图标和表格行，用于我们的应用程序。
没有关于您应该或不应该为哪些内容创建符号的规则，但通常来说，为将在整个项目中重复使用的任何组件创建符号是一个好习惯 - 即使您计划稍后对其进行编辑。由于我们不关注文本或特定细节，占位符数据就足够了，您可以安全地复制它们，而无需进行太多更改。
5. 将所有内容整合在一起
现在我们已经准备好一切，您也已经创建了您的符号，是时候将到目前为止完成的所有内容整合在一起并创建一个线框图了。
使用画板创建不同的屏幕
按照我们的用户旅程，我们可以确定线框图中需要多少个不同的屏幕。从 Mac 应用中，使用“插入”菜单创建线框图所需的所有画板。使用预设尺寸为要设计的设备创建画板。命名您的画板，以便一目了然地轻松查看每个屏幕的作用。您的画布应该看起来像这样
使用您的符号
到目前为止，您应该能够看到您的想法和用户旅程将在您的画布上开始呈现的样子。是时候使用您的符号或添加全新的图层，开始逐屏创建您的线框图了。
充分利用阴影
即使我们不依赖于任何线框图的颜色，使用阴影来显示特定屏幕上不同部分之间的分隔仍然很有用。您可以使用阴影来区分不同的图层。添加这样的对比度将有助于您的眼睛在设计中提取细节，并了解最终产品中将吸引焦点的部分。
总结
完成了一些收尾工作后，我们的旅行应用程序线框图看起来像这样
退一步看看您自己的线框图。它是否解决了您在流程早期发现的痛点？从一个屏幕到另一个屏幕，是否存在清晰的用户旅程？
我们的线框图看起来不错，但我们可能需要添加更多详细的文字，以帮助其他利益相关者快速理解每个屏幕显示的内容。不断调整你的线框图，直到你对粗略布局和流程感到满意为止。
现在你的线框图已经完成，重要的是要记住让团队成员参与到这个过程中。线框图是灵活的，会不断变化，越早获得反馈，最终结果就越好。
确保你经过几轮反馈，然后才进入设计过程的下一阶段。当你对你的线框图感到满意时，你可能想考虑创建一个 模型 或 原型 以更接近你的最终设计。
