在最近的一次项目进行过程中,我体会到UI前期Demo设计的重要性,为此付出了惨痛的代价,痛定思痛,我决定以后一定要通过一个完整的页面对界面进行描述,这里隆重 介绍Mockups。

之前很多次接触过Balsamiq Mockups 这款界面设计利器(delicious最早收藏是在09年5月),也曾经试用过Demo版本,因为我本身是后台码 代码的,所以用到UI设计的机会并不多,也没有特意去申请Mockups的许可证。

介绍

image

Balsamiq Mockups 提供了 9 大类共 50 多个控件,涵盖了几乎所有常用的 UI 控件。不管是桌面软件、手机软件还是 Web 站点,都能搞定。且软件极易上手,如上图的豆瓣新主页,是我首次使用 Balsamiq Mockups 时随手画的,仅用 15 分钟。另外必须一提的是,Balsamiq Mockups 涂鸦式的手绘风格,能使人集中注意力,专注到于原型的原始目的,而不是对外观挑三拣四。

via Balsamiq Mockups - 产品原型设计工具

功能

  1. 操作方面,拖拽,控件分组,甚至元素之间的对齐都做得很贴心;

  2. 预制了很多界面元素,从简单的输入框,下拉框,浏览器主要元素,到经常用得到的导航条,日历,表格,到复杂的Tag Cloud,Cover Flow, 地图,WYSWYG的格式工具栏等,有了这些不用从头画起,往往比用白板都快;

  3. 界面元素的修改很简单,比如导航条的几个标签页的label,就是用逗号分隔的文字,下拉框的选项就是分行的文字;

  4. 使用xml语言来记录和保存界面元素和布局,

    1. 这使得每个设计都能被很好得放进SVN,Git,和CVS等工具中进行管理和跟踪;

    2. 可以设计复杂的界面元素,保存后,以后可以重复使用(包括修改);

  5. 可以将设计导出成PNG格式的图片;

balsamiq markup exported to png

  1. 可以用命令行进行导出操作,这样就能让我写个脚本,从svn里checkout某个目录下的所有设计文件后,导出图片,打包后用邮件发到项目经 理,工程师甚至客户那;

  2. 跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用;

  3. 不仅仅有桌面版本,还有能集成在Confluence,JIRA,和XWiki中的版本,使得异地在线协作更方便有效;

via 推荐一款界面设计工具 Balsamiq Mockups

试用

点击myBalsamiq, the Balsamiq Mockups Web App | Balsamiq 即可尝试一下在线版本,看看它合不合你胃口。

点击Balsamiq Mockups For Desktop | Balsamiq 可以下载桌面Demo版本。这是AIR下的软件,需要AIR环境支持。

获取免费的版本

不过让国内用户不习惯的是,这款软件定价为 $79 ,偏高。当然Balsamiq&nbsp_place_holder ;Studios也为用户提供了 5 种免费获得license key 的机会,其中之一就是针对科技/软件 Blogger 或媒体从业者,鼓励这类用户通过写 Blog 口碑传播的方式帮助Balsamiq Mockups 营销。写完本文,我也会尝试向作者申请一个license key。

via 产品原型设计软件Balsamiq Mockups | 黄海均的互联网志

PS:我对作者这种做法表示很欣赏,通过一些可行的手段支持正版,同时提高了产品的口碑。

更多

使用Napkee插件可以将设计导出为Html+CSS+JS或者Flex格式,详情请参见Napkee - 导出Balsamiq Mockups网页原型

2010-04-14 Update:

已拿到作者发送注册码~~~终于到了。。。


原文链接: https://blog.alswl.com/2010/04/ui-design-tool-balsamiq-mockups/
3a1ff193cee606bd1e2ea554a16353ee
欢迎关注我的微信公众号:窥豹

Comments

comments powered by Disqus