交互设计师趣味工作balsamiq-品mockups说明书.docVIP

交互设计师趣味工作Balsamiq Mockups Post by 张美工, 2012-2-24, Views:47Hi everybody, HYPERLINK /张美工近一年的可支配时间都在创业，实在是无暇顾及我的呀，呵呵，常来的同学郁闷了吧，没有太多更新，哈哈。 这次跟大家一起聊聊一个交互设计师用到的一个十分有意思的小工具-- Balsamiq Mockups，是出自加利福尼亚州的Balsamiq工作室，创始人Peldi在2008年6月推出了这款手绘风格的产品原型设计工具。 手绘风格崇尚自然，简易，Balsamiq Mockups设计的原型，给各种压力下的浮躁的UE们，带有一点趣味，简单说说这款工具： 一、Balsamiq Mockups全部工具介绍： A. 我们通常在设置原型时用到的模块，在这里都有，预制了很多界面元素，从简单的输入框，下拉框，浏览器主要元素，到经常用得到的导航条，日历，表格，到复杂的Tag Cloud，Cover Flow, 地图，WYSWYG的格式工具栏； B. 界面元素的修改很简单，比如导航条的几个标签页的label，就是用逗号分隔的文字，下拉框的选项就是分行的文字； C. 在国内的交互设计师们，只要在view将“ use system fonts”选中，就可以在各模块里如“button”里输入中文“搜索”。 有些UI控件如“ICON”可以在属性里进入ICON库，选择想要图形，如图： D. 使用xml语言来记录和保存界面元素和布局， 1.这使得每个设计都能被很好得放进SVN，Git，和CVS等工具中进行管理和跟踪； 2.可以设计复杂的界面元素，保存后，以后可以重复使用（包括修改）； 二、实例演示 手机端原型设计： A. 在工具栏拖出“手机”，大家一定要多玩玩各个模块带的属性面板，会有意想不到的收获，哈哈，上图： 释：1—选区: 一个模块在当前选中时，外围有一个长方形选区，可做长宽高低拉伸，也只有点在选区才能位移模块。 2属性面板: 前面提到属性面板，OK，当选中状态时属性面板就会出现，可以选择手机方向“横向”、“纵向”；手机屏幕是否有上、下边，是否有信号、时间区。 B. 再拖出手机里需要的“数字模板”，将它贴在A上。各种属性面板可以尝试着玩玩如“大键盘”、“小键盘”。当两个模型交叠时，会出“对齐”属性也可以玩玩，呵呵。还有“层次问题”,不多解释，自己玩儿去。 C. Balsamiq Mockups支持360全屏查看功能，方便总体设计思考 D. Balsamiq Mockups的保存 1. 导出成PNG格式的图片; 2.创建的多个文档可以生成PDF格式文件 E. 可以用命令行进行导出操作，这样就能让我写个脚本，从svn里checkout某个目录下的所有设计文件后，导出图片，打包后用邮件发到项目经理，工程师甚至客户那； F. 跨平台，Balsamiq Mokups是用Flex和Air实现的，所以在Mac OS,Linux和Windows下都能使用； G. 不仅仅有桌面版本，还有能集成在Confluence，JIRA，和XWiki中的版本，使得异地在线协作更方便有效； 到此，一个简单有趣的手机就算初步完成了，当然交互设计师做的工作是要细节再细节，下面HYPERLINK /张美工自己做一个手机细节原型 手机翻看图片功能： 手机查看地图功能： HYPERLINK /点击进入Balsamiq Mockups官方下载安装页面 点击图标直接安装即可，安装内容包括Adobe AIR环境以及Mockups主体桌面程序： HYPERLINK /blog/wp-content/uploads/2010/03/安装Adobe-AIR.jpgHYPERLINK /blog/wp-content/uploads/2010/03/安装Adobe-AIR.jpg 交互设计师趣味工作Balsamiq Mockups之 控件名中英文对照 Post by 张美工, 2012-2-24, Views:89 Balsamiq Mockups目前没有中文版或者汉化版。实际上，Balsamiq Mockups里的UI控件和图标元素非常容易识别。但很多用户还是想读懂它上面的英文含义。软餐博客将Balsamiq Mockups 中常用的元素做出了一个中英文对照版，方便和我一样英文不佳的读者对照参考使用。 bar chart：柱状图columnr chart：柱状图cover flow：cover flow：苹果首创的将多首歌曲的封面以3