什么是线框图？快来看这篇文章！带你从线框图新手到真正的专家！
TOPIC:
Wireframes
UI Design UX Design
Article：2022/07/12
这里是「交互设计全宇宙体系」知识栏目的第十期~
「全宇宙体系」是由美国交互设计资讯独家原创性连载的关于交互设计的知识分享栏目，通过系统化、体系化地为大家带来干货推文，带领大家探索全宇宙体系中的“小行星”，收获一个个锦囊妙计~
（全宇宙体系 By美国交互设计资讯）
在上个阶段的全宇宙体系专栏中，我们为大家分享了关于进阶知识的部分内容：
（戳一戳图片可以直接到文章页面哦~）
1.听说你还在研究产品设计与用户体验设计的区别？这篇文章帮你判断！
2.服务设计与用户体验设计的区别？三个步骤开启你的服务设计职业生涯！
从本期开始，我们来到专业技能星球~为大家带来关于交互设计中的常见专业技能的分享。
(专业技能体系 By美国交互设计资讯）
如果你已经涉足用户体验设计领域，那么一定可听说过“线框”这个词。线框是产品设计过程的关键部分，但是但线框到底是什么，为什么它们很重要？
什么是线框图？
" 线框是一个示意图，一个蓝图，有助于帮助您和您的程序员和设计师思考和交流您正在构建的软件或网站的结构。
线框是网页或应用程序的二维骨架轮廓，它清晰地概述了页面结构、布局、信息架构、用户流程、功能和预期行为。由于线框通常代表最初的产品概念，样式、颜色和图形被保持在最低限度。
线框可以手工绘制或以数字软件方式创建，具体取决于需要多少细节。
绘制线框图是用户体验设计师最常用的一种做法，此过程允许所有利益相关者在开发人员使用代码构建接口之前就将信息放置在何处达成一致。
为什么要使用线框图？
线框图过程往往发生在产品生命周期的探索阶段。在这个阶段，设计人员正在测试产品的范围，就想法进行协作，并确定业务需求。线框通常是网页的初始迭代，用作产品设计的起点。
借助从用户反馈中收集的宝贵见解，设计师可以在产品设计的下一个更详细的迭代（例如原型或模型）的基础上进行构建。
相同的屏幕可以通过多种不同的方式构建，但只有少数几种方式可以正确传达信息，并产生易于使用的软件或网站。确定一个好的界面结构可能是设计软件最重要的部分。
在编写任何代码之前和视觉设计完成之前绘制线框图，将为设计师节省大量时间和以后痛苦的调整工作。
线框图的不同类型？
线框主要分为三种类型：低保真线框、中保真线框和高保真线框。这些线框之间最重要的区别因素是它们包含的细节量。
低保真线框
低保真线框通常作为设计的起点，因此它们往往更粗糙，没有任何规模、网格或像素精度的感觉。低保真线框会省略任何可能会分散注意力的细节，只包括简单的图像、块状和模拟内容——例如标签和标题的填充文本。
低保真线框对于开始对话、决定导航布局和映射用户流程很有用。简而言之，如果在会议室中有利益相关者或客户，并且想在会议中用笔勾勒出一些东西，那么低保真线框是理想的选择。对于拥有多种产品概念并希望快速决定往哪个方向发展的设计师来说，它们也非常有用。
中保真线框
中保真线框具有更准确的布局表示，虽然它们仍然避免图像或排版等干扰，但更多细节被分配给特定组件，并且功能彼此之间明显区分开来。
也可以使用不同的文本权重来分隔标题和正文内容。虽然仍然是黑白的，但设计师可以使用不同的灰色来传达各个元素的视觉突出性。尽管它们在产品的早期阶段仍然相关，但中保真线框通常是使用数字线框工具创建的，例如Sketch。
高保真线框
高保真线框拥有特定于像素的布局。低保真线框可能包括伪拉丁文本填充物和用“X”填充以表示图像的灰色框，而高保真线框包括实际的特色图像和相关的书面内容。
这种添加的细节使高保真线框成为探索和记录复杂概念（例如菜单系统或交互式地图）的理想选择。产品设计周期的后期阶段应该尝试使用高保真线框。
线框图中包含什么？
线框中包含多少功能在很大程度上取决于线框的保真度是低保真度、中保真度还是高保真度。但是，通常在线框中的元素包括徽标、搜索字段、标题、共享按钮和伪拉丁文 占位符文本。
高保真线框还可能包括导航系统、联系信息和页脚。排版和图像不应该是低保真或中等保真线框的一部分——但设计师经常使用文本的大小来表示信息层次结构或指示标题。
线框传统上是用灰度创建的，因此设计师经常使用阴影——使用较浅的灰色阴影来表示浅色，使用较深的阴影来表示更大胆的颜色。在高保真线框中，设计师可能会偶尔添加一些颜色；例如红色表示警告或错误消息，或深蓝色表示活动链接。
由于线框是二维的，它们不能很好地显示界面的交互功能，如下拉、悬停状态或实现显示隐藏功能等。
网站线框与移动端线框
当我们想到线框时，我们经常会想到网站线框与移动端现在但是移动线框需要特殊考虑，那么两者之间的核心区别是什么？
尺寸
由于移动应用程序和网站之间的大小差异，必须非常仔细地考虑布局。例如，由于网站的屏幕宽度，网站线框可能具有分布在多个列上的布局。
在移动应用程序上，列数通常限制为最多一列或两列。您需要决定他们是否看到无限滚动，或者您是否要减少每页的项目数以便在下方显示其他内容。
行为
第二个核心区别是移动应用程序或网站的行为。在网站上，用户将使用鼠标或触控板来浏览页面。用户还可以单击某些功能以显示其他信息，甚至可以将鼠标悬停在某些交互上以显示菜单。
然而，在移动应用程序上，用户必须点击屏幕才能打开一项功能。在为移动应用程序设计线框图时，这意味着要更仔细地考虑如何鼓励用户点击特定按钮以达到特定目标。
相互作用
用户与移动应用程序交互的方式与他们在网站上的交互方式大不相同。应用程序可能会以与网站类似的方式从互联网上提取内容和数据，但许多应用程序还为用户提供下载内容以供离线使用的选项。这些特定于移动应用程序的“离线模式”应该反映在线框图中。
绘制线框图？
在当今技术丰富的环境中，设计人员可以轻松获得无数先进的线框图工具和程序。内置 UI 组件（例如表单元素、按钮状态和导航）允许设计人员利用预先制定的设计决策并在很短的时间内创建线框。
场景中最著名的线框工具之一是Sketch，它结合使用画板和矢量设计形状，使设计人员能够轻松地在基于像素的画布上创建线框。Sketch 还有一个方便的 Symbols 功能，这意味着你可以在创建 UI 元素后重用它们。
需要比纸质线框更专业的东西，但又不追求像素完美？选择同样流行的Balsamiq，该工具使设计师能够专注于布局、直观的交互设计和基本的信息架构，而不是审美质量。
线框图可能看起来很基本，但线框可以将在产品关键页面的布局和导航方面获得重要的用户、客户和利益相关者的批准。有了这个批准，设计师就可以满怀信心地继续前进，因为正在设计客户和用户会喜欢的东西。从长远来看，线框可以节省大量时间和金钱。
（部分图文来自网络，若有侵权，请联系删除。）
加入UI&UX交流社群~
设计资源/书籍资源/知识互动
还有更多神秘福利！
一起创作更好的设计~
往期推荐 | Read More
一起为人类老龄化而设计：5种创造包容性数字体验的方法！
案例研究：能够提高转化率的邮件设计系统—Naukri设计项目
案例研究：提供建立写作服务的网站设计
文字丨Joy
编辑丨Joy
如果觉得我们做的还不错点个赞和在看吧！：）