毕竟什么是线框图？你真的会画线框图了吗？
线框图计划对于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尽对是你的第一选择。
http://f12.baidu.com/it/u=4058704505,823909200&fm=173&app=25&f=JPEG?w=640&h=287&s=FE8A702B9EA5400B06DC75DF0100E0B2&access=215967316
2.Wireframe CC - 最轻量的线框图工具
Wireframe.cc是一个在线线框图工具，它有简朴的界面，可以快速绘制线框。最大的特点就是简便，乃至连一些工具栏和图标都没有，你可以自由计划，无拘无束。但现在没有桌面端，不可以或许离线操纵。
3.Balsamiq Mockups - 具有独特素描风格的线框图工具
假如你偏幸纸张的计划感觉，那么可以思量Balsamiq Mockups。由于它有“特地粗糙和低保真”的风格，因此在同类工具中非常特殊，你明显在电脑界面操纵，但是却仿佛用着纸笔。但是假如你是要进一步计划线框图，这款工具就不太受用，由于它不支持任何交互和动画。
4.Pencil project - 注意图表和GUI的线框图工具
Pencil project是一个免费的线框工具，曾在2008年赢得了Mozilla的“最佳新插件”奖，由于它可作为Firefox的插件利用。但假如你不是Firefox的用户，这款工具的上风就会大打扣头。
5.Fireworks - 完备的线框图工具
Fireworks可以用于整个计划流程，从根本线框到完备的视觉结果，是比力符合产物发展和推进的一款工具。可以在后期举行交互计划，创建交互原型。
四. 那里可以找到线框图计划的灵感？
线框图的概念明白了，工具也有了，那么，怎样举行高效的线框图计划？怎样把本身的计划灵感展示出来？假如你是初进计划行业，发起多看多学，这里有一些网站线框图计划的例子，大概可以为你带来灵感。而且，大多数文件支持下载，可以直接在你的计划中利用。
1.Fedena
范例：一体化的治理软件
Fedena是一个治理类的软件原型图，重要是学院治理软件和治理体系，页面信息丰富，主次突出，重要页面包罗注册，登录，论坛，下载，接洽等。利用了大量的灰色阶块来突出界面的条理。
http://f12.baidu.com/it/u=1767926762,1394007935&fm=173&app=25&f=JPEG?w=640&h=393&s=7E283463119B506F0E7DC1DA0100C0B1&access=215967316
2.StyleXstyle
范例：时尚类网站
StyleXstyle是一个时尚行业的网站线框原型图例子。页面内容比力丰富，包罗细节，登录，慈善拍卖，个人资料等。利用矩形框组件和图标展示界面信息和条理，利用灰色阶块突出重点，也利用文本和标题等元素进一步突出界面的信息条理。
http://f10.baidu.com/it/u=3147049800,2580721974&fm=173&app=25&f=JPEG?w=640&h=393&s=5AAA34621B0B61494AFD51DA0000E0B1&access=215967316
3.EdX
范例：教诲
Edx是一个教诲行业网站的线框图例子。这个线框图计划相对而言更加简朴，仅利用了最根本的框架和线条等元素组合而成。但也很好的突出了界面的内容和条理，重要主页包罗创业、课程、筹划、学校、互助同伴、logo以及关于我们等。
http://f10.baidu.com/it/u=305884761,2985313279&fm=173&app=25&f=JPEG?w=640&h=393&s=78AC3C72014A554D1CD4D5CE0000A0B2&access=215967316
4.So Stereo
范例：音乐
So Stereo 是一个音乐类线框图例子。利用了大板块的灰色结块突出和分别出界面的结构，整个界面险些一分为二。差别条理的标题极大的突出了界面信息计划的条理。其重要页面包罗主页，搜刮，发现，常见题目，隐私政策，服务条款等。
http://f12.baidu.com/it/u=3030728519,2817831691&fm=173&app=25&f=JPEG?w=640&h=352&s=1AA27B215AE4CD4F0A15A09B0000E0C0&access=215967316
5.Global Sources
范例：电子商务
Global Sources是一个比力典范的电子商务网站线框图。整个界面又矩形框，列表组件，和文本组件以及一些线条等元素构成，包罗了几个重要界面：主页，种别页面，登录页面和消息页面等。中央地区展示的商品详情可以通过格子组件快速完成。
http://f11.baidu.com/it/u=3440544295,988539247&fm=173&app=25&f=JPEG?w=640&h=393&s=7EAA3463031B50695C7514DA0000C0B1&access=215967316
五. 怎样创建网站线框图？
接下来，我将展示一个比力完备的线框图计划是怎样从始至终出现的。这里仅是个人的计划过程，不是唯一流程，但是，对于学习计划的小同伴而言，大概可以有肯定资助。
1.得到一些开导和计划灵感
网站计划实在可以说是一个从灵感到高保真的过程。在计划网站线框图之前，假如你的履历还不敷丰富，可以看看同类的网站线框图计划是怎样的。上面我也有保举一些网站线框图的最佳示例，盼望在开始线框图计划之前，您可以从中找到灵感。
2.弄清晰你应该在什么时间画线框图
比力常见的一个完备计划过程可以包罗这些环节：草图=>线框图=>低保真原型图=>高保真模子图=>高保真原型图=>代码。正如你所看到的，线框图险些是在计划过程的最早期就必要，以是必要尽早做。
3.用线框图工具开始计划
正如我之条件到的，有许多工具可供您选择。由于我利用Mockplus许多，在这里我会向你展示如安在Mockplus中创建一个网站线框图。
起首，先看看利用Mockplus制作的线框图是什么样子。
http://f12.baidu.com/it/u=3093029861,3170455213&fm=173&app=25&f=JPEG?w=640&h=1399&s=3EAA74239FCB40491C75F5CA0100E0B1&access=215967316
第1步：打开Mockplus并创建一个Web项目
在启动页面，你可以选择个人项目大概团队项目，选择后，在弹出窗口里选择网页项目，在这里，你还可以自由设置网站页面巨细。
http://f11.baidu.com/it/u=721380190,3746880796&fm=173&app=25&f=JPEG?w=640&h=321&s=029257238CBBF40B5EFD45DC0000D0B1&access=215967316
第2步：在Mockplus中计划线框图
这里从几个关键点上睁开阐明如安在mockplus快速计划线框图。
1）利用参考线和矩形框来快速界说界面框架，利用高度封装的组件和矢量图标快速结构界面元素
拖拽参考线在画布上直接分别大概的网页地区，然后快速放置矩形框和线条等组件实现界面结构。好比导航栏、登录按钮、标题部门、文本部门、订阅按钮、logo、搜刮框等等，都可以通过鼠标直接拖拽组件实现。使用参考线则可以快速定位组件到正确位置。
http://f12.baidu.com/it/u=3128750252,4150548559&fm=173&app=25&f=JPEG?w=640&h=311&s=FD8A70333C29740950F505DA0100A0B3&access=215967316
2）利用文本和标签组件举行信息计划并创建信息条理布局
如图，导航栏的文本，主标题的文本，副标题的文本，主体部门的文本巨细有所差别，这里必要利用差别的字号等元向来突出信息条理。这里只需利用Mockplus的单行文本组件和多行文本组件，并设置文本巨细就可以。还可以利用格式刷、数据主动添补等工具，格式刷可以快速使具有雷同条理的文本信息出现出同一格式，数据主动添补则可以添补文本数据和图片数据。
http://f11.baidu.com/it/u=1958187937,2043636379&fm=173&app=25&f=JPEG?w=640&h=580&s=7DAC3472198F404D0C54C4D20000C0B1&access=215967316
3）利用Repeater等组件快速创建重复元素，敏捷出现界面计划
如图，计划中有许多复用的界面元素，这里可以利用格子组件，可以快速复制页面元素，又能做到机动修改全部雷同元素属性的功能，资助你批量处置惩罚页面元素，大幅度收缩工作时间。
http://f10.baidu.com/it/u=3104196642,82509716&fm=173&app=25&f=JPEG?w=640&h=1129&s=5A2A3463978A45494EF5D5DA0000C0B2&access=215967316
4）利用组件属性样式使界面计划更加直观简便（使用色彩属性添加灰阶色彩）
如前所讲，一个简朴的线框图大概只有线条、方框和灰阶色彩，这里可以使用Mockplus右侧的属性面板，设置组件的色彩为灰色，利用组件样式则可以快速复用组件的这种风格，同时还可以将组件风格生存到库中，方便多次利用。
http://f10.baidu.com/it/u=2772147591,1559677410&fm=173&app=25&f=JPEG?w=640&h=1191&s=1A2A74230BCB714B0875D1CA0000E0B1&access=215967316
5）进一步计划成交互式原型（非须要步调）
Mockplus也是交互计划的有用工具，Mockplus现在支持3种交互方式：页面交互，组件交互和属性交互，可以快速创建可交互的线框图和原型图。假如你是想深进计划，可以实验。
第3步：导出和分享线框图
Mockplus拥有8种快速测试和演示方式，支持手机端、欣赏器及桌面真个线框图演示。在线预览和离线演示都可轻松实现，就算你的客户远在千里之外，也可以实时检察，而且支持讲明和审视，可以快速网络客户意见。
总结
以上就是我和各人分享的一些关于线框图的信息，盼望可以或许对你有所资助。
http://www.fyguaji.com
页:
[1]