1. 首页
  2. 教程
  3. 基础教程

【Axure8基础教程】SVG格式图标使用方法介绍

在制作Axure原型的时候会用到很多图标,如下图所示:

【Axure8基础教程】SVG格式图标使用方法介绍

看到这些图标的时候,有的人可能会想到.jpg、.png格式的图片,当然.jpg、.png格式的图片也是可以使用的,但不是最佳选择,这些格式的图片有两个很大的问题

1、图片大小固定,尺寸改变后,无论变大还是变小图片都会失真变得模糊,在Axure中就是如此,等比缩放也会失真

2、图片颜色无法修改,想改变颜色是不行的,必须提前就做好

以上这两个问题,是很影响原型的灵活行和扩展性的

我们应该使用什么格式的图标呢?

其实Axure已经给我们提供了解决方案,3月3日Axure官方发布了Axure RP 8.0.0.3330,该版本发布了一个很重要的功能,– Convert SVGs into Shapes,将SVG格式转化为形状,Axure RP 8.0.0.3330及以上版本都有此功能

【Axure8基础教程】SVG格式图标使用方法介绍

SVG是什么呢?

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。

通俗来讲就是一种可以放大缩小并且不会失真的一种图形格式,用了它,就可以随意改变大小(最好是等比缩放,不然会变形哦),改变颜色啦!~

如何使用SVG图片?

其实Axure自带的有SVG格式的元件库,在左侧面板元件库里,默认是default的元件库,点击出现下拉框选择Icons就可以切换成图标库了

【Axure8基础教程】SVG格式图标使用方法介绍

拖拽进入编辑面板,就可以改变颜色和大小了

【Axure8基础教程】SVG格式图标使用方法介绍

自带图标库不够用怎么办?

要是自带的图标库里没有想要的图标或者图标不合适该怎么办呢,在哪里可以找到可以用的图标库呢?

这里我推荐一个非常好用的在线图标库,阿里巴巴矢量图标库http://www.iconfont.cn/】,里面有非常多的图标,可以通过关键字搜索并下载SVG、AI、PNG格式的图标,下面来演示一下使用过程:

1、进入阿里巴巴图标库网站,输入关键字搜索“编辑”,会出现很多编辑的图标

【Axure8基础教程】SVG格式图标使用方法介绍

2、找到想要的图标后,鼠标hover,可以收藏留待后用,这里我们点击下载按钮,出现下载弹出框

【Axure8基础教程】SVG格式图标使用方法介绍

3、这里就厉害啦,可以改变颜色和图标大小哦,最下方可以SVG下载、AI下载、PNG下载,点击SVG下载就可以获取想要的图标了

【Axure8基础教程】SVG格式图标使用方法介绍

4、接下来将下载好的图标放入Axure中,右键选择“转换SVG图片为形状”,这样就获得了可以随意改变颜色和大小的形状图标了。

【Axure8基础教程】SVG格式图标使用方法介绍

 

原创文章,作者:院长大大,如若转载,请注明出处:http://www.axureschool.cn/11.html

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:fleede@163.com

工作时间:周一至周五,9:30-18:30,节假日休息