原型设计工具Balsamiq Mockups

平时工作中在界面设计的时候，我总是要求工程师先在纸上画图，初步确定后，仅仅用HTML+CSS做出静态的界面再次与用户（主要是其他业务部门）确认后，再动手写实际的代码。

纸上的原型设计是经常使用（至少我自己）的初期设计方式，办公室里用白板（空间大，而且环保些）和马克笔。这种办法不仅快，能尽早发现在文字和口头的沟通上理解不一致的地方，同时也尽可能减少开发成本和因为理解不一致导致返工的情况。纸上的原型设计在可用性上能起到很大作用，也有专门一本书介绍和探讨，这就不多说了。

对于一个只有3、5个人的小团队，在时间很紧的情况下，文档什么的肯定是能省则省啦。不过，有两个文档是绝对不能省的。不但不能省，还要尽全力把它们做好，并且保持更新。这两个文档就是：使用Power Designer制作的数据库模型（或者想要更高级些，领域模型），以及界面原型。
      制作界面原型的软件，我最喜欢的是Balsamiq Mockups，一个手绘风格的、轻量级的小软件。我喜欢它的理由是：
      - 快——它能让我以最快的速度把界面原型画出来。
      - 手绘风格——用它画出来的界面是不折不扣手绘风格，很酷。
      - 都是现成的——它已经内置了常用的控件和图标，基本够用了。

快

如果绘制界面原型所花费的时间跟实际编写页面差不多，那我还不如直接去编写页面好了。可是看看大多数界面原型工具是怎么做的吧：比如我想要添加一个Grid，它们会要求我把Grid控件拖放到页面上->右击选属性->进入“Columns”Tab页->点击“Add...”按钮->输入列名称->输入列宽度（当然，你可能并不精确地知道到底该有多少像素，谁管你？）->确定。嗯哼，这只是添加了一个列而已。之后再重复这个过程10次，把该添加的列添加进去。这时可能会不爽地发现有5个列的宽度不合适，而更不爽的是，你发现它居然不支持用鼠标拖拽改变列宽度，只能再去点N多次鼠标找到那个列宽度属性文本框，修改宽度像素值，然后再点N多次“确定”才能预览到效果……别的软件要钱，这个软件要命啊。
如果在Balsamiq Mockups里拖拽一个Grid……

如上图所示，只要一口气写完有些Wiki风范的一段代码，一个Grid就搞定了。
Menu和Tree也类似，如下图所示。

但是，如果需要绘制一个由N多由Label和TextBox组成的表单，还是得一个一个地拖拽控件，设置Label的文字，还是挺麻烦的。不过，由于Balsamiq Mockups的文件是很简单的XML格式，所以还是有偷懒的方法可想的。

手绘风格

手绘风格看上去有些“不正经”？不太好看？恰恰相反，在原型阶段，手绘风格可以强迫设计者和客户把注意力集中在程序的功能、布局和交互上，这样你就不会听到客户说“这个按钮的颜色我不太喜欢……”。为了保证完全的手绘风格，Balsamiq Mockups甚至为Image控件提供了一个非常方便的将图片转换成手绘风格的选项，如下图所示。

都是现成的

Balsamiq Mockups是一个很简单的小软件，功能不多。但是，在控件方面，它可是下足了功夫，不但内置了所有常用的控件，而且每个控件的属性都经过精心的设计，既不复杂，又涵盖了必要的功能，出来的效果也很精致。内置的图标库也很不错。不需要到处搜集第三方控件库，不需要安装插件，绝对省心。当然，从另外的角度，这也是个缺点——当它的控件库不能满足我们的需要时，又不能自己定制，就只能干瞪眼了。

小结

所谓可用性设计，首要的任务，是要深刻理解用户是如何以及为什么使用你的软件。否则，即使每个功能看上去都合理、严谨、强大，整体上却可能让用户抓狂。

原型设计工具Balsamiq Mockups相关推荐

界面原型设计工具 Balsamiq Mockups
最近发现了这款优秀的界面原型设计软件alsamiq Mockups,它是一个Flash应用程序,你可以通过官网在线试用,也可以下载到本地计算机上进行使用. 在线试用的地址:http://builds ...
超酷的界面原型设计工具Balsamiq Mockups
Balsamiq Mockups是一个Flash应用程序,你可以通过这里进行在线试用,也可以下载到本地计算机上进行使用. 在线试用的地址:http://www.balsamiq.com/demos/m ...
推荐一个原型设计工具Balsamiq Mockups
转载于:https://www.cnblogs.com/zzjj/archive/2009/03/10/1407713.html
网站app原型设计工具:axure,Mockups,墨刀
网站app原型设计工具:axure,Mockups,墨刀 Balsamiq Mockups 3 网站原型设计工具非常高效,非常简单,几分钟就能搞定比axure好用很多墨刀 - 免费的移动应用原型 ...
手机APP原型(prototype)设计工具Balsamiq Mockups
1. 出发点找了很多手机APP原型设计工具,目的把APP的concept表达出来,相关于实现一个简单的交互设计,然后再交给美图设计师去优化,我用google搜索了一堆APP设计工具,用完后还是觉得B ...
界面原型设计工具Balsamiq、墨刀、Axure、Mockplus
Balsamiq的体验这个基于Adobe AIR Runtime的工具实在是有让人眼前一亮的感觉,手绘风格的元件样式粗犷淋漓,能创建接近于纸上手绘的原型文件.其提供了丰富的手绘风格的web常用元件, ...
界面原型设计工具开源软件
界面原型图绘制工具 Pencil Pencil 是一款开源的原型图绘制工具,手绘风格的,就像自己在纸上画的那样.Pencil 还可以用来绘制各种架构图和流程图,同时还提供 Firefox 的插件(点击 ...
原型设计工具【收集转帖】
常用原型图设计工具 Balsamiq Mockups 可存:告别那一堆堆的纸质线框图吧- 易用:UI控件支持自动拖拽,并且可以实现自动对齐: 美观:手绘风格,简约清爽: 丰富:从按钮到输入框,从导航条 ...
软件界面原型设计工具(Web)：Axure RP
Axure RP 如果你觉得Balsamiq Mockups卖79美元还贵的话,那Axure就更显得色差奢侈了,很多Axure的培训费都远高于这个价! Axure的发音是"Ack-sure& ...
软件界面原型设计工具 Web Axure RP
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Axur ...

原型设计工具Balsamiq Mockups

原型设计工具Balsamiq Mockups相关推荐

最新文章

热门文章