实践干货：Axure插入图标的4种办法

honghu2

实践干货：Axure插入图标的4种法子

编纂导读：图标是咱们在建造产物原型的时辰利用的比力多的一类素材，在平常绘制原型的时辰通常为以插入的情势添加到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引入图标的一些案例和会商，在网上都找不到不少，即便我千辛万苦解决了这个问题，可能后面还会有其他问题，这其实不是我的本意。

因而我就起头审阅这件事的本色，我原本就是想画一个大要的图标来暗示这个处所用了甚么样的图标，而我选择用附近约爱Fontawesome以后。一方面我要下载字体，其次我要在公布的时辰链接CSS地点避免他人的电脑上看原型的时辰丢失字体，并且我找到的字体实在也其实不是和前端框架百分百同样的内容，最后我还在本身当地电脑上还预览不可功，我丢，那我还用这玩意干啥？

Fontawesome确切很强，可是也确切有点点贫苦，贫苦的其实不是一起头装字体和公布的时辰设置装备摆设好CSS链接，而是这一顿操作以后我要让其他协作的同事也装这么多工具，最后一旦某小我的电脑出了问题，又要花一堆时候去从新定位问题，找到解决方案。

以是，我决议直接丢弃Fontawesome，究竟结果时候比力金贵，不克不及都荒疏在这上面了。
法子四：SVG大法
这个法子是我最举荐的也是最承认的，固然它也有弊病，可是胜在简略，普适性并且还不会犯错。

SVG是甚么？界说是甚么，我直接从百科上摘下来：

❝ SVG是一种图象文件格局，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）同盟举行开辟的。严酷来讲应当是一种开放尺度的矢量图形说话，可以让你设计激动听心的、高辨别率的Web图形页面。用户可以直接用代码来描画图像，可以用任何文字处置东西打开SVG图象，经由过程扭转部门代码来使图象具备交互功效，并可以随时插入到HTML中经由过程阅读器来旁观。

这些描写看不懂不要紧，可是只必要看到这句话便可以了。

「可以用任何文字处置东西打开SVG图象，经由过程扭转部门代码来使图象具备交互功效……」

Axure必定也是文字处置东西，并且另有一个很经常使用到SVG的文字处置东西就是：PPT。

做PPT的时辰，找一些图标，外形等，均可以插入SVG。直接把SVG图片下载到当地，然后拖拽进入PPT，最后再做两次取缔分组便可以了。





话题回到Axure中，Axure也可使用这类法子，并且Axure的SVG处置能力比PPT还更好，它支撑你本身复制SVG的代码然后粘贴到Axure中，便可以主动辨认。









复制SVG代码以后，粘贴在Axure中，然后右键将SVG图片转为外形，然后便可以自由的编纂（调色，改巨细等）。

凑巧的是，咱们团队中的项目标一些icon都是来历一个网站，并且这个网站也正好支撑复制SVG代码的功效，它就是：阿里巴巴矢量图标库。



选择你想要的的图标库，然后点击下载，在弹窗页面选择「复制SVG」，然后再粘贴到Axure中，最后再转SVG成外形，便可以自由编纂啦。





总结一下，SVG法很适用，也很便利。主如果iconfont今朝的生态很好，有不少素材，并且彻底是免费的，你想要的图标根基上均可以找获得，彻底知足了我平常原型绘制的时辰对图标的请求。

并且方法也很简略，将想要的原型库参加到团队项目中，在现实开辟的时辰，开辟同窗也能够直接利用此图标，一箭双雕，十分高效。

截华煜下载站止到今朝，另有一个独一的瑕疵没有解决，就是iconfont上没有Element-UI的图标，而我就是很逼迫症非要找到它怎样办？

接下来请看逼迫症患者的最终解决方案，只要你够偏执，你总能找到法子。
02 拓展：怎样获得Element-UI的图标


咱们打开Element-UI的组件库，然后找到Icon图标这个菜单，发明这里有不少饿了么原生的的Icon，我很想要把它们弄到Axure里怎样办？
1. 干货来袭
起首找公司的前端同窗拿到Element-UI的字体包文件，一般来讲引入这些前端框架的时辰城市把一些静态资本下载下来放在当地的。若是本身有脱手能力，也能够本身搭建框架，然后将字体包文件拿出来。



然后搜刮「baidu字体编纂器」，进入以后，选择打开方才拿到的字体包。



接着找到你想要的字体，然后选择导出，选择下载SVG文件便可。



最后将下载下来的SVG文件拖拽进入到Axure中，再转SVG为外形格局，便可以本身上色，改巨细了。



其他的框架的icon引入方法以此类推，只要找到当地的字体包，然后用baidu字体编纂器打开，再将字体包的内容导出为SVG便可以了。
总结
上面一共先容了四种引入图标的方法，我小我最举荐的方法是第四种，只要理解了暗地里的一些道理，根基上想引入甚么图标均可以用分歧的方法完成。

Fontawesome也是一种不错的方法，可是对一些电脑的情况有很高的请求，同时也有不少不成控的身分。若是不怕折腾和贫苦，采纳这类方法也是可以的，由于本色上icon实在就是一种特别类型的字体，只要能把字体包的问题给解决了，也便可以解决分歧呆板的情况问题了。

鉴于本人材疏学浅，本文先容的内容可能有所漏掉。若是大师另有甚么其他的引入方法，接待在留言区交换，本文到此竣事。
#专栏作家#
vitamin，微信公家号：皮酱叨逼叨。人人都是产物司理专栏作家，公家号运营小白，初中级B端产物一枚（一年开辟履历+三年产物履历）。主导过在线教诲类产物，今朝是跨境电商供给链仓储物流产物一枚，接待勾结，一同窗习。

本文原创公布于人人都是产物司理，未经作者允许，制止转载

题图来自unsplash，基于CC0协定