移動互聯(lián)天氣圖標的制作方法

龐子琴， 林江， 肖然

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

?

移動互聯(lián)天氣圖標的制作方法

龐子琴， 林江， 肖然

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

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

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

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

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

1天氣圖標制作的問題及需求

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

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

2web font 特點及制作天氣圖標的優(yōu)勢

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

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

表1　web font字體文件

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

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

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

(3)加載性能好，因為圖標都被打包進一套字體內(nèi)，http request減少。

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

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

3icon font制作步驟

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

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

2 )生成字體。

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

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

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

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

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

3)CSS調(diào)用。

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

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

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

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

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

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

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

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

參考文獻:

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

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

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

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

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

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

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

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

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

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

收稿日期：2015-07-28

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

中圖分類號：TP39

文獻標識碼：A

doi:10.3969/j.issn.1007-6190.2016.01.017

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