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