产品经理Axure原型设计如何使用iconfont解决图标场景

概述

产品经理Axure原型设计如何使用iconfont解决图标问题

目前Axure内比较常见的Font Awesome,虽然可以方便更改颜色和字体,但是感觉风格和icon设计还是有点单一。所以产品经理、交互设计时还是经常通过阿里的 iconfont.cn 来搜索icon,尤其在Axure 8.0某个版本支持SVG后,使用iconfont的图标一样可以无损调整大小和调整颜色。

可以一键复制iconfont图标到 Axure
可以在iconfont调整颜色或大小后再复制到Axure
可以复制到Axure后转换为svg,无损缩放及调整颜色
支持iconfont 200W+ 单色和多色图标
……

适合群体

axure设计师

产品经理

交互设计师

图标选择

产品经理在制作原型时,要用到很多图标,以下几种方式是比较常见的图标获取方式:

1、Axure自带图标库

优点:最方便

缺点:数量太少

2、网上下载图标组件库,添加到Libraries

优点:网上下载,能极大的扩充可用的图标数量

缺点:花时间,还不一定能找到自己想要的

3、字体图标Font-Awesome

需要先下载安装Font-Awesome字体文件,到官网复制图标,然后粘贴的Axure中,设置为Font-Awesome字体。

优点:图标数量多,可以修改字体图标的大小、颜色

缺点:(1)团队协同人员也需要安装Font-Awesome字体文件;(2)发布到外网环境,需要链接字体CSS文件,以防别人的电脑没安装Font-Awesome字体,浏览异常;(3)可能遇到其他人电脑有问题,丢失字体

图片.png

4、阿里巴巴矢量图标库,下载图标(PNG、SVG格式),插入图片到原型中

优点:海量图标,通过关键字搜索查找,非常方便

缺点:图片格式不可编辑,不能方便的调整颜色,进行缩放会失真

其实,利用AxureRP 9的一个小特性,搭配阿里巴巴矢量图标库,非常好用!已成为我的终极解决方案。

图标太少?没问题,搜索一下

图标失真?没问题,SVG转换成形状。这样做一箭三雕:

(1)放大、缩小不失真

(2)可以改变颜色

(3)不存在字体丢失的风险

(4)可以编辑顶点,找不到合适的图标,自己造一个!

转换.gif

操作方式:复制SVG图标粘贴到页面中,右键→Transform Shape(转换形状)→Convert SVG to Shapes(将SVG转换成形状)

了解了这个特性以后,我们就可以用阿里巴巴Iconfont+Axure,快速制作个性化Icon图标啦!

废话不多说,上一个案例:我找到了一个“发票”图标,希望把右下角齿轮改成“√”,表示已开票的状态

步骤:

1、在阿里巴巴适量图标库中搜索“发票”,复制SVG图片,粘贴到Axure中

2、转换成形状

3、编辑顶点,删除不要的“齿轮”部分

4、搜索,复制“完成”SVG图标。用同样的方法,转换成形状

5、缩小,放到第一个图标的右下角。改变第一个图标的填充颜色为绿色

6、最后别忘了,按Ctrl+G,把两个图标组合成一体

发挥你的想象力,还可以创造更多个个性化图标哦~

 

扩展阅读

iconfont,良心产品,还有更多亮点满足原型设计,例如矢量插画、3D插画图、动画图

资源源自网络搜集或用户上传整理(非原创),如有侵犯您的权益,请联系站长删除。
资源如有失效,加站长微信: 644142463 及时补发。
原文链接:https://www.yuanxing100.com/archives/347,转载请注明出处。

0

评论0

请先

显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码