Figma攻略：什么是线框图？

如果您曾经尝试过在没有线框的情况下设计网站或应用程序，您就会知道为什么线框流程很重要。如果没有线框图，您和您的团队如何可视化您想要做的事情？如何对用户流程进行排序，或者知道哪些内容显示在哪些屏幕上？

“如果人们对视觉效果发表评论，而你真正需要的是高级反馈，例如‘这是最重要的事情吗？’，这会令人沮丧，”Figma 宣传总监 Tom Lowry 说道。优秀的产品和网站设计始于智能线框设计 - 继续阅读，利用 Figma 的专业技巧和线框工具来完成线框的每个阶段。

什么是线框？

线框图是基本蓝图，可帮助团队协调需求，保持用户体验设计对话的重点和建设性。将线框视为应用程序、网站或其他最终产品的骨架。您的线框图向设计团队和利益相关者展示了基本网页、组件和功能的基本轮廓，包括：

• 屏幕布局

• 导航栏

• UX 和 UI 设计的组成部分

• 互动元素

在设计的早期阶段，低保真线框依赖 lorem ipsum 文本和简单的框作为图像和视频的占位符。这有助于设计团队、文案和其他团队成员专注于基本功能，以围绕正确的方向进行调整。

从干净、备用的线框设计开始也为 UI/UX 设计师提供了迭代的空间。他们可以从用户对核心 UX/UI 元素的测试中收集早期反馈，而不会因视觉设计细节而分散用户的注意力。设计团队在努力实现最终用户体验时尝试不同的概念、用户流程和模板。

3种类型的线框设计

用户体验设计的可能性似乎是无限的，但大多数线框设计都分为三个基本的保真度级别。您可以在最终产品的过程中完成所有三种线框设计。

1. 低保真线框图是专注于布局、导航和信息架构的基本线框图。它们展示了界面的外观，通过关键 UI 设计元素说明用户流程。物理白板草图可以在早期线框图阶段发挥作用，尽管它们并不总是易于共享、保存或返工。使用Figma 的在线线框图工具，您可以快速创建、共享和迭代低保真线框图。

2. 中保真线框可帮助设计师迭代和塑造最终设计。设计团队在尝试不同的用户流程和 UI 设计元素方法时可能会添加注释和内容，从而绘制出核心功能和关键交互。这使得团队能够在添加视觉设计组件之前确定最终的线框设计框架。

3. 高保真线框看起来像早期的产品模型，具有交互式和视觉设计元素，但没有低保真原型的功能。在设计过程的这一点上，您可能需要添加字体、颜色和徽标等品牌元素。这样，您就可以捕获最终产品的外观和感觉以供用户测试。

何时跳过线框阶段

许多设计团队认为他们必须从低保真线框开始，并从那里开始发展。当您探索新产品概念时，这很有意义，因此您可以对齐关键组件、进行迭代，然后在稍后添加视觉设计细节。但根据 Tom 的说法，有可能直接跳入高保真线框设计。

“如果你有一个既定的设计系统，并且你正在探索的设计与已经存在的其他设计类似，那么对话可能不会因为视觉设计细节而变得过于脱轨，”汤姆解释道。“在这些情况下，以更高的保真度探索设计理念可以同样快速且有效。”

线框设计的 7 个最佳实践

有效的线框可以像餐巾草图一样简单，也可以像静态产品模型一样复杂。通过在线框设计中应用这些最佳实践，您可以更快地与团队协调方向，并以最佳方法前进。

1. 确定您的设计目标。

在开始绘制草图或修改线框模板之前，请确定您的设计目标。考虑用户的需求，以及您希望他们采取哪些行动来实现这些需求。也许您可以通过购买有用的产品或注册教育新闻通讯来帮助用户解决问题。让您的设计团队围绕这一目标进行调整，以便您的线框设计能够推进这一目标。

2. 为您的线框选择合适的尺寸。

您的线框应与目标受众将使用的屏幕尺寸相匹配。当然，网站或应用程序在笔记本电脑上的外观与在移动设备上的外观不同。考虑到这一点，屏幕类型的标准线框尺寸如下：

• 移动设备：1080 像素宽 x 1920 像素长

• 8 英寸平板电脑：800 像素宽 x 1280 像素长

• 10 英寸平板电脑：1200 像素宽 x 1920 像素长

• 桌面：768 像素宽 x 1366 像素长

3. 保持线框设计简单。

使用灰度颜色、限制字体以及用方框替换图形来开始线框。确保您的蓝图满足最基本的用户需求。如果您关注拼写错误或配色方案等细节，您可能会忽略用户体验中的缺陷。对于简单的早期设计，截断的预览或卡片可能就足够了。但对于内容丰富的界面，Tom 建议使用真实内容而不是“lorem ipsum”占位符文本。“当您开始在用户界面上应用信息架构时，列出菜单项 1-2-3-4 并不是很有用，”他解释道。“那么你想使用真实的内容。”

4.保持设计的一致性。

线框不应造成干扰或混乱。类似的组件在所有线框图中看起来都应该相同，因此它们很容易掌握、迭代和编码。即使两个相关组件之间存在细微差异，不同的设计也会为跨页面和迭代的开发人员带来不确定性。

5. 使导航变得明显。

您的用户流程应该流畅且直观。当您将信息架构应用于线框时，请考虑在哪里可能需要通过导航和寻路提示来支持它。如果用户必须查阅站点地图，则您的导航和信息架构需要改进。

6. 不要太执着于你的线框。

即使是高保真线框仍然是一个草稿，需要进行修改才能成为最终产品。一旦您的设计团队完成线框设计，就可以与开发人员和其他创意团队成员协作添加功能。

7. 利用线框图工具。

设计团队需要可以在线共享、保存并转换为模型的线框图。Figma 的线框套件附带拖放设计工具，使初学者和设计专业人士都可以轻松创建定制的高保真线框。

线框设计清单

线框图流程可帮助您在整个设计和开发周期中进行规划、构建和协作，但您如何知道何时完成？一旦您可以从线框图待办事项列表中核对这些操作项，您的线框就可以用于模型和更高保真度的原型了。

完成线框图后，回顾一下您最初的工作范围。现在您已经概述了最终产品，您也许可以改进您的估算。即使它只是带有占位符的草图，您的线框也应该显示：

• 哪些屏幕对于满足用户需求至关重要

• 用户通过转化渠道的流量

• 可用性考虑因素，包括导航和组织

• 每个屏幕的主要目标和用户流程

• 关键 UI 设计元素，以及每个屏幕上的内容和交互功能

• 设计组件如何组合在一起形成屏幕模板

当您的设计团队开始设计过程时，您可能并不确切知道最终产品的工作原理或外观。初学者可能会想跳过线框图并依赖现有模型进行设计，但这可能会导致缺乏灵感、无益的用户体验。线框图将创造性的注意力集中在用户需求上，并帮助团队在整个设计和开发过程中保持一致。“线框为人们提供了一个早期的窗口，让人们在投入大量时间打磨某些东西之前就可以了解项目，”Tom 说。“任何时候你都可以尽早在组织中安排更多的人，这样就可以节省以后的时间。”

您的最终产品很可能看起来与最初的线框有很大不同——这是一件积极的事情！线框图让您可以自由地进行实验、做出改变、尝试新概念和承担风险。有了骨架框架，您就可以轻松地修改工作流程和设计元素，而这些在设计过程中后期很难调整。由于反复试验的线框图过程，您的最终设计将看起来和感觉都更好。

线框图将可用性放在第一位，将创意注意力集中在对用户体验至关重要的元素上，包括：

• 用户流程和场景

• 用户体验设计修复了潜在的痛点

• 导航和寻路功能

• 屏幕模板中内置的信息层次结构

如何判断您何时确定了线框

如果没有定量数据，衡量线框的成功是很棘手的，但汤姆说，您可以应用几个定性指标。他建议进行适度的用户测试，看看用户是否可以在没有说明的情况下完成用户体验，而不是“被绊倒或不知道下一步该做什么”。

线框成功的另一个标志是与利益相关者保持一致。“如果您在创意会议结束后感觉自己得到了想要的反馈，并且可以自信地继续下一步，那么我会说您的线框非常成功，”汤姆说。

但如果利益相关者关注的是次要细节或美学考虑，而不是核心用户需求，他说，“这可能表明你应该降低线框保真度。删除你正在共享的工件上的一些修饰，直到你得到您需要的反馈。”