《AxureRP9网站与App原型设计》教学教案—05使用Axure变量制作丰富的交互效果.docxVIP

第5章 使用Axure变量制作丰富的交互效果 课时内容 使用Axure变量制作丰富的交互效果 课时 4 教学目标 理解全局变量、局部变量，掌握变量值在页面间传递，学会制作简易计算器 教学重点 变量值在页面间传递 教学难点 变量值在页面间传递 教学设计 1.教学思路：通过实例引入变量的概念；通过多媒体演示和实机操讲解变量值在页面间传递的使用；通过实战深入理解Axure变量。 2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件 教学内容 Auxre RP 8原型设计工具里提供全局变量和局部变量，在原型设计过程中，这两种变量非常实用，使用它们可以制作出更加丰富的交互效果，比如在制作原型过程中，遇到需要条件判断或者页面间进行参数传递时，使用变量即可轻松解决问题，同时丰富原型的交互效果。 用变量可实现登录页面和首页的参数传递 5.1 全局变量和局部变量的使用 变量用于存储数据、传递数据以及条件判断，在登录网站的时候，用户登录成功后网站会把用户名传递下一个页面显示，这就是页面间数据的传递，即从一个页面向另一个页面传递变量值。如果需要在IE浏览器里显示原型，推荐使用25个或更少的变量。 全局变量：在所有页面里都可以使用，但是全局变量的值也很容易被修改掉，因为所有页面都可以使用全局变量，也就有权限修改全局变量值，所以在使用的过程中需要注意。 局部变量：只供某个局部区域使用，比如在某个触发事件的某个动作中使用，其他触发事件就不可以使用此变量。 变量设置规则：变量名必须是字母或者是数字，并以字母开头，需要少于25个字符，且不能包含空格，Axure会默认初始化一个“OnLoadVariable”变量。 单击项目菜单项的全局变量命令里，打开“全局变量”对话框，在“全局变量”对话框中可以新增或编辑全局变量，新增一个全局变量“count”，单击“+添加”链接，可以新增变量，变量值默认为空，也可以为其赋值，如让“count”等于0。 新增全局变量 除了单击“添加”链接新增变量，还可以可以单击“↑上移”或“↓下移”链接调整变量的前后关系以及单击“×删除”链接删除变量，要记住变量名必须是字母数字，并以字母开头，少于25个字符，且不能包含空格。 局部变量应用在某个交互效果的设计过程中，比如单击页面载入时触发事件。在添加动作面板单击“设置文本”选项，勾选“焦点元件”复选项，在设置动作面板单击fx图标。 设置文本动作 单击fx图标后，会弹出编辑文本对话框，单击“添加局部变量”链接，就可以新增一个局部变量，还可以对局部变量重新命名和赋值，此局部变量只在给文本赋值的时候起作用，其他交互动作无法访问该局部变量。 新增局部变量 局部变量赋值的方式有很多，可以通过元件文字、选中状态值、选中项值、变量值、焦点元件上的文字、元件的方式赋值。局部变量的变量名也必须是字母和数字，且不包含空格。 5.2 变量值在页面间传递 变量的主要作用，就是在页面间传递变量值，在登录淘宝或者其他网站的时候，输入用户名和密码，校验成功后，会跳转到一个新的页面，在新的页面里经常会看到“欢迎xxx”这样的文字；在搜索框进行搜索的时候，输入搜索条件，当单击搜索按钮跳转到下一个页面的时候，同样会把搜索条件传递过去，这些都是真实软件的交互效果。利用变量的添加，可以实现上面两个场景的交互效果，给用户一种真实软件操作的感受，将用户带入到真实软件使用场景。 实战演练5.2.1 登录表单和首页 实战演练 （1）把Page1页面重新命名为“登录”，拖曳一个“矩形1”元件到工作区域，将其宽度设置为300，高度设置为260，填充灰色（#CCCCCC）背景。 登录表单背景 （2）拖曳一个“文本标签”元件到工作区域，将其重新命名为“用户名”，字号设置为16号；拖曳一个“文本框”元件到工作区域，将其作为用户名的输入框，把它的标签命名为“name”。 用户名输入框 （3）拖曳一个“文本标签”元件到工作区域，将其重新命名为“密码”，字号设置为16号；拖曳一个“文本框”元件到工作区域，将其作为密码的输入框，把它的标签命名为“password”；拖曳一个“按钮”元件到工作区域，将其宽度设置为200，高度设置为30，把它的文本内容重新命名为“登录”。 密码输入框和登录按钮 （4）新建页面将其命名为“首页”，拖曳一个“矩形1”元件到工作区域，用于显示登录后传递过来的用户命名和密码，命名其标签为“content”。 首页 实战演练 5.2.2新增变量和赋值 实战演练 （1）需要新增两个全局变量，用来保存输入的用户名和密码，单击“项目”菜单项，在弹出的下拉列表中选择全局变量命令 ，在弹出的对话框中新增2个全局变量，分别命名为“userName”和“pwd”。 新增全局变量 （2）进入登录页面，选中登录按钮，为其添加鼠标