什么是线框图？快来看这篇文章！带你从线框图新手到真正的专家！

这里是「交互设计全宇宙体系」知识栏目的第十期~

「全宇宙体系」是由美国交互设计资讯独家原创性连载的关于交互设计的知识分享栏目，通过系统化、体系化地为大家带来干货推文，带领大家探索全宇宙体系中的“小行星”，收获一个个锦囊妙计~

（戳一戳图片可以直接到文章页面哦~）

线框是网页或应用程序的二维骨架轮廓，它清晰地概述了页面结构、布局、信息架构、用户流程、功能和预期行为。由于线框通常代表最初的产品概念，样式、颜色和图形被保持在最低限度。

线框可以手工绘制或以数字软件方式创建，具体取决于需要多少细节。

绘制线框图是用户体验设计师最常用的一种做法，此过程允许所有利益相关者在开发人员使用代码构建接口之前就将信息放置在何处达成一致。

借助从用户反馈中收集的宝贵见解，设计师可以在产品设计的下一个更详细的迭代（例如原型或模型）的基础上进行构建。

相同的屏幕可以通过多种不同的方式构建，但只有少数几种方式可以正确传达信息，并产生易于使用的软件或网站。确定一个好的界面结构可能是设计软件最重要的部分。

在编写任何代码之前和视觉设计完成之前绘制线框图，将为设计师节省大量时间和以后痛苦的调整工作。

低保真线框对于开始对话、决定导航布局和映射用户流程很有用。简而言之，如果在会议室中有利益相关者或客户，并且想在会议中用笔勾勒出一些东西，那么低保真线框是理想的选择。对于拥有多种产品概念并希望快速决定往哪个方向发展的设计师来说，它们也非常有用。

中保真线框

也可以使用不同的文本权重来分隔标题和正文内容。虽然仍然是黑白的，但设计师可以使用不同的灰色来传达各个元素的视觉突出性。尽管它们在产品的早期阶段仍然相关，但中保真线框通常是使用数字线框工具创建的，例如Sketch。

高保真线框

这种添加的细节使高保真线框成为探索和记录复杂概念（例如菜单系统或交互式地图）的理想选择。产品设计周期的后期阶段应该尝试使用高保真线框。

高保真线框还可能包括导航系统、联系信息和页脚。排版和图像不应该是低保真或中等保真线框的一部分——但设计师经常使用文本的大小来表示信息层次结构或指示标题。

线框传统上是用灰度创建的，因此设计师经常使用阴影——使用较浅的灰色阴影来表示浅色，使用较深的阴影来表示更大胆的颜色。在高保真线框中，设计师可能会偶尔添加一些颜色；例如红色表示警告或错误消息，或深蓝色表示活动链接。

由于线框是二维的，它们不能很好地显示界面的交互功能，如下拉、悬停状态或实现显示隐藏功能等。

尺寸

在移动应用程序上，列数通常限制为最多一列或两列。您需要决定他们是否看到无限滚动，或者您是否要减少每页的项目数以便在下方显示其他内容。

行为

第二个核心区别是移动应用程序或网站的行为。在网站上，用户将使用鼠标或触控板来浏览页面。用户还可以单击某些功能以显示其他信息，甚至可以将鼠标悬停在某些交互上以显示菜单。

然而，在移动应用程序上，用户必须点击屏幕才能打开一项功能。在为移动应用程序设计线框图时，这意味着要更仔细地考虑如何鼓励用户点击特定按钮以达到特定目标。

相互作用

场景中最著名的线框工具之一是Sketch，它结合使用画板和矢量设计形状，使设计人员能够轻松地在基于像素的画布上创建线框。Sketch 还有一个方便的 Symbols 功能，这意味着你可以在创建 UI 元素后重用它们。

需要比纸质线框更专业的东西，但又不追求像素完美？选择同样流行的Balsamiq，该工具使设计师能够专注于布局、直观的交互设计和基本的信息架构，而不是审美质量。

（部分图文来自网络，若有侵权，请联系删除。）

设计资源/书籍资源/知识互动

还有更多神秘福利！

一起创作更好的设计~