突破Axure限制,随心所欲定制UI样式及交互动效

自定义控件UI样式

Axure生成的HTML里单选框、复选框一直都是默认的样式,看久了实在是有点疲劳。最近研究了一下,改了点东西,让生成的网页文件更好看一点。

Axure导出HTML文件时,都会引用其安装目录下的css文件,如果要修改样式,只需要搞明白引用了哪些css文件、哪部分css控制哪些控件的,进行相应的修改即可。

经过一翻查找,发现页面引用的CSS的位置,在Axure安装目录下的\DefaultSettings\Prototype_Files\resources\css下,以Windows系统为例,一般是:

C:\Program Files (x86)\Axure\Axure RP 8\DefaultSettings\Prototype_Files\resources\css

可以看到在这个文件夹下有这几个文件:

其中的axure_rp_pages.css就是控制每个页面的样式表文件,也就是我们要修改CSS代码的文件。直接在里面加入控制单选框显示样式的css代码:

修改之后再次生成HTML文件,效果如下:

接下来只用从网上找一些好看的css代码,加起去就可以让生成的网页变漂亮了!不只局限于单选框、复选框,其他所有控件的UI样式都可以像这样自定义。

直接使用JS语句控制交互效果

虽然Axure本身提供的交互功能还是很强的,但是对于懂一点代码的人设计来说,遇到明明一行代码可以搞定却要设置很多参数的情况真是很烦。

同样是一番源码和资料研究,Axure生成的网页交互功能是基于jQuery以及它自己写的axutil完成的。随便拿一个网页的源码来看:

也就是说我们可以直接用jQuery语句来做事情,这比直接用js语句要方便不少了。

使用JS语句的方式,很简单,就是利用javascript伪协议,给任意一个事件添加用例,这里以OnClick为例,依次选择OpenLink -> Link to an external url or file,在输入框中使用javascript伪协议输入JS语句即可。

比如说要弹出警告框,直接写上:

javascript:void(alert('请至少选择一项!'))

想要让某个控件隐藏,正常用Axure的话要用鼠标点点点点点:创建onclick的use case、选择hide动作、在很多控件里找到要隐藏的控件、选中、确定。而直接使用jQuery语句的话,只需要给这个控件命个名,比如说叫”form”,然后把下面的语句加进去就好:

javascript:void(

$('[data-label=form]').fadeOut('slow')

)

当然复杂的语句,还是在外部编辑器中完成再复制过去比较好。

在使用过程中发现某些jQuery语句如fadeOut()对成组的元素不起作用。解决办法是用动态面板代替编组。

到了这一步,在网上能找到的交互效果,只要有js代码,就可以在Axure中实现了。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180501G16W9500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券