交互设计师趣味工作Balsamiq Mockups说明书Word文档下载推荐.docx

交互设计师趣味工作Balsamiq Mockups说明书Word文档下载推荐.docx

《交互设计师趣味工作Balsamiq Mockups说明书Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《交互设计师趣味工作Balsamiq Mockups说明书Word文档下载推荐.docx（16页珍藏版）》请在冰点文库上搜索。

释：

1—选区:

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

2---属性面板:

前面提到属性面板，OK，当选中状态时属性面板就会出现，可以选择手机方向“横向”、“纵向”；

手机屏幕是否有上、下边，是否有信号、时间区。

B.再拖出手机里需要的“数字模板”

，将它贴在A上。

各种属性面板可以尝试着玩玩如“大键盘”、“小键盘”。

当两个模型交叠时，会出“对齐”属性也可以玩玩，呵呵。

还有“层次问题”

不多解释，自己玩儿去。

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

D.BalsamiqMockups的保存

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

2.创建的多个文档可以生成PDF格式文件

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

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

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

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

手机翻看图片功能：

手机查看地图功能：

>

点击进入BalsamiqMockups官方下载安装页面<

<

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

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

89BalsamiqMockups目前没有中文版或者汉化版。

实际上，BalsamiqMockups里的UI控件和图标元素非常容易识别。

但很多用户还是想读懂它上面的英文含义。

软餐博客将BalsamiqMockups中常用的元素做出了一个中英文对照版，方便和我一样英文不佳的读者对照参考使用。

barchart：

柱状图

columnrchart：

coverflow：

苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式。

modalscreen：

屏幕模式

VerticalTabs：

纵向Tabs

accordion：

可折叠标签

breadcrumbs：

面包屑

callout：

插图编号

combobox：

组合框

pulldownmenu：

下拉菜单

datagrid：

资料表

geometricshape：

几何形状

aparagraphoftext：

段落文字

horizontalrule：

水平线

horizontalscrollbar：

水平滚动条

horizontalslider：

水平滑块

horizontalsplitter：

水平分隔器

numericstepper：

数字点选器

toggle：

开关

pointybutton：

尖按钮

progressbar：

进度条

redX/X-Nay：

红色叉

subtitle：

副标题

tooltip：

工具提示

balloon：

气泡

verticalslider：

纵向滑块

presentation：

演示

hints：

暗示

cursor：

光标

assets：

资源，资产

zoomin：

放大

zoomout：

缩小

duplicate：

复制

交互设计师趣味工作BalsamiqMockups2--自定义控件

63从版本2.0开始，Mockups桌面版支持Symbol概念。

类似特性在其它软件中称为Templates、Masterpages、Components或者Widgets。

本质上，Symbol让你可以在多个Mockup文件引用公共的元素。

在Mockups中，Symbol是简单命名转化为Symbol形态的Group。

待会我们会讨论更多它的帽底乾坤。

现在，让我们先创建一个Symbol！

你可以创建一个新的Group或者选择一个已经创建好的组来转化为Symbol。

下列步骤假设从创建一个新的Group开始。

1.选择想要群组的控件

2.群组选中控件。

（选择Edit菜单下的Group命令，Group后会呈蓝色。

）

3.为Group命名。

（比如loginfor

4.保存带有这个新Group的文件。

（转化Group为Symbol之前文件必须要保存。

5.在PropertyInspector点击ConverttoSymbol按钮转化为Symbol。

你会注意到Group选择变为了亮绿色。

这表示选中的是Symbol的一个实例。

你现在就有了一个名为“loginform”的Symbol，它会显示在UILibrary的ProjectAssets标签里。

（同样也可通过QuickAdd添加它。

帽底乾坤

一旦点击“ConverttoSymbol”，Mockups桌面版会将选中的已命名Group添加到你BMML文件旁assets文件夹下symbols.bmml文件中。

如果不了解assets文件夹，你可能需要参考bestpracticesforcreatingprojectswithMockups（使用Mockups创建项目最佳实践）。

理解Symbol的关键是，Symbol是存放在项目assets文件夹BMML文件中的已命名Group。

我们知道这个定义相当晦涩难懂，但彻底理解它有助于你掌握这个及其强大的特性。

如果现在对Symbol还是没有什么概念，请别担心，我们一起回到前面，再学习一遍之后继续前进。

；

重定义Symbol属性

创建了Symbol后，每次使用时常常需要做一些小调整。

假设你创建了一个Symbol作为MasterPage/Temple，它包含了一个网页的标题和导航。

整个网站的PageTitle具有相同大小的字体和位置，但是每一个页面Title文本都有所不同。

同样道理，导航栏标识某一个页面的当前地址也有所不同。

Symbol允许每一次使用时重定义属性达到这个目的。

需要的时候，请在Symbol上双击、Enter或者按快捷键F2“进入内部”。

这很像编辑Group内容，但你会注意到一个提示，是否真的需要重新定义Symbol的属性。

如同编辑Group一样，你可以随意调整Symbols里面每一个控件。

超过Symbol属性的操作不被允许，比如添加、删除或者群组控件。

如果做了误操作，你可以一直撤销返回。

如果只想撤销Pos.&

Size恢复为Symbol默认数值，可以点击PropertyInspector中（Pos.&

Size右边）绿色的“x”icon。

通过PropertyInspector中（Symbol一栏最右边）的“x”icon，也可以一次性撤销全部操作（Pos.&

Size和内容），恢复为Symbol实例。

编辑Symbol源文件

重复使用Symbol的主要优点是，一旦需要做调整，只是编辑一个地方，就会更新所有Symbol的实例。

编辑Symbol源文件，如同编辑Group。

只需要打开BMML文件包含Symbol，然后编辑就可以了。

保存你的更新，回到Mockups中使用Symbol，就会注意到变动已经生效了，就这样而已。

程序提供2种快捷方式帮助你打开Symbol源文件以便于编辑。

•你可以选中一个Symbol实例，在PropertyInspector点击“EditSource”。

•你可以进入一个Symbol实例，然后点击如下图的“Edit”按钮。

SymbolLibraries

SymbolLibrary是Symbol集合。

你可以创建SymbolLibrary共享控件给你的团队，或者通过社区MockupsToGo分享它们。

创建一个SymbolLibrary，必须创建一个BMML文件以及一些Group（每一个是一个Symbol），并且Group有各自的名字。

只要有BMML文件存到asset文件夹，其中的Group就会转化为在这个项目任何Mockup中都可以使用的Symbol。

Onemorething…UsingWholeMockupsAsSymbols还有一件事情……将整个Mockup作为Symbol

我们还有个小秘密还没有跟你分享。

记得这句话吗？

“在Mockups中，Symbol是简单命名转化为Symbol形态的Group，储存于项目assets文件夹的BMML文件中。

”

其实，这不是完全正确的。

这里还有一个方式可以在Mockups中创建Symbol：

创建一个没有Group的Mockup到assets文件夹。

Mockups把将整个Mockup作为一个Symbol，名称跟随Mockup的文件名称。

考虑到这点，完成Symbol定义如下：

在Mockups中，Symbol是保存在项目assets文件夹下BMML文件中被名命名的Group，以及该文件夹中没有Group的BMML文件。

SharingSymbolsAcrossProjects跨项目分享Symbol

什么？

你还在看？

这些Symbol的信息对你来说还不够吗？

好吧，既然你找上门来，我们只好彻底坦白。

到现在我们已经多次谈及项目资源文件夹，这个名为“assets”的目录就在你BMML文件旁边。

这一切都很好，但是如果你想在所有项目中共享这些Symbol呢？

为了帮助你这样的超级用户，Mockups引入了账户文件资源夹的概念。

默认情况Mockups会寻找到你的“文档”文件夹，放置“BalsamiqMockups”文件夹，你也可以通过Config.file指定位置。

如果放置图片或者BMML文件在你的文档\BalsamiqMockups\assets文件夹，这些图片和Symbol在任意项目都可用。

只要账户资源文件夹有适用的文件，在UILibrary的AccountAssts标签中都会魔法般的显示出来。

哈哈，大家有兴趣的对照着做做，会有对BalsamiqMockups有更深的了解，希望交互设计师们都能保持快乐的，有趣的心态来做交互稿，这样的设计才更加有活动有灵魂。