Axure教程:App移动端多选效果美化
本篇教程将为大家展示如何使用Axure美化App移动端多选效果。
最终效果
分解页面
制作步骤
首先我们按照上图在场景中绘制出需要用到的元素,并且将元素单独成组(快捷键CTRL+G),分别命名为:了解程度=dx / 合作意向=hzz / 下一步策略=cl。
下一步,我们创建交互动作,选择上图中第一个界面里:了解程度后的“请选择”按钮,双击“当鼠标点击时”,为其设置显示参数,并且将动画设置为“向左滑动”,时间250ms。
使用相同的设置,将“合作意向”、“下一步策略”后的“请选择”按钮进行配置。
完成这一步,实现了点击不同的按钮,显示不同的场景页面。
下面,我们来设置多选的效果,也是本例的重点。我们以“了解程度”场景页面进行举例:
该页面主要包含了选项的名称(上图左侧内容),以及点击后被勾选的显示元素(上图右侧内容)。
这里我们为右侧5个勾选的效果,分别命名为dx11 ~ dx15。
完成设置后,我们来创建点击后显示勾选效果的特效,选择图片左侧的选项名称,分别创建5个相同的点击动作。
这里需要注意一点,需要一一对应,第一个选项对应dx11;第二个选项对应dx12,;依此类推。
完成后,我们将dx11~dx15这5个元素设置透明度为0,并且移动至“了解程度”页面中,与选项坐标相同。
黄色表示元素被设置了透明度为0,并且层级高于下面的层。
然后我们给“返回”和“保存”按钮,设置动作,点击后,隐藏“了解程度”页面。
最后我们将“了解程度”页面所有元素成组,命名为“dx”,同时将“dx”透明度设置为0,顺序设置为“置于顶层(Ctrl+Shift+])”,并且将“dx”移动至主页面,完全覆盖主页面。
使用相同的设置,将“合作意向”、“下一步策略”进行配置。
配置完成后,按F5即可进行预览。
源文件下载
https://pan.baidu.com/s/1dhz3v8F5PJGGlOCs3J5-4A
作者:ZQZ原型师,专注原型设计/交互设计
- Axure教程:App移动端单选效果美化
- axure教程(一)文本框焦点效果
- AXURE原型工具教程――带提示的文本框和拖拽效果
- Android实战简易教程<四十八>(App引导页面效果实现)
- Android实战简易教程-第四十八枪(App引导页面效果实现)
- 移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
- Axure教程 | 为原型设计添加点动画效果
- HTML5之APP开发教程二抽屉效果的实现
- axure详细教程 做app
- Axure教程 动态面板滑动效果(10)
- 【Axure实现】高保真手机APP添加银行卡的效果实现
- [文档教程] 去掉app图标上的弧形高光效果
- Axure RP Pro 7.0苏宁易购式标签切换效果教程
- 【Axure教程】动态面板制作弹出框效果
- Axure8.0 网页 or App 鼠标滚动效果
- axure rp教程(三)单选框效果
- Axure:APP顶端菜单固定效果
- Axure教程 | 使用母版快速搭建APP界面框架
- Axure-制作App上下滑动效果
- 学习笔记:axure 高级教程 1 动态面板制作tab切换效果