移动互联天气图标的制作方法

2016-08-08庞子琴林江肖然

广东气象 2016年1期

关键词：移动互联

庞子琴，林江，肖然

(广东省气象公共服务中心，广东广州　510080)

移动互联天气图标的制作方法

庞子琴，林江，肖然

(广东省气象公共服务中心，广东广州510080)

摘要：在移动互联背景下，气象服务产品内容和形式的优化和体验显得更为重要。天气图标是气象服务产品的重要元素之一。本研究利用在线字体(web font)制作天气图标，能有效解决传统的位图天气图标放大缩小时出现失真、边缘锯齿等问题，满足不同服务渠道天气图标的需求，从而提升气象服务产品的质量和品牌形象。

关键词：计算机技术与应用；气象服务产品；天气图标；移动互联

随着移动互联网的发展，智能手机等移动设备极大地改变了人们的生活方式，除了微博、网站等，客户端、手机WAP网、微信微首页等也成为了目前气象信息服务的主流方式[1-8]。在此背景下，气象服务产品“内容为王”已是共识，产品表现形式也不能像过去一样呆板。用于传达品牌形象的办法之一是视觉设计[9]，美观有个性的形式，有助于产品在海量信息及各式各样的天气产品中脱颖而出，提升用户体验感，进而提升品牌形象。

天气图标是气象服务产品的重要元素之一[10]。传统的天气图标一般属于位图，缺点是放大缩小时会出现失真、边缘锯齿等问题。此外，不同业务要求不同的颜色、大小等，制作多套图片费时费力，且后期修改也不方便。为了解决这些问题，本研究探讨面对各种服务需求时，天气图标的制作方法，尝试利用在线字体(web font)制作天气图标，为提升气象服务产品质量和品牌形象等提供参考。

1天气图标制作的问题及需求

开发服务产品时，常发现网站展示的天气图标在不同分辨率的电脑屏幕上显示时，有的清晰，有的模糊；将网站的天气图标用到手机客户端、微信等时边缘不够清晰圆滑(图略)；将适合网站配色风格的图标用到微信时，颜色不太协调，不够美观，且影响产品的使用感。

解决这些问题，要考虑以下几个方面：(1)能自动适配不同分辨率的屏幕；(2)能方便地根据不同界面配色及风格对图标颜色、大小等进行修改；(3)图标文件尽可能小，以利于缩短页面加载时间；(4)兼容性好，各种版本浏览器都能展示。经过调研，发现在线字体(web font)能较好解决以上问题。

2web font 特点及制作天气图标的优势

web font即在线字体，又叫网络字体，它的实现方法是通过CSS3的@font-face把自定义的特殊字体引入到网页中显示，避免了使用图片的方法。@font-face是CSS3中关于字体设置的模块，通过@font-face可以将本地字体设置为web页面字体，用户本地不具备该字体也可以显示，并能兼容几乎所有浏览器。

既然web font 可以实现特殊字体，那么利用它来制作图标是否可行？利用字体工具，把图形图标(icon)转换为web font，就成了icon font，借助CSS的@font-face嵌入到网页中，将icon显示出来(表1)。

表1　web font字体文件

利用web font制作图标(即icon font)，具有以下优势：

(1)由于web font是矢量字体，具有矢量化的最大特点——“分辨率无关”，支持无级缩放，不会像PNG、JPG等传统位图一样在放大缩小时出现边缘锯齿或者模糊的“马赛克”现象。

(2)文件容量小，一般仅几十kB，而传统图片动辄几十几百kB。

(3)加载性能好，因为图标都被打包进一套字体内，http request减少。

(4)编辑维护便捷，可以用CSS来控制尺寸、颜色、透明度等，能满足不同的界面风格设计需求。

(5)兼容性好。由于web font起源很早，几乎支持所有现代浏览器，包括IE的低版本，具体可见：http://caniuse.com/#feat=fontface。

3icon font制作步骤

1)创建矢量图标。

使用illustrator等矢量图形软件，设计制作所需图标。制作完成后，选择“文件”菜单中“保存”，把文件保存成SVG格式。

2 )生成字体。

把SVG格式的图标导入到字体生成器中，生成所要的图标字体，常用的字体生成器有icomoon、fontello、iconfont等。以icomoon生成器为例，可以通过个性化设置来创建自定义的字体或图标，此外icomoon自身拥有免费的图标集可供选择使用，十分方便。创建流程如下：

(1)打开icomoon地址(http://icomoon.io/app/)，点击Import Icons按钮导入SVG格式图标，导入后可对图标进行选中、删除、移动、编辑等操作，获得想要的效果。

(2)编辑完成后即可下载文件，它提供两种下载方式，图片版和字体版，图片版是经过CSS Sprites技术处理的PNG格式，字体版有多种格式(EOT、SVG、WOFF、TTF)可供选择。

(3)解压下载的压缩文件包，得到以下文件(表2)。

(4)将fonts文件夹复制到网站，添加字体。打开icomoon.css文件，复制CSS样式并粘贴到网站的CSS文件中。复制完成后，在CSS文件中找到@font-face，将URL路径修改成本地的相对路径(表3)。

3)CSS调用。

字体和路径都设置完成后，在HTML页面调用相对应的class即可。

表2　创建好的图标字体文件

表3　修改CSS文件中@font-face 的URL路径为本地路径

4业务应用

目前，通过该方法制作的天气图标应用在广东天气微信缤纷微天气3.0版本及广东应急气象网(www.gd121.cn)(图1)、停课铃客户端及桌面插件等。

如图1所示，在缤纷微天气，由于背景图片会根据实际天气状况变化，图片色调不一，因此晴天图标采用实心的橙黄色，更容易凸显于背景图之上；而在广东应急气象网，网站采用清新简约风格，背景是白色，因此采用空心图标，晴天图标的颜色也使用了纯度更高更为清爽的黄色。各业务中使用的天气图标既保持相对一致的风格，又根据各自界面的特点采用了不同颜色、透明度等，展现了“广东天气”服务的品牌特色。此外，天气图标还可以根据不同的界面需求进行编辑修改。

传统的天气图标一般属于位图，优点是易用，但放大缩小时会出现失真、锯齿等问题，在线字体(web font)是基于SVG矢量图的，它通过CSS对SVG进行封装，解决易用性问题的同时，保留了矢量图放大缩小不失真的优点，在面对各种业务服务需求时，利用web font制作移动互联气象服务产品中的天气图标，具有文件容量小、加载性能好、易于编辑维护、兼容性好等优势，有利于提升服务产品的质量和体验感，进而提升气象服务品牌形象。