什么是线框设计及其设计方法？

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

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

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

让我们开始吧。

什么是线框？

假设您正在盖房子。您是否没有任何准备就直接建造建筑物？没有！首先，请转到绘图板并设计房屋平面图。通过创建定义建筑物构造的布局。

线框也可以这样说。它可以帮助您保持接地，并根据正确布局的计划来设计布局和设计。

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

为什么线框很重要

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

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

线框通过允许您事先了解设计的轮廓或框架来帮助防止这种情况。

除了精心设计用户友好和有效的设计外，线框设计还有其他好处。

• 从清晰的布局开始：线框可以帮助您在进入原型阶段时就牢记清晰的布局。这可以帮助您保持专注并创建更有效和结构化的设计。
• 获得早期反馈：使用线框，您可以从客户那里获得早期反馈。这样可以避免以后再进行许多设计修改。
• 更好的结构：您可以使用线框来规划设计的基本结构，以有效地与最终用户沟通。
• 更好的协作：当与团队协作时，线框也可以为您提供帮助。特别是从开发人员那里获得反馈时。

线框的主要元素

线框中应包含什么？它通常取决于您正在处理的设计类型。没有设计线框的规则或标准。但是，可以遵循一些概念来制作更好的线框。

遵循KISS概念

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

线框的主要目的是设计用户界面的结构。无需创建深入的设计。只需使用最少的元素就可以使其简单，干净。

基本结构

大多数线框具有可用于构建的基本结构。例如，网站线框应包含标题部分，徽标，菜单等。

考虑到此基本结构，开始线框很重要。它为线框中其余内容创建了主轮廓。

身体内容

线框的主体是内容的特色。对于网站线框，您可以在其中包含功能，产品组合，定价表和其他重要部分。

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

低保真与高保真

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

无论哪种方式，您都可以选择要设计的线框类型。通常取决于您正在从事的项目规模以及时间表中的时间。

设计线框时应避免的事情

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

不包含图片

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

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

避免使用颜色

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

尽量减少细节

过多地关注于完善线框中较小的细节只是浪费时间。即使在设计高保真线框时，也应尝试限制细节，以使整体设计的外观保持最小。

使用模板或工具

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

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

线框图的最佳工具

有很多很棒的工具可用于制作线框。以下是最佳工具的快速概述。

UXPin

UXPin是一种非常灵活的工具，可用于设计线框。它还使您可以轻松地从线框升级到模型和功能原型。起价为每月19美元。

Figma

Figma是一个免费的基于云的编辑器，可用于设计从线框到模型等的所有内容。但是，将此工具与线框模板套件一起使用时，效果最佳。

MockFlow

MockFlow非常适合自由职业者。它具有一个非常易于使用的界面，您可以在其中轻松设计线框和模型。该工具还提供免费计划。

如何开始

创建线框是该过程中最容易的部分。

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

例如，在Figma中进行线框图非常简单。它提供了您需要入门的预制布局和组件。或者，您可以加载模板套件。您要做的就是将这些项目拖放到画布上，然后开始重新排列它们以设计线框。就这么简单！

乍一看似乎不知所措。但是，只要稍加练习，您就可以轻松制作线框。只要记住遵循本指南中概述的提示和建议即可。

后续步骤

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

不用说，将线框图集成到您的工作流程中可以以一种令人难以置信的方式改善您的设计和工作。从长远来看，将额外的时间花在线框图制作阶段将为您带来丰厚的回报。