没有合适的资源?快使用搜索试试~ 我知道了~
《AxureRP9网站与App原型设计》教学教案-05使用Axure变量制作丰富的交互效果.docx
0 下载量 48 浏览量
2022-12-18
01:15:36
上传
评论
收藏 734KB DOCX 举报
温馨提示
试读
21页
《AxureRP9网站与App原型设计》教学教案-05使用Axure变量制作丰富的交互效果.docx
资源推荐
资源详情
资源评论
第5章使用Axure变量制作丰富的交互效果
教学目标 理解全局变量、局部变量,掌握变量值在页面间传递,学会制作简易计算器教学重点变量值
在页面间传递
1 .教学思路:通过实例引入变量的概念;通过多媒体演示和实机操讲解变量值在页面 间
传递的使用;通过实战深入理解Axure变量。
2 .教学手段:多媒体+计算机.教学资料:教材、多媒体课件
教学内容
AuxreRP8原型设计工具里提供全局变量和局部变量,在原型设计过程中,这两种变量非常实 用,
使用它们可以制作出更加丰富的交互效果,比方在制作原型过程中,遇到需要条件判断或者页 面间进行
参数传递时,使用变量即可轻松解决问题,同时丰富原型的交互效果。
账户登录
“雁,球》 >,女装>男装 > 电器城,大家电,手机>最蠢;A Hi, viviscan 0>积分1307
消息61 退出
忘记登录定码天猫T门All. CO门
用变量可实现登录页面和首页的参数传递全局变量和局部变量的使用
变量用于存储数据、传递数据以及条件判断,在登录网站的时候,用户登录成功后网站会把用 户名
传递下一个页面显示,这就是页面间数据的传递,即从一个页面向另一个页面传递变量值。如 果需要在
IE浏览器里显示原型,推荐使用25个或更少的变量。
• 全局变量:在所有页面里都可以使用,但是全局变量的值也很容易被修改掉,因为所有页 面
都可以使用全局变量,也就有权限修改全局变量值,所以在使用的过程中需要注意。
• 局部变量:只供某个局部区域使用,比方在某个触发事件的某个动作中使用,其他触发事 件
就不可以使用此变量。
• 变量设置规那么:变量名必须是字母或者是数字,并以字母开头,需要少于25个字符,且不
能包含空格,Axure会默认初始化一个"OnLoadVariable”变量。
单击工程菜单项的全局变量命令里,翻开“全局变量”对话框,在“全局变量”对话框中可以 新增
或编辑全局变量,新增一个全局变量“count”,单击“+添加”链接,可以新增变量,变量值 默认为空,
也可以为其赋值,如让“count”等于0。
课时内容使用Axure变量制作丰富的交互效果
课时
教学难点
变量值在页面间传递
教学设计
viviscan
viviscan
■石码登录送海金石
|。|回
口登录X +J C ① 127.0.0. l:32767/start.ht… 的 ☆ Q O
登录页面
|o|回|一
口首页x 4-<--> C ① 127.0.0. l:32767/start.ht…匐☆。:
首页
5.3实战一一制作简易计算器
利用全局变量、局部变量的知识来制作一个简易的计算器,能实现加减乘除运算,进一步熟悉 变量
的使用方法。
简易计算器
先来看简易计算器布局,将按钮按属性分为4组,分别是功能按钮、数字按钮、是运算符按钮 和等
号按钮。进行这样的分组,页面层次就很清晰,可以快速地找到想要的按钮。分组设计、分清 层次,利
用颜色比照差异,在做原型设计的时候,也要学会利用这种理念,把具有相同的属性功能
区域设置为一组,通过颜色的比照,使页面的层次结构显得清晰。 下面开始来设计简易计算器的原型。
5.3.1 计算器布局设计
(1)拖曳一个“矩形1”元件到工作区域,将其宽度设置为377、高度设置为346,边框选择 第3个线
宽,设置圆角半径为5,背景填充为灰色(#DADADA)。
ttas x
计算器背景
(2)拖曳一个“文本框”元件到工作区域,将其宽度设置为348,高度设置44,在交互面板的 提示文本
框中输入0,把文本设置为居右对齐,并且为只读状态,即文本框中不能进行除按键外的 任何输入,将标
签命名为“show”。
文本改变时,设■可见性,JC
失去焦点时,设置可见性计算器显示框
(3)拖曳一个“矩形1”元件到工作区域,将其宽度设置为60,高度设置40,圆角半径为5, 填充背景色
(#DF8045),将文本内容命名为“退格”,文本的字号设置为16号,加粗,白色字体, 按住Ctrl键,拖曳
8
8
100, I "2四 一]一一 13Pq 一 [一一 400
样式交互说明
showtit
□只读
家用交互
复制出两个同样的矩形元件,将其分别命名为“全清”“清屏”。
功能按钮
(4)拖曳一个“按钮”元件到工作区域,将其宽度设置为60,高度设置为40,文本内容为“7”, 字号为
16号,字体加粗,复制出10个同样的元件并修改其文本内容,作为其他数字按钮。
E E E e rn rn rn PI ra □数字按
钮
(5)拖曳一个“矩形1”元件到工作区域,将其宽度设置为70,高度设为40,圆角半径为5, 填充背景色
(#999999),修改文本内容,利用代表除法,设置其为20号字,加粗、字体颜色 为白色,按住Ctrl键向下
拖曳,复制出3个同样的按钮,分别修改按钮的文本内容。
FEE e
e rn rn
M PI s 口运算
按钮
(6)拖曳一个“矩形1”元件到工作区域,将其高度设置为40,圆角半径设置为5,填充背景 色
(#009900),文本内容修改为“二",字号为20号,加粗、字体颜色为白色。
退格
全清
退格■全清■清屏
剩余20页未读,继续阅读
资源评论
智慧安全方案
- 粉丝: 3640
- 资源: 59万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功