开始之前，我想提出一些问题，在网页中，你是如何选择四网格还是五网格？哪里放视频？哪里放图像？是选择水平滚动还是竖行列表？在导航栏上设计四个还是五个标签？

在这篇文章里，我将回答这所有的问题（甚至更多），简单地给你介绍下线框图的概念。

线框图的定义

画线框图就是从页面结构出发来设计网页的一种方法。

线框图又是什么？

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

一个网站的线框图案例

简单地说，它是一个页面或屏幕的布局，演示了特定页面或屏幕上将存在哪些元素，可以将其视为一个页面的网页框架。你可能已经注意到在上面的图像中，它们不包括任何颜色、样式或图形，因为它们主要关注的是了解功能、关键元素的位置以及用户将如何与它们交互。

为什么线框图如此重要？

因为线框图可以节约很多时间！线框图是在早期设计过程中使用的，所以在线框图阶段进行更改、实现反馈要容易得多，而不是在已有大量视觉元素的最终模型进行更改。它能助我们实现绘制页面的功能，并及早发现问题，在以后节省修改时间。它能将可行性的问题凸显，设计师们倾向于在整个开发过程中（从线框图到原型到最终的可交付成果）测量设计的可用性!

“线框就像设计过程中的蓝图，不应该被忽略，就像你建造房屋没有蓝图一样。”

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

线框图的类型

两种类型线框图：

• Lo-Fi 低保真线框
• Hi-Fi 高保真线框

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

低保真线框图

然而，高保真线框非常详细，并且具有低保真里通常缺少的细节。相对于低保真线框图，高保真线框图耗时多、难上手。

高保真线框图

什么时候创建线框图？

一旦你收集了足够的用户动机和目标，线框图就会派上用场。你需要了解你网站的结构，这可通过做一个产品逻辑地图实现。但是，如果你想探索其他可能性，或不同的功能，低保真线框图就起到作用啦。 线框图没有严格的规定或秩序要遵守。

如何创建线框图？

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

如果你试图决定使用哪种类型的线框工具，除了草图和纸质线框图，你也可以用在线工具来创建它们。作为一款在线的原型设计和协作工具，墨刀可以让设计零基础的人轻松画出产品线框图，它提供多种线框图组件（矩形、线条、文字输入框等），可直接拖拽组件到画布。便于进行可行性测试，提高产品设计效率。

线框图确实是UX过程的重要组成部分。 这个过程不仅能够确保我们的团队在同一进程上 - 而且还允许我与目标用户群体一起进行测试，在深入潜入视觉设计之前尽早收集反馈。

想让你的线框图更方便、更轻松地将想法传达给团队，以及考虑到设计实施时情况，那就开始制作线框图吧！

本文由转载自墨刀编译自 Parveen Yadav 的 Wireframes in UX Design — What, Why, When and How?

墨刀作为一款在线原型设计与协同工具，已经帮助众多产品经理和设计师们轻松做出交互原型，展现和验证设计想法，还支持多人协作编辑，分享和评论。新注册用户即可获得墨刀高级企业版的15天免费试用！开始体验一下吧！