每个结构、每个建筑、每个设计都从一个线框开始。它是决定整个项目成功与否的设计工作流程的重要组成部分。

无论您是使用数字用户界面设计还是横幅设计，线框都应该是您设计过程的一部分。在本指南中，我们将帮助您了解什么是线框以及它们为何重要。

我们为初学者和高级设计师制作了本指南，以传达线框图的重要性。您将学到从如何设计线框图到用于线框图的最佳工具、避免常见错误的技巧等等。

让我们开始吧。

什么是线框？

什么是线框图

想象一下你正在盖房子。你会在没有任何准备的情况下直接建造建筑物吗？不！您首先要使用绘图板并设计房屋计划。通过创建定义建筑物构造的布局。

线框也是如此。它有助于让您脚踏实地，并根据正确布局的计划精心设计布局和设计。

有许多不同类型的线框。在用户界面设计中，线框用于为网站、Web 应用程序、移动应用程序等创建布局。线框甚至用于海报和信息图表等印刷设计，以帮助改善用户体验。

为什么线框很重要

当谈到用户界面设计时，大多数设计师往往会忽视线框图的重要性。他们直接进入构建过程，因为他们已经熟悉设计的通常结构。

当您已经看到足够多的网站设计和应用程序来了解标题、菜单和按钮的位置时，您可以直接进行设计而无需线框。这就是灾难性的网站和应用程序的诞生，这些网站和应用程序通过破坏用户体验来产生非常低的用户交互。

线框允许您事先了解设计的轮廓或框架，从而有助于防止这种情况发生。

除了制作用户友好和有效的设计之外，线框图还有其他几个好处。

从清晰的布局开始：线框可帮助您以清晰的布局进入原型阶段。这有助于您保持专注并创建更有效和结构化的设计。

获得早期反馈：通过线框图，您可以获得客户的早期反馈。这将有助于避免在后期对您的设计进行多次修改。

更好的结构：您可以使用线框来规划设计的基本结构，以便与最终用户进行有效的沟通。

更好的协作：在与团队协作时，线框也可以为您提供帮助。尤其是在收到开发人员的反馈时。

线框的主要元素

线框图中应该包含哪些内容？这通常取决于您所从事的设计类型。设计线框没有规则或标准。但是，您可以遵循一些概念来制作更好的线框。

遵循 KISS 理念

保持愚蠢简单，这是一个流行的概念，您可以在许多不同类型的项目中使用，尤其是在设计项目中。

线框的主要目的是设计用户界面的结构。无需创建深入的设计。只需用最少的元素保持简单和干净。

基本结构

大多数线框都有一个您用来构建的基本结构。例如，网站线框应包括标题部分、徽标、菜单等。

考虑到这个基本结构开始线框图很重要。它为线框中的其余内容创建主要轮廓。

正文内容

线框的主体是展示内容的地方。对于网站线框，您可以在此处包含功能、产品组合、定价表和其他重要部分。

但是，在制作线框时，您不必担心细节。您不必添加文本描述、为每个按钮或图标命名，甚至不必担心标题。主要目标是为所有内容创建占位符并将其映射出来。

低保真与高保真

还有一种线框称为高保真线框。与具有最少内容的低保真线框不同，这些线框具有更详细的结构。您将在指南的示例部分看到不同之处。

无论哪种方式，您都可以选择要设计的线框类型。这通常取决于您正在处理的项目有多大以及您在日程表中有多少时间。

不同的线框示例

为了帮助您了解线框的外观，这里有一些您可以研究的示例设计。

设计线框时要避免的事情

在设计线框时，您还应该始终避免一些常见错误。

不包括图像

不要将线框与模型或原型混淆。线框都是关于规划和概述结构的。无需在线框中包含图像或图形。

事实上，在线框中添加图形只会干扰首先制作线框的主要目标——清晰地了解设计轮廓。

避免使用颜色

一些设计师喜欢在线框中使用不同的颜色来突出设计的重要部分。但这是不必要的。线框设计坚持灰色和黑色。

将细节保持在最低限度

过分关注完善线框图中的小细节只会浪费时间。即使在设计高保真线框时，也要尽量限制细节以保持整体设计的最小外观。

使用模板或工具

设计师在创建线框图时犯的最大错误之一是尝试用笔和纸绘制它或使用 Photoshop 等软件从头开始绘制。

您可以使用许多出色的工具和模板轻松设计线框。它们包括用于规划整个结构的预制组件。您可以毫不费力地使用它们来设计线框。

线框图的最佳工具

有很多很棒的工具可以用来制作线框。我们在上一篇文章中介绍了一些最好的工具。以下是最佳工具的快速概览。

使用模板

线框模板

设计线框最简单、最经济的方法之一是使用线框模板套件。这些模板套件捆绑了许多制作线框所需的元素。它们与 Sketch、Figma 和 Photoshop 等应用程序配合良好。

您可以在我们最好的移动应用程序线框和网站线框模板集合中找到更多模板。

用户体验引脚

引脚

如何开始

创建线框是整个过程中最简单的部分。

如果您已经下载了线框图模板套件，那么就像在您选择的图形编辑应用程序中打开模板文件一样简单。像 Photoshop 或 Sketch。然后您可以开始自定义布局。

乍一看似乎势不可挡。但是，通过一些练习，您将能够毫不费力地制作线框。请记住遵循我们在本指南中概述的提示和建议。

流程的后续步骤

线框图只是设计过程中的众多步骤之一。您现在可以使用线框从客户端获取反馈。返回绘图板以改进线框。得到客户的认可。并在流程的下一阶段工作——设计模型或原型。最后，进行设计。

毋庸置疑，将线框图集成到您的工作流程中可以以令人难以置信的方式改进您的设计和工作。从长远来看，在线框图阶段花费额外的时间会给你带来丰厚的回报。