2020年6月以來(lái)，全國(guó)共有433條河流發(fā)生超警以上洪水。長(zhǎng)江、黃河上游、珠江流域的西江和北江、太湖都發(fā)生今年1號(hào)洪水，防汛形勢(shì)嚴(yán)峻。截至7月下旬，全國(guó)有3873萬(wàn)人次受災(zāi)，人員死亡失蹤141人。這幾天每天關(guān)注鄱陽(yáng)湖洪水狀況，整理網(wǎng)站類(lèi)作品，看到給中央氣象臺(tái)近十年設(shè)計(jì)的諸多網(wǎng)頁(yè)和系統(tǒng)，當(dāng)時(shí)以為尋常事，回顧時(shí)感慨萬(wàn)千。作為公民，我們?cè)谟梦覀兩瞄L(zhǎng)的設(shè)計(jì)去服務(wù)社會(huì)，在這個(gè)過(guò)程中形成自己的積淀，這是不可用金錢(qián)來(lái)衡量的價(jià)值。
藍(lán)藍(lán)設(shè)計(jì)將中央氣象臺(tái)十年合作項(xiàng)目總結(jié)為一份設(shè)計(jì)說(shuō)明，與大家分享我們氣象預(yù)報(bào)行業(yè)設(shè)計(jì)經(jīng)驗(yàn)；藍(lán)藍(lán)設(shè)計(jì)也會(huì)繼續(xù)在我們擅長(zhǎng)領(lǐng)域竭力服務(wù)社會(huì)，在這個(gè)過(guò)程中形成自己的積淀，創(chuàng)造不一樣的價(jià)值。中央氣象臺(tái)（National Meteorological Center of CMA）是承擔(dān)全國(guó)天氣預(yù)報(bào)、海洋、環(huán)境、生態(tài)和農(nóng)業(yè)氣象以及中國(guó)氣象局業(yè)務(wù)數(shù)值預(yù)報(bào)系統(tǒng)研發(fā)與運(yùn)行、決策氣象服務(wù)等工作的國(guó)家級(jí)氣象業(yè)務(wù)中心.網(wǎng)頁(yè)鏈接：http://www.nmc.cn/
理解氣象業(yè)務(wù)做好產(chǎn)品調(diào)研
氣象局各子部門(mén)眾多，改版一次差不多需一年的時(shí)間，做各種需求的調(diào)研，分析，征求大家的意見(jiàn)，層層審批。
氣象業(yè)務(wù)研發(fā)部門(mén)也在根據(jù)國(guó)民需求不斷的開(kāi)發(fā)出新的氣象產(chǎn)品。
藍(lán)藍(lán)設(shè)計(jì)與開(kāi)發(fā)工程師協(xié)作，根據(jù)后臺(tái)統(tǒng)計(jì)數(shù)，熱力圖，分析用戶(hù)屬性.喜好，做出用戶(hù)畫(huà)像。輸出多版交互原型和視覺(jué)方案供客戶(hù)選擇，最終在多套方案中選擇一套，經(jīng)過(guò)后續(xù)修改后最終定版。（見(jiàn)右圖）
版式設(shè)計(jì)是現(xiàn)代設(shè)計(jì)藝術(shù)的重要組成部分，是視覺(jué)傳達(dá)的重要手段。隨著氣象服務(wù)的發(fā)展，中央氣象臺(tái)網(wǎng)站功能也越來(lái)越多，頁(yè)面承載信息也越來(lái)越多，這對(duì)頁(yè)面版面規(guī)劃提出了更高的要求。
我們?cè)谠O(shè)計(jì)時(shí)將“條理性”作為此次改版的思維指導(dǎo)，把大量“撲面而來(lái)”的信息，通過(guò)視覺(jué)化的手段，處理成有條理的且具有引導(dǎo)性的“視覺(jué)走勢(shì)”或者視覺(jué)引導(dǎo)，讓讀者在短時(shí)間內(nèi)可獲得想要表達(dá)的信息，最終形成預(yù)期收益。
針對(duì)以上問(wèn)題，我們經(jīng)過(guò)調(diào)研、探討，列出一下幾點(diǎn)修改思路
- 1、整體風(fēng)格切換，風(fēng)格采用目前較為流行的扁平風(fēng)，讓頁(yè)面更加簡(jiǎn)潔，減輕用戶(hù)的視覺(jué)壓力，更好突出要展示的內(nèi)容。
- 2、調(diào)整版面比例，根據(jù)內(nèi)容重新劃分版面，增加鼠標(biāo)滑過(guò)、點(diǎn)擊跳轉(zhuǎn)等部分操作動(dòng)效，區(qū)分可操作版面和信息展示版面，使頁(yè)面布局更加清晰，合理。
- 3、圖標(biāo)定制，為了更好的和頁(yè)面整體風(fēng)格相契合，所有的天氣圖標(biāo)和預(yù)警圖標(biāo)都重新設(shè)計(jì)。天氣圖標(biāo)包括白天、晚上、有背景、無(wú)背景等好幾種狀態(tài)。
城市天氣預(yù)報(bào)頁(yè)豐富的頁(yè)面配色 視覺(jué)重量分布
從色彩心理學(xué)上講，顏色可以影響用戶(hù)對(duì)產(chǎn)品價(jià)值的認(rèn)知，合適的色彩可以給用戶(hù)直接的指示；我們?cè)陧?yè)面中使用藍(lán)色色調(diào)，給人一種平靜、可信、可靠的認(rèn)知；它的意圖是，給用戶(hù)有價(jià)值信息。
視覺(jué)重量是控制頁(yè)面節(jié)奏感和張馳度的設(shè)計(jì)方法，視可以調(diào)整畫(huà)面中的文字或者線(xiàn)條粗細(xì)度以及內(nèi)容明度來(lái)增加或者改變頁(yè)面的視覺(jué)重量。視覺(jué)重量影響因素有很多，包括大小，明暗，粗細(xì)，虛實(shí)等等，通過(guò)不同類(lèi)型的組合，形成豐富的頁(yè)面版式，同時(shí)可以突出頁(yè)面重要內(nèi)容，弱化次要內(nèi)容，最終達(dá)到頁(yè)面張弛有度，信息層次明確的效果。
這次改版，我們大膽嘗試大面積藍(lán)色+高飽和度的設(shè)計(jì)，理由如下：
- 1.目前市面上已有大量采用大面積顏色+高飽和度的設(shè)計(jì)產(chǎn)品，一定程度上已經(jīng)成為流行，用戶(hù)對(duì)這種設(shè)計(jì)風(fēng)格接受度也大幅提高；
- 2.大面積色塊可以融入情景化設(shè)計(jì)，將天氣情況和圖片/插畫(huà)相結(jié)合，通過(guò)色彩/圖片的變化，實(shí)時(shí)展示當(dāng)前天氣情況，為用戶(hù)帶來(lái)時(shí)身臨其境的體驗(yàn)；同時(shí)平衡頁(yè)面視覺(jué)重量，優(yōu)化頁(yè)面視覺(jué)層級(jí)。
情景化設(shè)計(jì)的探索
當(dāng)時(shí)方案中提議以情景化方式設(shè)計(jì)“災(zāi)情專(zhuān)題”模塊，及時(shí)向社會(huì)發(fā)布災(zāi)情信息
情景化設(shè)計(jì)的探索
部分天氣icon展示
部分天氣icon展示
手機(jī)端展示
中央氣象局-MICAPS4客戶(hù)端
MICAPS4系統(tǒng)是一套復(fù)雜的氣象預(yù)報(bào)，氣象分析的系統(tǒng)，氣象預(yù)報(bào)對(duì)數(shù)據(jù)時(shí)效性要求極高，工作人員必須在第一時(shí)間分析數(shù)據(jù)并作出氣象判斷，并發(fā)布預(yù)警，因此，簡(jiǎn)單，快速地完成整個(gè)分析流程是這套系統(tǒng)最大的要求。
簡(jiǎn)單即簡(jiǎn)潔，線(xiàn)性圖標(biāo)的使用，極大地簡(jiǎn)化了頁(yè)面按鈕元素，簡(jiǎn)潔的按鈕布局和界面風(fēng)格界面減少了不必要的視覺(jué)干擾，更容易進(jìn)行視覺(jué)定位，作出準(zhǔn)確地操作。
快速即直觀，將界面部分具有從屬關(guān)系的圖標(biāo)羅列在工具箱面板，可減少操作員尋找，點(diǎn)擊按鈕的步驟，提高操作效率。
設(shè)計(jì)前后對(duì)比
部分圖標(biāo)展示
軟件界面展示
CMRC_DC系統(tǒng)
CMRC_DC系統(tǒng)是面向海外用戶(hù)的船舶監(jiān)測(cè)系統(tǒng)，主要為船舶提供海洋氣象信息并提供相關(guān)支持。
考慮到產(chǎn)品功能比較單一，且軟件面向海外客戶(hù)，藍(lán)藍(lán)設(shè)計(jì)參考國(guó)外相關(guān)產(chǎn)品，梳理觀察目標(biāo)客戶(hù)群體閱讀習(xí)慣，發(fā)現(xiàn)目標(biāo)客戶(hù)群對(duì)直覺(jué)偏好偏向于原生狀態(tài)；因此，我們?cè)僭O(shè)計(jì)過(guò)程中盡可能減少比必要的元素，最大限度地凈化版面，最終呈現(xiàn)效果如下：
設(shè)計(jì)作品Gis界面設(shè)計(jì)
數(shù)慧時(shí)空國(guó)土資源部國(guó)土一張圖大屏界面設(shè)計(jì)及前端開(kāi)發(fā)
設(shè)計(jì)作品應(yīng)急大屏設(shè)計(jì)
設(shè)計(jì)作品應(yīng)急大屏設(shè)計(jì)
設(shè)計(jì)作品應(yīng)急大屏設(shè)計(jì)
