Axure RP中添加Web字体 使用FontAwesome 图标库完成设计

在做交互设计的时候,作为产品设计师我们常常需要用一些标准的图标库,通过导入现成的图标可以极大地提高我们的设计效率。

常用的图标库,一般提供SVGPNG图片,他们提供给设计师矢量图片(SVG格式或字体格式),设计师在设计稿中记录该图标的名称,并告知前端开发人员。

在开发过程中,前端同学通过调用图标库提供的CSS样式,并填上对应图标的名称,便可以快速在Web上呈现出各种精美的矢量图标,例如:

  1. Icon, 可提供自定义的字体库图标供设计师使用
  2. 阿里图标库 ,可提供SVGPNG图片供设计师使用
  3. Font Awesome,可提供标准的字体库图标供设计师使用

今天我们重点讲述,如果规范使用Font Awesome图标库完成交互设计,并让前端同学快乐地跟我们合作。

初识 Font Awesome

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

官方网页为: http://fontawesome.com(新版官网)

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

新版 FontAwesome 官网

对于英文不是太好的同学可以访问由“极风游科技”提供的 中文页面: http://fontawesome.dashgame.com

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

选择页面顶部的“图标”按钮,可以看到所有图标的分类:

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

选择“文件”,网页自动跳转出到所有“文件”图标部分,点击图标最后的“复制”按钮,可以复制到该图标的名称,如下红框所示“file-excel-o”,这里非常重要,这个名称对于设计师之后导入图标到Axure 或者 前端同学都非常有用。

Axure RP8中添加Web字体  使用FontAwesome 图标库完成设计

产品设计师如何使用Font Awesome

1.下载字体库

由于Font Awesome图标库是基于字体来使用的,所以我们首先需要在官方主页的最上面点击”立即下载”(目前最新版为 V4.7.0), 然后解压压缩包,点击 “TrueType 字体文件”,完成字体的安装:

在Axure 中使用 Font Awesome

在页面中安装使用 Font Awesome

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

Axure字体选择就可以看到FontAwesome

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

2.载入字体库并使用字体元件库

载入部件库,在Axure中选择【载入元件库】

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

找到你下载的rplib文件,进行安装,也可以将元件库直接复制到“Axure RP 8\DefaultSettings\Libraries”,前面的 Axure RP8是软件安装的根目录;可到百度网盘下载

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

在左侧的元件库中,选择“FontAwesome”直接使用,然后你就可以直接使用了,自由更改字体大小,颜色等

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

3.生成原型之后,链接CSS样式

完成原型制作之后,然后就是给别人看了,由于我们使用了特殊的FontAwesome字体,就需要告知网页加载这个字体样式。

使用网络添加远程地址文件

在【发布】-【在HTML文件中重新生成当前页面(R)】-【生成HMTL文件】-【Web字体】中进行相应设置,添加链接到“.css”文件,也可以使用快捷键 ctrl + f8 再到【Web字体】中添加 URL ,(这是个远程地址,需要网络)

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

也可以使用本地文件添加

也可以使用后面的 @font-face 并在具体参数处填写:

font-family:FontAwesome;
src:url(‘fontawesome-webfont.ttf’)format(‘truetype’);

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

然后将TrueType字体库放入HTML文件所在的文件夹里面,如下图所示:

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计--运营喵的世界

见证奇迹的时刻,重新打开你的原型,就能看到你想要的字体了。

前端攻城狮如何使用Font Awesome

Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称(前端同学可以查看设计同学线框图中的注释)。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ,因为它更简洁。

但实际上使用<span>才能更加语义化。如下所示:

前端的小伙伴们可以很深入的了解下矢量图标。

<i class="fa fa-camera-retro"></i> fa-camera-retro	

Axure RP8中添加Web字体 使用FontAwesome 图标库完成设计

  赞 2