Figma合集：什么是线框图？

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

“如果你真正需要的是高级反馈，比如’这是重要的吗？’ figma 宣传总监 Tom Lowry 说：”如果人们在评论视觉效果时，这会令人沮丧。优秀的产品和网站设计始于智能线框设计 – 继续阅读，使用 Figma 的专业提示和线框图工具在每个线框图阶段取得好成绩。

什么是线框？

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

• 屏幕布局
• 导航栏
• UX 和 UI 设计的组成部分
• 互动元素

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

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

3 种线框设计

UX 设计的可能性可能看起来是无限的，但大多数线框设计都分为三个基本的保真度级别。在获得产品的过程中，您可以完成所有三种线框设计。

1. 低保真线框是专注于布局、导航和信息架构的基本线框。它们显示界面的外观，通过关键的 UI 设计元素说明用户流程。物理白板草图可以在线框图的早期阶段工作，尽管它们并不总是容易共享、保存或返工。使用 Figma 的在线线框图工具，您可以快速创建、共享和迭代低保真线框图。
2. 中保真线框图可帮助设计师迭代和塑造设计。设计团队在尝试用户流程和 UI 设计元素的不同方法时可能会添加注释和内容，从而绘制出核心功能和关键交互。这使团队能够在添加可视化设计组件之前确定线框设计框架。
3. 高保真线框看起来像早期的产品模型，具有交互式和视觉设计元素，但没有低保真原型的功能。在设计过程的这一点上，您可能需要添加字体、颜色和徽标等品牌元素。这样，您就可以捕获产品的外观和感觉以供用户测试。

何时跳过线框阶段

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

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

线框设计的 7 个实践

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

1. 确定您的设计目标。

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

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

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

• 移动版：宽 393 像素，高 852 像素
• 11 英寸平板电脑：宽 834 像素，高 1194 像素
• 桌面：1440 像素宽 x 1024 像素高

3. 保持线框设计简单。

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

4. Maintain design consistency.

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

5. Make navigation obvious.

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

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

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

7. 利用线框图工具。

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

线框设计清单

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

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

• 满足用户需求必不可少的屏幕
• 通过转化漏斗的用户流
• 可用性注意事项，包括导航和组织
• 每个屏幕的主要目标和用户流
• 关键的 UI 设计元素，以及每个屏幕上的内容和交互功能
• 设计组件如何组合在一起形成屏幕模板

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

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

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

• 用户流和方案
• 针对潜在痛点的用户体验设计修复
• 导航和寻路功能
• 屏幕模板中内置的信息层次结构

如何判断线框何时确定

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

线框成功的另一个标志是与利益相关者的一致性。“如果你在一次创意会议结束后感觉自己得到了你想要的反馈，并且你可以自信地进入下一步，那么我会说你的线框图真的很成功，”汤姆说。

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