基于GIS的氣象服務產品交互體驗設計研究

弓盈 潘煜

（中國天氣網，北京 100081）

0　基于GIS的氣象服務產品發展現狀

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

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

正是氣象數據與GIS所具有的天然聯姻屬性，GIS產品已在氣象領域進行了一定程度的試用。例如，福建省氣象局基于GIS技術建立了新一代福建省氣候監測與災害預警系統，對轄區內發生的各種氣象災害和異常氣候事件進行監測。江蘇省氣象局組織開發了“基于GIS的交通氣象綜合展示平臺”，實現了各類交通氣象信息的二維、三維顯示[1]。

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

1　交互體驗設計的發展

1.1　概述

交互體驗設計包括用戶研究、交互設計、用戶界面設計、程序開發、用戶測試、市場營銷等環節。本文主要圍繞“交互設計”和“用戶界面設計”進行討論。

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

1.2　交互設計發展新趨勢

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

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

1.2.1頁面布局更靈活、信息結構更輕量

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

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

1.2.2視覺呈現更直觀、更豐富

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

2　基于GIS的氣象服務產品交互設計——以“臺風路徑查詢”及“臨近預報”產品迭代為例

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

2.1　改版設計的基本流程

通過對舊版產品使用者的調研，分別分析了兩個產品用戶的使用習慣和新增需求，梳理了舊版產品暴露的問題。在此基礎上重新整合產品邏輯，調整結構布局。并結合現今流行的互聯網技術和交互、視覺設計方法，展開2.0版的迭代優化工作。

本次改版設計的基本流程包括需求分析、交互設計、視覺設計、技術開發、測試上線5個環節。其中，交互設計及視覺設計是核心，需求分析則是基礎[6]。

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

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

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

2.2　產品的交互體驗優化

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

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

2.2.2性能的提升

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

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

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

2）提升響應時間和數據加載速度、穩定性

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

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

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

2.2.3布局、功能的優化

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

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

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

2）更加個性化的功能設置

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

圖1　“臨近預報”產品界面布局及說明Fig. 1 Introduction to the interface for nowcasting productt

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

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

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

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

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

2.2.4全新的UI視覺呈現

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

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

圖2　“臨近預報”產品改版前后對比（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)

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

圖3　“臺風路徑查詢”PC端產品改版前后對比（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）數據的可視化效果處理

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

2.3　效果檢驗

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

3　展望與思考

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

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

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

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

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

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

[3] 胡祎. 地理信息系統（GIS）發展史及前景展望. 北京: 中國地質大學, 2011.

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

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

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