什么是线框图？终极指南

如果您是 UI/UX 设计领域的初学者，您可能不了解“线框图”这个术语。但是，线框图是产品设计过程中不可或缺的一部分，因此让我们深入了解一下——什么是线框图？

在这篇博文中，我们将解释线框图到底是什么，为什么需要它们，何时可以使用它们以及存在的不同类型。

什么是线框图？

从主要问题开始，线框图到底是什么？从广义上讲，线框图是一种蓝图或示意图，有助于向相关利益相关者传达您的应用程序或网站的结构。

从本质上讲——线框图是您产品的基本设计布局。线框图呈现您希望在页面上显示的关键信息。它们还清楚地表明您的应用程序或网站页面结构将是什么样子。最后，线框图提供有关用户界面和用户流程中特定元素的基本信息，甚至突出显示不同的 UI 功能。

为什么要使用线框图？

在您的团队编写任何代码或分配大量资源来构建项目之前，重要的是每个人都对他们正在构建的内容达成一致。使用线框图可以帮助每个人理解和传达/解释您想要实现的目标。通过以简约的结构化设计来构建您的设计概念，您可以快速进行调整。此外，您还可以让每个人了解您的未来设计将是什么样子。最棒的是，这意味着您可以在早期分享您的想法，而无需担心颜色、阴影或复杂菜单等更复杂的设计元素。

何时应该使用线框图？

线框图的主要目的是共享有关产品设计的基本但关键信息。因此，您越早将线框图集成到流程中越好。线框图应该快速、简单且兼容大量修改。

通常，您应该考虑在产品周期的发现阶段创建线框图。设计师使用线框图与利益相关者合作，确定业务需求，确定产品的范围等等。

线框图保真度

线框图并非都相同。即使它们都服务于相同的目的，线框图也会根据您设计它们的保真度级别而有所不同。因此，让我们看看您的不同选择。

低保真度

通常，您应该考虑在产品周期的发现阶段创建线框图。它们传达非常基本的页面结构，并且不考虑网格、比例或准确性等细节。

您可以使用笔和纸或草图应用程序设计低保真度线框图。它们非常适合使用基本形状、图像和内容即时共享想法。它们在利益相关者会议中特别有用，可以帮助每个人就产品的最终外观达成一致。此外，它们对于希望展示不同选择的的设计师也非常方便。当然，由于每个线框图都很基本，因此设计团队可以在不浪费时间创建像素完美的模型的情况下测试想法。

中保真度

线框图最受欢迎的选择是中保真度。与低保真度线框图相比，它们添加了更准确的结构和设计布局。中保真度线框图仍然避免了颜色、UX 文案、图像和排版等详细元素。但是，它们确实提供了更鲜明的功能和每个组件的更多细节。

另一个关键区别在于，您使用的是 Sketch 等数字线框图工具来设计中保真度线框图——尽管您仍然应该在产品的生命周期早期使用它们来帮助塑造最终结果。通过使用线框图工具，您可以更改字体粗细和灰色阴影，从而为您的设计提供更多细节。

高保真度

最后，高保真度线框图——在某些情况下也称为模型或原型——将细节提升到一个新的水平。它们不使用占位符文本和图像，而是具有更详细的相关组件。

保留在产品设计周期的后期阶段，它们可以帮助设计师和利益相关者分解更复杂的想法。如果您正在设计菜单系统、交互式地图，或者您想更进一步并提供产品更详细的模型，则高保真度线框图适合您。并且，与中保真度一样，Sketch 等数字设计工具可以帮助您轻松地创建高保真度线框图。

现在您已经了解了线框图是什么。它们是您产品设计过程中重要的工具，将使您的设计流程更加高效。您还可以查看我们的免费初学者课程，以了解有关 Sketch 设计的更多信息。