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

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

理解氣象業(yè)務做好產(chǎn)品調(diào)研

氣象局各子部門眾多，改版一次差不多需一年的時間，做各種需求的調(diào)研，分析，征求大家的意見，層層審批。

氣象業(yè)務研發(fā)部門也在根據(jù)國民需求不斷的開發(fā)出新的氣象產(chǎn)品。

藍藍設計與開發(fā)工程師協(xié)作，根據(jù)后臺統(tǒng)計數(shù)，熱力圖，分析用戶屬性.喜好，做出用戶畫像。輸出多版交互原型和視覺方案供客戶選擇，最終在多套方案中選擇一套，經(jīng)過后續(xù)修改后最終定版。（見右圖）

版式設計是現(xiàn)代設計藝術的重要組成部分，是視覺傳達的重要手段。隨著氣象服務的發(fā)展，中央氣象臺網(wǎng)站功能也越來越多，頁面承載信息也越來越多，這對頁面版面規(guī)劃提出了更高的要求。

我們在設計時將“條理性”作為此次改版的思維指導，把大量“撲面而來”的信息，通過視覺化的手段，處理成有條理的且具有引導性的“視覺走勢”或者視覺引導，讓讀者在短時間內(nèi)可獲得想要表達的信息，最終形成預期收益。針對以上問題，我們經(jīng)過調(diào)研、探討，列出一下幾點修改思路

1、整體風格切換，風格采用目前較為流行的扁平風，讓頁面更加簡潔，減輕用戶的視覺壓力，更好突出要展示的內(nèi)容。
2、調(diào)整版面比例，根據(jù)內(nèi)容重新劃分版面，增加鼠標滑過、點擊跳轉(zhuǎn)等部分操作動效，區(qū)分可操作版面和信息展示版面，使頁面布局更加清晰，合理。
3、圖標定制，為了更好的和頁面整體風格相契合，所有的天氣圖標和預警圖標都重新設計。天氣圖標包括白天、晚上、有背景、無背景等好幾種狀態(tài)。

城市天氣預報頁豐富的頁面配色視覺重量分布

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

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

這次改版，我們大膽嘗試大面積藍色+高飽和度的設計，理由如下：

1.目前市面上已有大量采用大面積顏色+高飽和度的設計產(chǎn)品，一定程度上已經(jīng)成為流行，用戶對這種設計風格接受度也大幅提高；
2.大面積色塊可以融入情景化設計，將天氣情況和圖片/插畫相結(jié)合，通過色彩/圖片的變化，實時展示當前天氣情況，為用戶帶來時身臨其境的體驗；同時平衡頁面視覺重量，優(yōu)化頁面視覺層級。