1、交互设计师趣味工作 Balsamiq MockupsPost by 张美工 , 2012-2-24, Views:47Hi everybody, 张美工近一年的可支配时间都在创业，实在是无暇顾及我的 呀，呵呵，常来的同学郁闷了吧，没有太多更新，哈哈。这次跟大家一起聊聊一个交互设计师用到的一个十分有意思的小工具- Balsamiq Mockups，是出自加利福尼亚州的 Balsamiq 工作室，创始人 Peldi 在2008年6月推出了这款手绘风格的产品原型设计工具。手绘风格崇尚自然，简易，Balsamiq Mockups 设计的原型，给各种压力下的浮躁的 UE 们，带有一点趣味，简单说说这款
2、工具：一、Balsamiq Mockups 全部工具介绍：A. 我们通常在设置原型时用到的模块，在这里都有，预制了很多界面元素，从简单的输入框，下拉框，浏览器主要元素，到经常用得到的导航条，日历，表格，到复杂的 Tag Cloud，Cover Flow, 地图，WYSWYG 的格式工具栏；B. 界面元素的修改很简单，比如导航条的几个标签页的 label，就是用逗号分隔的文字，下拉框的选项就是分行的文字；C. 在国内的交互设计师们，只要在 view 将“ use system fonts”选中，就可以在各模块里如“button”里输入中文“搜索” 。有些 UI 控件如“ICON”可以在属性里进入
3、 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 主体桌面程序：交
6、互设计师趣味工作 Balsamiq Mockups 之 控件名中英文对照Post by 张美工 , 2012-2-24, Views:89 Balsamiq Mockups 目前没有中文版或者汉化版。实际上，Balsamiq Mockups 里的 UI 控件和图标元素非常容易识别。但很多用户还是想读懂它上面的英文含义。软餐博客将 Balsamiq Mockups 中常用的元素做出了一个中英文对照版，方便和我一样英文不佳的读者对照参考使用。bar chart：柱状图columnr chart：柱状图cover flow：cover flow：苹果首创的将多首歌曲的封面以3D 界面的形式显示出来的
7、方式。modal screen：屏幕模式Vertical 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
8、 button：尖按钮progress bar：进度条red 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、Ma
9、ster pages、Components 或者 Widgets。本质上，Symbol 让你可以在多个 Mockup 文件引用公共的元素。在 Mockups 中，Symbol 是简单命名转化为 Symbol 形态的 Group。待会我们会讨论更多它的帽底乾坤。现在，让我们先创建一个 Symbol！你可以创建一个新的 Group 或者选择一个已经创建好的组来转化为 Symbol。下列步骤假设从创建一个新的 Group 开始。1. 选择想要群组的控件2. 群组选中控件。 （选择 Edit 菜单下的 Group 命令，Group 后会呈蓝色。 ）3. 为 Group 命名。 （比如 login fo
10、r4. 保存带有这个新 Group 的文件。 （转化 Group 为 Symbol 之前文件必须要保存。 ）5. 在 Property Inspector 点击 Convert to Symbol 按钮转化为 Symbol。你会注意到 Group 选择变为了亮绿色。这表示选中的是 Symbol 的一个实例。你现在就有了一个名为“login form”的 Symbol，它会显示在 UI Library 的 Project Assets 标签里。（同样也可通过 Quick Add 添加它。 ）帽底乾坤一旦点击“Convert to Symbol”，Mockups 桌面版会将选中的已命名 Group
11、 添加到你 BMML 文件旁 assets 文件夹下 symbols.bmml 文件中。如果不了解 assets 文件夹，你可能需要参考 best practices for creating projects with Mockups（使用 Mockups 创建项目最佳实践） 。理解 Symbol 的关键是， Symbol 是存放在项目 assets 文件夹 BMML 文件中的已命名 Group。我们知道这个定义相当晦涩难懂，但彻底理解它有助于你掌握这个及其强大的特性。如果现在对 Symbol 还是没有什么概念，请别担心，我们一起回到前面，再学习一遍之后继续前进。 ；）重定义 Symbol
12、属性创建了 Symbol 后，每次使用时常常需要做一些小调整。假设你创建了一个 Symbol 作为 Master Page/Temple，它包含了一个网页的标题和导航。整个网站的 Page Title 具有相同大小的字体和位置，但是每一个页面 Title 文本都有所不同。同样道理，导航栏标识某一个页面的当前地址也有所不同。Symbol 允许每一次使用时重定义属性达到这个目的。需要的时候，请在 Symbol 上双击、Enter或者按快捷键 F2 “进入内部” 。这很像编辑 Group 内容，但你会注意到一个提示，是否真的需要重新定义 Symbol 的属性。如同编辑 Group 一样，你可以随意调
13、整 Symbols 里面每一个控件。超过 Symbol 属性的操作不被允许，比如添加、删除或者群组控件。如果做了误操作，你可以一直撤销返回。如果只想撤销 Pos. & Size 恢复为 Symbol 默认数值，可以点击 Property Inspector 中（Pos. & Size 右边）绿色的“x” icon。通过 Property Inspector 中（Symbol 一栏最右边）的“x”icon，也可以一次性撤销全部操作（Pos. & Size 和内容） ，恢复为 Symbol 实例。编辑 Symbol 源文件重复使用 Symbol 的主要优点是，一旦需要做调整，只是编辑一个地方，就会
14、更新所有 Symbol的实例。编辑 Symbol 源文件，如同编辑 Group。只需要打开 BMML 文件包含 Symbol，然后编辑就可以了。保存你的更新，回到 Mockups 中使用 Symbol，就会注意到变动已经生效了，就这样而已。程序提供2种快捷方式帮助你打开 Symbol 源文件以便于编辑。 你可以选中一个 Symbol 实例，在 Property Inspector 点击“Edit Source”。 你可以进入一个 Symbol 实例，然后点击如下图的“Edit”按钮。Symbol LibrariesSymbol Library 是 Symbol 集合。你可以创建 Symbol
15、Library 共享控件给你的团队，或者通过社区 Mockups To Go 分享它们。创建一个 Symbol Library，必须创建一个 BMML 文件以及一些 Group(每一个是一个 Symbol)，并且 Group 有各自的名字。只要有 BMML 文件存到 asset 文件夹，其中的 Group 就会转化为在这个项目任何 Mockup 中都可以使用的 Symbol。One more thingUsing Whole Mockups As Symbols 还有一件事情将整个 Mockup 作为Symbol我们还有个小秘密还没有跟你分享。记得这句话吗？“在 Mockups 中，Symbo
16、l 是简单命名转化为 Symbol 形态的 Group，储存于项目 assets 文件夹的 BMML 文件中。 ”其实，这不是完全正确的。这里还有一个方式可以在 Mockups 中创建 Symbol：创建一个没有Group 的 Mockup 到 assets 文件夹。Mockups 把将整个 Mockup 作为一个 Symbol，名称跟随 Mockup的文件名称。考虑到这点，完成 Symbol 定义如下：在 Mockups 中，Symbol 是保存在项目 assets 文件夹下 BMML 文件中被名命名的 Group，以及该文件夹中没有 Group 的 BMML 文件。Sharing Symb
17、ols Across Projects 跨项目分享 Symbol什么？你还在看？这些 Symbol 的信息对你来说还不够吗？好吧，既然你找上门来，我们只好彻底坦白。到现在我们已经多次谈及项目资源文件夹，这个名为“assets”的目录就在你 BMML 文件旁边。这一切都很好，但是如果你想在所有项目中共享这些 Symbol 呢？为了帮助你这样的超级用户，Mockups 引入了账户文件资源夹的概念。默认情况 Mockups 会寻找到你的“文档” 文件夹，放置 “Balsamiq Mockups”文件夹，你也可以通过 Config.file 指定位置。如果放置图片或者 BMML 文件在你的文档Balsamiq Mockupsassets 文件夹，这些图片和Symbol 在任意项目都可用。只要账户资源文件夹有适用的文件，在 UI Library 的 Account Assts 标签中都会魔法般的显示出来。 哈哈，大家有兴趣的对照着做做，会有对 Balsamiq Mockups 有更深的了解，希望交互设计师们都能保持快乐的，有趣的心态来做交互稿，这样的设计才更加有活动有灵魂。
