axure实现添加图片 axure地图上添加图标

文章插图

编辑导读：图标是我们在制作产品原型的时候使用的比较多的一类素材，在日常绘制原型的时候一般是以插入的形式添加到Axure中。本文作者结合自身经验，介绍了四种Axure中引入图标的方法，希望对大家能有所帮助。

在日常绘制原型的时候，经常会需要插入相应的图标（icon）到Axure中，但是看似好像很简单的事情也给蛮多小伙伴造成了困扰。
现在很多开发团队都会用一些比较常见的前端框架来搭建后台管理系统，例如常见的Element-UI，Ant-design，iView还有Layui等。
这些前端框架基本上都自己有一套内置的图标库，所以一些常用的编辑，删除，设置，关闭等图标基本上就会直接使用。但是产品要绘制原型的时候，想要把这些图标插入到Axure中就有点麻烦了。
例如画这样一个简单的element-UI的弹窗，在Axure中可以很简单的做到解决一比一复原，唯一麻烦的点就是右上角的关闭按钮。
如果稍微讲究一点的朋友就会去网页上截图或者找到对应的图片文件然后放进来，稍微不讲究的那就直接用一个占位符表示了。
或者是直接用Axure自带的内置Icons拖出一个不太协调的关闭按钮。
01 Axure插入图标几种办法方法一：直接使用内置Icons这种办法是最简单也是最快速的，直接从内置的元件中拖拽出来，可以调整大小和颜色，而且清晰度等也很不错。
但是缺点也很明显，那就是内置的Icons内容太少了，很多图标是上古时期的，压根就和现在的主流图标风格不搭。所以就连一个普通的关闭按钮，都搭配不上，更不用谈一些很有语义性的图标了。
方法二：图片粘贴大法这种办法是最快速也是最简单的，例如刚刚我要画一个Element-UI的关闭按钮，但是我从Axure内置原件库找不到，也不想花太多时间去找，那么我直接从网页上截图一个白底的图片就好了，然后粘贴覆盖在相应的位置即可。
截图的优点是快速，简单。缺点是图片调整大小的时候不是那么精准，同时图片截图之后是不能改颜色和粗细的。
这意味着如果我要一个蓝底白字的图标，那就得再去网页上找，或者自己F12调试相应的样式，然后再截图下来。一套操作下来，还是有点麻烦。
方法三：Fontawesome大法Fontawesome是一套绝佳的图标字体库和CSS框架，下图是官网的一些介绍。对于不太懂技术的朋友，可以把它理解成是一套集成式的字体库图标，意味着每一个图标其实是拥有字体一样的属性，例如字体大小，粗细，颜色等。

有很多Axure的培训都会推荐使用Fontawesome的方式在Axure中插入图标，例如Axure培训大佬「小楼一夜听春雨」就写过类似的教程指导怎么使用Fontawesome，AxureUX的大梨老师也写了很详细的教程来指导怎么使用。
首先本机需要安装相应的字体库，然后从Fontawesome的官网或者AxureUX的专门页，复制相应的内容，然后再粘贴到Axure中，最后再选择对应的字体即可。
这种方法可以适用于绝大多数场景，基本上算是一个比较可以接受的解决方案，但是直到我装好字体画好图标，打开预览之后，我发现了一个很操蛋的事情：预览状态下，图标没有生效！！！
有朋友肯定会说，那肯定是你自己哪里设置有问题了。
是的，刚开始我也是这样想的，直到我花了半个多小时在网上找各种解决方案，我还是没能解决这个问题的时候，我才意识到，这样搞可能是个无底洞。
因为产品相关问题不像技术问题，会有很多论坛或者交流群，所以一些产品方面的技术手段出问题了，要定位问题其实很难。采用Fontawesome引入图标的一些案例和讨论，在网上都找不到很多，即使我千辛万苦解决了这个问题，可能后面还会有其他问题，这并不是我的本意。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：