弓盈 潘煜

（中國天氣網(wǎng)，北京 100081）

0　基于GIS的氣象服務(wù)產(chǎn)品發(fā)展現(xiàn)狀

地理信息系統(tǒng)（Geographic Information System，GIS）在我國雖然起步晚，但發(fā)展迅速。1980年，中國科學院遙感應(yīng)用研究所成立了全國第一個地理信息系統(tǒng)研究室，標志著我國GIS研究的起步。經(jīng)過三十余年的發(fā)展，GIS產(chǎn)品在中國已從基礎(chǔ)設(shè)施建設(shè)領(lǐng)域逐步深入至普通百姓的日常生活，公眾對GIS產(chǎn)品的認識普遍加深，需求大幅增加，促進了GIS應(yīng)用范圍的不斷擴大和深化，并伴隨互聯(lián)網(wǎng)技術(shù)的普及而逐步走向社會化。

與此同時，隨著中國氣象事業(yè)的發(fā)展及公眾對氣象服務(wù)日趨多樣化的需求，如何更有效地對氣象數(shù)據(jù)進行可視化是氣象部門面臨的重要科學問題。氣象數(shù)據(jù)具有明顯的空間特征，實時性強，數(shù)據(jù)量大。傳統(tǒng)的氣象數(shù)據(jù)處理手段（如傳統(tǒng)的表格、柱狀圖、曲線圖等）不能在空間定位上精確定量地表達相關(guān)信息。而基于 GIS 的氣象服務(wù)產(chǎn)品可提供一系列空間氣象數(shù)據(jù)處理功能，通過 GIS 技術(shù)，可以實現(xiàn)多因素的綜合分析，利用其豐富的可視化表達方式，模擬展示各類天氣現(xiàn)象、氣象災(zāi)害的過程，實現(xiàn)氣象數(shù)據(jù)空間特性的精準表達，為氣象災(zāi)害的監(jiān)測、預(yù)警、預(yù)報、信息發(fā)布、應(yīng)急指揮、災(zāi)害評估和恢復等氣象服務(wù)提供更好的展示平臺。

正是氣象數(shù)據(jù)與GIS所具有的天然聯(lián)姻屬性，GIS產(chǎn)品已在氣象領(lǐng)域進行了一定程度的試用。例如，福建省氣象局基于GIS技術(shù)建立了新一代福建省氣候監(jiān)測與災(zāi)害預(yù)警系統(tǒng)，對轄區(qū)內(nèi)發(fā)生的各種氣象災(zāi)害和異常氣候事件進行監(jiān)測。江蘇省氣象局組織開發(fā)了“基于GIS的交通氣象綜合展示平臺”，實現(xiàn)了各類交通氣象信息的二維、三維顯示[1]。

盡管GIS產(chǎn)品已在氣象領(lǐng)域進行了一定的探索應(yīng)用，但目前的產(chǎn)品仍有進一步優(yōu)化的空間：一是優(yōu)化專業(yè)氣象數(shù)據(jù)呈現(xiàn)方式，提升用戶界面的易用性；二是簡化操作步驟，提升軟件的可用性；三是優(yōu)化產(chǎn)品視覺設(shè)計，這些問題的解決和優(yōu)化，將有助于GIS在氣象領(lǐng)域的進一步推廣與普及。因此，在GIS應(yīng)用軟件中引入交互設(shè)計的方法顯得尤為及時和必要[1-3]。

1　交互體驗設(shè)計的發(fā)展

1.1　概述

交互體驗設(shè)計包括用戶研究、交互設(shè)計、用戶界面設(shè)計、程序開發(fā)、用戶測試、市場營銷等環(huán)節(jié)。本文主要圍繞“交互設(shè)計”和“用戶界面設(shè)計”進行討論。

交互設(shè)計的目的是努力創(chuàng)造和建立人、產(chǎn)品及服務(wù)之間有意義的關(guān)系，圍繞“以用戶為中心的設(shè)計”的核心目標開展工作。它的具體內(nèi)容則是關(guān)于產(chǎn)品邏輯、結(jié)構(gòu)、操作規(guī)范的一系列設(shè)計。而圖形界面設(shè)計則更多關(guān)注產(chǎn)品的外在呈現(xiàn)形式，通過對產(chǎn)品視覺形象的提升來提高產(chǎn)品的易用性，爭取更高的關(guān)注度，拉近用戶與產(chǎn)品的距離，創(chuàng)造亮點和商業(yè)賣點[4]。

1.2　交互設(shè)計發(fā)展新趨勢

有統(tǒng)計表明，對于電商網(wǎng)站而言，加載速度每延遲一秒，就意味著流失27%的銷量。對于互聯(lián)網(wǎng)產(chǎn)品設(shè)計者而言，用戶的耐心也同樣在逐漸縮減，因此頁面的響應(yīng)速度成為了用戶對產(chǎn)品的首要要求。

除此之外，順應(yīng)當今PC逐漸向移動傾斜的大趨勢，能否如app一般提供更加精細、定制化的服務(wù)也已成為能否足夠吸引用戶的關(guān)鍵需求之一。

1.2.1頁面布局更靈活、信息結(jié)構(gòu)更輕量

“響應(yīng)式布局”是近來十分流行的做法。簡言之，即一個網(wǎng)站或者產(chǎn)品能夠兼容多個終端，而不需要為每個終端重新制作一個特定的版本。這樣的做法和技術(shù)也是為了適應(yīng)電子設(shè)備的快速更新迭代，而這樣做的好處是使得產(chǎn)品無論應(yīng)用在何種終端、平臺，都能夠以最合理的布局形式展示給用戶。除此之外，“不同設(shè)備的相同應(yīng)用能夠?qū)崿F(xiàn)無縫操作同一事件，協(xié)助人們持續(xù)不間斷地完成任務(wù)”將是未來跨平臺交互設(shè)計的大趨勢，這點蘋果公司已經(jīng)搶先做出了表率。

另外，在產(chǎn)品內(nèi)容和結(jié)構(gòu)設(shè)計方面，越大的屏幕空間對產(chǎn)品信息的承載便越復雜，因此對產(chǎn)品信息結(jié)構(gòu)的“減負”則顯得尤為重要。輕盈的信息結(jié)構(gòu)不僅可以強化內(nèi)容本身，還能夠減少用戶對邏輯和布局的理解成本，縮短用戶到達信息的距離。

1.2.2視覺呈現(xiàn)更直觀、更豐富

一圖勝千言，信息的可視化仍然是視覺設(shè)計中有效傳達復雜信息的重要手段之一。扁平化奉行“少即是多”的理念，即去掉多余的透視、紋理、漸變等干擾元素，讓“信息”本身重新作為核心被凸顯出來。在設(shè)計元素上，則更強調(diào)極簡和符號化。而從目前的視覺流行趨勢來說，扁平化的設(shè)計風格仍不過時。然而在信息時代紛繁的視覺刺激下，一味地追求簡化已經(jīng)不能滿足用戶的審美口味。使用合適、豐富的配色，來調(diào)和過度扁平帶來的單調(diào)感或信息傳達的不準確性才是更符合潮流的做法。好的色彩運用其目的不僅是美化全局，更能夠協(xié)助用戶減少學習操作的時間，加快用戶獲取結(jié)果的速度，使產(chǎn)品的邏輯結(jié)構(gòu)更加清晰、警告信息更加醒目[5]。

2　基于GIS的氣象服務(wù)產(chǎn)品交互設(shè)計——以“臺風路徑查詢”及“臨近預(yù)報”產(chǎn)品迭代為例

2015—2016年，為了滿足不斷增加的對于氣象預(yù)報類服務(wù)產(chǎn)品更加精細化的用戶需求，中國天氣網(wǎng)著手對原有的“臺風路徑查詢”和“臨近預(yù)報”產(chǎn)品進行版本的迭代優(yōu)化。

2.1　改版設(shè)計的基本流程

通過對舊版產(chǎn)品使用者的調(diào)研，分別分析了兩個產(chǎn)品用戶的使用習慣和新增需求，梳理了舊版產(chǎn)品暴露的問題。在此基礎(chǔ)上重新整合產(chǎn)品邏輯，調(diào)整結(jié)構(gòu)布局。并結(jié)合現(xiàn)今流行的互聯(lián)網(wǎng)技術(shù)和交互、視覺設(shè)計方法，展開2.0版的迭代優(yōu)化工作。

本次改版設(shè)計的基本流程包括需求分析、交互設(shè)計、視覺設(shè)計、技術(shù)開發(fā)、測試上線5個環(huán)節(jié)。其中，交互設(shè)計及視覺設(shè)計是核心，需求分析則是基礎(chǔ)[6]。

在需求分析階段，從行為、態(tài)度、資質(zhì)、動力、技能5個方面對用戶進行更深層次的了解。即了解用戶使用產(chǎn)品的頻率、場景、用戶的個人畫像以及在此背景下對產(chǎn)品的使用偏好。同步進行同類競爭產(chǎn)品的分析，并梳理舊版產(chǎn)品問題，確定新版產(chǎn)品定位及可優(yōu)化的細節(jié)。

在交互設(shè)計階段，重新梳理產(chǎn)品功能邏輯，搭建產(chǎn)品布局，完成產(chǎn)品的線框圖及原型圖設(shè)計。

在視覺設(shè)計階段，依據(jù)用戶使用喜好及產(chǎn)品功能需求，重新定位風格，并進行全新的排版與配色設(shè)計。

2.2　產(chǎn)品的交互體驗優(yōu)化

2.2.1用戶需求及舊版問題分析

根據(jù)部分用戶調(diào)研結(jié)果及實際測試情況分析發(fā)現(xiàn)，用戶對地圖加載的響應(yīng)速度、地理信息的精確度以及氣象數(shù)據(jù)的準確率等方面的關(guān)注度和需求度非常高，而這些指標也正是決定產(chǎn)品可用性的關(guān)鍵。另外，從信息可讀性上來說，疊加圖形的清晰度，界面樣式的美觀和易用度，如從視覺設(shè)計上是否能夠為用戶的操作提供更舒適的引導、功能細節(jié)的人性化設(shè)計等問題，也是當今越來越多的用戶關(guān)注的重點（表1）。

2.2.2性能的提升

1）考慮多終端的適配兼容

為提高產(chǎn)品的使用率，在臺風產(chǎn)品PC端改版的同時，增加了移動WAP端的產(chǎn)品版本的設(shè)計及開發(fā)。而在PC端則增設(shè)了全屏視角功能，使得頁面元素能夠自動根據(jù)瀏覽屏幕大小做出響應(yīng)。

表1　舊版用戶需求分析Table 1 Analysis of user’s requirements in the old version

2）提升響應(yīng)時間和數(shù)據(jù)加載速度、穩(wěn)定性

通過對圖形生產(chǎn)系統(tǒng)、硬件設(shè)備的升級，使得圖形系統(tǒng)業(yè)務(wù)化。對產(chǎn)品底層架構(gòu)進行重新構(gòu)建，對數(shù)據(jù)接口、定位接口等重新布局，規(guī)范格式，并利用阿里云計算，彈性應(yīng)對峰谷訪問量的巨大差異，提升訪問速度和承壓能力。將地圖上疊加的圖層數(shù)據(jù)改為預(yù)加載緩存，使得用戶在多次使用產(chǎn)品時，將感到產(chǎn)品越用越快、越用越流暢。

3）地圖層級精細化、精確度的提高

切換地圖底層框架，由“l(fā)eaflet”改為百度地圖框架，帶來框架直接攜帶功能：衛(wèi)星圖切換、測距、精確到街道的地理信息數(shù)據(jù)，地理信息的精確度得到大幅提升，用戶能夠通過文字搜索，亦或點擊地圖上的任意地點，得到每一條街道的信息；同時，利用MDV圖形發(fā)布系統(tǒng)，優(yōu)化雷達回波圖、衛(wèi)星云圖的顯示效果，改善放大后邊緣模糊的問題。

2.2.3布局、功能的優(yōu)化

1）采用輕量級布局，對信息層級減負

將功能按鈕的布局設(shè)置得更加直觀，使用戶選擇更便捷，減少觸及需求信息的操作流程（圖1）。

針對“臺風路徑查詢”這類功能較為單一的垂直類服務(wù)產(chǎn)品，對其信息層級進行輕量化設(shè)計，減少頁面跳轉(zhuǎn)，為操作體驗減負。在移動版臺風產(chǎn)品的設(shè)計中，對“設(shè)置菜單”“臺風列表”“圖例”等訪問操作，通過半層彈層或浮層模式的設(shè)計避免頁面級的跳轉(zhuǎn)，降低了用戶瀏覽行為的復雜程度，使核心模塊穩(wěn)定在用戶主視線內(nèi)。

2）更加個性化的功能設(shè)置

圍繞用戶需求和使用習慣，從定位精準、個性化服務(wù)推送、用戶自定義設(shè)置等角度對產(chǎn)品功能進行了改進。

圖1　“臨近預(yù)報”產(chǎn)品界面布局及說明Fig. 1 Introduction to the interface for nowcasting productt

首先，在原有的IP自動識別用戶定位的基礎(chǔ)上，使用經(jīng)緯度定位方法，提高了精準性。在產(chǎn)品中增加定位復位按鈕，方便用戶在挪動地圖到其他位置時，能夠一鍵返回定位坐標。

其次，在“臨近預(yù)報”2.0版中，增加了底圖編輯功能。用戶能夠自主選擇地圖底圖的呈現(xiàn)信息，例如在地圖上去除鐵路、高速公路等。并能夠記錄用戶的定制行為，下次打開即為上次的編輯結(jié)果。

在臺風產(chǎn)品中支持1949年以來歷史上任意一條臺風路徑的查詢功能，且最多可選3條臺風路徑同時播放，方便用戶對比查詢歷史臺風相似路徑。并設(shè)置了一鍵清除按鈕，讓用戶能夠快速更新所選臺風信息。PC端產(chǎn)品中還支持用戶自定義臺風路徑播放速度。

同時，運用情感化營銷手段，在臺風WAP產(chǎn)品中增設(shè)“臺風離我有多遠”H5交互游戲，強化公眾參與感，引導用戶在分享中傳遞防臺減災(zāi)信息。

在 “臨近預(yù)報”2.0版的搜索欄中增設(shè)熱點資訊的推送功能，使用戶能夠在關(guān)心所在城市天氣的同時，實時了解全國天氣關(guān)注熱點。也間接達到提升站內(nèi)跳轉(zhuǎn)率的運營目的。

2.2.4全新的UI視覺呈現(xiàn)

1）界面風格及配色的改變

“臨近預(yù)報”2.0版設(shè)計中將地圖及天氣信息展示區(qū)域擴大，將導航底色由之前的淺藍和綠色，統(tǒng)一為暗灰藍色，配以亮藍色作為選中提示色標，增強用戶在信息選擇上的辨識度，這些優(yōu)化使得新版界面布局更加明晰，信息重點突出，同時配色的改變更增強了產(chǎn)品的科技感和專業(yè)感，提升新用戶的信任度。相較于1.0版本，新版“臨近預(yù)報”增加了測距、分享、幫助等功能，圖標簡潔明了，播放條也變得可收起，在不增加頁面文字閱讀量的前提下，使用戶實際操作體驗更加流暢（圖2）。

圖2　“臨近預(yù)報”產(chǎn)品改版前后對比（a）1.0版，（b）2.0版Fig. 2 Comparison of nowcasting products between the old version 1.0(a) and new version 2.0 (b)

在臺風路徑產(chǎn)品的改版中，改變了地圖的配色，選擇深色地圖底圖以突出臺風路徑的顯示，并采用深藍作為主色，提升科技感的同時更主要目的是降低界面元素過分豐富對視覺注意力的干擾，提高用戶搜索目標的效率。選用明黃和暖紅作為輔助色，用以提亮重點信息；緩和深色帶來的沉重感，可以更鮮明地指引用戶進行準確的操作（圖3）。

圖3　“臺風路徑查詢”PC端產(chǎn)品改版前后對比（a）1.0版，（b）2.0版Fig. 3 Comparison of typhoon-path searches products on PC between the old version 1.0 (a) and new version 2.0 (b)

2）數(shù)據(jù)的可視化效果處理

在兩個產(chǎn)品的2.0版設(shè)計中，集中優(yōu)化了天氣信息彈框及時間播放軸等功能模塊，并對數(shù)據(jù)信息的疊加和展示形式進行視覺包裝，借助于圖形化的手段，將氣象數(shù)據(jù)轉(zhuǎn)化為更加友好、更易懂的視覺形式，清晰有效地傳達信息（圖4）。

2.3　效果檢驗

臺風移動端產(chǎn)品于2016年7月3日上線，截至2016年12月，臺風實時路徑查詢產(chǎn)品累計訪問量達3451萬次。其中，單次臺風過程PC端產(chǎn)品最高訪問量375萬次，移動端產(chǎn)品最高訪問量450萬次。臨近預(yù)報2.0版于2016年7月28日迭代上線，截至同年8月29日，上線一個月瀏覽量同比增長56.11%。

3　展望與思考

圖4　氣象數(shù)據(jù)可視化包裝后的效果Fig. 4 The effects after visualization for weather information

現(xiàn)如今，GIS早已從不同層面滲透到人們的日常生活中，眼花繚亂的產(chǎn)品不斷分割著人們的眼球，人們對于產(chǎn)品的交互體驗越發(fā)挑剔，企業(yè)對于產(chǎn)品的更新迭代速度也隨之加快。同時，隨著新技術(shù)層出不窮，在當今同質(zhì)化產(chǎn)品競爭激烈的市場環(huán)境下，不同應(yīng)用領(lǐng)域的GIS產(chǎn)品面向的用戶群體也開始細分，用戶們的需求也不再滿足于簡單的圖形與屬性信息的查詢，開始變得更加多元化。人們也越來越關(guān)心GIS產(chǎn)品是否具備其他一些品質(zhì)和功能：如人性化的、愉快有趣的、更富有啟發(fā)性的，以及更能激發(fā)用戶痛點的等等，這些都是交互體驗設(shè)計必須思考且能夠解決的問題。

根據(jù)《2015年互聯(lián)網(wǎng)發(fā)展動態(tài)及趨勢》報告中的調(diào)查顯示：我國手機網(wǎng)民規(guī)模達6.20億，網(wǎng)民中使用手機上網(wǎng)的人群占比由2014年的85.8%提升至90.1%。報告更指出，在2014及2015年諸多大型互聯(lián)網(wǎng)公司其移動端的流量已經(jīng)超越PC端的流量，很多大型互聯(lián)網(wǎng)企業(yè)PC業(yè)務(wù)用戶正逐漸向移動端遷移。由此可見，“得移動互聯(lián)網(wǎng)者得天下”。未來，包括GIS在內(nèi)的氣象服務(wù)產(chǎn)品想要獲得更好的發(fā)展，必然離不開對移動市場的關(guān)注和把控。

互聯(lián)網(wǎng)技術(shù)發(fā)展帶動市場，動效的應(yīng)用、H5的廣泛流行、大數(shù)據(jù)、云計算、AR與VR等新概念新技術(shù)手段的興起，讓交互設(shè)計的空間擴充到生活中眾多領(lǐng)域的同時，也給交互體驗設(shè)計帶來了新的契機和更多元的可能，而情感化、場景化設(shè)計和個性化定制等基于用戶研究的設(shè)計思路在未來依然會保持旺盛的需求趨勢?；贕IS的氣象服務(wù)產(chǎn)品也必將在互聯(lián)網(wǎng)大趨勢的浪潮下不斷向前推進。

[1]徐建新, 王勇, 張燕平, 等. 基于GIS的交通氣象展示平臺. 南京: 江蘇省測繪工程院, 2006.

[2]施坤景. 地理信息系統(tǒng)（GIS）的發(fā)展現(xiàn)狀. 科技資訊, 2008(3): 68.

[3] 胡祎. 地理信息系統(tǒng)（GIS）發(fā)展史及前景展望. 北京: 中國地質(zhì)大學, 2011.

[4]李世國, 顧振宇. 普通高等教育工業(yè)設(shè)計專業(yè)“十二五”規(guī)劃教材——交互設(shè)計. 北京: 中國水利水電出版社, 2012.

[5]Jeff Johnson. 認知與設(shè)計: 理解 UI 設(shè)計準則.張一寧, 王軍鋒, 譯.北京: 人民郵電出版社, 2011.

[6]Jesse James Garrett. 用戶體驗要素：以用戶為中心的產(chǎn)品設(shè)計.范曉燕, 譯. 北京: 機械工業(yè)出版社, 2011.