在开始之前，我想问一些问题，在网页中，如何选择四格或五格？ 视频应该放在哪里？ 在哪里放置图像？ 我应该选择水平滚动还是垂直列表？ 在导航栏上设计四个或五个选项卡？

在本文中，我将回答所有这些问题（以及更多问题），并向您简要介绍线框图的概念。

线框的定义

绘制线框图是一种根据页面结构设计网页的方法。

什么是线框图？

根据usability.gov给出的定义：线框图是页面界面的二维示意图，专门关注内容的空间分配和优先级、可用功能和预期行为。

网站线框示例

简而言之，它是页面或屏幕的布局，演示了特定页面或屏幕上将出现哪些元素。 将其视为页面的网络框架。 您可能已经注意到，在上面的图像中，它们不包含任何颜色、样式或图形，因为它们的主要重点是理解功能、关键元素的位置以及用户如何与其交互。

为什么线框图如此重要？

因为线框图可以节省大量时间！ 线框是在设计过程的早期使用的，因此在线框阶段进行更改和实现反馈要容易得多，而不是在已经有很多视觉元素时对最终模型进行更改。 它可以帮助我们实现绘制页面的功能，及早发现问题，节省日后修改的时间。 它使可行性问题凸显出来，设计人员倾向于在整个开发过程中衡量其设计的可用性，从线框到原型再到最终可交付成果！

“线框就像设计过程中的蓝图，不应该被忽视，就像你在没有蓝图的情况下建造一座房子一样。”

在设计时，我们有时会忘记用户的可用性和功能。 通过消除颜色、图像和其他细节，我们被迫考虑页面上每个元素的布局和功能。 但我们的重点只能放在最佳用户体验所需的结构上。 如果效率是您的目标，那么您应该从线框图开始。

线框的类型

两种类型的线框：Lo-Fi 低保真线框、Hi-Fi 高保真线框

低保真线框通常是内容和视觉效果最少的粗糙纸质草图，并且通常是静态的（非交互式）。

低保真线框

然而，高保真线框图非常详细，并且具有低保真线框图中经常缺少的细节。 与低保真线框相比，高保真线框更耗时且难以使用。

高保真线框图

何时创建线框？

一旦您收集了足够的用户动机和目标，线框图就会派上用场。 你需要了解你的网站的结构，这可以通过制作产品逻辑图来实现。 然而，如果您想探索其他可能性或不同的功能，低保真线框就可以发挥作用。 线框图没有严格的规则或顺序可遵循。

如何创建线框？

我需要为线框图软件/工具支付很多费用吗？ 不！ 相信我，笔和纸线框在大多数情况下都可以正常工作。 它们与数字线框一样快速有效。 草图可以传达想法并使流程/结构易于理解。

如果您试图决定使用哪种类型的线框工具，除了草图和纸质线框之外线框图 软件，您还可以使用在线工具来创建它们。 作为一款在线原型制作和协作工具线框图 软件，Ink Knife 可以让零设计知识的人轻松绘制产品线框图。 它提供了多种可直接拖放的线框组件（矩形、线条、文本输入框等）。 到画布。 方便可行性测试并提高产品设计效率。

线框图确实是用户体验流程的重要组成部分。 这个过程不仅确保我们的团队达成共识，而且还允许我在深入研究视觉设计之前与目标用户组进行测试并尽早收集反馈。

如果你想让你的线框图更方便、更容易向团队传达想法并考虑到设计实现，那么就开始制作线框图吧！

本文由 Parveen Yadav 的《UX 设计中的线框图——什么、为什么、何时和如何？》中的莫道编译。

作为一款在线原型制作和协作工具，魔道已经帮助许多产品经理和设计师轻松创建交互式原型来展示和验证设计想法。 还支持多人协作编辑、分享和评论。 新注册用户即可获得魔道高级企业版15天免费试用！ 开始体验吧！