无论你是刚接触用户体验设计的初学者，还是已经在这个领域活跃多年的老手，听说最多的一定是线框图。

线框图究竟是什么？它为什么这么重要呢？

一句话说，线框图是将数字产品的想法变为现实必不可少的步骤。

任何app的设计都离不开这一步，它让设计师定义设计的信息层次结构，从而可以轻松地根据希望用户处理信息的方式来规划布局。如果你还没有在交互设计中用到线框图，是时候试试看了。

在开始之前你可能会有一些疑问：线框图适合用在产品设计的哪个步骤？该怎么做，在哪里做以及应该采取什么步骤？草图和线框图之间到底有什么区别？别着急，让我们一个个解决这些问题。

线框图是什么？有什么用？

线框图是一种低保真设计的布局图，可实现三个目的：

1. 明确将在页面上显示的信息

2. 概述了页面的结构和布局

3. 传达了用户界面的总体方向和说明

就像建筑物的蓝图一样，线框图清晰而又具体地描述了布局细节，同时为建造者(设计师，产品经理等角色)提供了项目的概述。

线框充当着纸草图与第一个原型之间的传递带，它可帮助设计师规划用户的布局和交互模式，而不用考虑颜色或者风格等细节。

Swapnil Borkar 在Lyearn登陆页面上分享的一个有趣手绘线框。

如果你看过别人画的线框图，就会发现它其实是用一些方格来分割画面的。它们的作用是为了分割出不同的功能区。那么整个页面的分割理念是什么呢？

正如这张图所展示的，我们通常将重要的信息或者想让用户首先看到的信息置于上部分，之后展示更多的细节，而把用户不常用到的功能或者信息放在下面，因为这符合用户的观看顺序。

1. 寻找灵感

现在我们知道了线框图大致的样子，在深入思考你的产品线框图细节之前，你可以先看看其他设计师的线框图设计，从而获得一些启发。

I Love Wireframes提供上千个app线框图，可选择与你产品类似的分类查看。

Wirify可以将任何网站的版面变成线框图便于查看。

2. 手画线框图

线框是一个蓝图，但它是一个数字蓝图。在创建线框之前，你需要构思项目的布局。创建草图可以提供参考，你可以进一步使用线框工具提取和整理构想。

假如绘图和制图不是你的强项，也不用过于担心。草图只需要清晰易读即可传达你的组织构想。包括标签和注释，以增加草图本身的清晰度。

从草图开始，为开发项目创建路线图，这样的过程还是很有必要的，可以大大避免做出成本高昂且效率低的项目。

3. 设定设计规范

在你对线框图有了大概了解后，就要上手做啦。首先，我们需要设置文件的格式和尺寸。这一步看似无关紧要，但当你的工作需要和更多人配合的时候，就显得十分重要。

另外，关于网格系统，有很多理论，在此就不作赘述了，你可以理解为参考线，能让画面中的对应文字或者图形处于平行或者对称的位置。

Step1 ：

设置文件大小

▼

Step2：

设定参考线

▼

Step3：

根据参考放入内容块

▼

Step4：

在内容块里排布文字

和图片信息的位置

▼

Step5：

添加黑白灰颜色

▼

一般来说，低保真线框图都是用渐变灰和白色做为主色调的，也可以使用不同颜色的渐变色，这取决于你的排版。

通常保持版面的简洁，因为线框图的目的是展示交互框架而不是平面设计。

Step6：

添加文字信息和细节内容以及

高保真线框图的升级

▼

到了第5步，低保真线框图就完成了，线框图的存在是为了更好地修改app中功能区的交互细节。

在这个阶段，你不需要过多关注项目的平面设计部分。但如果你需要展示更加细节的部分或者填充颜色的高保真线框图，你还需要进行更多的升级。

Step7：

从线框走向成品

▼

从线框图开始并向前发展，在产品设计过程的开始和结束之间通常会有很多步骤。

我们已经讨论过线框。它们充当数字产品的骨架。他们为你提供布局和构造的总体思路。除了设计的骨架之外，内容和复制品是产品的肌肉。旨在在过程的早期就拥有内容。

该过程的下一步是高保真模型。样机使你产品的更直观表示。考虑一下诸如皮肤或面部特征的模型。这是你通过测试变体来确定外观并开始赋予产品某些特征的部分。

将设计交给开发人员的最后一步是原型。制作原型就像打扮你的模型并使之适合公众。它不是最终版本，但可以向其他人展示。在这一点上，你需要做的只是在将模型发送到生产之前进行一些细微的调整。

请记住，线框只是迈向原型的第一步或第二步。由于原型是产品中功能最强大的草图，因此线框可以帮助你集中内容的放置并为功能正常的原型设置路线。

这个特定的页面代表了带有预览和基本信息的卡片网格。

4. 需要注意的细节

好的线框的关键是简单。

设计师需要做的只是显示元素在页面上的布局以及网站导航的工作方式。以后可以添加精美的图像和华丽的字体。尽量减少干扰。

请牢记以下准则：

保持颜色为灰度：白色，黑色以及介于两者之间的灰色。

最多使用两种通用字体，也许是一种衬线字体和一种无衬线字体。通过更改字体的大小以及是否设置样式(粗体，斜体等)，仍可以通过字体显示信息的层次结构。

避免使用浮华的图形和图像。相反，请尝试使用简单的矩形和正方形作为占位符，并在框的中间插入一个"x"，以显示图像的放置位置。

5. 学会运用高效软件

看了上述的线框图步骤，是不是并不难？如果你再会用几款提高效率的软件，那就更加厉害了。

现在有越来越多的工具可以让你迅速画出一个高质量的线框图。根据项目的不同，无论是应用程序，软件还是网站，你都可以选择正确的工具来完成工作。

最好的线框工具可提供自定义功能，并使协作和共享变得简单。选择工具时，请确保要查找这些功能，要知道，线框图只是最终项目的蓝图。比如开发网站，在选择线框工具时你还要考虑是否能与其他团队成员进行协作，是否可以将工作保存到云中，并且是否可以轻松地用于完成站点的其他软件中。

以下这些做线框图的工具推荐给你。

Balsamiq

Balsamiq正变得流行起来，因为使用Balsamiq生产的线框类似于草图，这使线框看起来不是最终产品而是正在进行的工作。Balsamiq还具有庞大的可重复使用组件库，你可以轻松地拖放它们来设计线框。

你还可以在几乎任何平台上使用它，并提供适用于Mac，Windows和Linux的桌面版本，如果你希望在云中工作，则可以使用Web版本。诸如iOS的iMockups之类的第三方应用程序也支持Balsamiq导出格式。

Axure

几乎像线框图工具的祖父一样，Axure是最早的专业级线框图/原型设计工具之一。众所周知，它是行业专业人员中广泛使用的工具。

Mockplus

Mockplus是多合一产品设计平台。

它提供了用于原型设计(RP)，协作(iDoc)和设计系统(DS)的工具。免费开始使用，然后使用适合你需求的计划(个人，团队或企业)。

Keynote/Powerpoint

Keynote和PPT一样，是我们经常应用到的办公软件。其实它们的功能已经足以让设计师做出简单的线框图。对于非Mac用户，请不要担心，Keynote还提供了Powerpoint导出功能。

如果你需要快速对移动应用程序进行线框设计或原型制作，我个人强烈建议你使用它。

Illustrator

这是我最喜欢使用的工具之一，因为我对Illustrator已经非常熟悉，并且我相信这里的许多设计师也会对此熟悉。当我尝试快速但复杂的线框，而无需交互时，我使用Illustrator。

是什么使它成为赢家？能够导出为具有可编辑图层的PSD，对Photoshop的强大复制和粘贴支持以及具有可以像CSS一样保存，编辑和重用的字体样式的强大版式控件。

Indesign

与Illustrator相似的优势包括更强的印刷样式控件，强大的母版页支持以及最近制作交互式原型的能力。

当我必须制作交互式高保真多页原型时，我选择Indesign。但要注意，将文件导出到ps后可能不清晰。

InVision Freehand

还喜欢使用InVision Freehand绘制草图。Freehand就像一个轻巧的数字白板，你和你的团队可以在其中进行协作和交流。你在Freehand中创建的线框只能永久保留，而使用Freehand可以节省扫描和上传手绘线框的繁琐步骤。

在线原型制作工具

如果软件不适合，还有许多在线原型制作工具，比如墨刀mockflow, hotgloo and mockingbird等等。

6. 总 结

你的线框应该是站点框架以及如何导航的直观指南。在此阶段，外观和视觉吸引力不是因素。线框的主要问题是，应以目标用户所熟悉的直观自然的方式，来呈现你的内容。

你的设计应该是能让用户更容易实现他们的目标(或者使他们达到转化点或遵循号召性用语)。通过以这种方式显示信息，可以使产品的业务目标与用户需求保持一致。通过布置一些线条和花样来辅助实现。

到这里本节教程就结束啦！希望它能启发你开始尝试~与任何设计过程一样，不要害怕进行迭代，迭代和迭代。

更多关于艺术设计，作品集和国外学校选择的相关问题都可以留言或者后台私信或点击下方加特工微信，与橘长助理1v1交流哦～ 也可以根据你的个人情况帮你分析一下。

持续关注，下期更精彩！