李成笔记网

专注域名、站长SEO知识分享与实战技巧

Axure绘制吐司提示

大家在日常原型绘制中一定会遇到绘制吐司(Toast)提示,如下图,那么如何绘制一个吐司的功能呢?



在讲解绘制步骤前,先和大家说一下Axure的母版功能,可能有的伙伴们还不知道它的用处,其实他类似于咱们做PPT的时候的模板,作用是一样的,把每个页面中复用性很强的元素可以放在母板中,这样后续无论是在绘制新页面,还是修改起来都是非常方便的,比如手机壳,如果大家在每个页面中都拖入手机壳,万一想换个手机壳或者换个颜色,那么就需要在每一个页面中进行修改,如果使用母板就不一样了,只要每个页面中都使用母板,只需要修改母板就可以了。



那么为什么讲母版呢,当时是为了更好的更简便的制作吐司了,由于吐司基本在所有的编辑类页面都会有,所以将其放在母版里再好不过了,那么进入正题,开始讲解整个绘制的过程

1.母板中新增一个吐司的模板,拖入一个矩形,编辑其样式,背景色,提示文字颜色,大小方面建议大家按照我设置的尺寸进行设置,这样基本能实现所有的吐司提示,对于提示文字较多的情况还是需要单独设计的(之前试过使用动态面板动态修改吐司的宽度,但是经过多次尝试后如果动态给吐司赋值,其动态修改宽度的功能就会无效,具体经过查询应该是axure不支持)

2.右键将其转化为动态面板,并设置其名称方便后续选择,同时固定吐司弹出的位置为居中,一直在顶层

3.为该动态面板设置交互事件,当其显示时,等待两秒后消失,这样方便后续在每次弹出时都写此交互事件

? 4.将该动态面板默认设置为隐藏

5.切换至页面,拖入吐司母板,并在页面中拖入一个弹出吐司的按钮

6.为弹出吐司按钮添加交互事件,点击是弹出吐司提示,并赋值想要弹出的提示内容

到这里咱们的吐司功能就制作完毕了,后续只要在需要弹出吐司提示的页面,重复第5、6步骤设置即可,下边是制作后的效果


?

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言