交互设计师趣味工作Balsamiq Mockups

交互设计师趣味工作Balsamiq Mockups交互设计师趣味工作

Post by张美工, 2012-2-24, Views:47Hieverybody,张美工近一年的可支配时间都在创业，实在是无暇顾及我的zhangmeigong.cn呀，呵呵，常来的同学郁闷了吧，没有太多更新，哈哈。

手绘风格崇尚自然，简易，Balsamiq Mockups设计的原型，给各种压力下的浮躁的UE们，带有一点趣味，简单说说这款工具：

一、Balsamiq Mockups全部工具介绍：

A.我们通常在设置原型时用到的模块，在这里都有，预制了很多界面元素，从简单的输入框，下拉框，浏览器主要元素，到经常用得到的导航条，日历，表格，到复杂的Tag Cloud，Cover Flow,地图，WYSWYG的格式工具栏；

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

   有些UI控件如“ICON”可以在属性里进入ICON库，选择想要图形，如图：

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

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

 2.可以设计复杂的界面元素，保存后，以后可以重复使用（包括修改）；

二、实例演示—手机端原型设计：

A.在工具栏拖出“手机”，大家一定要多玩玩各个模块带的属性面板，会有意想不到的收获，哈哈，上图：

释：1—选区:一个模块在当前选中时，外围有一个长方形选区，可做长宽高低拉伸，也只有点在选区才能位移模块。

2—属性面板:前面提到属性面板，OK，当选中状态时属性面板就会出现，可以选择手机方向“横向”、“纵向”；手机屏幕是否有上、下边，是否有信 、时间区。

C. Balsamiq Mockups支持360全屏查看功能，方便总体设计思考

 D. Balsamiq Mockups的保存

   1. 导出成PNG格式的图片;

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

   F. 跨平台，Balsamiq Mokups是用Flex和Air实现的，所以在MacOS,Linux和Windows下都能使用；

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

到此，一个简单有趣的手机就算初步完成了，当然交互设计师做的工作是要细节再细节，下面张美工自己做一个手机细节原型

手机翻看图片功能：

手机查看地图功能：

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

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

交互设计师趣味工作之控件名中英文对照

Post by张美工,2012-2-24, Views:89      Balsamiq Mockups目前没有中文版或者汉化版。实际上，Balsamiq Mockups里的UI控件和图标元素非常容易识别。但很多用户还是想读懂它上面的英文含义。软餐博客将Balsamiq Mockups 中常用的元素做出了一个中英文对照版，方便和我一样英文不佳的读者对照参考使用。