交互设计师趣味工作Balsamiq Mockups说明书.docx

1、交互设计师趣味工作Balsamiq Mockups说明书交互设计师趣味工作Balsamiq MockupsPost by 张美工, 2012-2-24, Views:47Hi everybody, 张美工近一年的可支配时间都在创业，实在是无暇顾及我的呀，呵呵，常来的同学郁闷了吧，没有太多更新，哈哈。这次跟大家一起聊聊一个交互设计师用到的一个十分有意思的小工具- Balsamiq Mockups，是出自加利福尼亚州的Balsamiq工作室，创始人Peldi在2008年6月推出了这款手绘风格的产品原型设计工具。手绘风格崇尚自然，简易，Balsamiq Mockups设计的原型，给各种压力下的浮躁的

2、UE们，带有一点趣味，简单说说这款工具：一、Balsamiq Mockups全部工具介绍： A. 我们通常在设置原型时用到的模块，在这里都有，预制了很多界面元素，从简单的输入框，下拉框，浏览器主要元素，到经常用得到的导航条，日历，表格，到复杂的Tag Cloud，Cover Flow, 地图，WYSWYG的格式工具栏； B. 界面元素的修改很简单，比如导航条的几个标签页的label，就是用逗号分隔的文字，下拉框的选项就是分行的文字；C. 在国内的交互设计师们，只要在view将“ use system fonts”选中，就可以在各模块里如“button”里输入中文“搜索”。 有些UI控件如“IC

3、ON”可以在属性里进入ICON库，选择想要图形，如图： D. 使用xml语言来记录和保存界面元素和布局， 1.这使得每个设计都能被很好得放进SVN，Git，和CVS等工具中进行管理和跟踪； 2.可以设计复杂的界面元素，保存后，以后可以重复使用（包括修改）； 二、实例演示- 手机端原型设计：A. 在工具栏拖出“手机”，大家一定要多玩玩各个模块带的属性面板，会有意想不到的收获，哈哈，上图： 释：1选区: 一个模块在当前选中时，外围有一个长方形选区，可做长宽高低拉伸，也只有点在选区才能位移模块。 2-属性面板: 前面提到属性面板，OK，当选中状态时属性面板就会出现，可以选择手机方向“横向”、“纵向”

4、；手机屏幕是否有上、下边，是否有信号、时间区。B. 再拖出手机里需要的“数字模板”，将它贴在A上。各种属性面板可以尝试着玩玩如“大键盘”、“小键盘”。当两个模型交叠时，会出“对齐”属性也可以玩玩，呵呵。还有“层次问题”,不多解释，自己玩儿去。 C. Balsamiq Mockups支持360全屏查看功能，方便总体设计思考 D. Balsamiq Mockups的保存 1. 导出成PNG格式的图片; 2.创建的多个文档可以生成PDF格式文件 E. 可以用命令行进行导出操作，这样就能让我写个脚本，从svn里checkout某个目录下的所有设计文件后，导出图片，打包后用邮件发到项目经理，工程师甚至客

5、户那； F. 跨平台，Balsamiq Mokups是用Flex和Air实现的，所以在Mac OS,Linux和Windows下都能使用； G. 不仅仅有桌面版本，还有能集成在Confluence，JIRA，和XWiki中的版本，使得异地在线协作更方便有效； 到此，一个简单有趣的手机就算初步完成了，当然交互设计师做的工作是要细节再细节，下面张美工自己做一个手机细节原型 手机翻看图片功能： 手机查看地图功能： 点击进入Balsamiq Mockups官方下载安装页面 点击图标直接安装即可，安装内容包括Adobe AIR环境以及Mockups主体桌面程序： 交互设计师趣味工作Balsamiq Mo

6、ckups之 控件名中英文对照Post by 张美工, 2012-2-24, Views:89 Balsamiq Mockups目前没有中文版或者汉化版。实际上，Balsamiq Mockups里的UI控件和图标元素非常容易识别。但很多用户还是想读懂它上面的英文含义。软餐博客将Balsamiq Mockups 中常用的元素做出了一个中英文对照版，方便和我一样英文不佳的读者对照参考使用。bar chart：柱状图columnr chart：柱状图cover flow：cover flow：苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式。modal screen：屏幕模式Vertical

7、 Tabs：纵向Tabsaccordion：可折叠标签breadcrumbs：面包屑callout：插图编号combobox：组合框pull down menu：下拉菜单data grid：资料表geometric shape：几何形状a paragraph of text：段落文字horizontal rule：水平线horizontal scroll bar：水平滚动条horizontal slider：水平滑块horizontal splitter：水平分隔器numeric stepper：数字点选器toggle：开关pointy button：尖按钮progress bar：进度条re

8、d X / X-Nay：红色叉subtitle：副标题tooltip：工具提示balloon：气泡vertical slider：纵向滑块presentation：演示hints：暗示cursor：光标assets：资源，资产zoom in：放大zoom out：缩小duplicate：复制交互设计师趣味工作Balsamiq Mockups2-自定义控件Post by 张美工, 2012-2-24, Views:63 从版本2.0开始，Mockups桌面版支持Symbol概念。类似特性在其它软件中称为Templates、Master pages、Components 或者Widgets。 本质

9、上，Symbol让你可以在多个Mockup文件引用公共的元素。 在Mockups中，Symbol是简单命名转化为Symbol形态的Group。待会我们会讨论更多它的帽底乾坤。现在，让我们先创建一个Symbol！ 你可以创建一个新的Group或者选择一个已经创建好的组来转化为Symbol。下列步骤假设从创建一个新的Group开始。 1. 选择想要群组的控件 2. 群组选中控件。（选择Edit菜单下的Group命令，Group后会呈蓝色。） 3. 为Group命名。（比如login for 4. 保存带有这个新Group的文件。（转化Group为Symbol之前文件必须要保存。） 5. 在Prop

10、erty Inspector点击Convert to Symbol按钮转化为Symbol。 你会注意到Group选择变为了亮绿色。这表示选中的是Symbol的一个实例。 你现在就有了一个名为“login form”的Symbol，它会显示在UI Library的Project Assets标签里。（同样也可通过Quick Add添加它。） 帽底乾坤 一旦点击“Convert to Symbol”，Mockups桌面版会将选中的已命名Group添加到你BMML文件旁assets文件夹下symbols.bmml 文件中。如果不了解assets文件夹，你可能需要参考best practices fo

11、r creating projects with Mockups（使用Mockups创建项目最佳实践）。理解Symbol的关键是，Symbol是存放在项目assets文件夹BMML文件中的已命名Group。 我们知道这个定义相当晦涩难懂，但彻底理解它有助于你掌握这个及其强大的特性。如果现在对Symbol还是没有什么概念，请别担心，我们一起回到前面，再学习一遍之后继续前进。；） 重定义Symbol属性 创建了Symbol后，每次使用时常常需要做一些小调整。假设你创建了一个Symbol作为Master Page/Temple，它包含了一个网页的标题和导航。 整个网站的Page Title具有相同大

12、小的字体和位置，但是每一个页面Title文本都有所不同。同样道理，导航栏标识某一个页面的当前地址也有所不同。 Symbol允许每一次使用时重定义属性达到这个目的。需要的时候，请在Symbol上双击、Enter或者按快捷键F2 “进入内部”。 这很像编辑Group内容，但你会注意到一个提示，是否真的需要重新定义Symbol的属性。 如同编辑Group一样，你可以随意调整Symbols里面每一个控件。超过Symbol属性的操作不被允许，比如添加、删除或者群组控件。 如果做了误操作，你可以一直撤销返回。如果只想撤销Pos. & Size恢复为Symbol默认数值，可以点击Property Inspe

13、ctor中（Pos. & Size右边）绿色的“x”icon。 通过Property Inspector中（Symbol一栏最右边）的“x”icon，也可以一次性撤销全部操作（Pos. & Size和内容），恢复为Symbol实例。 编辑Symbol源文件 重复使用Symbol的主要优点是，一旦需要做调整，只是编辑一个地方，就会更新所有Symbol的实例。 编辑Symbol源文件，如同编辑Group。只需要打开BMML文件包含Symbol，然后编辑就可以了。保存你的更新，回到Mockups中使用Symbol，就会注意到变动已经生效了，就这样而已。 程序提供2种快捷方式帮助你打开Symbol源文

14、件以便于编辑。 你可以选中一个Symbol实例，在Property Inspector点击“Edit Source”。 你可以进入一个Symbol实例，然后点击如下图的“Edit”按钮。 Symbol Libraries Symbol Library是Symbol集合。你可以创建Symbol Library共享控件给你的团队，或者通过社区Mockups To Go分享它们。 创建一个Symbol Library，必须创建一个BMML文件以及一些Group(每一个是一个Symbol)，并且Group有各自的名字。 只要有BMML文件存到asset文件夹，其中的Group就会转化为在这个项目任何M

15、ockup中都可以使用的Symbol。 One more thingUsing Whole Mockups As Symbols 还有一件事情将整个Mockup作为Symbol 我们还有个小秘密还没有跟你分享。记得这句话吗？“在Mockups中，Symbol是简单命名转化为Symbol形态的Group，储存于项目assets文件夹的BMML文件中。” 其实，这不是完全正确的。这里还有一个方式可以在Mockups中创建Symbol：创建一个没有Group的Mockup到assets文件夹。Mockups把将整个Mockup作为一个Symbol，名称跟随Mockup的文件名称。 考虑到这点，完成S

16、ymbol定义如下： 在Mockups中，Symbol是保存在项目assets文件夹下BMML文件中被名命名的Group，以及该文件夹中没有Group的BMML文件。 Sharing Symbols Across Projects 跨项目分享Symbol 什么？你还在看？这些Symbol的信息对你来说还不够吗？ 好吧，既然你找上门来，我们只好彻底坦白。到现在我们已经多次谈及项目资源文件夹，这个名为“assets”的目录就在你BMML文件旁边。 这一切都很好，但是如果你想在所有项目中共享这些Symbol呢？ 为了帮助你这样的超级用户，Mockups引入了账户文件资源夹的概念。默认情况Mockups会寻找到你的“文档”文件夹，放置 “Balsamiq Mockups”文件夹，你也可以通过Config.file指定位置。 如果放置图片或者BMML文件在你的文档Balsamiq Mockupsassets文件夹，这些图片和Symbol在任意项目都可用。只要账户资源文件夹有适用的文件，在UI Library的Account Assts标签中都会魔法般的显示出来。 哈哈，大家有兴趣的对照着做做，会有对Balsamiq Mockups有更深的了解，希望交互设计师们都能保持快乐的，有趣的心态来做交互稿，这样的设计才更加有活动有灵魂。