氣象資料及產品綜合服務平臺用戶界面設計

石璞欣

(民航中南空管局氣象中心，廣州　510405)

?

氣象資料及產品綜合服務平臺用戶界面設計

石璞欣

(民航中南空管局氣象中心，廣州510405)

摘要：結合氣象專業特點，從用戶界面的需求分析、色彩設計、界面設計和代碼實現四個方面介紹了氣象資料及產品綜合服務平臺的用戶界面的設計方法。

關鍵詞：氣象資料及產品；服務平臺；用戶界面；前臺代碼

隨著氣象探測資料、二次演算綜合產品的日益豐富，傳統的紙質天氣圖、報文資料、系統自帶軟件都已經難以滿足氣象工作者和專業用戶的需求，為了提高工作效率和各種產品使用的便捷性，氣象資料及產品綜合服務平臺的搭建就顯得十分有必要。

1需求分析

首先，根據不同的服務群體確定用戶界面需求。專業用戶往往更關注直觀的實況以及各種預警信息，設計時應將重點放在用戶感興趣的資料及排版上，同時應盡量提高相關預警信息的識別度，必要時可針對個別用戶設計專用監控頁面；中短期氣象預報員則更關注各種天氣背景場及其變化趨勢，基于時間軸的圖形動畫和報文表單設計都更需要推敲；氣候研究部門則更關心各項數據的走勢和統計結果。

其次，通過加強和被服務對象的交流進一步做好需求分析，詢問并記錄被服務對象對資料的需求情況，如日常業務哪些資料是必不可缺的、哪些是最需要瀏覽的、哪些數據是需要持續監控的等等。

做好的需求分析應整理成文檔，可以避免所設計的平臺項目脫離實際應用。

2色彩設計

在具體設計用戶界面之前，制定配色尤為重要。這樣做可以提高平面、構圖設計效率，減少層疊樣式表的代碼量，提高整個網站統一性和識別性，并有效避免模塊、板塊拼裝或重組時出現不可預期的錯誤和不協調。

配色的第一步就是選定主背景基色。首先，作為一個氣象類網站，氣象預警信號多為黃色、紅色系，因此主背景基色應該盡量避免使用該色系；綠色、藍色、無色(黑白、灰度)系比較安全，藍色多作為天空、海洋、地球的顏色，因此較為推薦。其次，氣象資料及產品綜合服務平臺多以資料展示為主，大多數用戶需要長時間關注界面，因此應當使用低明度、純度的色彩作為基色，以降低視覺刺激，突出內容表現，給人以溫和醇厚感，穩重耐看。

氣象資料種類較多，利用人眼對色彩的敏感強于文字的特點，可以選擇輔色作為圖標邊框來區別資料、功能的種類，以增加網站的條理性，提升用戶的識別度。如雷達圖、衛星云圖、報文、數值預報、天氣圖等，需要選取的輔色數量較大，可以簡單在色相環上選取等角距的一組顏色，適度降低他們的飽和度，并均衡明度，再分別與基色試配，以選取適配色。

3界面設計

3.1頁面布局

(1)“國”字型

該類型頁面布局主要適用于公眾信息新聞類平臺，常見于各大綜合門戶網站。

特點：將信息分類，并模塊化在頁面上依次羅列，提供所有資料鏈接導航。

優點：模板資源豐富，大大降低代碼編寫量；信息展示量大，一個頁面可羅列出項目所有的功能鏈接；模塊化程度高，內容板塊添加便捷。

缺點：頁面擁擠，用戶難以找到所需鏈接；打開頁面需要新彈出窗口，否則將丟失導航頁面。

(2)左導航框架型

該類型主要適用于專業用戶，常見于電子郵箱布局。

特點：將所有資料鏈接導航羅列于頁面左側(根據網站規模選擇使用二級菜單)，右側主顯示區用于具體的資料內容展示。

優點：導航清晰，非常適合種類較多的氣象資料選擇；導航與頁面位于同一窗口，可以避免大量彈出窗口，同時也方便用戶快速切換顯示資料。

缺點：窗口自適應代碼編寫復雜；頁面布局呆板，不靈活。

(3)定制頁面

如果個別用戶只關心網站的小部分資料，可以定制專門的導航頁面方便其使用；或根據需要同時監控幾種資料，定制專用的監控頁面。

無論最終選擇哪種頁面布局，都應做到整齊穩重，推薦使用穩妥的柵格系統布局定位，保證各頁面元素間的協調統一，避免由于個性化設計而出現的雜亂感。

3.2與常用商業網站的區別

(1)導航條隨著氣象探測產品和精細化產品的不斷增加，建議不要在設計導航時限制元素的個數，二級菜單通常采取最簡單的解決方案。同時因無法預期用戶閱覽器窗口的大小，設計時要明確給出最小寬(高)度或提供滾動條類功能。

(2)資料分類準確的分類有助于用戶快速定位興趣點，并明確當前頁面資料類型。人眼對色彩的敏感程度大于圖形和文字，因此可為各個分類確定唯一的輔色及圖標，用于導航鏈接及窗口角標。

(3)數據表格氣象資料中存在種類繁多的報文及探測數據，該類資料的展示通常會采用表格來實現。表格的樣式應盡量簡潔，切忌使用3D、陰影樣式；滾動條滾動時應保證表頭列名行固定不動；滾動條超過3屏的應使用翻頁模式；奇偶行應使用背景色變化區別；為適應閱覽器的窗口大小，“報文內容”列可以設為寬度自適應，其他列均應固定寬度。

(4)圖形展示雷達圖覆蓋范圍較小，顯示應盡量填滿可視區；衛星云圖和天氣圖常常覆蓋范圍大，應按原始圖形大尺寸顯示，同時提供鼠標拖拽移動功能并以“cookie”形式記錄變化坐標，方便用戶下次閱覽定位，也可根據用戶需要提供縮放功能。

(5)幀動畫雷達圖和云圖常常需要連續的幀動畫來顯示。很多氣象網站將播放速度、動畫啟停時間點作為選項，但大多數用戶對這些設置完全不關心，因此可以將這些功能保留在擴展控制面板中，默認控制用“近1/3/6小時動畫”的按鈕即可?！吧?下一張”的切換應支持鍵盤左右方向鍵控制。

4代碼實現

無論選擇何種服務器端語言，用戶閱覽器最終執行的均是文本標記語言和層疊樣式表，該語言的特點之一是可以在不終止運行的情況下，“糾錯”語法的錯誤/歧義，但“糾錯”的結果卻會因用戶預覽器的種類、版本甚至是窗口大小的不同而變得不可預期。為了避免該類問題，方法上與傳統編程需要有所區別。

4.1網頁前臺代碼編寫

(1)使用專門的超文本標記語言編寫軟件，并使用軟件實時標記出最基本的語法錯誤。

(2)重置基本屬性。所有頁面元素都有默認屬性值，但是不同的閱覽器具有不同的設定標準，因此對全局屬性重置很有必要。

(3)閱覽器測試排錯。超文本標記語言不需要編譯，真正的執行在閱覽器上，編寫軟件提示不可靠，僅作為參考。另外利用chrome、firefox預覽器的“審查元素”功能可以直觀提示每個屬性值是由哪個class決定的，大幅提高工作效率。

(4)IE6閱覽器不支持CSS3和HTML5。IE6閱覽器是Windows XP系統默認預裝閱覽器，它不僅不支持新技術，有著與眾不同的渲染規則，甚至連PNG圖形透明都不能直接支持，因此在調查用戶環境后必須選擇是放棄IE6用戶，還是放棄新技術。

4.2氣象頁面前臺代碼編寫

上面提到的都是網頁前臺的通用經驗，作為氣象網站，還有一些細節的改進可以大幅提升網站的可維護性和實用性。

(1)在給頁面文件、外掛CSS和JavaScript腳本、元素的class和ID命名時，應盡量使用氣象術語，這將會對快速定位運行中可能出現的故障點有幫助。

(3)為報文資料添加數據庫相關信息?？衫?table>標簽的“title”屬性或直接在頁面地址后加入數據庫表名信息。

(4)復雜的搜索條件提供“保存為默認條件”的功能。大多氣象資料查詢需確定站點、范圍、高度、有效時間等條件，可利用“cookie”記住用戶常用查詢條件。

(5)為圖形資料提供縮放、拖拽移動功能。

(6)為報文查詢提供“或”語法，以便于用戶對比查詢。如“時間或”提供歷史同期數據的對比查詢，“站點或”提供地域差異的對比查詢等。

宋衛民.漢濱區國家基本氣象站雷電防護設計[J].陜西氣象，2015(6)：32-34.

作者簡介：宋衛民(1971—)，男，陜西安康人，漢族，助理工程師，從事防雷工程工作。

收稿日期：2015-07-10

文章編號：1006-4354(2015)06-0032-03

中圖分類號：P409

文獻標識碼：B