Axure RP 9萌新修炼手册-第五章-交互应用(3)

AxureRP9教程 小楼一夜听春语 270℃ 0评论

四、全局变量

全局变量作用范围是整个原型,也就是说全局变量的名称是唯一的。

全局变量在原型的任何页面以及任何交互中都能够进行变量的创建、写入与读取,所以一般会被用于跨页面的数据传递。

例如,我们在访问一个网站的时候,首页的初始状态是未登录状态(图5-30),登录页面成功登录之后跳转到首页时,首页会变为已登录状态。(图5-31)


案例17:跨页面的数据传递

像这样的交互实现,我们需要使用全局变量保存登录的状态,并在原型内各个页面中通过对登录状态的验证,执行相应的交互。

这就需要我们在登录成功的情形下,将账号保存到全局变量中。

而在各个页面中,如果发现全局变量中存有账号,我们即认为登录成功。

1、准备好相关的页面与元件。

(1)首页

首页中的元件包含了一些组合和隐藏元素。(图5-32)


其中,创建组合是为了能够让多个元件能够统一移动或者显示隐藏。组合的创建,可以选中多个元件后,点击工具栏中的组合按钮或者通过快捷键<Ctrl+G>键进行组合。

另外,因为在未登录状态下,消息(组合)和头像都是隐藏状态,所以需要将这些内容在样式功能面板中设置隐藏(面板右上角的眼睛图标),并摆放在适合的位置上。(图5-33)

(2)登录页面

登录页面,我们暂时只制作输入框与登录按钮。(图5-34)

2、添加交互。

根据用户的操作顺序来分析。

(1)在首页,用户点击登入(Login)按钮,打开登录页面。

(2)在登录页,用户输入用户名与密码后,点击登录按钮保存登录状态,并跳转回首页;

(3)在首页,如果是已登录状态,显示消息与头像,同时搜索栏向左侧移动。

我们根据这三个步骤,添加交互。

步骤1

为首页“home”的“登入”按钮添加【单击时】【打开链接】的交互,【链接到】登录页面 “login”。(图5-35)

步骤2

保存登录状态,我们需要先创建全局变量“userName”。

在导航栏的【项目】菜单中,我们打开【全局变量】的设置窗口。(图5-36)

默认情况下,Axure RP文件中必须至少包含一个全局变量,所以,每一个新建的Axure RP文件都会带有一个名为“OnLoadVariable”的全局变量。

这个全局变量我们可以修改名称使用或者点击【+添加】按钮创建新的全局变量后,再删除默认变量。

在这里,我们双击默认变量的名称,将它的名称改为“userName”。(图5-37)

注:变量名称的命名要求与局部变量一致,命名规范上建议采用驼峰命名法,即首个单词小写,其他单词首字母大写,单词之间无其他内容分隔。

另外,也可以在【设置变量值】动作中的【目标】列表进行【+添加变量】的操作。

创建了全局变量之后,我们在登录按钮【单击时】将用户名输入框“UserName”的【元件文字】通过【设置变量值】的动作写入到全局变量“userName”中。(图5-38)

完成保存账号的操作,再添加打开首页“home”的动作。(图5-39)

步骤3

在首页的【页面载入时】,我们添加交互,通过判断变量“userName”中是否存有账号,改变页面 呈现的内容。

(1)显示头像

为首页“home”的【页面载入时】添加交互,【显示】头像元件“Head”。(图5-40)

(2)显示消息

显示消息同样是【显示/隐藏】的动作。

一个动作可以控制多个目标,所以,我们为上一个【显示/隐藏】动作【添加目标】,【显示】消息元件“Message”。(图5-41)

(3)隐藏登入按钮

隐藏登入按钮也是【显示/隐藏】的动作。

继续【添加目标】,【隐藏】登入按钮元件“Login”。(图5-42)

(4)向左移动搜索框

点击【插入动作】的加号“+”按钮(图5-43),继续添加【移动】搜索框组合“Search”的动作。移动【到达】X轴“747、”Y轴“30”的位置。(图5-44)

(5)设定情形

以上的动作设置,必须是账号已登录的情形才能够执行。

所以,我们需要为【页面载入时】的交互事件【启用情形】,设置情形 名称为“账号已登录”,并读取全局变量“userName”的【变量值】,判断它【!=】“”“(空值)。(图5-45)

注:大家可以在本节完成的案例基础上,为登录页面添加账号与密码非空验证的交互,只有账号与密码均已输入的情形才保存登录状态并跳转至首页。

五、系统变量

系统变量是由系统已经创建好的变量,并且变量的写入也有系统自动完成,我们需要做的只是读取变量值进行运算。

当我们添加交互时,在【值】的设置中,打开值的编辑界面,点开【插入系统变量或函数】的列表就能够看到系统变量。(图5-46)

列表中存在很多内容,除了自定义变量(全局变量与局部变量)之外是系统变量与函数。

并且,系统变量还分为对象与属性。

(一)概念

1、对象

以元件类的系统变量举例。

“This”和“Target”与同类的其它系统变量不同,它们的单词首字母是大写的。(图5-46)

这两个系统变量分别表示当前元件(This)和目标元件(Target)。

因为元件是一个具体存在的事物,所以我们可以将“This”和“Target”称作元件对象。

2、属性

和对象不同,元件类的系统变量中,剩余的部分的系统变量命名方法是驼峰命名法,第一个单词是小写单词。

这种命名方法的系统变量都是属性。

例如,“width”是元件的宽度,“name”是元件的名称,“scrollX”是元件内部内容的X轴滚动距离。

(二)用途

那么,这些对象和属性如何使用呢?

我们知道,变量的用途是参与值的运算,所以系统变量也需要写在运算公式中。

使用方法:[[对象.属性]]

例如,我们为某个元件添加交互时,想要获取这个元件的X轴坐标,就可以使用“[[This.x]]”进行获取。

下面,我们通过一个案例来了解系统变量的使用。

案例18:动态改变元件尺寸

在“创业邦”网站的顶部导航中,鼠标移入某个导航菜单时,在导航菜单文字颜色改变的同时,下方会出现一个由中心点放大到与菜单项相同宽度的橘黄色线段。

我们可以在之前已经实现的案例基础之上继续添加新的元件与交互。

1、准备好相关的元件。

在原有案例的基础上,添加5个矩形元件,在工具栏中设置线宽为0像素,颜色为桔黄色,宽度为10像素,线宽为3像素。

并且,将这些水平线元件隐藏,命名为:Line01~Line05。(图5-47)

但是,我们还要注意一点,就是交互在鼠标指针进入菜单以及对应的水平线区域之内时触发。

这个问题,我们可以通过热区元件覆盖来解决。(图5-48)

2、为每个菜单项添加交互。

因为每个菜单项的交互都一样,这里仅以首页菜单举例。

我们先来分析交互组成:

(1)当鼠标指针进入菜单项(热区)区域时,菜单项的部分文字改变颜色并加粗字体;

(2)同时,显示水平线;

(3)同时,水平线宽度变为与菜单项相同的宽度,并带有中心点放大的效果;

(4)当鼠标指针离开菜单项(热区)区域时,菜单项的文字恢复原有颜色;

(5)同时,隐藏水平线;

(6)同时,水平线恢复初始尺寸。

下面是交互设置的具体步骤。

以“首页”菜单项为例。

步骤1

为菜单项的热区元件添加【鼠标移入时】【设置文本】的交互(图5-49),设置对应的文本标签元件为【富文本】,并在【编辑文本】的界面中设置文字的颜色与粗体。(图5-50)

步骤2

继续【插入动作】,【显示】对应的水平线元件。(图5-51)

步骤3

继续【插入动作】,为对应的水平线元件【设置尺寸】,宽度保持3像素不变,高度为当前热区元件的宽度“[[This.width]]”,锚点选择【中心】,并带有“200”毫秒的【线性】【动画】(图5-52)

步骤4

为菜单项的热区元件添加【鼠标移入时】【设置文本】的交互,设置对应的文本标签元件为【富文本】,并在【编辑文本】的界面中设置文字为默认样式。(图5-53)

步骤5

继续【插入动作】,【隐藏】对应的水平线元件。(图5-53)

步骤6

继续【插入动作】,将对应的水平线元件【设置尺寸】为初始尺寸,锚点选择【中心】。(图5-53)

到这里,我们就完成了“首页”菜单项的全部交互,其他菜单项的交互可以全部参考以上步骤进行设置。

注:步骤4、5、6的交互设置可参考步骤1、2、3的配图。

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第五章-交互应用(3)

喜欢 (5)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址