博客概要
分享利用Axure制作的一个粗糙的提示效果~
Axure RP8-实战案例_总目录
文章超链接:https://blog.csdn.net/qq_41386332/article/details/109445644
提示弹窗
![](https://i-blog.csdnimg.cn/blog_migrate/7c38dd78dc3a32247fb4f791848e956d.jpeg)
解释 | 一种常见的快速展示其他页面信息的形式 |
---|---|
效果 | 点击“提示按钮”,出现“提示弹窗”显示提示信息 |
【PS】 | 1.本次制作,样式简洁,请按需,自行美化 2.有多种制作方式,此次至制作了其中之一,其余后续分享 |
… | … |
制作过程
1.主体搭建
![](https://i-blog.csdnimg.cn/blog_migrate/f2dfc2b51906650a7f3e492400755465.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/4c00906bb6bf35d6603b95920668edd7.jpeg)
利用“矩形”、“图片”、“文本”等元件,整体搭建“主体页面”和“提示弹窗”结构。
2.隐藏提示
![](https://i-blog.csdnimg.cn/blog_migrate/6bdc15129f1f606ae2af09cbd1f92c96.jpeg)
选中“提示弹窗”,勾选“隐藏”(可事先成组)。
3.设置交互
![](https://i-blog.csdnimg.cn/blog_migrate/284b21a3536b61650dba13bfd042382a.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/13dbf933e07668ecdd0b8bfe110be5be.jpeg)
选中相应的元件按步骤进行交互设计:
- 选中要设置的“元件”
- 在属性一栏选择设置“交互”下的“鼠标单击时”的用例
- 选择“添加动作”一栏的“元件”中的“隐藏/显示”
- 根据相应的效果勾选“隐藏/显示”
- 点击“确定”,可以在“属性”的“交互”一栏中看到相应的变化
4.效果展示
![](https://i-blog.csdnimg.cn/blog_migrate/5805b07af0c41b255bc8f09ba22410f6.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/9fbd5422cd42edf5a1293a28cf3f3393.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/5805b07af0c41b255bc8f09ba22410f6.jpeg)
点击“提示”、“确定”、“取消”即实现提示弹窗效果。
总结
以上= =“提示”技能get~