多语言展示
当前在线:1296今日阅读:19今日分享:20

在线ICONS图标库的使用

在做UI或原型设计时,需要根据功能、内容布置一些小图标,让界面交互更加友好、更加有针对性。目前网上也有很多类型的图标文件下载,你可以下载放在本地,需要用的时候就拿过来。如果你嫌麻烦,可以试试在线Icons图标库,非常方便,按需去取,不占本地空间。
工具/原料
1

Material.io

2

Thinkpad e431

3

网络

4

Windows 10 /浏览器

方法/步骤
1

我们先来看看从网上下载的方式,你可能下载到一张JPG或PSD格式的文件,然而你在需要使用的时候,需要再次编辑从中去选择其中一个图标,这时候非常麻烦,你还得懂PS软件的使用,进行细致抠图操作。

2

用PS来进行图标处理,这对你来说又是增加了一项技能呀,有没有那种直接拿来就可以用的啊?经寻找,发现一个在线ICONS网站,可以直接按需要下载使用即可。

3

先进入此网站,在导航菜单中点击”TOOLS“,在打开的TOOLS页面上点击“ICONS”链接,进入ICONS图标库首页。

4

我们来看看其网站的一些声明,避免产生纠纷。(1)、告诉我们,这里的图标可以用于Android、iOS及web应用中;(2)、Fit for use:意思是每个图标有五个主题和不同大小可下载;(3)、Icon font:告诉我们可以使用图标文件引用;(4)、Open source:告诉我们是开源的,只要你不拿去卖钱,都是可以免费使用;

5

ICONS首页有以下功能:(1)、可按主题进行筛选:(2)、也可自主进行按名字搜索(不过是英文的)(3)、也可以按分类进行筛选我们来看看搜索的效果,中文是无效,只能输入英文搜索。

6

按主题,目前共5种主题可选择,分别是:Filled(填充风格--全是黑的)、Outlined(空心风格,里面是白)、Rounded(圆角风格,其实和Filled差不多)、Two-Tone(双色风格)、Sharp(尖角风格)。

7

按分类,目前有16种分类,分别是Action、Alert、Av、Communication、Content、Device、Editor、File、Hardware、Image、Maps、Navigation、Notification、Places、Social、Toggle。基本上涵盖了设计中的主要场景和领域的图标。

8

接下来,我们来看看如何下载使用图标。点击你选中的图标,即可出现图标下载保存的界面。在右下角出现的界面点击“Selected Icon”按钮,展开更详细的下载选项。

9

在展现的选项中,主要可以进行大小、下载类型、使用方式的指导。(1)大小:选择默认的18dp,显示出下拉菜单,根据需要选择;(2)下载类型:目前支持PNG和SVG两种格式;(3)使用方法:主要指icon font;我们选择下载png格式,点击后弹出下载界面,选择保存路径即可完成一个图标的选择。

10

是不是非常方便,不用自己下载到本地,可以快速的进行图标的获取。当然也有缺点,风格相对来说固定,数量也较为有限,不过应对一般的需求应该是足够了。

推荐信息