偉訊科技ioc移動駕駛艙軟件界面視覺設計

偉訊科技ioc移動駕駛艙軟件界面視覺設計

html前端 | 交互設計 | 視覺設計 | 圖標設計

html前端 | 交互設計 | 視覺設計 | 圖標設計

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

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

偉訊科技ioc移動駕駛艙軟件界面視覺設計UI界面設計

產(chǎn)品定位

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

偉訊科技ioc移動駕駛艙軟件界面視覺設計UI界面設計

目標用戶

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

偉訊科技ioc移動駕駛艙軟件界面視覺設計UI界面設計

設計風格

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

駕駛艙軟件界面視覺設計

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

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

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

駕駛艙軟件界面視覺設計

駕駛艙軟件界面視覺設計

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

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

駕駛艙軟件界面視覺設計

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

駕駛艙軟件界面視覺設計

駕駛艙軟件界面視覺設計

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

駕駛艙軟件界面視覺設計

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

駕駛艙軟件界面視覺設計

駕駛艙軟件界面視覺設計

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

駕駛艙軟件界面視覺設計
駕駛艙軟件界面視覺設計
駕駛艙軟件界面視覺設計
駕駛艙軟件界面視覺設計

  返回