童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

Axure教程:轻松导出图标字体所有图标

5月21日 蚀肉堂投稿
  近几年图标字体使用非常广泛,它的优点是可以自定义图标颜色、大小等参数,且图标不会失真。本文将教你轻松导出图标字体中的所有图标,任你所用。
  一、问题来源
  最近在集中整理一些原型、元件、框架或者素材等设计规范,在整理的过程中,遇到一个比较棘手的问题:当在Axure中选择一个图标字体时,没有办法直接通过字符,将我们想要的图标打出来。
  例如如果想在Axure中使用“加号”的字体图标时,只有三种方法能搞定:
  办法1:从其他的图标字体库中直接复制粘贴;
  办法2:从系统字体中复制粘贴;
  办法3:导出该字体图标的svgpng图片文件,再复制粘贴。
  尽管这三种方式都能满足正常使用的需求,但对应的也会存在三个问题:
  问题1:很难找到其他全面的图标字体库文件
  问题2:系统字体库中只能单个复制,无法批量复制,工作量太大
  问题3:svgpng图片下载后无法随意改变图标颜色或大小,不方便制作交互样式
  所以这些问题的出现产生了一个需求:如何将图标字体中的所有字体批量导出到Axure,变成一个个可以直接编辑的字体图标?
  本文将以知名图标字体IoniconsV5。0。0为例,来跟大家介绍一种简单直接的方法,巧用百度字体编辑器来轻松批量导出。
  二、解决办法
  2。1预览复制
  首先可以在Ionicons官网下载字体TTF格式字体文件。下载完成后,打开百度字体编辑器FontEditor,直接将刚才下载的TTF文件拖入编辑窗口。
  在正常文件没有损坏的情况下,拖入后编辑器会直接显示所有字体中的图标:
  此时如果没有其他特殊的需求,一般不需要对任何图标做格式或形状上的处理,直接点击右上角预览按钮,选择预览TTF文件即可。
  例如下图就是预览后的页面,可以看到这个页面就可以直接批量复制了,也就解决了上述第二个没办法批量复制的问题:
  注意,不要忘记复制到Word后,需要选择对应的字体格式才能正常显示字体图标。
  2。2集中处理
  通过2。1节的操作后,我们已经将所有字体图标复制到Word中了。但可能由于字体文件的设置或者FontEditor的预览规范,会发现复制后图标下方会有图标名称和图标十六进制代码,而且每一行只有一个图标,十分不方便查看。
  显然,此时不可能挨个去每行编辑,毕竟可能有成千上万行,那如何批量处理格式呢?这就要体现Word的强大了,我们可以通过高级替换功能轻松搞定。
  这里用到的高级替换有两种:
  换行替换:处理掉换行;
  通配符替换:处理掉具有规律的文本。
  先来看换行替换,在Word中,换行符也就是段落标记是p,我们只要替换成空即可(注意并不是替换成空格):
  可以看出,替换后已经处理掉了所有的换行,还剩下一些不需要的文本。仔细观察文本后发现,文本具备一定的规律性,显然可以通过正则通配符批量处理。
  首先需要根据规律文本,分析后得出具体的正则通配符公式(多一个是转义符),具体正则语法不是文章重点,此处不展开说明:
  此时再利用Word的通配符替换方法,直接替换成空即可。从下图可以看到我们得到了想要的最后的可复制格式:
  当然,此步骤可能由于文件的不同、预览格式的不同或者各人需求的不同,可能存在一些步骤上差异。但没关系,只要处理到符合你自己的需求标准即可。
  2。3最后优化
  当完成2。2后其实就可以直接从Word复制到Axure中了。当然,如果对排版有特殊要求时,可以利用Axure的行间距和字间距直接处理:
  还可以根据需要设置多个颜色的图标,适用不同的场景:
  此时我们就有了Ionicons图标字体中的所有图标,解决了开头说的所有问题。
  总结
  在动手解决这个问题前,咨询了很多的大牛,给出的建议都是直接使用图片。但只要花心思,没有问题是解决不了的,而且解决问题本身就是一个学习和动手过程。从解决流程中,也可以看到其实利用了不少工具和方法。
  总的来说,通过这个方法可以轻松搞定所有的图标字体库。既能方便平时产品原型设计时的使用,也能快速制作和积累自己的设计库。
投诉 评论 转载

Axure教程:轻松导出图标字体所有图标近几年图标字体使用非常广泛,它的优点是可以自定义图标颜色、大小等参数,且图标不会失真。本文将教你轻松导出图标字体中的所有图标,任你所用。一、问题来源最近在集中整理一……Axure教程:高保真的评论页今天和大家分享怎么用中继器制作评论页。该原型使用方便,评论内容只需要填写中继器表格即可使用,而且交互齐全完善,所以推荐给大家使用。喜欢原型或者有疑问的小伙伴们可以在下方评论处给……ProtoPie教程:列表长滑实现删除对单条列表进行横向滑动显示其支持的操作项,是一种比较常见的移动端交互方式。本案例将以任务列表页面为例,使用Protopie软件来实现单条任务列表左滑删除、右滑设为完成的效果。……Axure教程:网易云音乐首页原型设计作者利用Axure动态面板功能对网易云音乐首页进行了一个简单的原型设计,那如何利用Axure动态面板功能实现轮播效果及交互功能以及隐藏丑陋的滚动条呢?下面来和我一起研究一下……以个人书架业务为例,解析原型图的设计流程原型图到底该怎么画?这是大多产品经理入门时遇到的问题。有人会把原型图画成一幅精美的设计图;也有人在纸上手绘线框图;甚至有人不画图直接就进入开发了。本文作者从自身工作经验出发,结……Axure教程:实现鼠标按住时散开改变按钮颜色增加遮罩如何在Axure中,实现鼠标按住时,散开改变按钮颜色?一起来本文中看看首先我们来看一下简陋效果(是真的非常简陋):请手动无视最后一次,gif上传后出现的未知问题……Axure教程:获取验证码倒计时效果的实现很多APP或者网站都支持手机号登录,手机号登录一定会涉及短信验证的获取。获取的过程有时间有效性,一般默认为60s,如果用户在时效内未接收到验证码,可再次点击“获取验证码”来获取……Axure教程:商品对比关注购物车为了方便用选购商品,现在的电商网站,通常都会有对比、关注、加入购物车这三个功能。我们以京东商城为例,看看如何通过Axure实现这三个功能。图例如下所示:【需求分析】……ProtoPie进阶教程:列表滑动的操作判断本案例会用列表滑动操作的速度判断为例,教会你在Protopie中进行操作判断的主要思路和多种实现方式。具体运用场景对于长列表来说,我们一般会增加一个回到顶部的按钮,……Axure完成前端开发可行性探索曾经有产品经理使用Axure做个人博客,并发布上线。Axure到底有多少潜力?能否可以挑战更多的开发项目成为直接上线可用的产品?笔者正好利用2020年超长的春节假期进行一……Axure教程云盘案例原型:文件管理(图片、视频、文档、音乐今天和大家分享一个后台文件管理demo,包括图片管理、视频管理、音乐管理、文档管理和其它文件管理。这个demo也可以看做云盘、网盘的demo。该原型交互效果齐全,使用也简……Axure9教程:如何制作验证码倒计时,并重新获取交互效果?登录功能在互联网产品中基本上是一个必备的功能,形式也多种多样,其中较为常见的是手机号验证码登录,那我们如何制作高保真的交互效果呢?本篇文章笔者将以Axure9为工具给大家分享如……
情绪渲染在产品设计中的作用产品经理,你是否给业务留了后路?十大技巧快速提升原生APP开发性能3种不友好的注册登录设计智能电视用户体验设计分享之焦点篇思路最重要!七大秘诀帮你设计出令人难忘的优秀网站译文UI动画中的微交互详解产品经理需要懂的技术丨3分钟了解个性化推荐算法图形设计的优势在于激发用户的好奇心译文交互设计的基本元素深度社交软件的直接交流和间接交流被误用的移动体验设计模式

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界