青海師范大學(xué)——大氣污染可視化系統(tǒng)界面視覺設(shè)計

青海師范大學(xué)——大氣污染可視化系統(tǒng)界面視覺設(shè)計

vue開發(fā) | 交互設(shè)計 | 界面設(shè)計

vue開發(fā) | 交互設(shè)計 | 界面設(shè)計

大氣污染可視化系統(tǒng)是由青海師范大學(xué)老師帶領(lǐng)學(xué)生參加比賽的作品設(shè)計,該參賽作品的選題背景以新形勢下環(huán)境保護(hù)需求為導(dǎo)向,聚焦環(huán)保信息化技術(shù)領(lǐng)域。此次活動比賽促進(jìn)了師范生教學(xué)技能訓(xùn)練,展示了青海師范大學(xué)生的良好精神風(fēng)貌,對于增強(qiáng)學(xué)生實踐能力,提高人才培養(yǎng)質(zhì)量具有重要意義。

大氣污染可視化系參賽作品由青海師范大學(xué)委托藍(lán)藍(lán)設(shè)計負(fù)責(zé)重點頁的界面視覺設(shè)計、交互設(shè)計,青海師范大學(xué)老師帶領(lǐng)學(xué)生負(fù)責(zé)開發(fā)。藍(lán)藍(lán)設(shè)計人員接到任務(wù)后,通過前期的充分溝通,將原有的系統(tǒng)界面進(jìn)行改版,期間不斷完善界面的每一處細(xì)節(jié),最終圓滿完成該項目。

天氣GIS軟件UI設(shè)計

產(chǎn)品定位

該參賽系統(tǒng)是實現(xiàn)對區(qū)域內(nèi)空氣質(zhì)量多方面、全方位的掌握和把控的一個系統(tǒng)。通過數(shù)據(jù)發(fā)現(xiàn)問題、分析問題、解決問題,及時掌握全國污染現(xiàn)狀及區(qū)域的環(huán)境風(fēng)險,為環(huán)境空氣質(zhì)量的精準(zhǔn)治理和相關(guān)決策提供有力的科學(xué)支撐。

天氣GIS軟件UI設(shè)計

目標(biāo)用戶

該參賽系統(tǒng)目的是助力環(huán)保數(shù)據(jù)可視化展現(xiàn),為環(huán)境管理部門提供各項數(shù)據(jù)監(jiān)測、分析、管理服務(wù),提升其精細(xì)化管控治理能力。充分滿足各級環(huán)保部門環(huán)境的建設(shè)要求,支持各級環(huán)保部門環(huán)境監(jiān)理與環(huán)境監(jiān)測工作,適應(yīng)不同層級用戶的管理需求。

天氣GIS軟件UI設(shè)計

設(shè)計風(fēng)格

通過前期的調(diào)研和溝通最終采用富有科技感的設(shè)計形式。界面整體采用深藍(lán)背景,通過背景圖案展示界面的縱深感。富有科技感的邊框和線條來凸顯界面的科技感。數(shù)據(jù)展示和控件在主色調(diào)的基礎(chǔ)上運用一些鮮明色作為點綴,即豐富了頁面也突出了要展示的信息。

天氣GIS軟件UI設(shè)計

首頁界面設(shè)計

原產(chǎn)品?案中,界?功能區(qū)雖然區(qū)分明確,顏色色塊視覺比重大,整體數(shù)據(jù)顯得過于擁擠雜亂,用戶的視覺觀感效果差。

藍(lán)藍(lán)設(shè)計面對龐雜的信息,去粗取精,提煉各場景的核心內(nèi)容,避免冗余信息阻礙內(nèi)容有效傳達(dá),做到信息可視,清晰傳達(dá)。

同時采用清晰的圖表進(jìn)行數(shù)據(jù)展示,并留有空白,讓界面整體具有呼吸感,讓客戶以最直觀的方式理解信息,大幅度降低內(nèi)容理解門檻。


大氣污染可視化UI界面設(shè)計
大氣污染可視化UI界面設(shè)計
大氣污染可視化UI界面設(shè)計

臨汾市范圍界面設(shè)計

原產(chǎn)品?案中,界?功能區(qū)雖然區(qū)分明確,但信息層級區(qū)分并不明確,讓用戶抓不住重點,不知道往哪里看。

    藍(lán)藍(lán)設(shè)計人員遵守人的閱讀習(xí)慣,強(qiáng)化主、次信息;統(tǒng)計數(shù)據(jù)浮于場景之上,形成內(nèi)容上的空間感,又保證較高的擴(kuò)展性。統(tǒng)一各視圖的排版規(guī)則,穩(wěn)定的布局,能避免打斷觀看者心流。從系統(tǒng)上可以明顯看出山西省臨汾市的各項環(huán)境數(shù)據(jù)指標(biāo)。

大數(shù)據(jù)可視化系統(tǒng)界面設(shè)計

治理模塊界面設(shè)計

該板塊為大氣污染可視化系統(tǒng)的治理板塊,通過該板塊可以看到山西省臨汾市治理的事件、治理效果分析、治理期間的污染濃度變化趨勢等等功能需求。

    藍(lán)藍(lán)設(shè)計人員通過文字顏色,粗細(xì)、高亮的區(qū)別更好的區(qū)分層級關(guān)系,滿足人眼閱讀習(xí)慣和業(yè)務(wù)數(shù)據(jù)的展示需求。


大數(shù)據(jù)可視化系統(tǒng)界面設(shè)計

  返回