石璞欣

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

?

氣象資料及產(chǎn)品綜合服務(wù)平臺(tái)用戶界面設(shè)計(jì)

石璞欣

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

摘要：結(jié)合氣象專業(yè)特點(diǎn)，從用戶界面的需求分析、色彩設(shè)計(jì)、界面設(shè)計(jì)和代碼實(shí)現(xiàn)四個(gè)方面介紹了氣象資料及產(chǎn)品綜合服務(wù)平臺(tái)的用戶界面的設(shè)計(jì)方法。

關(guān)鍵詞：氣象資料及產(chǎn)品；服務(wù)平臺(tái)；用戶界面；前臺(tái)代碼

隨著氣象探測(cè)資料、二次演算綜合產(chǎn)品的日益豐富，傳統(tǒng)的紙質(zhì)天氣圖、報(bào)文資料、系統(tǒng)自帶軟件都已經(jīng)難以滿足氣象工作者和專業(yè)用戶的需求，為了提高工作效率和各種產(chǎn)品使用的便捷性，氣象資料及產(chǎn)品綜合服務(wù)平臺(tái)的搭建就顯得十分有必要。

1需求分析

首先，根據(jù)不同的服務(wù)群體確定用戶界面需求。專業(yè)用戶往往更關(guān)注直觀的實(shí)況以及各種預(yù)警信息，設(shè)計(jì)時(shí)應(yīng)將重點(diǎn)放在用戶感興趣的資料及排版上，同時(shí)應(yīng)盡量提高相關(guān)預(yù)警信息的識(shí)別度，必要時(shí)可針對(duì)個(gè)別用戶設(shè)計(jì)專用監(jiān)控頁(yè)面；中短期氣象預(yù)報(bào)員則更關(guān)注各種天氣背景場(chǎng)及其變化趨勢(shì)，基于時(shí)間軸的圖形動(dòng)畫(huà)和報(bào)文表單設(shè)計(jì)都更需要推敲；氣候研究部門(mén)則更關(guān)心各項(xiàng)數(shù)據(jù)的走勢(shì)和統(tǒng)計(jì)結(jié)果。

其次，通過(guò)加強(qiáng)和被服務(wù)對(duì)象的交流進(jìn)一步做好需求分析，詢問(wèn)并記錄被服務(wù)對(duì)象對(duì)資料的需求情況，如日常業(yè)務(wù)哪些資料是必不可缺的、哪些是最需要瀏覽的、哪些數(shù)據(jù)是需要持續(xù)監(jiān)控的等等。

做好的需求分析應(yīng)整理成文檔，可以避免所設(shè)計(jì)的平臺(tái)項(xiàng)目脫離實(shí)際應(yīng)用。

2色彩設(shè)計(jì)

在具體設(shè)計(jì)用戶界面之前，制定配色尤為重要。這樣做可以提高平面、構(gòu)圖設(shè)計(jì)效率，減少層疊樣式表的代碼量，提高整個(gè)網(wǎng)站統(tǒng)一性和識(shí)別性，并有效避免模塊、板塊拼裝或重組時(shí)出現(xiàn)不可預(yù)期的錯(cuò)誤和不協(xié)調(diào)。

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

氣象資料種類較多，利用人眼對(duì)色彩的敏感強(qiáng)于文字的特點(diǎn)，可以選擇輔色作為圖標(biāo)邊框來(lái)區(qū)別資料、功能的種類，以增加網(wǎng)站的條理性，提升用戶的識(shí)別度。如雷達(dá)圖、衛(wèi)星云圖、報(bào)文、數(shù)值預(yù)報(bào)、天氣圖等，需要選取的輔色數(shù)量較大，可以簡(jiǎn)單在色相環(huán)上選取等角距的一組顏色，適度降低他們的飽和度，并均衡明度，再分別與基色試配，以選取適配色。

3界面設(shè)計(jì)

3.1頁(yè)面布局

(1)“國(guó)”字型

該類型頁(yè)面布局主要適用于公眾信息新聞?lì)惼脚_(tái)，常見(jiàn)于各大綜合門(mén)戶網(wǎng)站。

特點(diǎn)：將信息分類，并模塊化在頁(yè)面上依次羅列，提供所有資料鏈接導(dǎo)航。

優(yōu)點(diǎn)：模板資源豐富，大大降低代碼編寫(xiě)量；信息展示量大，一個(gè)頁(yè)面可羅列出項(xiàng)目所有的功能鏈接；模塊化程度高，內(nèi)容板塊添加便捷。

缺點(diǎn)：頁(yè)面擁擠，用戶難以找到所需鏈接；打開(kāi)頁(yè)面需要新彈出窗口，否則將丟失導(dǎo)航頁(yè)面。

(2)左導(dǎo)航框架型

該類型主要適用于專業(yè)用戶，常見(jiàn)于電子郵箱布局。

特點(diǎn)：將所有資料鏈接導(dǎo)航羅列于頁(yè)面左側(cè)(根據(jù)網(wǎng)站規(guī)模選擇使用二級(jí)菜單)，右側(cè)主顯示區(qū)用于具體的資料內(nèi)容展示。

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

缺點(diǎn)：窗口自適應(yīng)代碼編寫(xiě)復(fù)雜；頁(yè)面布局呆板，不靈活。

(3)定制頁(yè)面

如果個(gè)別用戶只關(guān)心網(wǎng)站的小部分資料，可以定制專門(mén)的導(dǎo)航頁(yè)面方便其使用；或根據(jù)需要同時(shí)監(jiān)控幾種資料，定制專用的監(jiān)控頁(yè)面。

無(wú)論最終選擇哪種頁(yè)面布局，都應(yīng)做到整齊穩(wěn)重，推薦使用穩(wěn)妥的柵格系統(tǒng)布局定位，保證各頁(yè)面元素間的協(xié)調(diào)統(tǒng)一，避免由于個(gè)性化設(shè)計(jì)而出現(xiàn)的雜亂感。

3.2與常用商業(yè)網(wǎng)站的區(qū)別

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

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

(3)數(shù)據(jù)表格氣象資料中存在種類繁多的報(bào)文及探測(cè)數(shù)據(jù)，該類資料的展示通常會(huì)采用表格來(lái)實(shí)現(xiàn)。表格的樣式應(yīng)盡量簡(jiǎn)潔，切忌使用3D、陰影樣式；滾動(dòng)條滾動(dòng)時(shí)應(yīng)保證表頭列名行固定不動(dòng)；滾動(dòng)條超過(guò)3屏的應(yīng)使用翻頁(yè)模式；奇偶行應(yīng)使用背景色變化區(qū)別；為適應(yīng)閱覽器的窗口大小，“報(bào)文內(nèi)容”列可以設(shè)為寬度自適應(yīng)，其他列均應(yīng)固定寬度。

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

(5)幀動(dòng)畫(huà)雷達(dá)圖和云圖常常需要連續(xù)的幀動(dòng)畫(huà)來(lái)顯示。很多氣象網(wǎng)站將播放速度、動(dòng)畫(huà)啟停時(shí)間點(diǎn)作為選項(xiàng)，但大多數(shù)用戶對(duì)這些設(shè)置完全不關(guān)心，因此可以將這些功能保留在擴(kuò)展控制面板中，默認(rèn)控制用“近1/3/6小時(shí)動(dòng)畫(huà)”的按鈕即可。“上/下一張”的切換應(yīng)支持鍵盤(pán)左右方向鍵控制。

4代碼實(shí)現(xiàn)

無(wú)論選擇何種服務(wù)器端語(yǔ)言，用戶閱覽器最終執(zhí)行的均是文本標(biāo)記語(yǔ)言和層疊樣式表，該語(yǔ)言的特點(diǎn)之一是可以在不終止運(yùn)行的情況下，“糾錯(cuò)”語(yǔ)法的錯(cuò)誤/歧義，但“糾錯(cuò)”的結(jié)果卻會(huì)因用戶預(yù)覽器的種類、版本甚至是窗口大小的不同而變得不可預(yù)期。為了避免該類問(wèn)題，方法上與傳統(tǒng)編程需要有所區(qū)別。

4.1網(wǎng)頁(yè)前臺(tái)代碼編寫(xiě)

(1)使用專門(mén)的超文本標(biāo)記語(yǔ)言編寫(xiě)軟件，并使用軟件實(shí)時(shí)標(biāo)記出最基本的語(yǔ)法錯(cuò)誤。

(2)重置基本屬性。所有頁(yè)面元素都有默認(rèn)屬性值，但是不同的閱覽器具有不同的設(shè)定標(biāo)準(zhǔn)，因此對(duì)全局屬性重置很有必要。

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

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

4.2氣象頁(yè)面前臺(tái)代碼編寫(xiě)

上面提到的都是網(wǎng)頁(yè)前臺(tái)的通用經(jīng)驗(yàn)，作為氣象網(wǎng)站，還有一些細(xì)節(jié)的改進(jìn)可以大幅提升網(wǎng)站的可維護(hù)性和實(shí)用性。

(1)在給頁(yè)面文件、外掛CSS和JavaScript腳本、元素的class和ID命名時(shí)，應(yīng)盡量使用氣象術(shù)語(yǔ)，這將會(huì)對(duì)快速定位運(yùn)行中可能出現(xiàn)的故障點(diǎn)有幫助。

(3)為報(bào)文資料添加數(shù)據(jù)庫(kù)相關(guān)信息?？衫?table>標(biāo)簽的“title”屬性或直接在頁(yè)面地址后加入數(shù)據(jù)庫(kù)表名信息。

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

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

(6)為報(bào)文查詢提供“或”語(yǔ)法，以便于用戶對(duì)比查詢。如“時(shí)間或”提供歷史同期數(shù)據(jù)的對(duì)比查詢，“站點(diǎn)或”提供地域差異的對(duì)比查詢等。

宋衛(wèi)民.漢濱區(qū)國(guó)家基本氣象站雷電防護(hù)設(shè)計(jì)[J].陜西氣象，2015(6)：32-34.

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

收稿日期：2015-07-10

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

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

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