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

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

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

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

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

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

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

產(chǎn)品定位

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

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

目標(biāo)用戶

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  返回