axure弹窗关闭_干货来袭,Axure插入图标的几种办法

581badcea5df1d7d95242c4e955a043c.png

前言

在日常绘制原型的时候,经常会需要插入相应的图标(icon)到Axure中,但是看似好像很简单的事情也给蛮多小伙伴造成了困扰。

现在很多开发团队都会用一些比较常见的前端框架来搭建后台管理系统,例如常见的Element-UI,Ant-design,iView还有Layui等。

这些前端框架基本上都自己有一套内置的图标库,所以一些常用的编辑,删除,设置,关闭等图标基本上就会直接使用。但是产品要绘制原型的时候,想要把这些图标插入到Axure中就有点麻烦了。

例如画这样一个简单的element-UI的弹窗,在Axure中可以很简单的做到解决一比一复原,唯一麻烦的点就是右上角的关闭按钮。

b6c77f4de0785cd1bae98b7b7a407faa.png

如果稍微讲究一点的朋友就会去网页上截图或者找到对应的图片文件然后放进来,稍微不讲究的那就直接用一个占位符表示了。

7eb1282cc1d05ee45799acc03aa32bba.png

或者是直接用Axure自带的内置Icons拖出一个不太协调的关闭按钮。

fe1004bc04039ec90833e434fef39596.png

Axure插入图标几种办法

方法一:直接使用内置Icons

2477e15392d5c63f585dd28350bd1a46.png

这种办法是最简单也是最快速的,直接从内置的元件中拖拽出来,可以调整大小和颜色,而且清晰度等也很不错。

但是缺点也很明显,那就是内置的Icons内容太少了,很多图标是上古时期的,压根就和现在的主流图标风格不搭。所以就连一个普通的关闭按钮,都搭配不上,更不用谈一些很有语义性的图标了。

方法二:图片粘贴大法

这种办法是最快速也是最简单的,例如刚刚我要画一个Element-UI的关闭按钮,但是我从Axure内置原件库找不到,也不想花太多时间去找,那么我直接从网页上截图一个白底的图片就好了,然后粘贴覆盖在相应的位置即可。

截图的优点是快速,简单。缺点是图片调整大小的时候不是那么精准,同时图片截图之后是不能改颜色和粗细的。

这意味着如果我要一个蓝底白字的图标,那就得再去网页上找,或者自己F12调试相应的样式,然后再截图下来。一套操作下来,还是有点麻烦。

方法三:Fontawesome大法

Fontawesome是一套绝佳的图标字体库和CSS框架,下图是官网的一些介绍。对于不太懂技术的朋友,可以把它理解成是一套集成式的字体库图标,意味着每一个图标其实是拥有字体一样的属性,例如字体大小,粗细,颜色等。

0b9dae29cc5f5dcc1c32624b06da607d.png

431591dc3ce035020bc0c0ccb72ba551.png

有很多Axure的培训都会推荐使用Fontawesome的方式在Axure中插入图标,例如Axure培训大佬「小楼一夜听春雨」就写过类似的教程指导怎么使用Fontawesome,AxureUX的大梨老师也写了很详细的教程来指导怎么使用。

首先本机需要安装相应的字体库,然后从Fontawesome的官网或者AxureUX的专门页,复制相应的内容,然后再粘贴到Axure中,最后再选择对应的字体即可。

f82ef69cde7ebfb72dbae5048f55d535.png

这种方法可以适用于绝大多数场景,基本上算是一个比较可以接受的解决方案,但是直到我装好字体画好图标,打开预览之后,我发现了一个很操蛋的事情:预览状态下,图标没有生效!!!

cf9b0852cc0b33152d1c4d0035fc96a4.png

有朋友肯定会说,那肯定是你自己哪里设置有问题了。

是的,刚开始我也是这样想的,直到我花了半个多小时在网上找各种解决方案,我还是没能解决这个问题的时候,我才意识到,这样搞可能是个无底洞。

因为产品相关问题不像技术问题,会有很多论坛或者交流群,所以一些产品方面的技术手段出问题了,要定位问题其实很难。采用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,最后再做两次取消分组就可以了。

f8e74e4a3b755f10f142b34ee40e934a.png

fef7b117a0b8bae98a088d3a14c33d10.png

话题回到Axure中,Axure也可以使用这种办法,而且Axure的SVG处理能力比PPT还更好,它支持你自己复制SVG的代码然后粘贴到Axure中,就可以自动识别。

0512d088c3a663ac0ae0d6caf5739217.png

20190af0e3561df353bc595c04a487ac.png

0c0c75fee59965ea4928027d49c60d71.png

38f9ee19008204a27fad876c99710c7d.png

复制SVG代码之后,粘贴在Axure中,然后右键将SVG图片转为形状,然后就可以自由的编辑(调色,改大小等)。

恰巧的是,我们团队中的项目的一些icon都是来源一个网站,而且这个网站也正好支持复制SVG代码的功能,它就是:阿里巴巴矢量图标库

6643255923dbe619809a9c1c7ef1e51d.png

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

e5ccdbeb3025df7efd79ee804e71c388.png

81bc51290e7d9ce213b019b39e4524f6.png

总结一下,SVG法很实用,也很方便。主要是iconfont目前的生态很好,有很多素材,而且完全是免费的,你想要的图标基本上都可以找得到,完全满足了我日常原型绘制的时候对图标的要求。

而且方式也很简单,将想要的原型库加入到团队项目中,在实际开发的时候,开发同学也可以直接使用此图标,一举两得,十分高效。

截止到目前,还有一个唯一的瑕疵没有解决,就是iconfont上没有Element-UI的图标,而我就是很强迫症非要找到它怎么办?

接下来请看强迫症患者的终极解决方案,只要你够偏执,你总能找到办法。

拓展:怎么获取Element-UI的图标

a3c79edf4acd3c8d41700e1f6174b5c0.png

我们打开Element-UI的组件库,然后找到Icon图标这个菜单,发现这里有很多饿了么原生的的Icon,我很想要把它们弄到Axure里怎么办?

干货来袭

首先找公司的前端同学拿到Element-UI的字体包文件,一般来说引入这些前端框架的时候都会把一些静态资源下载下来放在本地的。如果自己有动手能力,也可以自己搭建框架,然后将字体包文件拿出来。

beedb2353405eb0a49874e5a047a8537.png

然后搜索「百度字体编辑器」,进入之后,选择打开刚刚拿到的字体包。

9919c8c3e1de647b9681b6f8dc4c89ef.png

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

7c87df1dee95bbd903e36a5f27c7ca57.png

最后将下载下来的SVG文件拖拽进入到Axure中,再转SVG为形状格式,就可以自己上色,改大小了。

0949a704c5e1fbfdef173b9d14b47eab.png

其他的框架的icon引入方式以此类推,只要找到本地的字体包,然后用百度字体编辑器打开,再将字体包的内容导出为SVG就可以了。

总结

上面一共介绍了四种引入图标的方式,我个人最推荐的方式是第四种,只要理解了背后的一些原理,基本上想引入什么图标都可以用不同的方式完成。

Fontawesome也是一种不错的方式,但是对一些电脑的环境有很高的要求,同时也有很多不可控的因素。如果不怕折腾和麻烦,采用这种方式也是可以的,因为本质上icon其实就是一种特殊类型的字体,只要能把字体包的问题给解决了,也就可以解决不同机器的环境问题了。

鉴于本人才疏学浅,本文介绍的内容可能有所遗漏。如果大家还有什么其他的引入方式,欢迎在留言区交流,本文到此结束。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/467670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用指针实现高低位倒序,疯了吧

昨晚在微信群看到一个读者发的面试题目,从网上截图出来的,我百思不得其解,题目如图。幸好,我学过栈栈,C语言实现然后我写了个小程序第一个方法比较笨,当我写完自己的代码后,看到有同学发了自己的…

部署nexus服务

一、安装和启动 官网下载nexus-2.12安装包,地址:https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.12.0-01-bundle.tar.gz 此版本需要预先安装jdk1.7 解压后,用命令【./bin/nexus start】来启动 nexus有如下一些控制命令&…

天然气表怎么看多少方_上海考大学难度怎么样?看2019上海高考“成绩分布表”和“本科分数线”就知道了!...

参加高考的同学和家长们注意了~上海市教育考试院近日发布本市普通高等学校秋季招生本科各批次录取控制分数线和成绩分布表。艺术类、体育类本科文化控制分数线也同步公布。(鲁申君注:上海2019年高考本科总分660,专科总分450,不分文…

关于Linux内核代码不使用typedef的讨论?

C语言关键字 -(typedef关键字)typedef有点像火隐忍者里面的万花筒写轮眼,用起来非常炫酷有型,使你的代码更加简短,让你穿上你亲妈都认不出你的马甲…比如这样一段代码typedef struct point{int x, y;} Points;Points f…

基于深度学习模型的花卉图像分类代码_华为不止有鸿蒙!教你快速入门华为免编程深度学习神器ModelArts...

引言:本文介绍利用华为ModelArts进行深度学习的图像分类任务,不用一行代码。今年8月9日,在华为史上规模最大的开发者大会上,华为正式发布全球首个基于微内核的全场景分布式OS——鸿蒙操作系统(HarmonyOS)。但你知道吗?…

洛谷P3405 [USACO16DEC]Cities and States省市

P3405 [USACO16DEC]Cities and States省市 题目描述 To keep his cows intellectually stimulated, Farmer John has placed a large map of the USA on the wall of his barn. Since the cows spend many hours in the barn staring at this map, they start to notice severa…

天线的原理

关注、星标公众号,不错过精彩内容来源:中兴文档小时候家里的收音机、电视机,都带着可以灵活转动拉伸的杆子,大家一定对这个可以转来转去的杆子记忆犹新,或许也好奇的发现这个杆子的长度与方向和收音机、电视的接收效果…

2d 蓝图_“蓝图”卷积--对深度可分离卷积的再思考

论文:Rethinking Depthwise Separable Convolutions: How Intra-Kernel Correlations Lead to Improved MobileNetshttps://arxiv.org/pdf/2003.13549.pdf​arxiv.org代码地址:zeiss-microscopy/BSConv​github.com一、背景一些轻量级的网络,…

Node.js 得到当前目录下文件修改文件名

博客园第一篇,平时都用 .net ,现在 node.js 比较火,就用它做一些小工具,比较方便 Node.js 得到当前目录下文件修改文件名,把 .txt 修改为.md var fs require(fs); var fileDirectory __dirname if (fs.existsSync(fileDirectory)) {fs.readdir(fileDir…

原来你也在写公众号

现在凌晨1点,我睡不着,因为今天打球了,每次打球回来我总是睡得很奇怪,奇怪有时候打球回来一躺下就睡着了,有时候打球回来就会习惯性失眠。脑海里总是浮现各种打球的进球动作,然后各种幻想,再加上…

中的数组怎么转成结构体_PLC知识,什么是数组和结构体?

今天给大家介绍一下什么是数组,什么是结构体,关于数组我们会介绍数组的定义、它的使用方法,关于结构体我们会介绍结构体的使用、怎么去建立一个结构体等知识,之前也是有部分学员有问过这些问题的,那么都一块儿给大家讲…

MMU那些事儿

最近在重新看这部分知识点,内存管理和进程调度应该是Linux下最核心的两个东西,不管你做得多牛逼了,这两点拿出来讨论,总是会让人眼前一亮,或者是可以讨论很久很久,这篇文章,读完后可能也可以让大…

51Nod 1530 稳定方块

瓦西亚和皮台亚摆放了m个方块。方块被编号为0到m-1(每个号码出现恰好一次)。现在建立一个座标系OX表示地面,OY的方向是竖直向上的。每一方块的左下角有一个座标而且是整点座标。 摆放好的方块一定要是稳定的。稳定的含意是每一个不在地面上的方块在他的下面至少有一…

C语言、嵌入式中几个非常实用的宏技巧

宏打印函数 在我们的嵌入式开发中,使用printf打印一些信息是一种常用的调试手段。但是,在打印的信息量比较多的时候,就比较难知道哪些信息在哪个函数里进行打印。特别是对于异常情况的打印,我们需要快速定位到异常情况的位置。这时…

canvas 多次画图效果_canvas练习之终极的奔跑小人

这次做一个终极的练习,先看一下最后的效果。一个不停奔跑的小人,点击鼠标后会让他跑到目的地,并且呈现不同的角度。下面来看一下如何一步步来实现它的。准备网上下载了一张图片,其中包含了小人面向不同角度奔跑的各个分解动作。新…

loadrunner11安装,提示少了Microsoft Visual c++2005 sp1运行时组件解决办法

解决方法:1、进入loadrunner-11\Additional Components\IDE Add-Ins\MS Visual Studio .NET2、安装:LRVS2005IDEAddInSetup.exe3、再安装loadrunner破解方法:1、把loadrunner相关程序全部退出;2、把lm70.dll、mlr5lprg.dll放到安装…

C语言的爱你永不悔

#前言今天是520节,昨天晚上睡觉的时候,我家地瓜一直说520,520,我不知道要干啥,我就说,要睡就睡,不睡就起来。今天我看了朋友圈,我才知道原来520就是「我爱你」的意思。今天在朋友圈看到的一个小…

服务网关zuul之二:过滤器--请求过滤执行过程(源码分析)

Zuul的核心是一系列的过滤器,这些过滤器可以完成以下功能: 身份认证与安全:识别每个资源的验证要求,并拒绝那些与要求不符的请求。审查与监控:在边缘位置追踪有意义的数据和统计结果,从而带来精确的生成视图…

l4 l7 代理_什么是四层(L4 proxy)和七层负载均衡(L7 proxy)?区别是什么? 翻译自Nginx官网...

阅读前的小说明:由于工作需要,本人正在研究微服务架构。而微服务的服务网格( Service Mesh )架构中,需要选择一种 proxy 作为每个微服务之间通讯的代理。因此为了定夺微服务中常用的两种代理,即: Nginx 和 Envoy 如何选…

Linux 下的0 1 2特殊文件描述符~

最近在做项目的时候遇到的几个知识点,我觉得非常有意思,以前学Linux的时候也有接触到管道方面的,但是在应用中却基本没有遇到过。还有Linux下的几个特殊的文件描述符,用这几个文件描述符可以做很多事情,能做什么事情决…