为快速设计绞尽脑汁?5款快速线框图工具为你雪中送炭_移动开发_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > 移动开发 > 为快速设计绞尽脑汁?5款快速线框图工具为你雪中送炭

为快速设计绞尽脑汁?5款快速线框图工具为你雪中送炭

 2017/8/24 13:08:41  thomasa  程序员俱乐部  我要评论(0)
  • 摘要:说起线框图工具,你脑海中浮现的是什么呢?老字号AxureRP?还是设计新宠Mockplus?如今,形形色色的线框图工具可以说是唾手可得,当然,这是一件好事,但是另一方面呢,过多的选择也的确容易造成设计师的选择困难。尤其是现在的行业形势,快速的产品迭代和开发节奏,越来越少的时间成本,快速设计的需求与日俱增。一些过于精细的设计工具其实并不适应当今的设计趋势。这里,我精选出了5款专注于快速设计的线框图工具,能帮助你实现真正意义上的快速设计。1.WireframeCC一款最轻量的框线图工具
  • 标签:工具 送炭 设计

说起线框图工具,你脑海中浮现的是什么呢?老字号Axure RP?还是设计新宠Mockplus?如今,形形色色的线框图工具可以说是唾手可得,当然,这是一件好事,但是另一方面呢,过多的选择也的确容易造成设计师的选择困难。尤其是现在的行业形势,快速的产品迭代和开发节奏,越来越少的时间成本,快速设计的需求与日俱增。一些过于精细的设计工具其实并不适应当今的设计趋势。这里,我精选出了5款专注于快速设计的线框图工具,能帮助你实现真正意义上的快速设计。

1. Wireframe CC 

一款最轻量的框线图工具,线框设计原来可以如此简单!

 

平台:Web-based

上手时间:低于10 mins

价格:基础版-免费

           高级版-$99/月

保真度:低保真

 

Wireframe CC是一款在线线框图绘制工具,它采用的是极简风格,界面极其简洁,甚至没有典型绘图应用程序的工具栏和图标。你只需在画布上移动鼠标就可构建你想要的形状。其最大的特点正是专注于最基本操作。目前支持网页、手机横屏和手机竖屏三种模式。

但Wireframe CC只适用于做最基础的框线图设计,无法进行任何的交互和动画设计,功能比较有限。分享模式也是生成一个URL,比较单一。

Wireframe CC.png

 

2.  Mockplus

 一款让你关注设计,而非工具本身的工具,致力于让设计更快、更简单!

平台:Windows, Mac, Android, IOS

上手时间:5-10 mins

价格:普通-免费

           专业-118/年

保真度:中低保真

Mockplus致力于快速构建和迭代原型,为设计师提供简洁高效的设计方式,能在最短时间里创造出最优的设计成果。看看它是如何实现快速设计的:

第一,Mockplus拥有200多个高度封装的交互组件,3000个矢量图标,以及大量可供直接使用的模板、例子项目以及模板页面,并且支持在Sketch中直接导出MP文件,为快速设计提供了有效支持。

第二,Mockplus还是快速交互的不二选择。只需使用封装可见的交互组件,用鼠标进行拖拽即可完成交互,不需要任何一行代码或者参数的设置。Mockplus目前支持3种交互方式:页面交互,组件交互和属性交互。交互命令还可一键自动还原,贴切而周到。

第三,Mockplus拥有8种快速测试和演示方式,支持手机端、浏览器及桌面端的原型测试。在线预览和离线演示都可轻松实现,不受终端和网络限制

最后,Mockplus团队推出了一系列别出心裁的设计,例如Microsoft Office风格的可视化格式刷,可快速进行批量复制,简单直观。最新的3.2版本增加了格子功能,可轻松复制页面布局,并且可自定义属性,非常人性化。Mockplus还支持脑图设计模式,能快速完成项目的所有页面构架,然后一件转化为原型项目。

 MOCKPLUSFFFF.jpg

3. Balsamiq Mockups

一款基于Flash的快速线框图工具,线框设计不再一筹莫展。

平台:Windows, Mac, Web-bas

上手时间:15-20 mins

价格:$89

保真度:低保真

Balsamiq Mockups是一款备受青睐的线框图工具,是2008由一个软件工程师开发的,能帮助设计师更快地进行线框图设计。

首先,Balsamiq拥有可以直接进行拖拽使用的元素,包括一些按钮和列表,值得一提的是,这些元素都是手绘风格。设计师还可在编辑器里提前准备好需要使用的小部件。

此外,Balsamiq官方网站还提供了很多模板,包括桌面App、移动端App以及网站模板等。可供点击下载,使用起来快速便捷。

其次,Balsamiq独一无二的手写设计在如今的机械化设计中显得十分别致,能让设计师体会一种在空白屏幕里进行手绘设计的独特体验。加上其种类繁多且风格独特的UI库,能为设计师提供最便捷的服务。

但Balsamiq并不是一款适合做超大型项目的工具,虽然它也可以用于做一些设计,但想要加入一些比较深入的动态效果就比较局限,当然,这和他们的设计初衷也不相一致,Balsamiq就是专注于简洁粗略的线框图设计而非原型。

 Balsamiq Mockups.png

4.Pencil Project

一款专注于制作图表和GUI原型设计的线框图工具。

平台:Windows, Linux, Mac

上手时间:10-15 mins

价格:免费

保真度:低保真

Pencil Project可以说是一款明星工具,它曾在2008年获得过Mozilla 的“Best New Add-On”奖项。Pencil Project是基于火狐浏览器上的图形工具,但它也可以在Linux和Windows系统中作为一个独立的运用程序。

Pencil Project支持草图绘制,还可制作图形化的原型绘制,甚至可以像Balsamiq Mockups具有手绘风格。支持连接器,可以用于在图中将“形状”链接在一起,甚至流程图形状的合集也可以用于绘图。

此外,pencil Project还支持图形元素的链接,可以将某元素链接到同一文档的特定页面,有助于设计师在创建运用程序或网站模型时定义UI流程。

但如果你不是火狐的用户,Pencil Project对你的吸引力也许会大大减弱。如果你恰好是,那么pencil Project非你莫属。

Pencil Project.png

5. Fliud UI

一款专注于制作手机软件模型的工具,值得尝试。

平台:Web-based

上手时间:20-25 mins

价格:个人- $8.25/月

           高级版- $19.08/月

           团队版- $41.58/月

保真度:高保真

Fliud UI是一款基于网页端的线框图设计工具,与其他的大部分线框图工具不同,Fliud UI支持添加手势,并且具有动画效果,可以制作高保真的线框图。

Fliud UI有16个用于iOS,Android,Windows8用户界面库,其中包含超过2000个可定制的小部件和图标,可以直接从这些内置库里拖拽元素创建页面,简洁高效。FluidUI还提供团队的实时协作,可用于用户测试的视频环聊,进行设备上的测试和交互式预览,团队共享非常便捷。

 

Fliud UI.png 

以上是我总结出的5款真正意义上能够实现快速设计的线框图工具。尽管每款工具各具特色,也各有不足,但总体上都能满足你进行快速线框图设计的需要。在这里,我也分享一下我个人的喜好和选择,能进行快速的线框图制作是首要条件,这5款工具基本难分伯仲,但在设计过程中,我们往往会要求更多,譬如设计灵感的查找,多样的快速演示和分享方式,力求最低的学习成本,比较深入的交互和动效,以及更多的人性化设置,通过自己的亲身经历,Mockplus是其中最能满足设计过程中各种需求的佼佼者,也是我极力推荐的一款工具,值得用心一试。

发表评论
用户名: 匿名