搜索
原文地址：核心训练1小时完成6步教程Juno_M翻译，感谢阅读原文地址：翻译，感谢阅读2目录1开始_______________________________________________________________________32页面操作___________________________________________________________________63部件与母版_________________________________________________________________94创建交互动作_______________________________________________________________125动态面板介绍_______________________________________________________________166条件，值，以及变量_________________________________________________________19原文地址：翻译，感谢阅读3核心训练#1：开始创建一个新文件1：新建一个蓝色的按钮拖拽一个圆角矩形编辑内容为“下一页”设置颜色填充为蓝色将圆角矩形部件从部件窗口中拖拽到设计区域选中圆角矩形部件，将部件文本内容编辑为“下一页”选中圆角矩形部件，在工具栏中的将填充颜色设置为蓝色2：添加链接点击“创建链接…”选择Page1页面点击预览选中圆角矩形部件，点击交互选项卡中的“创建链接”选项在链接属性对话框中，选择Page1点击工具栏中的预览按钮，测试你所创建的链接原文地址：翻译，感谢阅读43：发布到AxureShare云服务器点击AxShare图标创建一个账号点击发布点击工具栏中AxShare图标键入已创建的账户邮箱和密码，并勾选同意条款点击发布按钮，获取分享内容的网址4：生成本地原型文件点击发布图标点击生成原型文件点击生成点击工具栏中发布图标选择“生成原型文件…”点击生成按钮注：使用Chrome浏览器查看本地文件需要安装相关插件原文地址：翻译，感谢阅读5良好的开端！你已经完成AxureRP原型制作学习的第一步现在你可以……-从部件窗口中添加部件-使用工具栏中对部件样式进行调整-在交互选项卡中添加链接-生成一个交互原型原文地址：翻译，感谢阅读6核心训练#2：页面操作创建一个新文件1：制定站点地图将“Page3”页面上移右键删除“Page2”页面新增一个页面重命名页面点击并拖动“Page3”页面至“Page2”页面的右上方在站点地图中右键选择Page2页面，并选择[删除]选择“Page3”页面并右键点击，选择[新增子页面]重命名“NewPage1”为“LastPage”。两次单击“Page2”页面，将其重命名为“Page3”2：显示网格与创建辅助线打开LastPage页面切换网格创建辅助线选择预设辅助线点击确定双击站点地图中的“LastPage”。这样会在设计区域打开一个新的标签页。在设计区域右键点击，选择[网格和辅助线显示网格]在设计区域再次右键点击，选择[网格和辅助线创建辅助线]选择“960网格：12列”选项点击“确定”按钮，创建辅助线原文地址：翻译，感谢阅读73：添加单个页面辅助线从标尺处拖拽页面辅助线拖拽一个图片部件调整图片部件大小点击并拖拽设计区域顶端的标尺，创建一条Y坐标为35的页面辅助线。按住Ctrl键（Mac系统中的Cmd键）同时拖拽将会生成一条全局辅助线。从部件面板中拖拽一个图片部件，将其左边对齐到X坐标90的辅助线，顶部对齐到Y坐标35的辅助线通过拖拽图片右侧的大小控制点，将图片右边对齐到X坐标230的辅助线4：页面居中选择页面样式选项卡在页面属性窗口中选择页面样式选项卡页面居中对齐在页面对齐方式中选择中心对齐按钮，使页面在生成的原型中居中对齐原文地址：翻译，感谢阅读85：变更所有页面背景色打开页面样式编辑器通过点击页面样式编辑按钮来变更所有页面样式选择颜色在页面样式编辑器中，选择背景色点击确定按钮点击确定按钮更换背景色预览原型预览原型。站点地图的变更可以在原型中的站点地图得到体现。请注意随着我们更改了页面编辑器中的默认值，所有页面的背景色也发生了变化。图片部件在LastPage页面中显示。做的很好！你已经能像一个专业人士一样管理页面了现在你可以…-在站点地图中新增，删除，移动页面-使用网格和辅助线来设计部件布局-在页面样式标签中调整页面的版式-使用页面样式编辑器来变更所有页面的样式原文地址：翻译，感谢阅读9核心训练#3：部件与母版创建一个新文件1：新建一个蓝色的圆角矩形并设置鼠标悬停样式添加一个圆角矩形打开设置交互样式对话框设置粗体和填充颜色将圆角矩形部件从部件窗口中拖拽到设计区域在属性选项卡中选择鼠标悬停勾选粗体和填充颜色，选择灰色为填充颜色，点击确定2：复制和排列圆角矩形拖拽复制选中所有部件居中并横向分布编辑圆角矩形上的文本按住Ctrl键同时拖拽复制部件。如果使用Mac机，按住Option键同时拖拽复制部件，重复三次，共生成4个部件按住鼠标左键同时拖拽，选择所有圆角矩形选中所有圆角矩形后，点击工具栏中的上下居中按钮，再点击横向分布按钮将每个按钮的名称修改为图片中所示的名称，他们将匹配站点地图中的页面原文地址：翻译，感谢阅读103：将圆角矩形转换为母版选中圆角矩形转换为母版命名母版选择行为点击继续点击并拖拽，选择所有四个圆角矩形右键点击四个选中的圆角矩形，并选择[转换为母版]将母版命名为“NavigationHeader”选择“锁定到模板中的位置”单选按钮点击继续按钮来创建母版4：将母版放置到每一个页面上打开Page1页面将母版拖拽到页面重复双击站点地图中的“Page1”页面，将其在设计区域中打开从母版窗口内拖拽该母版，在“Page1”的设计区域内释放打开“Page2”页面和“Page3”页面，将母版放置到这两个页面上原文地址：翻译，感谢阅读115：给母版中的圆角矩形添加链接双击打开母版选择Home圆角矩形点击创建链接选择Home页面重复通过双击，打开“NavigationHeader”母版选择母版中的Home圆角矩形在交互选项卡中点击创建链接在下拉列表中选择Home页面重复2-4步，将每一个圆角矩形链接到对应的页面预览原型预览原型。将鼠标移动到圆角矩形部件上，将能够看到鼠标悬停的样式。点击圆角矩形将会跳转到对应的页面。请注意在母版中添加一次链接，效果将会应用到所有的页面。太棒了！母版编辑一次，所有地方都会发生变化现在你可以…-编辑部件鼠标悬停时的样式-将部件转换为母版-将母版放置在任何位置，或固定在页面某处原文地址：翻译，感谢阅读12核心训练#4：创建交互动作创建一个新文件1：添加一个圆角矩形和两个文本框添加一个圆角矩形，两个文本框编辑圆角矩形上显示的文字命名圆角矩形编辑提示文本命名文本框拖拽一个圆角矩形部件和两个文本框至设计区域将圆角矩形上显示的文字编辑为“SwapFocus”选中圆角矩形，在部件交互和注释窗口中，将其名称设置为“Button1”选中第一个文本框，在属性选项卡中，将提示文字编辑为“TextField1”将文本框的命名为“TextField1”2：将第二个文本框禁用编辑提示文字将第二个文本框禁用命名文本框将第二个文本框部件提示文字编辑为“TextField2”在属性选项卡中，勾选“禁用”选中第二个文本框，将其命名为“TextField2”原文地址：翻译，感谢阅读133：将第一个文本框设置为不可点击选中圆角矩形编辑鼠标点击事件添加禁用动作指定TextField1不要确定点击选择“SwapFocus”部件双击交互选项卡中的“鼠标单击时”选择最左列的“禁用”动作勾选最右列的TextField1复选框我们将会在下一步添加一个相同的用例4：使第二个文本框可用为部件添加可用动作指定TextField2不要点击确定在同一个用例中，添加另一个“启用”的动作勾选指定TextField2前的复选框用例还未完全完成，下一步，我们将要添加的第三个动作原文地址：翻译，感谢阅读145：设置第二个文本框获得焦点设置获得焦点动作指定TextField2仔细检查动作点击确定按钮在同一个用例中再添加一个“获得焦点时”的动作勾选TextField2前的复选框确定所有的动作和上图准确一致点击确定按钮，确认所有设置6：设置当页面载入时，TextField1获得焦点添加一个页面载入时的用例设置获得焦点动作指定TextField1点击确定按钮双击页面交互选项卡中的“页面载入时”选择最左列的“获得焦点时”动作勾选最右列的TextField1复选框点击确定按钮，确认所有设置原文地址：翻译，感谢阅读15预览原型预览原型。当页面载入时，第一个文本框已经获得了焦点光标。点击SwapFocus按钮，第一个文本框被禁用，同时第二个文本框获得焦点。刷新页面后，一切将被还原。令人印象深刻！学会了交互相关的知识后，现在你可以…-添加事件用例-使用用例编辑器来添加用例和确认动作-添加部件和页面的交互动作原文地址：翻译，感谢阅读16核心训练#5：动态面板介绍创建一个新文件1：添加一个图片和圆角矩形下载“AxureBikePics.zip”到你的电脑并解压缩文件。你也可以使用你的图片文件。下载&解压缩添加部件选择图片点击打开编辑圆角矩形上的文字下载“AxureBikePics.zip”到你的电脑并解压缩文件如图所示，在设计区域放置一个图片部件和一个圆角矩形双击图片部件，选择第一个图片“BlueBike1”点击“打开”，使用图片点击“是”自动调整图片大小将圆角矩形上的文字编辑为“Next”2：转换为动态面板并添加状态转换为动态面板命名动态面板复制第一个状态为每一个状态标签命名右键点击图片部件，选择[转换为动态面板]将新的动态面板命名为“DynamicPanel1”选择状态1，并点击部件管理中的复制状态图标两次两次单击将三个状态粉笔命名为“BikeLeft”,“BikeMiddle”,和“BikeRight”原文地址：翻译，感谢阅读173：为每一个状态添加一个图片打开“BikeMiddle”状态导入图片点击打开在“BikeRight”状态重复双击动态面板管理器中的“BikeMiddle”状态，将其在设计区域打开双击图片部件，导入第二张图片点击“打开”使用图片点击“是”自动调整图片大小“BikeRight”状态中重复1-3步骤，将第三张图片放置其中4：设置点击Next按钮时进行下一个状态的切换选择“Next”按钮添加一个鼠标点击用例添加动作指定和对应选项点击确定选择Home页面上的“Next”圆角矩形部件双击鼠标点击时事件，为圆角矩形添加一个