1 引 言 制 作 软 件 使 用 原 型 法 已 经 成 为 业 界 通 行 的 做 法, 笔 者 使 用 过 Visio,AxureRP 或 者 Html 编 辑 器 绘 制 过 软 件 系 统 的 原 型 对 于 大 型 项 目 一 般 使 用 AxureRP 或 者 Html 编 辑 器 制

Balsamiq Mockups 使 用 手 册 目 录 1 引 言... 2 1.1 预 期 读 者... 2 2 程 序 架 构 总 览... 2 3 属 性 窗 口 (The Property Inspector)... 4 3.1 通 用 属 性 项... 4 3.2 其 他 属 性 项... 5 4 使 用 文 本 及 符 号... 10 4.1 基 本 格 式... 10 4.2 使 用 Date Grid / Table... 11 4.3 使 用 Tree... 11 4.4 使 用 Menu... 13 4.5 从 Excel 粘 贴 数 据... 13 5 使 用 Symbols, 制 作 共 享 部 件... 14 5.1 创 建 Symbols... 14 5.2 Symbols 原 理... 15 5.3 重 定 义 Symbol 属 性... 15 5.4 编 辑 Symbol 源 文 件... 18 5.5 Symbol 库... 19 6 全 屏 演 示... 19 7 BalsamiqMockups.cfg 配 置 文 件... 20 1

1 引 言 制 作 软 件 使 用 原 型 法 已 经 成 为 业 界 通 行 的 做 法, 笔 者 使 用 过 Visio,AxureRP 或 者 Html 编 辑 器 绘 制 过 软 件 系 统 的 原 型 对 于 大 型 项 目 一 般 使 用 AxureRP 或 者 Html 编 辑 器 制 作 高 逼 真 度 的 原 型 ; 对 于 小 型 项 目 一 般 使 用 Visio 制 作 但 是 不 论 是 大 项 目 还 是 小 项 目, 软 件 是 什 么 样 子? 从 脑 海 中 落 到 逼 真 的 样 子 中 间 会 经 过 一 个 什 么 样 的 步 骤? 我 想 大 家 都 会 记 起 一 个 工 具 白 板! 大 家 在 会 议 室 讨 论, 然 后 把 界 面 画 到 白 板 上, 然 后 热 烈 的 讨 论, 散 会 前 用 相 机 把 白 板 内 容 拍 下 来 然 后 再 不 辞 劳 苦 的 将 界 面 画 到 AxureRP 或 者 Html 中 自 从 有 了 Balsamiq Mockups 这 款 原 型 设 计 工 具, 确 切 的 说 是 一 个 草 图 原 型 设 计 工 具, 大 家 可 以 从 这 种 痛 苦 种 解 脱, 而 且 可 以 把 这 个 工 具 作 为 一 个 快 速 交 流 的 工 具 甚 至 可 以 作 为 和 客 户 交 流 的 基 础 Balsamiq Mockups 有 哪 些 特 点? 让 我 们 了 解 一 下 : 可 存 储 : 告 别 那 一 堆 堆 的 纸 质 线 框 图 吧! 易 使 用 : 只 能 说 在 某 种 程 度 上 容 易 使 用 手 绘 风 格 : 简 约 清 爽, 属 于 讨 论 型 风 格 丰 富 : 从 按 钮 到 输 入 框, 从 导 航 条 到 页 面 表 格, 甚 至 包 括 了 最 潮 的 Iphone 元 素 易 扩 展 : 可 使 用 XML 语 言 保 存 元 素, 也 可 以 导 出 PNG 图 片, 可 以 插 入 到 任 何 项 目 跨 平 台 :Windows Mac OS Linux 下 都 可 以 使 用 除 了 上 述 特 点 之 外, Balsamiq Mockups 的 一 个 绘 制 特 性 给 笔 者 留 下 了 非 常 深 刻 的 印 象, 因 此 单 独 拿 出 来 介 绍 : 提 供 Wiki 风 格 的 代 码 规 则, 画 图 时 可 以 偷 懒, 输 入 文 本 符 号 则 能 生 成 图 标 因 此 相 比 其 它 繁 琐 的 软 件 操 作,Balsamiq Mockups 也 能 更 快 地 完 成 画 图 任 务 大 部 分 的 原 型 制 作 人 员 有 过 编 程 经 验, 也 对 在 Html 编 辑 器 或 AxureRP 上 绘 制 表 格 深 感 头 痛, 而 Balsamiq Mockups 除 了 提 供 手 绘 自 由 式 风 格 的 界 面, 而 且 通 过 符 号 的 方 式 快 速 修 改 界 面 元 素 的 确 节 约 了 我 们 很 多 的 时 间 注 : 在 菜 单 栏 View 里 将 Use System Fonts 勾 上, 就 能 完 美 支 持 中 文 输 入 如 何 获 取 Balsamiq Mockups 不 在 本 文 讨 论 范 围 1.1 预 期 读 者 1 原 型 制 作 人 员 : 使 用 Html 编 辑 器,AxureRP 等 进 行 应 用 系 统 原 型 开 发 的 工 程 人 员 2 程 序 架 构 总 览 Balsamiq Mockups 主 要 由 三 块 组 成 从 上 至 下 是 : Application Bar UI library 和 Mockup Canvas 分 别 详 述 如 下 2

应 用 程 序 栏 (The Application Bar) Application Bar 包 含 了 Menus Quick Add 和 Toolbar Mockups 菜 单 非 常 一 目 了 然 Quick Add 工 具 是 添 加 UI 控 件 最 快 的 方 式 使 用 Quick Add, 首 先 点 击 Quick Add 的 输 入 框 ( 也 可 使 用 快 捷 键 / 或 + 跳 转 ), 然 后 输 入 待 添 加 的 UI 控 件 名 称 的 些 许 字 母,Quick Add 会 弹 出 一 个 建 议 列 表 使 用 鼠 标 或 者 键 盘 的 方 向 键 上 下 滚 动 列 表, 找 到 希 望 添 加 的 UI 控 件, 按 下 Enter 键 一 个 新 的 UI 控 件 已 经 为 你 添 加 在 画 布 上 例 如, 输 入 bu, 列 表 会 呈 现 包 括 Button Button Bar Help Button Radio Button 和 Round Button 输 入 hel, 则 仅 呈 现 Help Button 同 标 准 操 作 一 样, 按 下 ESC 键 取 消 列 表 马 上 试 试 Quick Add! 一 旦 你 熟 悉 它, 就 可 以 隐 藏 UI Library( 通 过 View 菜 单 ), 直 接 用 Quick Add 添 加 UI 元 素 到 Mockup 这 样 会 最 大 化 你 的 画 布 区 域 和 速 度 Toolbar 包 含 了 大 部 分 Edit 菜 单 中 的 命 令 例 如 :Undo Redo Duplicate( 复 制 副 本 ) 3

Cut Copy Paste 和 Delete 另 外, 在 Property Inspector 中 你 也 会 发 现 相 同 的 命 令 按 钮 UI 库 (The UI Library) UI Library 或 者 UI 控 件 库, 是 在 Application Bar 下 面 长 条 形 的 UI 控 件 集 它 按 照 字 母 顺 序 列 出 了 Mockups 支 持 的 各 种 UI 控 件 类 型 UI Library 的 主 要 目 的 是 让 你 添 加 UI 控 件 到 Mockup 画 布, 但 你 也 可 以 随 意 尝 试 以 获 得 一 些 灵 感 想 要 添 加 一 个 新 的 UI 控 件 到 画 布, 仅 需 要 选 中 你 希 望 添 加 的 控 件, 然 后 拖 放 它 到 Mockup 画 布 中 或 者 仅 需 要 双 击 控 件,Balsamiq Mockups 便 会 为 你 放 置 在 画 布 上 Mockup 画 布 (The Mockup Canvas) 画 布 是 Balsamiq Mockups 的 主 工 作 区 只 要 在 画 布 上 添 加 了 UI 控 件, 就 可 以 移 动 调 整 大 小, 直 到 符 合 你 的 想 法 只 要 使 用 过 Visio 等 绘 图 软 件, 就 应 该 能 知 道 该 软 件 的 最 基 本 操 作, 这 里 就 不 浪 费 时 间 说 这 些 了 3 属 性 窗 口 (The Property Inspector) 属 性 窗 口 是 该 软 件 一 个 设 计 比 较 贴 心 的 地 方, 有 点 像 Word2007, 属 性 框 紧 紧 跟 随 被 选 元 素, 它 允 许 你 执 行 一 些 常 用 功 能 比 如 复 制 / 粘 贴 分 层 对 齐 控 件, 以 及 某 些 控 件 的 特 有 选 项 节 约 了 我 们 找 属 性 框 的 时 间 下 图 是 一 个 属 性 框 的 图 例 : 3.1 通 用 属 性 项 Editing Inspector 编 辑 选 项 总 是 呈 现 在 最 顶 部 从 左 到 右 依 次 是 :Undo Redo Duplicate Cut, Copy Paste Delete Group Ungroup Lock Layering and Position & Size 图 层 位 置 和 大 小 4

总 是 呈 现 在 第 二 行, 编 辑 选 项 的 下 面 Layering 选 项 从 左 到 右 依 次 是 :bring to front send to back bring forward send backward Position and size 是 选 中 项 的 位 置 和 大 小 点 击 数 值 切 换 编 辑 格 式 是 X,Y WxH, X 表 示 横 线 坐 标,Y 表 示 纵 向 坐 标 (0,0 是 最 左 上 角 的 原 点, 控 件 向 右 和 向 下 延 伸 )W 和 H 分 别 表 示 选 中 项 的 宽 和 高 Align 对 齐 选 中 的 控 件 超 过 一 个 时 就 会 出 现 你 可 以 将 选 中 的 元 素 水 平 居 左 居 中 居 右 对 齐 垂 直 向 上 居 中 项 下 对 齐 最 后 的 两 个 icon 分 别 是 水 平 分 布 和 垂 直 分 布 3.2 其 他 属 性 项 Arrow( 箭 头 ) 选 择 箭 头 的 方 向 和 弧 度, 以 及 是 否 显 示 箭 头 Auto-Size( 自 适 应 尺 寸 ) 点 击 Auto-Size 将 会 调 整 控 件 为 自 然 尺 寸, 也 就 是 适 合 内 容 的 最 小 尺 寸 Border( 边 框 ) 显 示 或 者 隐 藏 选 中 控 件 的 边 框 Color( 颜 色 ) 设 置 选 中 控 件 的 前 景 背 景 颜 色 ( 取 决 于 控 件 类 型 ) 以 及 透 明 度 ( 仅 在 部 分 控 件 提 供 ) Icon ( 图 标 ) 5

Icon 允 许 你 为 选 中 的 控 件 添 加 删 除 以 及 调 整 Icon 大 小 仅 需 点 击 搜 索 输 入 框, 开 始 输 入 需 要 控 件 的 名 字, 就 会 得 到 一 个 匹 配 输 入 的 建 议 列 表 使 用 方 向 键 或 者 鼠 标 选 中 所 需, 然 后 使 用 滑 块 调 整 大 小 需 要 删 除 Icon, 点 击 滑 块 右 边 的 擦 除 Icon Image ( 图 像 ) Image 栏 让 你 可 以 为 Image 控 件 选 图 像 你 可 以 选 择 默 认 占 位 符 导 入 新 图 像 或 者 选 择 在 Mockup 中 已 经 使 用 的 图 像 你 还 可 以 选 中 Sketch it! 复 选 框, 让 图 像 看 起 来 像 是 手 绘 效 果 Links ( 链 接 ) 6

Links 让 你 可 以 把 Mockup 彼 此 链 接 从 1.6 版 本 开 始,Mockups 支 持 把 Mockup 彼 此 链 接 到 一 起 这 样 可 以 建 立 一 个 简 单 的 网 站 或 者 软 件 原 型 当 前 链 接 功 能 仅 仅 支 持 桌 面 版 和 Confluence 版 本 只 需 在 下 拉 菜 单 中 选 择 一 个 文 件 名, 两 个 Mockup 链 接 在 一 起 就 是 这 样 简 单 选 择 支 持 链 接 的 控 件,Property Inspector 就 会 看 到 Link 下 拉 菜 单 如 果 你 没 有 看 到 下 拉 菜 单, 你 可 以 点 击 Show Link Inspector 链 接 7

如 果 下 拉 菜 单 不 可 用, 请 保 存 你 的 Mockup 后 再 点 击 想 添 加 链 接 的 控 件 下 拉 列 表 中 的 链 接 名 称, 是 基 于 当 前 编 辑 文 件 的 同 一 目 录 下 全 部 BMML 文 件 的 名 称 只 要 保 持 相 关 的 Mockup 在 同 一 文 件 夹, 列 表 都 会 列 出 来 一 旦 你 通 过 下 拉 菜 单 选 择 了 一 个 链 接, 控 件 的 右 下 角 将 会 有 一 个 下 图 所 示 的 小 箭 头 Icon 按 下 Alt+ 鼠 标 左 键 单 击 就 可 以 在 编 辑 状 态 下 跳 转 到 对 应 的 页 面 中 去 如 果 你 的 链 接 已 经 完 成, 进 入 全 屏 演 示 模 式 就 可 以 点 击 建 立 的 链 接, 开 始 测 试 你 的 原 型 在 全 屏 演 示 状 态 下, 有 链 接 的 控 件 有 淡 蓝 色 的 颜 色 覆 盖 类 似 Web 链 接, 悬 停 时 会 显 示 一 个 大 的 手 型 指 针, 还 会 像 下 图 一 样 显 示 这 个 链 接 目 标 文 件 名 点 击 链 接 就 会 跳 转 到 相 关 的 Mockup 文 件 你 可 以 使 用 左 右 箭 头 来 回 切 换 已 经 访 问 过 一 遍 的 Mockup 这 是 非 常 实 用 的 一 个 操 作 List and DataGrid ( 列 表 和 数 据 表 格 ) 允 许 你 指 定 List 和 DataGrid 是 否 有 表 头 表 格 行 是 否 交 错 颜 色 行 高 以 及 当 前 选 中 行 DataGrid 控 件 还 允 许 你 为 表 格 添 加 纵 向 的 滚 动 条 8

Progress Bar Type ( 进 度 条 ) 允 许 你 在 步 进 进 度 条 以 及 不 确 定 进 度 条 ( 像 糖 果 手 杖 一 样 的 斜 向 条 纹 ) 之 间 切 换 Scrollbar ( 滚 动 条 ) 为 选 中 控 件 添 加 滚 动 条 Selection ( 选 项 ) 选 择 某 些 控 件 中 的 默 认 选 中 元 素 State ( 状 态 ) 状 态 允 许 你 指 定 控 件 状 态, 比 如 焦 点 选 中 不 可 用 状 态 等 等 不 同 类 型 的 控 件 支 持 不 同 的 Tabs Position (Tab 位 置 ) 允 许 你 指 定 控 件 的 文 本 样 式, 粗 体 斜 体 或 者 下 划 线, 水 平 对 齐 方 式 以 及 字 体 大 小 Vertical Tabs Position 垂 直 Tab 位 置 允 许 你 指 定 垂 直 Tab 在 面 板 左 面 还 是 右 面 Window / Dialog ( 窗 口 / 对 话 框 ) 9

允 许 你 开 关 Window 窗 体 控 件, 比 如 最 小 化 最 大 化 和 关 闭 按 钮 另 外 提 供 拖 动 功 能, 可 以 指 定 顶 部 和 底 部 条 的 高 度 4 使 用 文 本 及 符 号 一 些 UI 控 件 包 含 文 本, 比 如 Button Label DataGrid 若 要 编 辑 文 本, 直 接 双 击 控 件 输 入 如 果 你 已 经 选 中 了 控 件, 可 以 按 Enter 或 者 F2 开 始 编 辑 需 要 结 束 文 本 输 入, 仅 仅 需 要 点 击 输 入 的 文 本 区 域 以 外 的 任 意 地 方, 也 可 以 按 Enter 或 者 Ctrl + Enter 如 果 希 望 放 弃 刚 才 所 做 的 修 改, 按 ESC 键 特 殊 字 符 备 注 : 一 些 控 件 使 用 特 殊 字 符 作 为 分 割 符 例 如, 在 Button Bar 创 建 一 个 分 段 按 钮 时, 使 用 逗 号 分 割 其 它 的 一 些 控 件, 比 如 Tree, 使 用 其 它 的 字 符 分 割 这 些 控 件 中 默 认 的 文 本 会 解 释 如 何 使 用 它 4.1 基 本 格 式 你 可 以 使 用 下 列 符 号 定 义 控 件 中 的 某 一 部 分 文 本 字 符 作 用 备 注 _XXX_ 斜 体 XXX 为 你 未 来 实 际 要 填 写 的 内 容 [XXX] 链 接 *XXX* 粗 体 -XXX- 不 可 用 &XXX& 下 划 线 {color} 颜 色 颜 色 数 值 像 HTML 一 样 使 用 16 进 制, 如 {color:#ff0000} \ 显 示 转 义 字 符 你 可 以 通 过 在 字 符 前 添 加 反 斜 线 \, 来 避 免 字 符 被 识 别 为 分 隔 符 所 以 如 果 想 输 入 this [is] some text, 不 希 望 is 变 成 链 接, 只 需 要 这 样 输 入 this \[is\] some text 这 里 是 上 述 文 本 在 一 个 Paragraph 中 的 效 果 截 图 这 种 快 捷 方 式 几 乎 在 任 何 地 方 都 可 以 使 用, 只 要 符 合 逻 辑, 你 可 以 尝 试 把 它 们 结 合 在 一 起 使 用 比 如 用 [_this_] 或 者 _[this]_ 生 成 一 个 斜 体 链 接 Mockups 绝 大 部 分 控 件 的 Text 默 认 是 加 粗 的 这 种 情 况 下 使 用 * 加 粗 效 果 并 没 有 什 么 变 化 10

4.2 使 用 Date Grid / Table Wiki 风 格 字 符 定 义 下 面 我 们 介 绍 字 符 式 Table 编 写 方 法 : Name\r(job title) ^, Age, Nickname, Employee Giacomo Guilizzoni\rFounder & CEO, 34, Peldi, [x] Guido Jack Guilizzoni, 4, The Guids, [] Marco Botton\rTuttofare, 31,, [x] Mariah Maclachlan\rBetter Half, 35, Patata, [x] Valerie Liberty\rCOO\, WOW! Division, :), Val, [x] {75L, 0R, 25, 0C} 对 应 下 图 : 字 符 规 则 如 下 表 所 示 : 字 符 作 用 备 注 \n 回 车 换 行 \ 显 示 转 义 字 符 ^,v 列 排 序 标 记 ^ 为 升 序,v 为 降 序, 列 数 据 分 隔 符 如 果 需 要 显 示, 用 \, 转 义 显 示 [x],[] 复 选 框 带 x 表 示 选 中, 不 带 x 表 示 不 选 (x),() 单 选 框 带 x 表 示 选 中, 不 带 x 表 示 不 选 {} 列 宽 设 置 总 在 最 后 一 行 0 为 自 适 应 数 值 为 % 单 位 R 为 右 对 齐,L 为 左 对 齐, 不 写 为 Property Inspector 设 置 4.3 使 用 Tree Wiki 风 格 字 符 定 义 下 面 我 们 介 绍 字 符 式 Tree 编 写 方 法 : 11

f Use f for closed folders F Use F for open folders [+] You may also use this [-] and this [x] or this [ ] and this > or even this v and this - Use - for a file icon _ or _ to leave a space for your own icon F use spaces or dots for hierarchy _v just like..- this 对 应 下 图 : 字 符 规 则 如 下 表 所 示 : 字 符 作 用 备 注 f, F 文 件 夹 标 识 f 为 关 闭 的 文 件 夹,F 为 打 开 的 文 件 夹 [+],[-] 加 减 号 标 识 [+] 为 加 号,[-] 为 减 号 [x],[] 复 选 框 带 x 表 示 选 中, 不 带 x 表 示 不 选 (x),() 单 选 框 带 x 表 示 选 中, 不 带 x 表 示 不 选 > 右 方 向 箭 头 v 下 方 向 箭 头 - 页 图 标 _ 右 缩 一 格 只 能 用 一 次, 不 能 连 用. 右 缩 一 格 可 以 连 续 使 用, 做 多 格 缩 进 效 果 12

4.4 使 用 Menu Wiki 风 格 字 符 定 义 下 面 我 们 介 绍 字 符 式 Menu 编 写 方 法 : Open,CTRL+O Open Recent > --- o Option One Option Two = x Toggle Item -Disabled Item- Exit,CTRL+Q 对 应 下 图 : 字 符 规 则 如 下 表 所 示 : 字 符 作 用 备 注 XXX > 子 菜 单 箭 头 XXX 为 实 际 菜 单 名 称 ---,= 菜 单 分 割 线 --- 或 者 = 都 可 以 o 单 选 类 型 菜 单 x 复 选 菜 单 - 不 可 用 状 态 的 菜 单 Open,CTRL+O 菜 单 文 字 和 快 捷 键 写 法 4.5 从 Excel 粘 贴 数 据 一 些 人 喜 欢 在 Excel 这 样 的 电 子 表 格 中 准 备 表 格 数 据 你 可 以 从 Excel 中 复 制 和 粘 贴 单 元 格 到 Grid/Table 如 果 单 元 格 有 逗 号, 你 需 要 像 这 样 使 用 反 斜 线 \ 避 免 它 成 为 分 隔 符 : 1\,000\,000, 样 可 以 识 别 2 个 逗 号, 把 tabs 作 为 分 隔 符, 反 斜 杠 不 会 被 添 加 到 单 元 格 13

5 使 用 Symbols, 制 作 共 享 部 件 Symbols 特 性 的 Mockups 可 以 多 次 调 用 公 共 的 元 素, 提 高 本 地 定 制 能 力 Symbol 是 Balsamiq Mockups 桌 面 版 2.0 的 新 功 能, 通 过 它 可 以 灵 活 复 用 自 定 义 控 件 和 页 面 模 板 通 过 项 目 资 源 文 件 夹 的 设 定, 还 可 以 实 现 跨 项 目 以 及 团 队 协 作 多 种 环 境 调 用 这 些 期 待 已 久 的 特 性, 使 得 Mockups 更 加 强 大 和 灵 活, 非 常 值 得 推 荐 从 版 本 2.0 开 始,Mockups 桌 面 版 支 持 Symbol 概 念 类 似 特 性 在 其 它 软 件 中 称 为 Templates Master pages Components 或 者 Widgets 本 质 上,Symbol 让 你 可 以 在 多 个 Mockup 文 件 引 用 公 共 的 元 素 5.1 创 建 Symbols 在 Mockups 中,Symbol 是 简 单 命 名 转 化 为 Symbol 形 态 的 Group 现 在, 让 我 们 先 创 建 一 个 Symbol! 你 可 以 创 建 一 个 新 的 Group 或 者 选 择 一 个 已 经 创 建 好 的 组 来 转 化 为 Symbol 下 列 步 骤 假 设 从 创 建 一 个 新 的 Group 开 始 1. 选 择 想 要 群 组 的 控 件 2. 群 组 选 中 控 件 ( 选 择 Edit 菜 单 下 的 Group 命 令,Group 后 会 呈 蓝 色 ) 3. 为 Group 命 名 ( 比 如 login form) 4. 带 有 这 个 新 Group 的 文 件 ( 转 化 Group 为 Symbol 之 前 文 件 必 须 要 保 存 ) 5. 在 Property Inspector 点 击 Convert to Symbol 按 钮 转 化 为 Symbol 14

你 会 注 意 到 Group 选 择 变 为 了 亮 绿 色 这 表 示 选 中 的 是 Symbol 的 一 个 实 例 你 现 在 就 有 了 一 个 名 为 login form 的 Symbol, 它 会 显 示 在 UI Library 的 Project Assets 标 签 里 ( 同 样 也 可 通 过 Quick Add 添 加 它 ) 5.2 Symbols 原 理 一 旦 点 击 Convert to Symbol,Mockups 桌 面 版 会 将 选 中 的 已 命 名 Group 添 加 到 你 BMML 文 件 旁 assets 文 件 夹 下 symbols.bmml 文 件 中 存 放 目 录 在 C:\Users\ 你 的 登 录 名 \Documents\Balsamiq Mockups\assets 理 解 Symbol 的 关 键 是,Symbol 是 存 放 在 项 目 assets 文 件 夹 BMML 文 件 中 的 已 命 名 Group 5.3 重 定 义 Symbol 属 性 创 建 了 Symbol 后, 每 次 使 用 时 常 常 需 要 做 一 些 小 调 整 假 设 你 创 建 了 一 个 Symbol 作 为 Master Page/Temple, 它 包 含 了 一 个 网 页 的 标 题 和 导 航 15

整 个 网 站 的 Page Title 具 有 相 同 大 小 的 字 体 和 位 置, 但 是 每 一 个 页 面 Title 文 本 都 有 所 不 同 同 样 道 理, 导 航 栏 标 识 某 一 个 页 面 的 当 前 地 址 也 有 所 不 同 Symbol 允 许 每 一 次 使 用 时 重 定 义 属 性 达 到 这 个 目 的 需 要 的 时 候, 请 在 Symbol 上 双 击 Enter 或 者 按 快 捷 键 F2 进 入 内 部 16

这 很 像 编 辑 Group 内 容, 但 你 会 注 意 到 一 个 提 示, 是 否 真 的 需 要 重 新 定 义 Symbol 的 属 性 如 同 编 辑 Group 一 样, 你 可 以 随 意 调 整 Symbols 里 面 每 一 个 控 件 超 过 Symbol 属 性 的 操 作 不 被 允 许, 比 如 添 加 删 除 或 者 群 组 控 件 如 果 做 了 误 操 作, 你 可 以 一 直 撤 销 返 回 如 果 只 想 撤 销 Pos. & Size 恢 复 为 Symbol 默 认 数 值, 可 以 点 击 Property Inspector 中 (Pos. & Size 右 边 ) 绿 色 的 x icon 通 过 Property Inspector 中 (Symbol 一 栏 最 右 边 ) 的 x icon, 也 可 以 一 次 性 撤 销 全 部 操 作 (Pos. & Size 和 内 容 ), 恢 复 为 Symbol 实 例 17

5.4 编 辑 Symbol 源 文 件 重 复 使 用 Symbol 的 主 要 优 点 是, 一 旦 需 要 做 调 整, 只 是 编 辑 一 个 地 方, 就 会 更 新 所 有 Symbol 的 实 例 编 辑 Symbol 源 文 件, 如 同 编 辑 Group 只 需 要 打 开 BMML 文 件 包 含 Symbol, 然 后 编 辑 就 可 以 了 保 存 你 的 更 新, 回 到 Mockups 中 使 用 Symbol, 就 会 注 意 到 变 动 已 经 生 效 了, 就 这 样 而 已 程 序 提 供 2 种 快 捷 方 式 帮 助 你 打 开 Symbol 源 文 件 以 便 于 编 辑 1. 你 可 以 选 中 一 个 Symbol 实 例, 在 Property Inspector 点 击 Edit Source 18

2. 你 可 以 进 入 一 个 Symbol 实 例, 然 后 点 击 如 下 图 的 Edit 按 钮 5.5 Symbol 库 Symbol Library 是 Symbol 集 合 你 可 以 创 建 Symbol Library 共 享 控 件 给 你 的 团 队, 或 者 通 过 社 区 Mockups To Go 分 享 它 们 创 建 一 个 Symbol Library, 必 须 创 建 一 个 BMML 文 件 以 及 一 些 Group( 每 一 个 是 一 个 Symbol), 并 且 Group 有 各 自 的 名 字 只 要 有 BMML 文 件 存 到 asset 文 件 夹, 其 中 的 Group 就 会 转 化 为 在 这 个 项 目 任 何 Mockup 中 都 可 以 使 用 的 Symbol 这 里 还 有 一 个 方 式 可 以 在 Mockups 中 创 建 Symbol: 创 建 一 个 没 有 Group 的 Mockup 到 assets 文 件 夹 Mockups 把 将 整 个 Mockup 作 为 一 个 Symbol, 名 称 跟 随 Mockup 的 文 件 名 称 6 全 屏 演 示 当 需 要 为 其 他 相 关 人 士 演 示 你 的 手 绘 式 原 型 时,Mockups 内 置 了 全 屏 演 示 模 式 点 击 位 于 Mockup 右 上 角 的 全 屏 Icon, 或 者 选 择 View 菜 单 的 Full Screen Presentation 选 项, 以 及 按 下 Ctrl + F 都 可 以 进 入 全 屏 演 示 模 式 你 还 会 看 到 一 个 蓝 色 的 大 箭 头 光 标 为 了 尽 可 能 不 阻 挡 Mockup, 箭 头 会 始 终 朝 向 屏 幕 中 心 位 置 在 你 屏 幕 右 下 角 可 以 看 到 三 个 小 按 钮 它 们 会 在 几 秒 钟 后 渐 变 消 失, 但 是 你 可 以 把 鼠 标 移 到 右 下 角, 让 它 们 回 来 19

第 一 个 开 关 控 制 是 否 显 示 链 接 提 示 和 大 箭 头 指 针 如 果 觉 得 大 箭 头 有 些 干 扰, 或 者 请 用 户 在 演 示 模 式 测 试 一 个 新 UI, 不 希 望 提 示 他 们 点 击 哪 里 时, 就 可 以 关 闭 它 们 第 二 个 开 关 控 制 是 否 显 示 Mackup 元 素, 比 如 Sticky Notes( 便 签 ) Arrows( 箭 头 ) 和 Callouts( 编 号 ) ( 这 类 控 件 位 于 UI Library 的 Markup 下 ) 当 你 仅 想 查 看 UI, 不 想 看 到 周 围 包 围 的 注 释 元 素 的 时 候, 这 非 常 有 用 第 三 个 按 钮 可 以 离 开 全 屏 模 式, 返 回 当 前 查 看 mockup 的 编 辑 窗 口 退 出 全 屏 演 示 模 式, 仅 需 要 按 ESC 键 7 BalsamiqMockups.cfg 配 置 文 件 Balsamiq 桌 面 版 允 许 通 过 BalsamiqMockups.cfg 的 XML 文 件 做 一 些 定 制 化 你 可 以 在 文 本 编 辑 器 创 建 它 ( 也 可 以 使 用 这 个 样 本 BalsamiqMockups.cfg 作 为 开 始 ), 然 后 保 存 在 下 面 的 位 置 : Windows XP: C:\DocumentsandSettings\<username>\Application Data\BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local Store On Windows Vista: C:\Users\<yourusername>\AppData\Roaming\BalsamiqMockupsForDesktop.EDE15CF69E11F7F7 D45B5430C7D37CC6C3545E3C.1\Local Store On Windows 7: C:\DocumentsandSettings\<yourusername>\AppData\Roaming\BalsamiqMockupsForDesktop.ED E15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local Store 配 置 文 件 看 起 来 就 像 这 样 : <config> <fontface>architect Small Block</fontFace> <rememberwindowsize>false</rememberwindowsize> <usecookies>false</usecookies> <documentspath>c:\documents And Settings\Administrator\Desktop </documentspath> <snappingenabled>false</snappingenabled> <selectioncolor>ff0000</selectioncolor> <transparentbackground>true</transparentbackground> </config> 20

fontface 标 签, 允 许 指 定 一 个 你 计 算 机 上 字 体 名 称 来 代 替 默 认 的 Comic Sans MS 设 置 rememberwindowsize 标 签 的 值 为 false, 如 果 你 希 望 Mockups 不 要 记 住 程 序 窗 口 的 大 小 和 位 置 ( 一 些 显 卡 驱 动 不 能 正 常 播 放 Adobe AIR,Mockups 也 不 能 启 动, 除 非 你 设 置 标 签 值 为 false) 设 置 usecookies 标 签 的 值 为 false, 如 果 你 希 望 Mockups 不 要 设 置 任 何 个 人 参 数 设 置 在 当 前 计 算 机 ( 参 数 设 置 包 括 show UI Library Show Notebook 等 等 ) 如 果 你 不 想 使 用 传 统 My Documents 文 件 夹 ( 常 见 原 因 是 它 在 一 个 远 程 服 务 器, 不 是 随 时 连 接 的 ) 来 共 享 Mockups 数 据, 你 可 以 设 置 documentspath 路 径 到 你 指 定 的 文 件 夹 在 跨 项 目 分 享 Symbol 时 也 非 常 有 用 设 置 snappingenabled 为 flase, 如 果 你 希 望 关 闭 拖 动 控 件 时 的 自 动 辅 助 对 齐 设 置 selectioncolor, 如 果 你 想 改 变 程 序 当 前 选 项 的 颜 色 设 置 transparentbackground 的 值 为 true, 如 果 你 想 你 的 PNG 输 出 背 景 颜 色 为 透 明, 替 代 默 认 的 白 色 21