偉訊科技ioc移動駕駛艙軟件界面視覺設(shè)計(jì)

偉訊科技ioc移動駕駛艙軟件界面視覺設(shè)計(jì)

html前端 | 交互設(shè)計(jì) | 視覺設(shè)計(jì) | 圖標(biāo)設(shè)計(jì)

html前端 | 交互設(shè)計(jì) | 視覺設(shè)計(jì) | 圖標(biāo)設(shè)計(jì)

偉訊科技(北京)有限公司所研發(fā)的ioc移動駕駛艙,用于描述城市總體運(yùn)營狀況,涵蓋了各個特定于機(jī)構(gòu)的解決方案領(lǐng)域,并支持深入了解每個基礎(chǔ)機(jī)構(gòu)的功能,它通過集中化的智能,提供了對日常城市運(yùn)營的洞察,高效的協(xié)調(diào)行動、解決問題所需的實(shí)時(shí)溝通和協(xié)作,可以優(yōu)化運(yùn)營效率并改進(jìn)規(guī)劃。

偉訊科技有限公司委托藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé)界面視覺設(shè)計(jì)、交互設(shè)計(jì)。藍(lán)藍(lán)設(shè)計(jì)人員通過前期詳細(xì)溝通,參考大量相關(guān)競品。該軟件由DataV實(shí)現(xiàn)開發(fā),DataV是阿里的一個實(shí)時(shí)數(shù)據(jù)大屏搭建工具,為更便捷的實(shí)現(xiàn)開發(fā)工作,在設(shè)計(jì)工程中盡量采用組建庫中的原有控件,最終達(dá)到雙方認(rèn)可的視覺設(shè)計(jì),后續(xù)也通過此方式完成其他頁面設(shè)計(jì)。

偉訊科技ioc移動駕駛艙軟件界面視覺設(shè)計(jì)UI界面設(shè)計(jì)

產(chǎn)品定位

ioc移動駕駛艙,能夠讓城市管理者像在汽車駕駛艙里面對儀表盤一樣,直觀地監(jiān)測城市運(yùn)營情況,并對異常關(guān)鍵指標(biāo)預(yù)警和挖掘分析,實(shí)現(xiàn)決策分析無處不在的實(shí)時(shí)動態(tài)管理。通過智慧城市智能運(yùn)行中心,來監(jiān)視并管理城市服務(wù)。高級的協(xié)作、分析來幫助城市機(jī)構(gòu)協(xié)調(diào)事件響應(yīng)工作,不斷提高城市運(yùn)作的效率。

偉訊科技ioc移動駕駛艙軟件界面視覺設(shè)計(jì)UI界面設(shè)計(jì)

目標(biāo)用戶

重點(diǎn)經(jīng)營數(shù)據(jù)分析、業(yè)績指標(biāo)監(jiān)控以及業(yè)務(wù)數(shù)據(jù)查詢。集團(tuán)領(lǐng)導(dǎo)層、管理者經(jīng)營管理駕駛艙,各個模塊多維度展示,經(jīng)營數(shù)據(jù)一覽無余。 門店經(jīng)營管理,在零售、市場等行業(yè)利用率很高。利用tab展示銷售、商品、庫存、會員等數(shù)據(jù),一張模板搞定店長所有需求,數(shù)據(jù)指導(dǎo)門店經(jīng)營管理。

偉訊科技ioc移動駕駛艙軟件界面視覺設(shè)計(jì)UI界面設(shè)計(jì)

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

在設(shè)計(jì)風(fēng)格上我們以深藍(lán)色為主背景,科技感的邊框和線條來凸顯界面的科技感。數(shù)據(jù)展示和控件在采用明亮的藍(lán)為輔助色,作為最要內(nèi)容的顯示,添加對比色與鄰近色作為點(diǎn)綴來起到信息的強(qiáng)調(diào)作用,營造整體的觀感為科技,穩(wěn)重,理性的設(shè)計(jì)風(fēng)格!

駕駛艙軟件界面視覺設(shè)計(jì)

此頁面主要為數(shù)據(jù)總覽頁,便于領(lǐng)導(dǎo)和管理層查看總的數(shù)據(jù),快速獲取重點(diǎn)經(jīng)營數(shù)據(jù)。頁面主要通過5大分類來反應(yīng)此城市中人群信息。

從內(nèi)容布局與排版上,采用清晰的框架來進(jìn)行明確的區(qū)分, 在這5部分內(nèi)容中,把關(guān)鍵的內(nèi)容置于視覺中心,在總納管人口下,其它幾個板塊作為詳細(xì)的分析,其數(shù)字采用液晶顯示類文字,觀感更符合數(shù)據(jù)的展示,同時(shí)具有強(qiáng)調(diào)作用。

年齡分析以縱列的柱狀圖,清晰的反應(yīng)每個年齡階段的對比情況;數(shù)據(jù)來源采用堆砌的橫向?qū)Ρ确绞剑阌谟^察每個單位來源與總的分類情況對比;人口結(jié)構(gòu)用雙向柱狀圖來進(jìn)行分析,更加直觀;特征人群的三大類,加入圖標(biāo)的設(shè)計(jì)來避免過多數(shù)據(jù)信息擾亂視覺,增加視覺舒適與解釋度。

駕駛艙軟件界面視覺設(shè)計(jì)

駕駛艙軟件界面視覺設(shè)計(jì)

在事件分析頁面的設(shè)計(jì)中,事件發(fā)生內(nèi)容較多,信息量較大,以列表翻頁的形式來展示,放大事件標(biāo)題,添加標(biāo)簽來給此事件定義類型,布局清晰直觀!

為預(yù)防事件的錯誤傳遞,添加編輯功能,可進(jìn)行修正處理,在選中該事件后,頂部會進(jìn)行詳細(xì)信息的表述與補(bǔ)充,方便對事件的了解與直觀提取。

駕駛艙軟件界面視覺設(shè)計(jì)

為預(yù)防事件的錯誤傳遞,添加編輯功能,可進(jìn)行修正處理,在選中該事件后,頂部會進(jìn)行詳細(xì)信息的表述與補(bǔ)充,方便對事件的了解與直觀提取。

駕駛艙軟件界面視覺設(shè)計(jì)

駕駛艙軟件界面視覺設(shè)計(jì)

企業(yè)信息總覽中,主要分為5大模塊,對所提供的信息進(jìn)行圖形化處理,企業(yè)圖譜解讀商業(yè)關(guān)系;企業(yè)關(guān)系清晰的展示各個組織架構(gòu)層級,加入圖形間隔,增加信息識別性;高管信息和變更記錄都采用表格的方式,通過滾動可以展示更多的信息。

駕駛艙軟件界面視覺設(shè)計(jì)

在企業(yè)全息畫像直通車中,最主要的是對辦理狀態(tài)的信息處理,底部以時(shí)間段的形式來進(jìn)行事件的篩選;事件采用卡片的方式,具有易閱讀性;綠色以比較醒目的視覺感知綠色作為標(biāo)簽的底色,未解決則采用警告提示性質(zhì)的紅色;整體布局與信息反應(yīng)清晰明了!

駕駛艙軟件界面視覺設(shè)計(jì)

駕駛艙軟件界面視覺設(shè)計(jì)

在智慧城市管理中,從社區(qū)到個人,通過集中化信息洞察到個人的信息展示,詳細(xì)便捷的信息管理更好的幫助了城市的管理。

駕駛艙軟件界面視覺設(shè)計(jì)
駕駛艙軟件界面視覺設(shè)計(jì)
駕駛艙軟件界面視覺設(shè)計(jì)
駕駛艙軟件界面視覺設(shè)計(jì)

  返回