产品的好坏取决于其结构。您的线框是基础。

良好的结构是一个基本的网页设计原则。当建筑师规划新房子时，他们首先要创建一个传达房屋结构的蓝图。产品设计人员需要一个类似的蓝图 — 它称为线框。

究竟什么是线框图？

线框是您的想法的准系统可视化。线框的首要目标是描述用户流的结构和功能。功能是用户与之交互的任何内容，例如按钮、菜单和下拉菜单。

在不涉及视觉细节或 UI 设计的情况下，线框演示了产品的总体布局，并说明了每个页面上需要包含哪些元素。有许多可用的线框工具供设计人员选择。

为什么线框图如此重要？

线框在映射接口的基本部分时是必需的。它可以帮助所有相关人员在流程开始时全面了解产品。没有这个基础，几乎不可能继续进行产品的编码或设计。它还提供了一种简单且低成本的方法来比较一些设计概念并尽早做出决策。

由于线框非常直观，因此它们比看似抽象的书面想法更容易理解。向开发人员或您的客户展示线框将帮助他们清楚地理解您的意图，使您能够接收相关反馈并将其实施到您的设计中。

线框和模型有什么区别？

这一切都与细节水平有关。 您从线框开始，线框更多地涉及结构和布局，然后发展到模型，其中包括更接近最终产品的图像和内容。

创建实际产品之前的最后一步是通过使其可点击来将您的模型变成原型。 如果您想知道原型与模型相比如何，这归结为交互性水平。线框是静态设计工件，而原型是交互式的。原型的复杂程度各不相同，从精心设计的网站模型到使用真正行为和感觉与实际产品相同的代码创建的 UX 原型。 线框通常是原型的第一步。

不同类型的线框

像任何好朋友一样，线框在整个过程中都陪伴在您身边。随着您对产品有了更好的了解，您可以逐渐实现更高级的线框形式，当您从一个阶段进入下一个阶段时，从各个角度构建它们。以下是对不同类型线框的简要说明。另请查看这些线框示例以了解更多详细信息。

低保真线框与高保真线框

线框的细节级别（也称为保真度）可能会有所不同。主要有三种类型：

低保真线框。 低保真线框是页面或屏幕的基本视觉表示形式，使用简单的形状（如线条和框）创建。由于它们在视觉上简单，这种类型的线框以其创建速度而闻名。它们可以在头脑风暴会议期间创建，并有助于更有效地交流想法。但是，低保真线框往往更抽象，可能需要解释。

中等保真线框。 这些线框比低保真线框要详细一些。您不会找到网站动画、视差滚动、照片、花哨的字体或图形，但您会看到更逼真的间距、按钮等。

高保真线框。 高保真线框的细节级别更高 — 它们可能包括真实副本并提供更准确的布局表示（例如，可以使用不同的字体大小来分隔标题和正文内容）。由于创建高保真线框需要更长的时间，因此它们通常保留用于产品设计过程的后期阶段（例如，当您有两个版本的页面布局并希望并排比较它们时）。

如何有效地生成线框

线框的生产可能会有所不同。有手绘线框，它们是在纸或白板上的草图，还有数字线框，它们是计算机绘制的或在线框工具上创建的。

有几种方法可以开始使用线框：

直接在画布上打开并开始编辑我们的线框模板之一

如果您是 Figma 粉丝，请使用我们的 Figma 插件访问完全可定制的模板，然后无缝导入到您的 Studio 网站

使用我们 AI 驱动的可视化站点地图和线框生成器生成为您的项目定制的线框

最佳实践使用线框

• 01. 保持线框简单

  速度和简单性是线框的两个主要属性。您可以应用一些视觉约定来轻松地将您的想法传达给其他设计人员。

  输入字段：输入字段可以表示为矩形。

  按钮：按钮可以表示为中心有文本的矩形。

  图像：图像可以表示为带有“X”的矩形框。

  文本：根据保真度级别，可以使用占位符文本（如 Lorem Ipsum）或真实文本。

• 02. 将造型保持在最低限度

  线框的目标是确定界面的预期内容和功能，而不是描述视觉设计。这就是为什么线框通常以黑白或灰度创建的原因。缺少颜色、图像、排版或任何其他视觉属性有助于最大限度地减少干扰并将讨论集中在布局和结构上。

  这种方法的另一个好处是设计看起来并未完成。当其他人知道视觉资产的创建时间不长并且可以快速修改时，他们可以更轻松地共享设计反馈。

  请记住，虽然设计应该是最小的，但这并不意味着禁止使用颜色。您可以使用对比色将用户的注意力引导至线框的特定元素。例如，使用蓝色来传达行动号召按钮等动元素。

• 03. 为线框添加注释

  由于线框是二维和静态的，因此其他人可能很难理解某物应该如何运作。例如，如果您的界面中有复杂的交互功能，例如拖放对象，则其他人可能需要发挥他们的想象力来了解其工作原理。在 UI 控件旁边添加一个简短的注释，以解释预期行为。

• 04. 确保利益相关者了解在线框中寻找什么

  虽然设计人员和开发人员了解什么是线框以及为什么它们看起来是某种方式，但客户可能在掌握这个概念时遇到问题。企业主可能很容易假设最终的视觉设计看起来与他们面前看到的线框相同，并提出诸如“为什么这个设计如此黑白分明”之类的问题，或者更糟糕的是，完全拒绝解决方案。确保只与精通产品设计领域的利益相关者共享线框，或清楚地传达此步骤的本质。在某些情况下，创建高保真模型更安全。

• 05. 使用高保真线框作为文档

  许多团队将线框视为被原型替换的临时工件。这并不总是正确的。高保真线框可用于记录复杂的概念，例如导航系统或特定用户流（如用户经过的一系列屏幕）。

• 06. 在低保真阶段为同一屏幕创建几次迭代

  此时，您仍然应该保持开放的选择。随着您继续前进，您将对产品有更好的了解，您的选择也会更加明智。确定流程后，您可以了解更详细的信息。

• 07. 知道何时描述而不是设计

  根据间距、大小和布局来描述层次结构，同时注意不要在设计 UI 时进行设计。确定要传递的最重要的信息，并考虑用户将在该特定页面上寻找什么。他们是否打算订阅时事通讯、为照片添加滤镜或进行购买？不管它是什么，只需陈述它，而不是设计它。

• 08. 不要跳过线框阶段！

  除了让您有机会专注于开发全面的积极用户体验之外，线框还可以节省时间，因为它们可以帮助您在流程的早期识别和处理任何可用性问题。当然，就像生活中的一切一样，规则也有例外。您可能会遇到不需要创建整个线框的情况，例如在调整预先存在的功能或向已经具有定义语言的产品添加简单屏幕时。但总的来说，将线框视为为您的客户创造令人惊叹的作品的早期步骤。

了解有关 Thinkart 网站设计的更多信息，并立即开始构建您的下一个网站。