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

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

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

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

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

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

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

產(chǎn)品定位

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

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

目標(biāo)用戶

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

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

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

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

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

首頁界面設(shè)計(jì)

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

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

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


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

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

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

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

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

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

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

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


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

  返回