web UI Design 简单易用的手绘风格原型设计工具:Balsamiq Mockups

来源:互联网 发布:php能做什么 编辑:程序博客网 时间:2024/04/29 07:33

Balsamiq Mockups完全手册

什么是Balsamiq Mockups

Balsamiq Mockups出自加利福尼亚州的Balsamiq工作室,创始人Peldi在2008年6月推出了这款手绘风格的产品原型设计工具,并广受好评。2年多来,Balsamiq工作作为一个微型独立软件开发商,专注于Mockups的开发设计,仅3周便实现了盈利,18个月内销售额达到200万美元,用户端数量超过10万个,这与Balsamiq Mockups的市场用户细分的成功以及产品特性是分不开的。

 

Balsamiq Mockups的用途和价值

在Web产品设计中,Balsamiq Mockups是产品设计师绘制线框图或产品原型界面的利器。在产品设计的需求阶段,低保真的线框图或者草图设计介于产品流程设计与高保真DEMO设计之间,在Balsamiq Mockups出现之前,流程图可以使用Visio,高保真DEMO可以使用Axure,但我们并没有好用的草图设计工具;在产品设计管理中,我们通常在产品的业务流程和数据流转已经相当明确时才开始进一步考虑产品的结构层和框架层,虽然此时纸、笔、白板都是非常简单方便的交流工具,但是他们的最大劣势就是——很难将有价值的原型保存下来。Balsamiq Mockups的出现完美的解决了这个问题。


Balsamiq Mockups的优点和特色

可存:告别那一堆堆的纸质线框图吧…
易用:UI控件支持自动拖拽,并且可以实现自动对齐;
美观:手绘风格,简约清爽;
丰富:从按钮到输入框,从导航条到页面、表格,甚至包括了最潮的Iphone元素;
方便:对元素的修改除了工具栏外,还可以使用隐藏编辑框,支持快捷键;
兼容:可使用XML语言保存元素,也可以导出PNG图片,可以插入到任何项目;
跨平台:Windows、Mac OS、Linux下都可以使用,还有能集成在Confluence,JIRA,和XWiki中的版本,对了,如果你没时间下载桌面版,还可以直接使用网页版的Balsamiq Mockups…


Balsamiq Mockups的风险和劣势

应用范围:就像之前提到的,Balsamiq Mockups最好用于商用web产品设计中的低保真线框图或者草图设计,相对于纸和笔,它不够灵活;相对于Axure,它不够精确;

使用语言:暂时没有英文版的Balsamiq Mockups,虽然相对于用惯国外软件的产品设计师/前端交互设计师来说,这并不是什么大问题,但毕竟这提到了使用门槛,童鞋们还是要学好英语;(关于中文汉化版Balsamiq Mockups下面会提到)

价格不菲:79美元的价格并不适合喜欢的朋友尝鲜;而对于国内公司而言,在产品设计领域的理念和意识,远达不到花钱去买一个细分的专业软件的程度。即便不使用Balsamiq Mockups,地球照样转。(关于Balsamiq Mockups的免费方法下面会提到)

使用Balsamiq Mockups的职业和互联网公司

使用Balsamiq Mockups的人包括产品经理、产品设计师、用户体验设计师、交互设计师、网站前端设计师等等,随便谁都可以。这并不重要,问题是很多大公司都在使用,来看看腾讯CDC对Balsamiq Mockups的分析,或者搜狐产品经理对Balsamiq Mockups的推荐,甚至现在网易招聘产品设计师都要求会Balsamiq Mockups了……

下载和安装Balsamiq Mockups

首先提供在线安装Balsamiq Mockups的方法:

>> 点击进入Balsamiq Mockups官方下载安装页面 <<

点击图标直接安装即可,安装内容包括Adobe AIR环境以及Mockups主体桌面程序:


如果你的电脑安装时出现问题,可以尝试分步下载安装Balsamiq Mockups:

确保你的电脑安装了Adobe AIR,下载后安装到默认文件夹

>> 点击进入 Adobe AIR 的最新版本安装页<<

安装完Adobe AIR后直接下载Balsamiq Mockups桌面程序,无论是Windows还是Mac都可以正常使用,下载后安装到你需要的文件夹即可

>> 直接下载 Balsamiq 官方网站的桌面端程序<<

最后,当你无法安装Balsamiq Mockups或者没时间安装时,Balsamiq还为你提供了在线Web版本的Mockups。

Balsamiq Mockups如何输入中文

选择菜单栏 View >> 将 Use System Fonts 勾上,就能完美支持中文输入。

Balsamiq Mockups的中文汉化版本

目前Balsamiq没有发布中文版的Mockups,同时由于Balsamiq Mockups是基于Flash的应用程序,所以无法安装汉化补丁或汉化包。值得庆幸的是,Balsamiq Mockups的操作非常简单和人性化,你不需要专门的Balsamiq Mockups教程,因为你甚至不需要看文字提示就可以快速上手绘制自己的产品原型了。最后,为需要的朋友提供一个Balsamiq Mockups的山寨中文汉化版:Balsamiq Mockups中英文对照图,顺便做一个Balsamiq Mockups的界面DEMO:

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

图文介绍:

http://www.cnblogs.com/lhb25/archive/2011/10/08/balsamiq-mockups.html

安装程序(附license key生成器)

 http://files.cnblogs.com/CopyPaster/Balsamiq.Mockups.v1.6.62.rar


0 0