最近在写一个全新的谷歌材料设计 Material Design风格的WEB产品,在开发过程中将产品原型做成了Axure元件库,当然目前没有完全完成。本文将以实现谷歌材料设计按钮的波浪效果为例,提供一种新的自定义Axure的样式的方法
需要说明的是,本文所提供的方式已经最大程度小白式,简单易用,但是对于产品经理来说,本文的教程可能不具有实际的意义,仅提供给喜欢研究Axure Or Code的玩家。
视频
网页
实现原理
1.波浪效果的实现需要特定的CSS和JS文件,但是在Axure里我们并不能直接Code
2.Axure提供了当前窗口打开链接
的接口,通过这个接口可以直接加载Javascript,它提供了Axure和前端代码直接交互的能力,正因为这样Axure在前端样式和交互上有了更加广阔的扩展空间,所以我们可以将外部CSS或JS文件放到Javascript中,通过在页面载入
的时候添加用例
:当前窗口打开链接
来加载外部CSS或JS:
在打开链接处JS代码格式为:
javascript:需要执行的代码;
最终实现
1.首先,你需要将如下代码添加到:用例-页面载入时-打开链接-当前窗口-链接到URL或文件-超链接
处。
如果你会Code可以自己修改加载的JS和CSS来修改效果…
其中$("").attr({ rel: "stylesheet",type: "text/css",href: "https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"}).appendTo("head");
为预览Demo网页中使用的CSS,你可以删掉。
javascript:$("\").attr({ rel: "stylesheet",type: "text/css",href: "https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"}).appendTo("head");
$("").attr({ rel: "stylesheet",type: "text/css",href: "https://cdn.lylares.com/wave/static/waves.min.css"}).appendTo("head");
$.\getScript("https://cdn.lylares.com/wave/static/js/waves.min.js");
2.按钮设置:
如下图所示,在Axure中请在左上角设置按钮的类别:
Primary Button
和Button
1.Primary Button
建议设置为方形按钮,圆角不要太大,在方形按钮下太大的圆角将会影响波浪效果,这也是目前的一个不完美的地方,后面应该会改进。
2.Button
建议设置为圆形按钮。
如果你是直接在元件库中拖动的Button,只需要注意Button的圆角样式。
注意事项
文中代码可能由于转义的原因显示不全,请以图片中所示代码为准,原始代码也可以参考附件的rp文件。
厉害
解压密码呢
解压密码是啥
解压密码是多少呢?
还是比较威武的啊
好像没有发我解压密码啊
解压密码
很好,值得学习,给我密码啊
看不到密码
评论了,怎么还看不到密码?
怎么评论才给密码?
很强大
优秀
你的跳转页面不错,希望收到一份源码
挺喜欢的学习一下
还是不错的
谢谢分享。刚开始学习,学习学习!
挺好的
对如此绚丽的的交互必须学习一下。
谢谢分享,学习下高大上的展示方式~~
为什么删掉我的评论,求密码
看看
这个厉害了
很不错
厉害
交互体验设计很棒
这个厉害了
效果好棒,学习了~
效果好棒,学习了
学习了
厉害了
真的很强大,我想要密码o(╥﹏╥)o
学习
不错
真的很棒
真的很棒
想要学习
没设成功,求密码:)
求密码
想要学习一下,谢谢了.
楼主能留个微信吗,想拜师学习一下.
想要学习一下,谢谢了.
怎么样才能看到密码,感觉效果很棒
求密码!
谢谢分享超厉害
邮件要等多久才会通知啊,感觉等了一个世纪。。。
很棒很棒,求个密码
求个密码吧大神
学习了
评论完了之后密码在哪
评论完了之后密码在哪
一大堆复制粘贴的评论,我也是醉了。。。
看垃圾评论太累了,以后评论完全交给后台去处理,评论没通过是看不到密码的。
学习学习
学习了,原来通过引用js也可以丰富AXURE的交互效果
很不错
东西不错
正好在做原型,学习下这个
加油
学习一下
求密码。
谢谢分享
大神膜拜一下,顺便要一下密码
大神膜拜一下,顺便要一下密码,佩服佩服
求密码,求密码,求密码
大神,啥时候能发密码,试了太多次了。
谢谢
还能有这种操作,象征性打赏表示感谢!
666 .服了你
希望能做出来吧
不知道看不看的到
很好看,谢谢
大神,敬仰呀!!!
大神,怎么看不到密码啊
Good Job!谢谢大神
谢谢大神
感谢分享~
不错
感谢分享
楼主异常强大
近期才开始接触Axure,今天偶然看到这个帖子,看完之后,真的学习到了,自己要走的路还很长
楼主大神强
好炫酷啊~~~厉害。崇拜
楼主厉害 学习了
楼主厉害 学习了
厉害厉害
确实太棒了
厉害
厉害
会点axure,不会Code,按照步骤操作不成功,看了下https://cdn.lylares.com/wave/static/js/waves.min.js 403了不知道是不是这个原因
附件在哪里呢,好像美看到啊?
啊,想要附件的我
很喜欢作者的文章,想问一下到底要怎么样才能获取附件呢?
哪里获取源文件呢,想问一下到底要怎么样才能获取附件呢?
刚刚学习Axure,看到这篇文章后又觉得恍然大悟,感谢
到底要怎么样才能获取附件啊,求密码啊