将Balsamiq Mockups纳入必备之设计工具(原型设计)

 

Balsamiq Mockups 是由Balsamiq Studios 公司于2008年6月份推出的一款原型设计软件。Balsamiq Mockups(简称Mockups)能帮助软件(网站)设计师和开发者快速的勾勒出想法,有效的和团队其他成员、客户沟通,快速迭代改进想法,最终实现最佳设计。Mockups不仅能快速绘制出线框图(wireframes),为线框图添加注释,而且还能链接各个线框图,实现简单界面跳转。

最近,原型设计(prototyping)已经成为以用户为中心的产品设计过程中的一道必备工序,目的是通过可视化的原型(哪怕只是最简单的线框图)来确认需求,避免需求的偏离,更有效的和其他团队成员或客户进行交流和需求确认。减少大量文字性文档带来的不易阅读、效率低下、沟通困难(当然文档还是必须的)。

这里要注意的是,原型是为最初构思、沟通、需求、可用性评估和测试而生,而不是要交付。

在我们的产品设计过程中,原型设计会直接影响最终产品设计的质量。因为,好的产品界面设计,不仅仅只是图形像素和颜色的视觉设计,还包括了信息结构和交互行为。我们不会开展图形设计,直到完成线框图(wireframes)设计和测试。


纸上原型 和 Balsamiq Mockups


用纸和马克笔进行纸面原型设计
将Balsamiq Mockups纳入必备之设计工具(原型设计)_第1张图片

纸上原型设计 只需要简单、原始的工具:一叠纸张、一些彩笔(马克笔)、一个废纸娄。在纸面上勾勒线框图非常快速,只需要几分钟,但结果也往往只是一次性的。想法的形成和抛弃是交互设计师对创意进行头脑风暴的重要方式。

在我把自己觉得有价值的东西和客户进行交流之前,我往往已经抛弃了大量的方案,废纸娄里堆满废纸。当然,这好像不是很“绿色环保”,但这种方式对我而言非常有效。

纸上原型非常容易修改,因为它够廉价,毕竟纸张是很容易揉做一团、丢到垃圾桶的。我们唯一付出的东西就是时间。

将Balsamiq Mockups纳入必备之设计工具(原型设计)_第2张图片

轮廓鲜明的马克笔非常重要。如果使用钢笔/铅笔,会助长你过多关注细节而不是整体设计。而粗放的线条会使得你的思维更加宽阔。

用Balsamiq Mockups 进行纸面原型设计

“设计我只用纸和笔”,这句话听起来很酷、很拉风(拉风这个词我是专门献给张雅秋童鞋),但是在强调高效、无纸化办公、绿色环保的今天,还是一味强调最原始的纸和笔,好像有点不合时宜。很幸运的是,现在我们可以不只是用纸和笔进行纸上原型设计了,因为我们有了Balsamiq Mockups,它和用纸笔一样快、一样容易。

Balsamiq是非常快速高效的,因为它已经为你准备了大量可直接重复使用的界面控件、设计模型 ,你只需要将他们拖入你的设计中。

接近纸面手绘风格的原型让沟通更加有效。许多计算机原型工具生成的线框图比较美观、精细,这时客户(或团队成员)总是对原型的字体、颜色、间距等细节提出建议,往往疏忽前期更需要关注的结构、功能、流程和交互,Balsamiq可以引导用户关注结构和功能。

在设计过程中,你不可能总是会和客户面对面(虽然尽量要这样)。这是Balsamiq是设计纸面原型的极好的选择。你可以通过邮件、视频分享Balsamiq的原型。

眼见为实,看看Balsamiq Mockups可以创建哪些应用界面

Balsamiq Mockups可以帮助你设计桌面应用、Web2.0网站、富网络应用(RIA)、web网站和web应用。以下是用Balsamiq Mockups设计的应用界面案例。每个都只花很少的几分钟时间完成。你也可以到Mockups To Go ,这个网站下载更多案例和其它用户贡献的现成可以使用的UI组件和设计模式 。

桌面应用

下载文件源码

对话框

下载文件源码

 

Web应用


下载文件源码


下载文件源码

Web网站


下载文件源码


下载文件源码

iPhone应用

下载文件源码

RIA应用


下载文件源码



下载文件源码

Balsamiq Mockups除了可以快速创建手绘风格的线框图,还可以让线框图在演示的时候可以进行鼠标点击。模拟简单的界面跳转。
将Balsamiq Mockups纳入必备之设计工具(原型设计)_第3张图片

但是Balsamiq Mockups要想成为交互设计师的专业工具,恐怕还有一段路要走,就看Balsamiq以后是否考虑增强交互设计功能了。

专属于交互设计师的原型工具,目前我建议大家使用Axure、Adobe Flash Catalyst、Silverlight 3 SketchFlow。但是作为前期设计概念的快速形成和需求的快速沟通、修改、确认,Balsamiq Mockups无疑是我们设计们必备的设计工具。

关于Balsamiq Mockups更多信息,查看官网: http://www.balsamiq.com/

你可能感兴趣的:(将Balsamiq Mockups纳入必备之设计工具(原型设计))