寒來(lái)暑往,服務(wù)中央氣象臺網(wǎng)站及軟件設計十年

寒來(lái)暑往,服務(wù)中央氣象臺網(wǎng)站及軟件設計十年

前端開(kāi)發(fā) | 圖標設計 | 交互設計 | 界面設計

  • 交互設計 | 前端 | 圖標 | 界面設計

  • 2020年6月以來(lái),全國共有433條河流發(fā)生超警以上洪水。長(cháng)江、黃河上游、珠江流域的西江和北江、太湖都發(fā)生今年1號洪水,防汛形勢嚴峻。截至7月下旬,全國有3873萬(wàn)人次受災,人員死亡失蹤141人。這幾天每天關(guān)注鄱陽(yáng)湖洪水狀況,整理網(wǎng)站類(lèi)作品,看到給中央氣象臺近十年設計的諸多網(wǎng)頁(yè)和系統,當時(shí)以為尋常事,回顧時(shí)感慨萬(wàn)千。作為公民,我們在用我們擅長(cháng)的設計去服務(wù)社會(huì ),在這個(gè)過(guò)程中形成自己的積淀,這是不可用金錢(qián)來(lái)衡量的價(jià)值。

    藍藍設計將中央氣象臺十年合作項目總結為一份設計說(shuō)明,與大家分享我們氣象預報行業(yè)設計經(jīng)驗;藍藍設計也會(huì )繼續在我們擅長(cháng)領(lǐng)域竭力服務(wù)社會(huì ),在這個(gè)過(guò)程中形成自己的積淀,創(chuàng )造不一樣的價(jià)值。中央氣象臺(National Meteorological Center of CMA)是承擔全國天氣預報、海洋、環(huán)境、生態(tài)和農業(yè)氣象以及中國氣象局業(yè)務(wù)數值預報系統研發(fā)與運行、決策氣象服務(wù)等工作的國家級氣象業(yè)務(wù)中心.網(wǎng)頁(yè)鏈接:http://www.nmc.cn/

    理解氣象業(yè)務(wù)做好產(chǎn)品調研

    氣象局各子部門(mén)眾多,改版一次差不多需一年的時(shí)間,做各種需求的調研,分析,征求大家的意見(jiàn),層層審批。

    氣象業(yè)務(wù)研發(fā)部門(mén)也在根據國民需求不斷的開(kāi)發(fā)出新的氣象產(chǎn)品。
    藍藍設計與開(kāi)發(fā)工程師協(xié)作,根據后臺統計數,熱力圖,分析用戶(hù)屬性.喜好,做出用戶(hù)畫(huà)像。輸出多版交互原型和視覺(jué)方案供客戶(hù)選擇,最終在多套方案中選擇一套,經(jīng)過(guò)后續修改后最終定版。(見(jiàn)右圖)
    版式設計是現代設計藝術(shù)的重要組成部分,是視覺(jué)傳達的重要手段。隨著(zhù)氣象服務(wù)的發(fā)展,中央氣象臺網(wǎng)站功能也越來(lái)越多,頁(yè)面承載信息也越來(lái)越多,這對頁(yè)面版面規劃提出了更高的要求。
    我們在設計時(shí)將“條理性”作為此次改版的思維指導,把大量“撲面而來(lái)”的信息,通過(guò)視覺(jué)化的手段,處理成有條理的且具有引導性的“視覺(jué)走勢”或者視覺(jué)引導,讓讀者在短時(shí)間內可獲得想要表達的信息,最終形成預期收益。 針對以上問(wèn)題,我們經(jīng)過(guò)調研、探討,列出一下幾點(diǎn)修改思路
    • 1、整體風(fēng)格切換,風(fēng)格采用目前較為流行的扁平風(fēng),讓頁(yè)面更加簡(jiǎn)潔,減輕用戶(hù)的視覺(jué)壓力,更好突出要展示的內容。
    • 2、調整版面比例,根據內容重新劃分版面,增加鼠標滑過(guò)、點(diǎn)擊跳轉等部分操作動(dòng)效,區分可操作版面和信息展示版面,使頁(yè)面布局更加清晰,合理。
    • 3、圖標定制,為了更好的和頁(yè)面整體風(fēng)格相契合,所有的天氣圖標和預警圖標都重新設計。天氣圖標包括白天、晚上、有背景、無(wú)背景等好幾種狀態(tài)。
    中央氣象臺系統交互優(yōu)化和界面設計
    中央氣象臺系統交互優(yōu)化和界面設計
    中央氣象臺系統交互優(yōu)化和界面設計
    中央氣象臺系統交互優(yōu)化和界面設計

    城市天氣預報頁(yè)豐富的頁(yè)面配色 視覺(jué)重量分布

    從色彩心理學(xué)上講,顏色可以影響用戶(hù)對產(chǎn)品價(jià)值的認知,合適的色彩可以給用戶(hù)直接的指示;我們在頁(yè)面中使用藍色色調,給人一種平靜、可信、可靠的認知;它的意圖是,給用戶(hù)有價(jià)值信息。

    視覺(jué)重量是控制頁(yè)面節奏感和張馳度的設計方法,視可以調整畫(huà)面中的文字或者線(xiàn)條粗細度以及內容明度來(lái)增加或者改變頁(yè)面的視覺(jué)重量。視覺(jué)重量影響因素有很多,包括大小,明暗,粗細,虛實(shí)等等,通過(guò)不同類(lèi)型的組合,形成豐富的頁(yè)面版式,同時(shí)可以突出頁(yè)面重要內容,弱化次要內容,最終達到頁(yè)面張弛有度,信息層次明確的效果。

    這次改版,我們大膽嘗試大面積藍色+高飽和度的設計,理由如下:
    • 1.目前市面上已有大量采用大面積顏色+高飽和度的設計產(chǎn)品,一定程度上已經(jīng)成為流行,用戶(hù)對這種設計風(fēng)格接受度也大幅提高;
    • 2.大面積色塊可以融入情景化設計,將天氣情況和圖片/插畫(huà)相結合,通過(guò)色彩/圖片的變化,實(shí)時(shí)展示當前天氣情況,為用戶(hù)帶來(lái)時(shí)身臨其境的體驗;同時(shí)平衡頁(yè)面視覺(jué)重量,優(yōu)化頁(yè)面視覺(jué)層級。
    中央氣象臺系統交互優(yōu)化和界面設計

    情景化設計的探索

    列表頁(yè)面設計

    當時(shí)方案中提議以情景化方式設計“災情專(zhuān)題”模塊,及時(shí)向社會(huì )發(fā)布災情信息

    情景化設計的探索

    中央氣象臺系統交互優(yōu)化和界面設計
    中央氣象臺系統交互優(yōu)化和界面設計

    部分天氣icon展示

    中央氣象臺系統交互優(yōu)化和界面設計
    中央氣象臺系統交互優(yōu)化和界面設計

    部分天氣icon展示

    中央氣象臺系統交互優(yōu)化和界面設計
    中央氣象臺系統交互優(yōu)化和界面設計

    手機端展示

    中央氣象臺系統交互優(yōu)化和界面設計

    中央氣象局-MICAPS4客戶(hù)端

    MICAPS4系統是一套復雜的氣象預報,氣象分析的系統,氣象預報對數據時(shí)效性要求極高,工作人員必須在第一時(shí)間分析數據并作出氣象判斷,并發(fā)布預警,因此,簡(jiǎn)單,快速地完成整個(gè)分析流程是這套系統最大的要求。

    簡(jiǎn)單即簡(jiǎn)潔,線(xiàn)性圖標的使用,極大地簡(jiǎn)化了頁(yè)面按鈕元素,簡(jiǎn)潔的按鈕布局和界面風(fēng)格界面減少了不必要的視覺(jué)干擾,更容易進(jìn)行視覺(jué)定位,作出準確地操作。

    快速即直觀(guān),將界面部分具有從屬關(guān)系的圖標羅列在工具箱面板,可減少操作員尋找,點(diǎn)擊按鈕的步驟,提高操作效率。

    設計前后對比

    設計前后對比

    部分圖標展示

    部分圖標展示

    中央氣象臺系統交互優(yōu)化和界面設計

    軟件界面展示

    CMRC_DC系統

    CMRC_DC系統是面向海外用戶(hù)的船舶監測系統,主要為船舶提供海洋氣象信息并提供相關(guān)支持。

    考慮到產(chǎn)品功能比較單一,且軟件面向海外客戶(hù),藍藍設計參考國外相關(guān)產(chǎn)品,梳理觀(guān)察目標客戶(hù)群體閱讀習慣,發(fā)現目標客戶(hù)群對直覺(jué)偏好偏向于原生狀態(tài);因此,我們再設計過(guò)程中盡可能減少比必要的元素,最大限度地凈化版面,最終呈現效果如下:

    中央氣象臺系統交互優(yōu)化和界面設計
    中央氣象臺系統交互優(yōu)化和界面設計

      返回