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

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

三、拖动

动态面板是唯一能够添加拖动交互事件的元件。

任何一个元件,如果想要通过鼠标拖动来呈现交互,都需要动态面板来帮助完成。

我们一起来看一个案例。

案例25:拖动滑块验证

在淘宝网站的注册页面中,需要拖动滑块完成验证。(图5-95)

1、准备相关的元件。

在概要中,元件是按照从左至右、从底层到顶层、从上至下的顺序排列,注意同一区域重叠元件的摆放。(图5-96)

滑块的组成元件(矩形、右箭头图标以及成功的图标)都放置在动态面板“Slider”中,并将成功的图标“Success”隐藏。(图5-96)

因为“下一步”按钮默认为禁用状态,并呈现灰色的样式,我们需要为它添加【禁用】的交互样式(图5-97),并在属性设置中勾选【禁用】的状态(图5-98)。

注:因为这个案例元件组成比较复杂,建议参考案例源文件。

2、为元件添加交互。

先来做交互的分析。

(1)拖动滑块时,能够水平方向拖动,并且不能超出灰色背景矩形的两侧。

(2)拖动滑块时,绿色背景矩形需要时时改变宽度,宽度为滑块左侧边界与灰色背景矩形左侧边界的距离。

(3)拖动结束的时候,如果滑块到达最右侧,显示拖动成功的图标,隐藏箭头的图标,启用“下一步”按钮。

(4)否则,滑块回到拖动前的位置,并且绿色背景跟随恢复尺寸。

然后,我们根据交互分析添加交互事件。

步骤1

为动态面板“Slider”添加【拖动时】的交互,【移动】动态面板自身【跟随拖动】而移动。并且,为移动动作添加【界限】设置,限制【左侧】与【右侧】两个边界不能超出灰色矩形“Gray”的两侧边界。(图5-99)

灰色矩形“Gray”的两侧边界,我们可以通过自定义局部变量“gray”获取【元件】对象,并通过系统变量“[[gray.left]]”与“[[gray.right]]”获 取边界值。

此时预览原型,滑块已经能够在灰色矩形范围内左右拖动。

步骤2

为【拖动时】的交互事件继续添加【设置尺寸】的动作,设置绿色背景矩形“Green”的宽度为当前滑块元件左侧边界与灰色矩形“Gray”左侧边界的距离“[[This.left-gray.left]]”。

灰色矩形“Gray”的左侧边界与滑块“Slider”的左侧边界,我们仍然通过自定义局部变量和系统变量进行获取。(图5-100)

另外,设置中锚点(九宫格)可以保持默认或者选择【左侧】。

注:公式中的系统变量“left”也可以用系统变量“x”代替。

步骤3

为动态面板“Slider”添加【拖动结束时】的交互,【显示】成功图标“Success”,【隐藏】箭头图标“Arrow”。(图5-101)

继续添加动作,【启用】“下一步”按钮。(图5-102)

这两个动作是需要满足条件才能够执行的。

我们需要判断拖动结束时滑块的右边界是否与灰色矩形右边界重合。

所以,我们为交互事件【拖动结束时】【启用情形】,设置名称为“滑块到达最右侧”,并添加条件判断当前滑块元件的右边界【值】【==】“[[This.rigth]]”灰色矩形右边界【值】“[[gray.right]]”。(图5-103)

条件中,我们通过自定义局部变量和系统变量获取滑块“Slider”与灰色背景矩形“Gray”的右侧边界值“right”。

步骤4

继续为【拖动结束时】【添加情形】,设置情形名称为“不符合以上情形”,不添加任何条件。(图5-104)

添加此情形的动作,【移动】“当前元件”【回到拖动前位置】(图5-105),并且为绿色矩形“Green”【设置尺寸】的“宽度”为“1”。(图5-106)

以上两个动作都添加【线性】动画,这样才会有滑块匀速滑动回原位以及绿色色矩形逐渐收缩为最小宽度的效果。

四、滚动

在前一个案例中,有一个带有滚动条的下拉列表,这样的下拉列表不是我们默认元件库中的下拉列表能够代替的。(图5-107)

我们在上一个案例的基础之上完成这个下拉列表的实现。

案例26:制作下拉列表

1、准备相关的元件。

(1)先放入一个宽度160像素高度200像素的动态面板,命名为“ListBox”并隐藏。然后,在动态面板上点击鼠标右键,上下文菜单中选择【滚动条】【垂直滚动】(图5-108)

(2)在样式功能面板中为动态面板“ListBox”设置边框【线段】为“1”像素,并取消顶部的边框。(图5-109)

(3)在动态面板中添加一个矩形和一个文本标签制作一个列表选项。并为矩形和文本标签一起添加【鼠标悬停】与【选中】的交互样式,【填充颜色】代码为“FF4001”,【字色】代码为“FFFFFF”。(图5-110)

(4)将矩形与文本标签元件组合,以便添加【单击时】的交互。在组合的属性中,为【组合】添加【选项组】名称“list_box_item”,勾选【触发内部元件鼠标交互样式】。(图5-111)

(5)为页面中的国家和区号添加元件命名“Country”和“Code”,并将组成下拉列表框的元件组合到一起,命名为“Combobox”。(图5-112)

注:仔细看截图,国家和区号不是动态面板中的元件。

到这里,元件的添加告一段落。

2、为下拉列表添加交互。

先进行交互分析。

(1)点击下拉列表框时,显示下拉列表。

(2)点击列表项时,列表项颜色发生改变。

(3)点击列表项时,下拉列表消失。

(4)点击列表项时,手机号码输入框前方的国家和区号需要发生改变。根据交互分析,我们来添加交互。

步骤1

为下拉列表框组合“Combobox”添加【单击时】【显示】动态面板“ListBox”的交互,并将动态面板“ListBox”【置于顶层】。(图5-113)

 

步骤2

为列表项组合添加【单击时】【选中】【当前】组合的交互。(图5-114)

步骤3

继续为列表项组合【单击时】交互事件添加动作,【隐藏】动态面板“ListBox”。(图5-115)

步骤4

为列表项组合中的矩形元件添加【选中时】【设置文本】的交互,设置元件“Country”的【文本】为【当前元件】的【元件文字】。(图5-116)


并且,为列表项组合中的文本标签元件添加【选中时】【设置文本】的交互,设置元件“Code”的【文本】为【当前元件】的【元件文字】。(图5-117)

完成交互设置之后,我们就可以将列表项组合复制成多个,进行纵向排列,并逐一修改组合中矩形与文本标签的文字。还要将第一个列表项组合设置为默认【选中】的状态。(图5-118)

注:区号的文字是右对齐,复制列表项之前要设置好,不然更改区号文字时需要有很多重复操作。并且,列表框组合“Combobox”中的区号文本同样为右对齐,并且要向左将元件拉宽,以免文字数量增多时向右超出边界。(希望我提示的不太晚,嘻嘻!)

五、适应宽度

有些时候,我们需要一张图片能够水平铺满全屏。但是,这张图片有可能不是固定的位置,也有可能需要能够通过交互将它隐藏显示,或者能够切换为其他图片。

这样的需求,就不能够通过给页面添加背景图片来解决,而是需要使用动态面板。

案例27:页面内容的推动与拉动

例如,雷锋网首页出现的全屏Banner,并且这个Banner还能够被关闭,关闭时下方内容回到顶部。

另外,还有一个细节就是关闭Banner的按钮,它的位置不管浏览器窗口有多宽,始终位于右上角。

1、准备相关的元件。

注:因为页面内容较多,Banner下方的内容我们用截图来代替。

(1)Banner

Banner图片并不是直接放入画布中。

而是先放入一个与Banner图片同等高度并且与页面内容同等宽度的动态面板“Banner”。

在动态面板的样式中,勾选【100%宽度】,以便适应浏览器窗口宽度。再为默认状态“State1”【填充】【图片】,图片居中对齐,并以【填充】方式呈现。(图5-119)

此时预览原型,就能够看到一个横向铺满全屏的Banner。

(2)关闭按钮

关闭按钮图标放入动态面板“Close”后,需要在上下文菜单或者样式功能面板中【固定到浏览器】,位置为【顶部】【右侧】,顶部摆放在Y轴20像素的位置上,而右侧设置【边距】为30像素。(图5-120)

(3)导航背景

导航栏的背景也是水平铺满全屏的,这里我们也通过动态面板来完成。(图5-121)

放入一个与导航栏相同高度并且与页面内容相同宽度的动态面板,在样式中【填充】【图片】,这个背景图片我们以【水平重复】的方式呈现。不要忘了,还要勾选【100%宽度】。

(4)页面内容

因为是图片替代的内容,摆放在Banner下方,覆盖在导航背景上层即可。(图5-122)

2、为元件添加交互。

我们需要做的只是给关闭按钮“Close”添加一个交互事件,【单击时】【隐藏】顶部的“Banner”,并【拉动元件】,而且带有【向上滑动】的【动画】。(图5-123)

同时,还要【隐藏】自己,也就是“当前元件”。(图5-124)

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


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

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

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


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

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

表情

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

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