社群运营求职招聘微信群 http://www.gpitp.gd.cn/new/20211003/95869.html

线框图设计对于UX/UI设计师来讲一定不会陌生，无论你已经是一名UX/UI设计师，还是想要向成为一名UX/UI设计师，能画出不错的线框图，都是一个必备的技能。简单来讲，线框图就是一个网站或者APP的一个图形化的骨架，能够引导一个页面的内容及概念，并且能够帮助设计师和客户讨论具体的网站层次和导向。

线框图看似简单，一个简单的线框图可能只有线条、方框和灰阶色彩。但是简单并不意味着画出一个出色的线框图是件易事。其实，关于线框图的知识还很多。你真的弄懂线框图是什么了吗？为什么要画线框图？需要使用哪些线框图工具？如何画出一个线框图？

以上问题都是我在本文里想要和大家分享的东西。希望你们喜欢。

一.什么是线框图？

线框图是整个交互式设计过程中的一个必要步骤，它通常在项目生命周期的早期阶段进行。线框图可以简单的理解为是网站的一个图形框架，这就好比建筑的蓝图。

通常，线框图需要实现三个核心目标：

1.在进行视觉设计和交互设计之前呈现页面的内容和功能。

2.在项目早期帮助设计师与客户交流设计理念。

3.建立网站设计的信息层次结构。

基本上，线框图可以分解成以下3个主要元素：

4.信息设计元素-包含网站的结构和布局轮廓的主要信息。

5.导航设计元素-创建导航以确保网站结构符合用户期望。

6.界面设计元素-用户界面的视觉设计和描述，主要用灰阶色块。

二.为什么需要画线框图？

作为设计过程的一个关键部分，线框图在以下几个方面具有重要意义。

1.线框图比抽象的设计概念更容易理解

试想一下，如果你只用你的概念性的设计向客户解释，他们如果不具备一定的专业知识，理解起来有多困难？在这种情形下，要想获得他们的赞同之后只会难上加难。而如果使用线框图，你可以将抽象站点地图变为可视的网站界面。这样，对于客户还是老板，他们审阅和理解起来也会更容易和快速。

2.线框图可以用于收集反馈

用户，团队成员和客户可以在早期阶段查看你的设计，并提供反馈意见以提升用户体验。这还有助于使设计过程快速迭代。而如果你忽略线框图这个步骤，以后发现问题要付出的成本将会高出早期很多。

3.线框图有助于定义网站功能

线框图可以根据用户和业务需求来正确定位页面内容和功能。并且，随着项目的进展，项目团队成员之间可以进行有效的沟通，就项目目标达成一致意见。

4.线框图绘制速度快，成本低

建立线框图非常快速，并且成本低。最简单的方法是使用笔和纸。现在还有更多的线框图工具可供使用，你可以在几分钟内使用工具快速构建线框图。

三.好用的线框工具有哪些？

线框图的优势已经讨论了，如果你是要画线框图，有哪些工具可以使用呢？以下是一些工具推荐，可以尝试。

1.Mockplus-快速线框图工具

Mockplus是一个更快，更简单的线框和原型工具，它可以让UX/UI设计人员在5分钟内创建交互式原型图或线框图。如果你的需求是一个可快速实现产品设计和迭代的工具，Mockplus绝对是你的第一选择。

2.WireframeCC-最轻量的线框图工具

Wireframe.cc是一个在线线框图工具，它有简单的界面，可以快速绘制线框。最大的特点就是简洁，甚至连一些工具栏和图标都没有，你可以自由设计，无拘无束。但目前没有桌面端，不能够离线操作。

3.BalsamiqMockups-具有独特素描风格的线框图工具

如果你偏爱纸张的设计感觉，那么可以考虑BalsamiqMockups。由于它有“特意粗糙和低保真”的风格，因此在同类工具中很是特别，你明明在电脑界面操作，但是却仿佛用着纸笔。但是如果你是要进一步设计线框图，这款工具就不太受用，因为它不支持任何交互和动画。

4.Pencilproject-注重图表和GUI的线框图工具

Pencilproject是一个免费的线框工具，曾在年赢得了Mozilla的“最佳新插件”奖，因为它可作为Firefox的插件使用。但如果你不是Firefox的用户，这款工具的优势就会大打折扣。

5.Fireworks-完整的线框图工具

Fireworks可以用于整个设计流程，从基本线框到完整的视觉效果，是比较符合产品发展和推进的一款工具。可以在后期进行交互设计，创建交互原型。

四.哪里可以找到线框图设计的灵感？

线框图的概念理解了，工具也有了，那么，如何进行高效的线框图设计？如何把自己的设计灵感展示出来？如果你是初入设计行业，建议多看多学，这里有一些网站线框图设计的例子，或许可以为你带来灵感。并且，大多数文件支持下载，可以直接在你的设计中使用。

1.Fedena

类型：一体化的管理软件

Fedena是一个管理类的软件原型图，主要是学院管理软件和管理系统，页面信息丰富，主次突出，主要页面包含注册，登录，论坛，下载，联系等。使用了大量的灰色阶块来突出界面的层次。

2.StyleXstyle

类型：时尚类网站

StyleXstyle是一个时尚行业的网站线框原型图例子。页面内容比较丰富，包含细节，登录，慈善拍卖，个人资料等。使用矩形框组件和图标展示界面信息和层次，使用灰色阶块突出重点，也使用文本和标题等元素进一步突出界面的信息层次。

3.EdX

类型：教育

Edx是一个教育行业网站的线框图例子。这个线框图设计相对而言更加简单，仅使用了最基本的框架和线条等元素组合而成。但也很好的突出了界面的内容和层次，主要主页包括创业、课程、计划、学校、合作伙伴、logo以及关于我们等。

4.SoStereo

类型：音乐

SoStereo是一个音乐类线框图例子。使用了大板块的灰色结块突出和划分出界面的布局，整个界面几乎一分为二。不同层次的标题极大的突出了界面信息设计的层次。其主要页面包含主页，搜索，发现，常见问题，隐私政策，服务条款等。

5.GlobalSources

类型：电子商务

GlobalSources是一个比较典型的电子商务网站线框图。整个界面又矩形框，列表组件，和文本组件以及一些线条等元素组成，包含了几个主要界面：主页，类别页面，登录页面和消息页面等。中心区域展示的商品详情可以通过格子组件快速完成。

五.如何创建网站线框图？

接下来，我将展示一个比较完整的线框图设计是如何从始至终呈现的。这里仅是个人的设计过程，不是唯一流程，但是，对于学习设计的小伙伴而言，或许可以有一定帮助。

1.获得一些启发和设计灵感

网站设计其实可以说是一个从灵感到高保真的过程。在设计网站线框图之前，如果你的经验还不够丰富，可以看看同类的网站线框图设计是怎样的。上面我也有推荐一些网站线框图的最佳示例，希望在开始线框图设计之前，您可以从中找到灵感。

2.弄清楚你应该在什么时候画线框图

比较常见的一个完整设计过程可以包含这些环节：草图=线框图=低保真原型图=高保真模型图=高保真原型图=代码。正如你所看到的，线框图几乎是在设计过程的最早期就需要，所以需要尽早做。

3.用线框图工具开始设计

正如我之前提到的，有很多工具可供您选择。由于我使用Mockplus很多，在这里我会向你展示如何在Mockplus中创建一个网站线框图。

首先，先看看使用Mockplus制作的线框图是什么样子。

第1步：打开Mockplus并创建一个Web项目

在启动页面，你可以选择个人项目或者团队项目，选择后，在弹出窗口里选择网页项目，在这里，你还可以自由设置网站页面大小。

第2步：在Mockplus中设计线框图

这里从几个关键点上展开说明如何在mockplus快速设计线框图。

1）使用参考线和矩形框来快速定义界面框架，使用高度封装的组件和矢量图标快速布局界面元素

拖拽参考线在画布上直接划分大概的网页区域，然后快速放置矩形框和线条等组件实现界面布局。比如导航栏、登录按钮、标题部分、文本部分、订阅按钮、logo、搜索框等等，都可以通过鼠标直接拖拽组件实现。利用参考线则可以快速定位组件到准确位置。

2）使用文本和标签组件进行信息设计并创建信息层次结构

如图，导航栏的文本，主标题的文本，副标题的文本，主体部分的文本大小有所不同，这里需要使用不同的字号等元素来突出信息层次。这里只需使用Mockplus的单行文本组件和多行文本组件，并设置文本大小就可以。还可以使用格式刷、数据自动填充等工具，格式刷可以快速使具有相同层次的文本信息呈现出同一格式，数据自动填充则可以填充文本数据和图片数据。

3）使用Repeater等组件快速创建重复元素，迅速呈现界面设计

如图，设计中有很多复用的界面元素，这里可以使用格子组件，可以快速复制页面元素，又能做到灵活修改所有相同元素属性的功能，帮助你批量处理页面元素，大幅度缩短工作时间。

4）使用组件属性样式使界面设计更加直观简洁（利用色彩属性添加灰阶色彩）

如前所讲，一个简单的线框图可能只有线条、方框和灰阶色彩，这里可以利用Mockplus右侧的属性面板，设置组件的色彩为灰色，使用组件样式则可以快速复用组件的这种风格，同时还可以将组件风格保存到库中，方便多次使用。

5）进一步设计成交互式原型（非必要步骤）

Mockplus也是交互设计的有效工具，Mockplus目前支持3种交互方式：页面交互，组件交互和属性交互，可以快速创建可交互的线框图和原型图。如果你是想深入设计，可以尝试。

第3步：导出和分享线框图

Mockplus拥有8种快速测试和演示方式，支持手机端、浏览器及桌面端的线框图演示。在线预览和离线演示都可轻松实现，就算你的客户远在千里之外，也可以及时查看，并且支持批注和审阅，可以快速收集客户意见。

总结

以上就是我和大家分享的一些关于线框图的信息，希望能够对你有所帮助。