龐子琴， 林江， 肖然

(廣東省氣象公共服務(wù)中心，廣東廣州　510080)

?

移動(dòng)互聯(lián)天氣圖標(biāo)的制作方法

龐子琴， 林江， 肖然

(廣東省氣象公共服務(wù)中心，廣東廣州510080)

摘要：在移動(dòng)互聯(lián)背景下，氣象服務(wù)產(chǎn)品內(nèi)容和形式的優(yōu)化和體驗(yàn)顯得更為重要。天氣圖標(biāo)是氣象服務(wù)產(chǎn)品的重要元素之一。本研究利用在線字體(web font)制作天氣圖標(biāo)，能有效解決傳統(tǒng)的位圖天氣圖標(biāo)放大縮小時(shí)出現(xiàn)失真、邊緣鋸齒等問題，滿足不同服務(wù)渠道天氣圖標(biāo)的需求，從而提升氣象服務(wù)產(chǎn)品的質(zhì)量和品牌形象。

關(guān)鍵詞：計(jì)算機(jī)技術(shù)與應(yīng)用； 氣象服務(wù)產(chǎn)品； 天氣圖標(biāo)； 移動(dòng)互聯(lián)

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，智能手機(jī)等移動(dòng)設(shè)備極大地改變了人們的生活方式，除了微博、網(wǎng)站等，客戶端、手機(jī)WAP網(wǎng)、微信微首頁(yè)等也成為了目前氣象信息服務(wù)的主流方式[1-8]。在此背景下，氣象服務(wù)產(chǎn)品“內(nèi)容為王”已是共識(shí)，產(chǎn)品表現(xiàn)形式也不能像過去一樣呆板。用于傳達(dá)品牌形象的辦法之一是視覺設(shè)計(jì)[9]，美觀有個(gè)性的形式，有助于產(chǎn)品在海量信息及各式各樣的天氣產(chǎn)品中脫穎而出，提升用戶體驗(yàn)感，進(jìn)而提升品牌形象。

天氣圖標(biāo)是氣象服務(wù)產(chǎn)品的重要元素之一[10]。傳統(tǒng)的天氣圖標(biāo)一般屬于位圖，缺點(diǎn)是放大縮小時(shí)會(huì)出現(xiàn)失真、邊緣鋸齒等問題。此外，不同業(yè)務(wù)要求不同的顏色、大小等，制作多套圖片費(fèi)時(shí)費(fèi)力，且后期修改也不方便。為了解決這些問題，本研究探討面對(duì)各種服務(wù)需求時(shí)，天氣圖標(biāo)的制作方法，嘗試?yán)迷诰€字體(web font)制作天氣圖標(biāo)，為提升氣象服務(wù)產(chǎn)品質(zhì)量和品牌形象等提供參考。

1天氣圖標(biāo)制作的問題及需求

開發(fā)服務(wù)產(chǎn)品時(shí)，常發(fā)現(xiàn)網(wǎng)站展示的天氣圖標(biāo)在不同分辨率的電腦屏幕上顯示時(shí)，有的清晰，有的模糊；將網(wǎng)站的天氣圖標(biāo)用到手機(jī)客戶端、微信等時(shí)邊緣不夠清晰圓滑(圖略)；將適合網(wǎng)站配色風(fēng)格的圖標(biāo)用到微信時(shí)，顏色不太協(xié)調(diào)，不夠美觀，且影響產(chǎn)品的使用感。

解決這些問題，要考慮以下幾個(gè)方面：(1)能自動(dòng)適配不同分辨率的屏幕；(2)能方便地根據(jù)不同界面配色及風(fēng)格對(duì)圖標(biāo)顏色、大小等進(jìn)行修改；(3)圖標(biāo)文件盡可能小，以利于縮短頁(yè)面加載時(shí)間；(4)兼容性好，各種版本瀏覽器都能展示。經(jīng)過調(diào)研，發(fā)現(xiàn)在線字體(web font)能較好解決以上問題。

2web font 特點(diǎn)及制作天氣圖標(biāo)的優(yōu)勢(shì)

web font即在線字體，又叫網(wǎng)絡(luò)字體，它的實(shí)現(xiàn)方法是通過CSS3的@font-face把自定義的特殊字體引入到網(wǎng)頁(yè)中顯示，避免了使用圖片的方法。@font-face是CSS3中關(guān)于字體設(shè)置的模塊，通過@font-face可以將本地字體設(shè)置為web頁(yè)面字體，用戶本地不具備該字體也可以顯示，并能兼容幾乎所有瀏覽器。

既然web font 可以實(shí)現(xiàn)特殊字體，那么利用它來制作圖標(biāo)是否可行？利用字體工具，把圖形圖標(biāo)(icon)轉(zhuǎn)換為web font，就成了icon font，借助CSS的@font-face嵌入到網(wǎng)頁(yè)中，將icon顯示出來(表1)。

表1　web font字體文件

利用web font制作圖標(biāo)(即icon font)，具有以下優(yōu)勢(shì)：

(1)由于web font是矢量字體，具有矢量化的最大特點(diǎn)——“分辨率無關(guān)”，支持無級(jí)縮放，不會(huì)像PNG、JPG等傳統(tǒng)位圖一樣在放大縮小時(shí)出現(xiàn)邊緣鋸齒或者模糊的“馬賽克”現(xiàn)象。

(2)文件容量小，一般僅幾十kB，而傳統(tǒng)圖片動(dòng)輒幾十幾百kB。

(3)加載性能好，因?yàn)閳D標(biāo)都被打包進(jìn)一套字體內(nèi)，http request減少。

(4)編輯維護(hù)便捷，可以用CSS來控制尺寸、顏色、透明度等，能滿足不同的界面風(fēng)格設(shè)計(jì)需求。

(5)兼容性好。由于web font起源很早，幾乎支持所有現(xiàn)代瀏覽器，包括IE的低版本，具體可見：http://caniuse.com/#feat=fontface。

3icon font制作步驟

1)創(chuàng)建矢量圖標(biāo)。

使用illustrator等矢量圖形軟件，設(shè)計(jì)制作所需圖標(biāo)。制作完成后，選擇“文件”菜單中“保存”，把文件保存成SVG格式。

2 )生成字體。

把SVG格式的圖標(biāo)導(dǎo)入到字體生成器中，生成所要的圖標(biāo)字體，常用的字體生成器有icomoon、fontello、iconfont等。以icomoon生成器為例，可以通過個(gè)性化設(shè)置來創(chuàng)建自定義的字體或圖標(biāo)，此外icomoon自身?yè)碛忻赓M(fèi)的圖標(biāo)集可供選擇使用，十分方便。創(chuàng)建流程如下：

(1)打開icomoon地址(http://icomoon.io/app/)，點(diǎn)擊Import Icons按鈕導(dǎo)入SVG格式圖標(biāo)，導(dǎo)入后可對(duì)圖標(biāo)進(jìn)行選中、刪除、移動(dòng)、編輯等操作，獲得想要的效果。

(2)編輯完成后即可下載文件，它提供兩種下載方式，圖片版和字體版，圖片版是經(jīng)過CSS Sprites技術(shù)處理的PNG格式，字體版有多種格式(EOT、SVG、WOFF、TTF)可供選擇。

(3)解壓下載的壓縮文件包，得到以下文件(表2)。

(4)將fonts文件夾復(fù)制到網(wǎng)站，添加字體。打開icomoon.css文件，復(fù)制CSS樣式并粘貼到網(wǎng)站的CSS文件中。復(fù)制完成后，在CSS文件中找到@font-face，將URL路徑修改成本地的相對(duì)路徑(表3)。

3)CSS調(diào)用。

字體和路徑都設(shè)置完成后，在HTML頁(yè)面調(diào)用相對(duì)應(yīng)的class即可。

表2　創(chuàng)建好的圖標(biāo)字體文件

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

4業(yè)務(wù)應(yīng)用

目前，通過該方法制作的天氣圖標(biāo)應(yīng)用在廣東天氣微信繽紛微天氣3.0版本及廣東應(yīng)急氣象網(wǎng)(www.gd121.cn)(圖1)、停課鈴客戶端及桌面插件等。

如圖1所示，在繽紛微天氣，由于背景圖片會(huì)根據(jù)實(shí)際天氣狀況變化，圖片色調(diào)不一，因此晴天圖標(biāo)采用實(shí)心的橙黃色，更容易凸顯于背景圖之上；而在廣東應(yīng)急氣象網(wǎng)，網(wǎng)站采用清新簡(jiǎn)約風(fēng)格，背景是白色，因此采用空心圖標(biāo)，晴天圖標(biāo)的顏色也使用了純度更高更為清爽的黃色。各業(yè)務(wù)中使用的天氣圖標(biāo)既保持相對(duì)一致的風(fēng)格，又根據(jù)各自界面的特點(diǎn)采用了不同顏色、透明度等，展現(xiàn)了“廣東天氣”服務(wù)的品牌特色。此外，天氣圖標(biāo)還可以根據(jù)不同的界面需求進(jìn)行編輯修改。

傳統(tǒng)的天氣圖標(biāo)一般屬于位圖，優(yōu)點(diǎn)是易用，但放大縮小時(shí)會(huì)出現(xiàn)失真、鋸齒等問題，在線字體(web font)是基于SVG矢量圖的，它通過CSS對(duì)SVG進(jìn)行封裝，解決易用性問題的同時(shí)，保留了矢量圖放大縮小不失真的優(yōu)點(diǎn)，在面對(duì)各種業(yè)務(wù)服務(wù)需求時(shí)，利用web font制作移動(dòng)互聯(lián)氣象服務(wù)產(chǎn)品中的天氣圖標(biāo)，具有文件容量小、加載性能好、易于編輯維護(hù)、兼容性好等優(yōu)勢(shì)，有利于提升服務(wù)產(chǎn)品的質(zhì)量和體驗(yàn)感，進(jìn)而提升氣象服務(wù)品牌形象。

圖1　廣東天氣微信繽紛微天氣3.0 (a)及廣東應(yīng)急氣象網(wǎng)(b)的天氣圖標(biāo)

參考文獻(xiàn):

[1]俞宙，朱平，楊武.新時(shí)期發(fā)展氣象信息科技服務(wù)的思考[J].廣東氣象，2012，34(2)：封2-封3.

[2]陳恒明，高權(quán)恩，陳玥熤，等.如何做好官方天氣微博信息服務(wù)[J].廣東氣象，2012，34(5)：64-67.

[3]朱平，陳靜，薛曉冰.廣東省氣象官方微博服務(wù)的實(shí)踐與探索[J].廣東氣象，2013，35(3)：64-67.

[4]陳靜，梁宏升.自媒體時(shí)代的氣象服務(wù)[J].廣東氣象，2013，35(6)：52-55.

[5]陳玥熤，郭鵬，黃俊生.廣東天氣微產(chǎn)品入汛服務(wù)效果分析[C]∥第31屆中國(guó)氣象學(xué)會(huì)年會(huì)第四屆氣象服務(wù)發(fā)展論壇“提高水文氣象防災(zāi)減災(zāi)水平，推動(dòng)氣象服務(wù)社會(huì)化發(fā)展”分會(huì)場(chǎng)論文集，2014.

[6]屈鳳秋，黃俊生，高權(quán)恩.新媒體時(shí)代基于微博的臺(tái)風(fēng)氣象服務(wù)[C]∥第30屆中國(guó)氣象學(xué)會(huì)年會(huì)第三屆氣象服務(wù)發(fā)展論壇“公眾、專業(yè)氣象預(yù)報(bào)服務(wù)技術(shù)與應(yīng)用”分會(huì)場(chǎng)論文集，2013.

[7]龐子琴.從一檔電臺(tái)節(jié)目看移動(dòng)互聯(lián)時(shí)代氣象服務(wù)的機(jī)遇和挑戰(zhàn)[J].廣東氣象，2015，37(1)：40-43.

[8]程永明，張卉，楊玫.微信在氣象服務(wù)中的應(yīng)用探索[C]∥第31屆中國(guó)氣象學(xué)會(huì)年會(huì)第四屆氣象服務(wù)發(fā)展論壇“提高水文氣象防災(zāi)減災(zāi)水平，推動(dòng)氣象服務(wù)社會(huì)化發(fā)展”分會(huì)場(chǎng)論文集，2014.

[9]Jesse James Garrett.用戶體驗(yàn)要素：以用戶為中心的產(chǎn)品設(shè)計(jì)[M].北京：機(jī)械工業(yè)出版社，2015：137.

[10]邱菲菲.公眾氣象服務(wù)符號(hào)體系的設(shè)計(jì)研究[D].上海：華東師范大學(xué)，2009.

收稿日期：2015-07-28

作者簡(jiǎn)介：龐子琴(1982年生)，女，工程師，碩士研究生，主要從事氣象服務(wù)工作。E-mail：mouse_pzq@163.com

中圖分類號(hào)：TP39

文獻(xiàn)標(biāo)識(shí)碼：A

doi:10.3969/j.issn.1007-6190.2016.01.017

龐子琴， 林江， 肖然.移動(dòng)互聯(lián)天氣圖標(biāo)的制作方法[J].廣東氣象，2016,38(1)：70-72.