Axure教程:App移动端多选效果美化

本篇教程将为大家展示如何使用Axure美化App移动端多选效果。首先我们按照上图在场景中绘制出需要用到的元素,并且将元素单独成组(快捷键CTRL+G),分别命名为:了解程度=dx / 合作意向=hzz / 下一步策略=cl。


本篇教程将为大家展示如何使用Axure美化App移动端多选效果。

Axure教程:App移动端多选效果美化

最终效果

Axure教程:App移动端多选效果美化

分解页面

Axure教程:App移动端多选效果美化

制作步骤

首先我们按照上图在场景中绘制出需要用到的元素,并且将元素单独成组(快捷键CTRL+G),分别命名为:了解程度=dx / 合作意向=hzz / 下一步策略=cl。

下一步,我们创建交互动作,选择上图中第一个界面里:了解程度后的“请选择”按钮,双击“当鼠标点击时?#20445;?#20026;其设置显示参数,并且将动画设置为“向左滑动?#20445;?#26102;间250ms。

Axure教程:App移动端多选效果美化

使用相同的设置,将“合作意向”、“下一步策略”后的“请选择”按钮进?#20449;?#32622;。

完成这一步,实现了点击不同的按钮,显示不同的场景页面。

下面,我们来设置多选的效果,也是本例的重点。我们以“了解程度”场景页面进行举例:

Axure教程:App移动端多选效果美化

该页面主要包含了选项的名称(上图左侧内容),以及点击后被勾选的显示元素(上图?#20063;?#20869;容)。

这里我们为?#20063;?个勾选的效果,分别命名为dx11 ~?dx15。

Axure教程:App移动端多选效果美化

完成设置后,我们?#21019;?#24314;点击后显示勾选效果的特效,选择图片左侧的选项名称,分别创建5个相同的点击动作。

Axure教程:App移动端多选效果美化

这里需要注意一点,需要一一对应,第一个选项对应dx11;第二个选项对应dx12,;?#26469;?#31867;推。

完成后,我们将dx11~dx15这5个元素设置?#35813;?#24230;为0,并且移动至“了解程度”页面中,与选项坐标相同。

Axure教程:App移动端多选效果美化

黄色表示元素被设置了?#35813;?#24230;为0,并且层级高于下面的层。

然后我们给“返回”和“保存”按钮,设置动作,点击后,隐藏“了解程度”页面。

最后我们将“了解程度”页面所有元素成组,命名为“dx?#20445;?#21516;时将“dx”?#35813;?#24230;设置为0,顺序设置为“置于顶层(Ctrl+Shift+])?#20445;?#24182;且将“dx”移动至主页面,完全覆盖主页面。

使用相同的设置,将“合作意向”、“下一步策略”进?#20449;?#32622;。

配置完成后,按F5即可进行预览。

源文件下载

https://pan.baidu.com/s/1dhz3v8F5PJGGlOCs3J5-4A

 

作者:ZQZ原型师,专注原型设计/交互设计

本文由 @ZQZ原型师 原创发布,未经许可,禁止转载。

题图来自作者。

原创文章,作者:金香槟运营,如若转载,请注明出处:http://www.ptffy.club/58965.html

征服者入侵APP下载
球探棒球比分网 大赢家即时比分上不了 7.15北单比分推荐 雪缘圆即时赔率 水果大爆发 奥运会排球比分规则 什么控制股票涨跌 吉林吉祥棋牌麻将 26选5 麻将百搭牌是什么 pk10注册 一起麻将吧游戏 中原风釆22选5最新开奖 娃哈哈股票在哪里可交易新上市股票怎么买 腾讯欢乐麻将基本规则 广东快乐10分