1.BalsamiqMockups是美国加利福利亚的Balsamiq工作室(2008年3月创建)推出的原型图绘制软件。于2008年6月发行了第一个版本。BalsamiqMockups在软件产品原型图设计领域,特别是Web原型图设计领域尤其受欢迎。使用BalsamiqMockups画出的原型图都是手绘风格的图像,看上去美观、清爽。它支持几乎所有的HTML控件原型图,还支持iPhone手机元素原型图。
2.Sketch是一款由BohemianCoding团队为视觉设计师打造的专业矢量图形处理应用,最初发布于2010年,后在2012年荣获Apple公司ADA设计奖项。软件页面清爽、简洁,功能多样而强大,可以免费使用空间、菜单、调色板等功能,还完美支持布尔运算,符号和强大的标尺,可以帮助设计师快速的进行UI设计工作。Sketch也可以用于制作交互原型,虽然相对于其它原型设计工具来讲会有不足,但也不乏亮点之处。
二、价格一览
Balsamiq:
Sketch:
Mockplus:
三、适用场景
Balsamiq:低保真;线框草图。
Sketch:高保真;矢量图形。
Mockplus:中保真;交互原型。
四、功能对比
1、页面管理
Balsamiq:List
由于没有页面交互,Balsamiq也没有页面层级,页面间的关系是平行的。
Sketch:Pages
不管有多少画布(pages)都被包含在同一个文档中,可以在程序内部进行搜索。全局视野,规划自由度高,也利于思考界面元素关系和维护界面设计的一致性。
这样的平级排列,页面数量少的时候比较方便,数量多时就会乱得让人奔溃。
Mockplus:项目树
Mockplus项目树层级很分明,项目树中以分组和子页面来规定层级。严格的层级管理有利于梳理逻辑,让原型项目层次清晰。同时也展现了Mockplus在交互上的功能性。另外,Mockplus还支持导出项目树,可导出为:树图、脑图、html、Csv(用Excel直接打开)、XML、文本、MarkDown文本等,使项目文档制作更加方便。
Mockplus提供的基于各类页面、流程的组织功能,可以使设计者全面把控原型系统的功能组织和交互关系,尤其是可通过流程图来描述业务承接关系,对于设计复杂原型系统有着非常重要的意义。
2、组件资源
Balsamiq组件的艺术家涂鸦风格,令其所制作的界面效果更具趣味性。Balsamiq组件资源分别按“All”,“Big”、“Button”、“Common”、“Layout”、“Markup”、“Midia”、“Text”、“IPhone”分类组织,并提供了“QuickAdd”和快速检索功能,改善了选取组件的效率。
以往做一个界面底部导航栏的时候,一般会把每个图标的两种状态均放置在设计稿中,遇到不同的页面,就显示/隐藏不同的图标。sketch在4.1版本更新以后增加了一个强大的功能:组件套用。这个功能能将上面描述的过程规范化,智能化。
3、团队协作
Balsamiq和Sketch:本身不具备团队协作功能。但Sketch有团队协作的插件。
有较为完整的团队管理功能。
4、交互
Balsamiq的交互基本上就一个一个操作,即“链接到另外一个页面”。这对复杂的业务应用来说,是远远不够的。但这也跟Balsamiq的低仿真的定位有关。
5、矢量绘图
可以满足大多绘图需要。尤其是给折角设置圆角的功能很好用。
6、备注说明
备注功能较为完善。
Mockplus中支持使用批注组件。组件分类中有一类组件叫做“批注”,打开左侧组件面板的最后一个分类,其中包含了不少常用的
批注组件。
Mockplus支持页面标记。使用页面标记,可以给页面或分组的图标设置不同的颜色,方便管理和区分。
Mockplus支持给组件添加备注。选定组件,在属性面板找到“备注”或者直接按下快捷键Ctrl+M,弹出备注对话框,你可以输入需要的文字。演示的时候,当鼠标移动到有备注的组件时,会自动弹出备注小窗,显示你的备注,如图:
7、文件导出
Balsamiq支持以PDF/图片形式导出、将项目导出至另一个项目。
只能导出静态图:Artboard、切片和所选元件。
内容上,Mockplus支持导出可交互原型、组件、页面、项目树、页面流程图、脑图;形式上,支持导出为HTML、离线演示包、图片格式。
8、表格功能
sketch:
五、产品迭代
三个工具中,Mockplus产品更新换代较快,在不久前推出了摹客设计系统。摹客设计系统(MockplusDesignSystem)是国内独家设计系统平台,致力于定制设计规范、统一管理设计资源、让设计和开发沟通更简单。
总结
Balsamiq、Sketch、Mockplus都可以应用于类似的使用场景,但三个工具的定位不同、功能点不同、擅长领域也不同,可根据需要来选择使用。萝卜青菜各有所爱,希望这篇文字能帮助你选中适合你的工具!