Axure RP 核心训练（翻译）.pdf
原文地址： 1 Axure RP 核心训练 1 小时完成 6 步教程 Juno_M 翻译，感谢阅读 原文地址： Juno_M 翻译，感谢阅读 2 目录 1 开始 _ 3 2 页面操作 _ 6 3 部件与母版 _ 9 4 创建交互动作 _ 12 5 动态面板介绍 _ 16 6 条件，值，以及变量 _ 19 原文地址： Juno_M 翻译，感谢阅读 3 核心训练#1：开始 创建一个新文件 1：新建一个蓝色的按钮 拖拽一个圆角矩形 编辑内容为“下一页” 设置颜色填充为蓝色 将圆角矩形部件从部件窗口 中拖拽到设计区域 选中圆角矩形部件，将部件 文本内容编辑为“下一页” 选中圆角矩形部件，在工具栏 中的将填充颜色设置为蓝色 2：添加链接 点击“创建链接” 选择 Page 1 页面 点击预览 选中圆角矩形部件，点击交 互选项卡中的“创建链接” 选项 在链接属性对话框中，选择 Page 1 点击工具栏中的预览按钮， 测试你所创建的链接 原文地址： Juno_M 翻译，感谢阅读 4 3：发布到 Axure Share 云服务器 点击 AxShare 图标 创建一个账号 点击发布 点击工具栏中 AxShare 图标 键入已创建的账户邮箱和密 码，并勾选同意条款 点击发布按钮，获取分享内 容的网址 4：生成本地原型文件 点击发布图标 点击生成原型文件 点击生成 点击工具栏中发布图标 选择“生成原型文件” 点击生成按钮 注： 使用 Chrome 浏览器查看本地 文件需要安装相关插件 原文地址： Juno_M 翻译，感谢阅读 5 良好的开端！ 你已经完成 Axure RP 原型制作学习的第一步 现在你可以 -从部件窗口中添加部件 -使用工具栏中对部件样式进行调整 -在交互选项卡中添加链接 -生成一个交互原型 原文地址： Juno_M 翻译，感谢阅读 6 核心训练#2：页面操作 创建一个新文件 1：制定站点地图 将“Page 3”页面 上移 右键删除“Page 2” 页面 新增一个页面 重命名页面 点击并拖动“Page 3”页面至 “Page 2”页面的右上方 在站点地图中右键选择 Page 2 页 面，并选择 删除 选择“Page 3”页面并右键点 击，选择 新增 > 子页面 重命名“New Page 1”为 “Last Page”。 两次单击“Page 2”页面，将其 重命名为“Page 3” 2：显示网格与创建辅助线 打开 Last Page 页面 切换网格 创建辅助 线 选择预设 辅助线 点击确定 双击站点地图中的“Last Page”。 这样会在设计区域打开一 个新的标签页。 在设计区域右键点击，选 择 网格和辅助线 > 显 示网格 在设计区域再次右键点 击，选择 网格和辅助 线 > 创建辅助线 选择“960 网格：12 列”选项 点击“确定”按钮，创建 辅助线 原文地址： Juno_M 翻译，感谢阅读 7 3：添加单个页面辅助线 从标尺处拖拽页面辅助 线 拖拽一个图片部件 调整图片部件大小 点击并拖拽设计区域顶端的标尺，创建一 条 Y 坐标为 35 的页面辅助线。 按住 Ctrl 键（Mac 系统中的 Cmd 键）同 时拖拽将会生成一条全局辅助线。 从部件面板中拖拽一个图片部件，将其左 边对齐到 X 坐标 90 的辅助线，顶部对齐 到 Y 坐标 35 的辅助线 通过拖拽图片右侧的大小控制点，将图片 右边对齐到 X 坐标 230 的辅助线 4：页面居中 选择页面样式选项卡 在页面属性窗口中选择页面样式选项卡 页面居中对齐 在页面对齐方式中选择中心对齐按钮， 使 页面在生成的原型中居中对齐 原文地址： Juno_M 翻译，感谢阅读 8 5：变更所有页面背景色 打开页面样式编辑器 通过点击页面样式编辑按钮 来变更所有页面样式 选择颜色 在页面样式编辑器中，选择 背景色 点击确定按钮 点击确定按钮更换背景色 预览原型 预览原型。 站点地图的变更可以在原型中的站点地图得到体现。 请注意随着我们更改了页面编辑器中 的默认值，所有页面的背景色也发生了变化。图片部件在 Last Page 页面中显示。 做的很好！ 你已经能像一个专业人士一样管理页面了 现在你可以 -在站点地图中新增，删除，移动页面 -使用网格和辅助线来设计部件布局 -在页面样式标签中调整页面的版式 -使用页面样式编辑器来变更所有页面的样式 原文地址： Juno_M 翻译，感谢阅读 9 核心训练#3：部件与母版 创建一个新文件 1：新建一个蓝色的圆角矩形并设置鼠标悬停样式 添加一个圆角矩形 打开设置交互样式对话框 设置粗体和填充颜色 将圆角矩形部件从部件窗口 中拖拽到设计区域 在属性选项卡中选择鼠标悬 停 勾选粗体和填充颜色，选择灰 色为填充颜色，点击确定 2：复制和排列圆角矩形 拖拽复制 选中所有部件 居中并横向分布 编辑圆角矩形上 的文本 按住 Ctrl 键同时拖拽复制部件。 如果使 用 Mac 机， 按住 Option 键同时拖拽复 制部件，重复三次，共生成 4 个部件 按住鼠标左键同时拖拽，选择 所有圆角矩形 选中所有圆角矩形后，点击工具 栏中的上下居中按钮，再点击横 向分布按钮 将每个按钮的名称修改为图片 中所示的名称，他们将匹配站 点地图中的页面 原文地址： Juno_M 翻译，感谢阅读 10 3：将圆角矩形转换为母版 选中圆角 矩形 转换为母 版 命名母版 选择行为 点击继续 点击并拖拽，选择所有四 个圆角矩形 右键点击四个选中的圆角 矩形，并选择转换为母 版 将母版命名为 “NavigationHeader” 选择“锁定到模板中的位 置”单选按钮 点击继续按钮来创建母版 4：将母版放置到每一个页面上 打开 Page 1 页面 将母版拖拽到页面 重复 双击站点地图中的“Page 1”页面，将其在设计区域中 打开 从母版窗口内拖拽该母版，在 “Page 1”的设计区域内释 放 打开“Page 2”页面和 “Page 3” 页面，将母版放 置到这两个页面上 原文地址： Juno_M 翻译，感谢阅读 11 5：给母版中的圆角矩形添加链接 双击打开 母版 选择 Home 圆 角矩形 点击创建 链接 选择 Home 页 面 重复 通过双击，打开 “NavigationHeader” 母版 选择母版中的 Home 圆 角矩形 在交互选项卡中点击创建 链接 在下拉列表中选择 Home 页面 重复 2-4 步，将每一个 圆角矩形链接到对应的页 面 预览原型 预览原型。将鼠标移动到圆角矩形部件上，将能够看到鼠标悬停的样式。点击圆角矩形将会跳转到对 应的页面。请注意在母版中添加一次链接，效果将会应用到所有的页面。 太棒了！ 母版编辑一次，所有地方都会发生变化 现在你可以 -编辑部件鼠标悬停时的样式 -将部件转换为母版 -将母版放置在任何位置，或固定在页面某处 原文地址： Juno_M 翻译，感谢阅读 12 核心训练#4：创建交互动作 创建一个新文件 1：添加一个圆角矩形和两个文本框 添加一个圆 角矩形，两 个文本框 编辑圆角矩 形上显示的 文字 命名圆角矩 形 编辑提示文 本 命名文本框 拖拽一个圆角矩形部件和 两个文本框至设计区域 将圆角矩形上显示的文字 编辑为“Swap Focus” 选中圆角矩形，在部件交 互和注释窗口中，将其名 称设置为“Button1” 选中第一个文本框，在属 性选项卡中，将提示文字 编辑为“Text Field 1” 将文本框的命名为 “TextField1” 2：将第二个文本框禁用 编辑提示文字 将第二个文本框禁用 命名文本框 将第二个文本框部件提示文 字编辑为“Text Field 2” 在属性选项卡中，勾选“禁 用” 选中第二个文本框，将其命 名为“TextField2” 原文地址： Juno_M 翻译，感谢阅读 13 3：将第一个文本框设置为不可点击 选中圆角矩 形 编辑鼠标点 击事件 添加禁用动 作 指定 TextField1 不要确定 点击选择“Swap Focus”部件 双击交互选项卡中的“鼠 标单击时” 选择最左列的“禁用”动 作 勾选最右列的 Text Field 1 复选框 我们将会在下一步添加一 个相同的用例 4：使第二个文本框可用 为部件添加可用动作 指定 TextField2 不要点击确定 在同一个用例中，添加另一 个“启用”的动作 勾选指定TextField2 前的复 选框 用例还未完全完成，下一步， 我们将要添加的第三个动作 原文地址： Juno_M 翻译，感谢阅读 14 5：设置第二个文本框获得焦点 设置获得焦点动作 指定 TextField2 仔细检查动作 点击确定按钮 在同一个用例中再添加一个“获 得焦点时”的动作 勾选 TextField2 前的复选框 确定所有的动作和上图准确一致 点击确定按钮，确认所有设置 6：设置当页面载入时，Text Field 1 获得焦点 添加一个页面载入 时的用例 设置获得焦点动 作 指定 TextField1 点击确定按钮 双击页面交互选项卡中的“页面 载入时” 选择最左列的“获得焦点时”动 作 勾选最右列的 TextField1 复选 框 点击确定按钮，确认所有设置 原文地址： Juno_M 翻译，感谢阅读 15 预览原型 预览原型。当页面载入时，第一个文本框已经获得了焦点光标。点击 Swap Focus 按钮，第一个文本 框被禁用，同时第二个文本框获得焦点。刷新页面后，一切将被还原。 令人印象深刻！ 学会了交互相关的知识后， 现在你可以 -添加事件用例 -使用用例编辑器来添加用例和确认动作 -添加部件和页面的交互动作 原文地址： Juno_M 翻译，感谢阅读 16 核心训练#5：动态面板介绍 创建一个新文件 1：添加一个图片和圆角矩形 下载“AxureBikePics.zip”到你的电脑并解压缩文件。你也可以使用你的图片文件。 下载&解压 缩 添加部件 选择图片 点击打开 编辑圆角矩 形上的文字 下载 “AxureBikePics.zip”到 你的电脑并解压缩文件 如图所示，在设计区域放 置一个图片部件和一个圆 角矩形 双击图片部件，选择第一 个图片“BlueBike1” 点击“打开”，使用图片 点击“是”自动调整图片 大小 将圆角矩形上的文字编辑 为“Next” 2：转换为动态面板并添加状态 转换为动态面板 命名动态面板 复制第一个状态 为每一个状态标 签命名 右键点击图片部件，选择转换为 动态面板 将新的动态面板命名为 “DynamicPanel1” 选择状态 1，并点击部件管理中 的复制状态图标两次 两次单击将三个状态粉笔命名为 “BikeLeft”, “BikeMiddle”, 和“BikeRight” 原文地址： Juno_M 翻译，感谢阅读 17 3：为每一个状态添加一个图片 打开 “BikeMiddle” 状态 导入图片 点击打开 在“BikeRight” 状态重复 双击动态面板管理器中的 “BikeMiddle”状态，将其在 设计区域打开 双击图片部件，导入第二张图片 点击“打开”使用图片 点击“是”自动调整图片大小 “BikeRight”状态中重复 1-3 步骤，将第三张图片放置其中 4：设置点击 Next 按钮时进行下一个状态的切换 选择“Next” 按钮 添加一个鼠 标点击用例 添加动作 指定和对应 选项 点击确定 选择 Home 页面上的 “Next”圆角矩形部件 双击鼠标点击时事件，为 圆角矩形添加一个用例 在最左列中选择“设置面 板状态” 选择 DynamicPanel1， 为动作进行与图片一致的 设置 点击确定按钮添加动作 原文地址： Juno_M 翻译，感谢阅读 18 预览原型 预览原型。通过点击 Next 按钮进行图片的轮播。当出现第三张图片时，它将会回滚到第一张图片。 极好！ 现在你已经熟悉了动态面板， 现在你可以 -创建多个状态的动态面板 -打开并编辑动态面板状态 -为当前的动态面板状态添加交互动作 原文地址： Juno_M 翻译，感谢阅读 19 核心训练#6：条件，值，以及变量 创建一个新文件 1：添加一个图片和圆角矩形 添加文本框和圆角 矩形 命名文本框 编辑圆角矩形的 显示文字和名称 为圆角矩形编辑 鼠标点击时事件 在设计区域放置一个文本框部件 和一个圆角矩形部件 将文本框命名为 “UserNameTextField” 将圆角矩形上的文字编辑为 “Login”，将其命名为 “LoginButton” 选中 Login 圆角矩形，双击鼠 标点击时事件，打开用例编辑器 2：添加一个条件，保证文本框不能为空 点击新增条件选项 设置条件值 点击确定 点击用例说明字段右侧“新 增条件”选项，打开条件生 成器 将每个字段的值进行匹配： “部件值长度” “UserNameTextField” “” 最后一个字段空白 点击确定返回用例编辑器 原文地址： Juno_M 翻译，感谢阅读 20 3：文本框的变量值 添加设置变量值动 作 选择 OnLoadVariable 变量 设置 OnLoadVariable 变量 不要点击确定 在用例编辑器中，添加“设置变 量值”动作 勾选 OnLoadVariable 变量值前 的复选框 将每一个字段值进行匹配： “部件文字” “UserNameTextField” 这个用例还木有设置完成，在下 一步，我们将添加第二个动作 4：添加打开 Page 1 页面的动作 添加打开链接动作 选中 Page 1 页面 点击确定 在相同用例中添加一个“打 开链接”的动作 选择 Page 1 作为目标链接页 面 点击确定按钮，确认这个用例 中的所有设置 原文地址： Juno_M 翻译，感谢阅读 21 5：添加内容字段为空的第二个用例 添加第二个用例 添加打开链接动 作 指定Page 2页面 点击确定 选择 Login 按钮，再次双击鼠标 点击时事件，打开用例 2 的用例 编辑器 添加“打开链接”动作 选择“Page 2”作为目标链接页 面 点击确定按钮，确认该用例内全 部设置 6：在 Page 1 页面添加一个矩形 打开 Page 1 页面 添加矩形部件 命名矩形部件 添加页面载入时 用例 在站点地图内双击“Page 1”，将其在设计区域打开 在 Page 1 页面中添加一个矩形 部件 将矩形部件命名为 “WelcomeMessage” 在页面交互选项卡内，双击页面 载入时事件 原文地址： Juno_M 翻译，感谢阅读 22 7：设置当页面载入时的矩形部件的内容 添加设置文本动作 选择 WelcomeMessage 部件 点击 fx 按钮 选择“设置文本”动作 选择 WelcomeMessage 部 件 点击“fx”按钮打开编辑文本 对话框 8：设置 WelcomeMessage 部件变量 输入欢迎文字 在下拉框中选择 OnLoadVariable 变量 点击确定按钮 输入文本“Welcome, ”， 包含末尾一个逗号和一个空 格 点击“插入变量、属性、函 数或运算符”，打开下拉 框。在文本中，选择 “OnLoadVariable”变量 点击所有对话框中的确定按 钮。 原文地址： Juno_M 翻译，感谢阅读 23 预览原型 导航回到“Home”页面，然后预览原型。首先，留空文本框，然后点击 Login 按钮。因为文本框是 空白的，你将链接到 Page 2 页面。使用站点地图，回到 Home 页面，这一次，请将用户名填入空白 的文本框，然后点击 Login 按钮。你将链接到 Page 1 页面，并且看到你的名字出现在欢迎信息中。 祝贺你！ 你已经完成了核心训练。 在了解了条件、值和变量后， 现在你可以 -在用例编辑器中添加条件，并设置对应条件 -设置在页面传递中的变量值 -设置部件文字及变量 你已经完成了成为一个 Axure 大师的第一步。 为了更好地使用 Axure，请了解更多的知识。返回到训练页面探索更多内容。 原文地址： Juno_M 翻译，感谢阅读 24 下次再见 我们是 Axure 联系我们 电子邮件 邮寄地址 电话传真 社交网站 咨询 Axure Software Solutions 311 Fourth Avenue, Ste 617 San Diego, CA 92101 电话: (800) 895 - 0810 或(619) 272 - 4489 传真: (415) 651 - 9527 论坛 contactus 销售支持 Twitter sales 客户支持 Facebook support 媒体关系 Vimeo pr YouTube
