3.4　精美提交按钮

案例描述

当单击“提交”按钮时，橙色边框白色填充的按钮会变成橙色填充的按钮，然后变成圆形按钮，最后变回橙色带√的按钮，如图3-42所示。

思路分析

• ▷　为动态面板设置3个状态：白色按钮→橙色按钮→圆环进度条。
• ▷　为动态面板设置“鼠标单击时”的动作。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在左侧“元件库”面板中将“矩形1”元件拖入编辑区中，在右侧“检视：矩形”区域设置名称为submit，单击“样式”选项卡切换至“样式”面板，在“位置·尺寸”区域设置“x轴坐标”为80，“y轴坐标”为50，“宽度”为350，“高度”为120，如图3-43所示。

（3）在下方“边框”右侧单击“线宽”右侧的下三角按钮，在弹出的下拉菜单中选择第3个选项，单击“线段颜色”下三角按钮，在弹出的颜色面板中选择橙色色块（#FF6600），设置“圆角半径”为120，如图3-44所示。

（4）在“矩形1”元件上单击鼠标右键，在弹出的快捷菜单中选择“转换为动态面板”命令，如图3-45所示，将其转换为动态面板，在右侧“检视：动态面板”区域设置名称为submit。

（5）双击“submit动态面板”，弹出“面板状态管理”对话框，在“面板状态”选项组中单击两次按钮，添加两个面板状态，并分别命名为white、orange和circle，如图3-46所示。

（6）双击white选项，进入submit/white（index）编辑区，双击矩形元件，输入内容“提交”，在右侧“检视：矩形”区域设置名称为submit_btn1，单击“样式”标签切换至“样式”面板，设置“字体”为“微软雅黑”，“字体尺寸”为50，“文本颜色”为橙色（#FF6600），如图3-47所示。

（7）单击index标签切换至index编辑区，双击submit动态面板，在弹出的“面板状态管理”对话框中双击orange选项，进入submit/orange（index）编辑区，将white状态面板中的矩形复制到orange状态面板编辑区中，修改其名称为submit_btn2，“填充颜色”为橙色（#FF6600），“文本颜色”为白色，如图3-48所示。

（8）单击index标签切换至index编辑区，双击submit动态面板，弹出“面板状态管理”对话框，在“面板状态”区域双击circle选项，进入submit/circle（index）编辑区，将“矩形2”元件拖入编辑区中，在右侧“样式”面板的“位置·尺寸”区域设置“x轴坐标”为115，“y轴坐标”为0，“宽度”和“高度”均为120，如图3-49所示。

（9）在下方设置“填充颜色”为橙色（#FF6600），“圆角半径”为60，在“检视：矩形”区域设置名称为orange_circe，效果如果3-50所示。

（10）拖入“矩形1”元件到矩形上，并双击使其进入编辑状态输入符号，在右侧“样式”面板中设置“x轴坐标”为150，“y轴坐标”为33，“宽度”为50，“高度”为55，设置元件“填充颜色”为无，边框“线段颜色”为无，如图3-51所示。

（11）在工具栏中设置“字体系列”为Ravie，“字体类型”为Blod，“文本颜色”为白色，在“检视：矩形”区域设置名称为hook，并在“样式”面板中选中“隐藏”复选框隐藏hook元件，如图3-52所示。

（12）单击index标签进入index编辑区，单击“属性”标签切换至“属性”面板，在“交互”区域双击“鼠标单击时”选项，弹出“用例编辑<鼠标单击时>”对话框，如图3-53所示。

（13）在左侧“添加动作”区域选择“设置面板状态”选项，在右侧“配置动作”区域选中“当前元件”复选框，在下方设置“选择状态”为orange，“进入动画”为“逐渐”，“时间”为500毫秒，如图3-54所示。

（14）在左侧“添加动作”区域选择“等待”选项，在右侧“配置动作”区域设置“等待时间”为100毫秒，如图3-55所示。

（15）在左侧选择“设置尺寸”选项，在右侧选中“submit_btn2（矩形）”复选框，在下方设置“宽”为120，“高”为120，“锚点”为“中心”，“动画”为“缓慢进入”，“时间”为200毫秒，如图3-56所示。

（16）在左侧选择“设置面板状态”选项，在右侧选中“submit（动态面板）”复选框，设置“选择状态”为circle，“进入动画”为“逐渐”，“时间”为500毫秒，“退出动画”为“逐渐”，“时间”为500毫秒，如图3-57所示。

（17）用同样的方法设置其他动作，如图3-58所示。单击“确定”按钮返回至编辑区中。

（18）按Ctrl+S快捷键，以“3.4”为名称保存该文件，然后按F5键预览效果，如图3-59所示。