香港六合,六合资料,六合图库,香港挂牌,六合宝典,王中王

六合

图标库的制作和使用教程

六合资料在每次进行高保真原型绘制的时候,都需要去网站上搜索并下载图标,比较浪费时间,所以需要整理一个常用的图标库,以便之后做原型设计时可以快速选取。自己制作了一套完整的图标库后,发现实际操作起来其实很简单,在这给大家分享一些心得和使用技巧。

一、图标库的制作

前期:Axure RP软件,图优网站

1、创建元件库(图标库)

打开Axure(这里用的是Axure8.0版本),如下图所示点击创建元件库(通过创建元件库的方式来达到创建图标库的目的,以下为了保持一致,采用元件库的说法)。

点击创建元件库,弹出弹框,选择文件保存地址,起一个专属的元件库名(这里叫“六合 · 图标库(1px) · 2018”库,为了区别于2px的图标库)。

保存成功后会在刚刚的文件地址处生成一个元件库文件,到此已完成创建流程。

2、添加图标元件

创建成成功后会自动打开新建的元件库文件,如果没有自动打开可以选择该元件库,点击“编辑元件库”,也会跳出新的文件(如下图)或者在刚刚保存的地址处双击该元件库。

创建元件和编辑方法与制作原型的操作相同,在左上角创建元件,并进行元件命名。

在绘制区域,制作你的图标元件。首先要从图优网站下载图标,再复制到绘制区域。具体的:

  • 批量下载方式:

点击全部加入小车,右下角显示已添加324个图标即已全部添加。

点击“去下载”,在弹出面板中选择“下载素材”。

图标大小这里选择32px(常用的图标大小为 16*16,32px方便大家使用和调整大小),图标样式中颜色默认即可,选择SVG格式下载(划重点)。

  • 单个图标下载(后续补充和优化图标库常用):

先进行关键词搜索,点击下载按钮,选择图图标样式同上,选择SVG格式下载(划重点)。

复制到区域后(或直接拖入),右键转为选择“转换SVG图片为形状”,后调整图标位置,设置x,y都为0,或者直接拖动图标到x,y都为0处。至此完成了一个图标的制作了。其他图标同样操作。最后做完了不要忘记“ctrl+s”哦。

二、图标库的使用

1、载入元件库

从文件服务器上下载或者本地制作的元件库,六合资料可以将它们载入到Axure中去。

载入方式一:

如下图所示点击“载入元件库”,选择一个你想要导入的元件库。

载入方式二:

选择“文件下”的“从RP文件导入”选项,选择一个你想要导入的元件库。

至此,已经成功载入元件库。如下图可以查看已经载入的元件库,选中你想使用的元件库即可。

2、查询图标

基于以上操作,成功打开了“六合 · 图标库(1px) · 2018”图标库。

为了更快地找到需要的图标,可以进行关键字的搜索。点击查询的图标按钮,在显示的输入框中输入关键字,自动展示查询结果。

3、图标操作

(1)调整大小:

查询得到需求图标之后,将其拖入绘制区域,按比例缩放到合适尺寸(建议按住ctrl,拖动右下角改变进行缩放),常用尺寸为16*16px。由于图标制作的特性,大小不一定是1:1的比例,需要调整到视觉感知合适的大小。

ctrl+拖动:

按照比例填入数字完成缩放:

比如:复制进来后的宽高分别是:24,30,按照比例可以缩小到16,20。

(2)改变颜色:

根据元件库的色板中提供的色值,进行色值的选择和填充。

 

2