Axure网站与App原型设计课件 第5章 用Axure变量制作丰富的交互效果

第5章用Axure变量制作丰富的交互效果【目录】5.1全局变量和局部变量的使用方法5.2变量值在页面间传递5.2.1 登录表单和首页5.2.2新建变量和赋值5.2.3首页显示变量值5.2.4

检视区域介绍5.2.5

发布原型5.3实战——制作简易计算器5.3.1 计算器布局设计5.3.2数字按钮交互设计5.3.3运算按钮交互设计5.3.4

等号按钮交互设计5.4小结目录【学习目标】知识目标●理解全局变量和局部变量的含义以及使用方法。●掌握在页面之间传递变量值的方法。能力目标●可以给全局变量、局部变量赋值。●实现在页面间传递变量值及高级交互效果。素质目标●培养良好的沟通能力和表达能力。●培养获取、处理和传播信息的能力。学习目标【情景引入】AxureRP10提供了全局变量和局部变量。在设计原型的过程中，这两种变量非常实用，可以用于制作非常丰富的交互效果。在制作原型的过程中，如果需要进行条件判断或者页面间变量值传递，使用变量即可轻松实现，同时可以丰富原型的交互效果，如图5.1所示。本章案例：制作简易计算器，效果如图5.2所示。情景引入图5.1 用变量实现登录页面和首页的变量值传递图5.2 简易计算器效果5.1 全局变量和局部变量的使用方法在所有页面里都可以使用，但是全局变量的值很容易被修改，因为所有页面都可以使用全局变量，也就意味着所有页面都有权限修改全局变量值，这在使用的过程中需要注意。全局变量只供某个局部区域使用，如在某个触发事件的某个动作中使用，其他触发事件就不可以使用此变量。局部变量变量名只能包含字母或数字，不超过25个字符，且不能有空格，AxureRP10会默认初始化一个“OnLoadVariable”变量。变量设置规则5.1 全局变量和局部变量的使用方法选择“项目”菜单中的“全局变量”命令，打开“全局变量”对话框，在“全局变量”对话框中可以新建或编辑全局变量。单击“添加”按钮，新建一个全局变量“count”，变量值默认为空，可以为变量赋值，如让“count”等于0，如图5.3所示。图5.3 新建全局变量单击“上移”按钮或“下移”按钮可调整变量的前后关系，单击“删除”按钮可删除变量。要记住，变量名只能包含字母或数字，不超过25个字符，且不能有空格。5.1 全局变量和局部变量的使用方法在“添加动作”面板中选择“设置文本”选项，在“配置动作”面板的下拉列表中选择“获取焦点的元件”选项，单击按钮，如图5.4所示。图5.4 添加触发事件5.1 全局变量和局部变量的使用方法单击按钮后，会弹出“编辑文本”对话框，单击“添加局部变量”链接，可以新建一个局部变量，如图5.5所示，可以对局部变量进行重命名和赋值。此局部变量只在给文本赋值时起作用，其他交互动作无法访问该局部变量。图5.5 新建局部变量5.2 变量值在页面间传递5.2.1登录表单和首页实战演练step01把Page1页面重命名为“登录”，拖曳一个“矩形1”元件到工作区域，将其宽度设置为300，高度设置为260，填充灰色（#CCCCCC），如图5.6所示。图5.6 登录表单背景5.2 变量值在页面间传递step02拖曳一个“文本标签”元件到工作区域，将文本内容设置为“用户名”，将字号设置为16号。拖曳一个“文本框”元件到工作区域，将其作为用户名输入框，把它命名为“name”，如图5.7所示。图5.7 用户名输入框5.2 变量值在页面间传递step03拖曳一个“文本标签”元件到工作区域，将文本内容设置为“密码”，将字号设置为16号。拖曳一个“文本框”元件到工作区域，将其作为密码输入框，把它命名为“password”。拖曳一个“按钮”元件到工作区域，将其宽度设置为200，高度设置为30，把它的文本内容设置为“登录”，如图5.8所示。图5.8 密码输入框和“登录”按钮5.2 变量值在页面间传递step04新建页面并将其重命名为“首页”，拖曳一个“矩形1”元件到工作区域，用于显示登录后传递过来的用户名和密码，将其命名为“content”，如图5.9所示。图5.9 首页5.2 变量值在页面间传递5.2.2新建变量和赋值实战演练step01新建两个全局变量，用来保存输入的用户名和密码。选择“项目”菜单中的“全局变量”命令，在弹出的对话框中新建两个全局变量，将其分别命名为“userName”和“pwd”，如图5.10所示。图5.10 新建全局变量5.2 变量值在页面间传递step02进入“登录”页面，选择“登录”按钮，为其添加单击时触发事件。在“添加动作”面板中选择“设置变量值”选项，先给全局变量“userName”赋值，在“配置动作”面板的“目标”下拉列表中选择“userName”选项，单击按钮，如图5.11所示。图5.11 设置“userName”变量值5.2 变量值在页面间传递step03在“编辑文本”对话框中，把用户名输入框里的信息赋值给全局变量“userName”。新建一个局部变量，在第一个下拉列表中选择“元件文本”选项，它指的是把元件上的文字赋值给该局部变量，在第二个下拉列表中选择“name”选项，再将该局部变量插入内容编辑区域，这样就可以给全局变量“userName”赋值，如图5.12所示。图5.12 为全局变量“userName”赋值5.2 变量值在页面间传递step04用同样的方式将密码输入框里的信息保存到全局变量里。在“添加动作”面板中选择“设置变量值”选项，在“配置动作”面板的“目标”下拉列表中选择“pwd”选项，单击按钮，新建一个局部变量，选择“元件文本”选项，选择“password”选项，然后将局部变量插入内容编辑区域，如图5.13所示。图5.13 为全局变量“pwd”赋值5.2 变量值在页面间传递step05登录成功后需要跳转到首页。在“添加动作”面板中选择“打开链接”选项，在“配置动作”面板的“链接到”下拉列表中选择“首页”选项，在“打开于”下拉列表中选择“当前窗口”选项，如图5.14所示。图5.14 打开首页5.2 变量值在页面间传递5.2.3首页显示变量值实战演练step01登录成功后，原型会携带用户名和密码跳转到首页，这样首页在载入时，就会把用户名和密码显示出来。为了实现此效果，需要添加一个页面载入时的触发事件。在“添加动作”面板选择“设置文本”选项，在“配置动作”面板的“目标”下拉列表中选择“content”选项，单击按钮，如图5.15所示。图5.15 添加触发事件5.2 变量值在页面间传递step02在弹出的“编辑文本”对话框中单击“插入变量或函数...”链接，分别输入用户名“userName”以及密码“pwd”，如图5.16所示，单击“确定”按钮，这样就完成了给矩形元件的文本内容赋值的过程。图5.16 插入全局变量5.2 变量值在页面间传递5.2.4检视区域介绍检视区域由3部分组成，分别是“交互”面板、“注释”面板、“样式”面板。在“交互编辑器”对话框里可以添加一些触发事件，页面的触发事件有“窗口尺寸改变”“页面载入”“窗口滚动”等，如图5.17所示。图5.17 页面的触发事件5.2 变量值在页面间传递在“注释”面板里可以给页面添加相关注释或者说明，也可以自定义注释，如图5.18所示。图5.18 “注释”面板5.2 变量值在页面间传递在“样式”面板里可以给页面添加样式，可以设置页面的排列方式和背景色，也可以导入背景图像，设置横向对齐或垂直对齐，还可以设置背景图像是否重复，以及设置草图效果，如图5.19所示。图5.19 “样式”面板5.2 变量值在页面间传递5.2.5发布原型按“F5”键发布原型，输入用户名“kevin”，密码“111111”，单击“登录”按钮，可以看到用户名和密码都被带到了首页，如图5.20和图5.21所示。图5.20 登录页面图5.21 首页5.3 实战——制作简易计算器利用全局变量和局部变量制作一个简易的计算器，计算器要能实现加减乘除运算，如图5.22所示。图5.22 简易计算器观察简易计算器的布局，按钮按属性分为4组，分别是功能按钮、数字按钮、运算按钮和等号按钮。采用这样的分组，页面层次会很清晰，用户可以快速地找到想要的按钮。分组设计、分清层次，利用颜色对比突出差异。5.3 实战——制作简易计算器5.3.1计算器布局设计step01拖曳一个“矩形1”元件到工作区域，将其宽度设置为377，高度设置为346，在“线宽”下拉列表中选择第3个选项，将圆角半径设置为5，填充颜色设置为灰色（#DADADA），如图5.23所示。图5.23 计算器背景5.3 实战——制作简易计算器step02拖曳一个“文本框”元件到工作区域，将其宽度设置为348，高度设置为44，在“交互”面板的“提示文本”文本框中输入“0”，把文本设置为居右对齐，勾选“只读”复选框，使文本框中的内容只能通过按钮输入，将元件命名为“show”，如图5.24所示。图5.24 计算器显示框5.3 实战——制作简易计算器step03拖曳一个“矩形1”元件到工作区域，宽度设置为60，高度设置为40，圆角半径设置为5，填充背景色（#DF8045）；将文本内容设置为“退格”，将字号设置为16号，加粗，将文字颜色设置为白色（#FFFFFF）。按住“Ctrl”键，拖曳复制出两个同样的矩形元件，将其分别命名为“全清”和“清屏”，如图5.25所示。图5.25 功能按钮step04拖曳一个“按钮”元件到工作区域，将其宽度设置为60，高度设置为40，将文本内容设置为“7”，字号设置为16号，加粗。复制出10个同样的元件并修改其文本内容，将它们作为其他数字按钮，如图5.26所示。图5.26 数字按钮5.3 实战——制作简易计算器step05拖曳一个“矩形1”元件到工作区域，将其宽度设置为70，高度设置为40，圆角半径设置为5，填充背景色（#999999）；修改文本内容，利用“/”代表除法，设置其字号为20号，加粗，设置文字颜色为白色（#FFFFFF）。按住“Ctrl”键向下拖曳，复制出3个同样的按钮，分别修改其文本内容，如图5.27所示。图5.27 运算按钮step06拖曳一个“矩形1”元件到工作区域，将其宽度设置为150，高度设置为40，圆角半径设置为5，填充背景色（#009900）；将文本内容设置为“=”，字号设置为20号，加粗，将文字颜色设置为白色，如图5.28所示。图5.28 等号按钮5.3 实战——制作简易计算器5.3.2数字按钮交互设计step01本节制作的计算器的机制是两个数运算，需要把这两个数分别设置为变量“shuzi1”和“shuzi2”，默认值设置为0。设置一个变量来代表运算符号，把它命名为“yunsuan”，默认值为0，代表没有输入任何运算符号。计算器可以输入整数或者小数，需要一个变量来说明正在输入的是小数还是整数，将该变量命名为“xiaoshu”。然后设置“temp”变量和“changdu”变量，分别用于存放临时值和代表输入的长度，如图5.29所示。图5.29 新建全局变量5.3 实战——制作简易计算器step02选择数字按钮“1”，为其设置单击时的触发事件，在“组织交互”面板中单击“启用用例”按钮显示Case1，单击“添加目标”按钮弹出“条件编辑-矩形：单击”对话框。单击“添加条件”按钮，为运算设置条件，变量“yunsuan”的值等于0且“xiaoshu”的值等于0时，代表输入的“shuzi1”为整数，如图5.30所示。图5.30 添加条件（1）5.3 实战——制作简易计算器step03在“添加动作”面板中选择“设置变量值”选项，在“配置动作”面板的“目标”下拉列表中选择“shuzi1”选项，单击按钮。由于需要“shuzi1”的值每次增长10，即第一次单击1时，输入框里显示的是1，再次单击1时，输入框里变为11，所以插入表达式[[shuzi1*10+1]]，如图5.31所示。图5.31 为“shuzi1”赋值5.3 实战——制作简易计算器step04将“shuzi1”的内容显示到输入框中，在“添加动作”面板中选择“设置文本”选项，在“配置动作”面板的“目标”下拉列表中选择“show”选项，将“shuzi1”变量的值赋给它，如图5.32所示。图5.32 输入框赋值（1）5.3 实战——制作简易计算器step05为给“shuzi2”变量赋值，新建一个用例，添加一个条件，当变量“yunsuan”的值不等于0，且变量“xiaoshu”的值等于0时，代表“shuzi2”的值为整数，如图5.33所示。图5.33 添加条件（2）5.3 实战——制作简易计算器step06在“添加动作”面板中选择“设置变量值”选项，在“配置动作”面板的“目标”下拉列表中选择“shuzi2”选项，单击按钮，插入表达式“[[shuzi2*10+1]]”，将“shuzi2”的内容显示到输入框中；在“添加动作”面板中选择“设置文本”选项，在“配置动作”面板的“目标”下拉列表中选择“show”选项，将“shuzi2”变量的值赋给它，如图5.34所示。图5.34 输入框赋值（2）5.3 实战——制作简易计算器5.3.3运算按钮交互设计step01选择加号，单击“新增交互”按钮，为其添加单击时的触发事件。单击“设置变量值”将“yunsuan”变量值设置为1，代表相加操作；将“xiaoshu”变量值设置为0，代表输入整数操作，如图5.35所示。图5.35 加法运算交互5.3 实战——制作简易计算器step02复制用例，把此用例复制给其他3个运算按钮，减法的“yunsuan”变量值设置为2，乘法的“yunsuan”变量值设置为3，除法的“yunsuan”变量值设置为4，如图5.36所示。图5.36 其他运算交互5.3 实战——制作简易计算器5.3.4等号按钮交互设计step01选择数字按钮“1”，复制其用例给数字按钮“2”，在数字按钮“1”用例的基础上进行修改，修改表达式为“[[