html前端 | 交互設(shè)計(jì) | 視覺設(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)的功能，它通過集中化的智能，提供了對(duì)日常城市運(yùn)營(yíng)的洞察，高效的協(xié)調(diào)行動(dòng)、解決問題所需的實(shí)時(shí)溝通和協(xié)作，可以優(yōu)化運(yùn)營(yíng)效率并改進(jìn)規(guī)劃。
偉訊科技有限公司委托藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé)界面視覺設(shè)計(jì)、交互設(shè)計(jì)。藍(lán)藍(lán)設(shè)計(jì)人員通過前期詳細(xì)溝通，參考大量相關(guān)競(jìng)品。該軟件由DataV實(shí)現(xiàn)開發(fā)，DataV是阿里的一個(gè)實(shí)時(shí)數(shù)據(jù)大屏搭建工具，為更便捷的實(shí)現(xiàn)開發(fā)工作，在設(shè)計(jì)工程中盡量采用組建庫(kù)中的原有控件，最終達(dá)到雙方認(rèn)可的視覺設(shè)計(jì)，后續(xù)也通過此方式完成其他頁面設(shè)計(jì)。
ioc移動(dòng)駕駛艙，能夠讓城市管理者像在汽車駕駛艙里面對(duì)儀表盤一樣，直觀地監(jiān)測(cè)城市運(yùn)營(yíng)情況，并對(duì)異常關(guān)鍵指標(biāo)預(yù)警和挖掘分析，實(shí)現(xiàn)決策分析無處不在的實(shí)時(shí)動(dòng)態(tài)管理。通過智慧城市智能運(yùn)行中心，來監(jiān)視并管理城市服務(wù)。高級(jí)的協(xié)作、分析來幫助城市機(jī)構(gòu)協(xié)調(diào)事件響應(yīng)工作，不斷提高城市運(yùn)作的效率。
重點(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ù)一覽無余。 門店經(jīng)營(yíng)管理，在零售、市場(chǎng)等行業(yè)利用率很高。利用tab展示銷售、商品、庫(kù)存、會(huì)員等數(shù)據(jù)，一張模板搞定店長(zhǎng)所有需求，數(shù)據(jù)指導(dǎo)門店經(jīng)營(yíng)管理。
在設(shè)計(jì)風(fēng)格上我們以深藍(lán)色為主背景，科技感的邊框和線條來凸顯界面的科技感。數(shù)據(jù)展示和控件在采用明亮的藍(lán)為輔助色，作為最要內(nèi)容的顯示，添加對(duì)比色與鄰近色作為點(diǎn)綴來起到信息的強(qiáng)調(diào)作用，營(yíng)造整體的觀感為科技，穩(wěn)重，理性的設(shè)計(jì)風(fēng)格！
此頁面主要為數(shù)據(jù)總覽頁，便于領(lǐng)導(dǎo)和管理層查看總的數(shù)據(jù)，快速獲取重點(diǎn)經(jīng)營(yíng)數(shù)據(jù)。頁面主要通過5大分類來反應(yīng)此城市中人群信息。
從內(nèi)容布局與排版上，采用清晰的框架來進(jìn)行明確的區(qū)分， 在這5部分內(nèi)容中，把關(guān)鍵的內(nèi)容置于視覺中心，在總納管人口下，其它幾個(gè)板塊作為詳細(xì)的分析，其數(shù)字采用液晶顯示類文字，觀感更符合數(shù)據(jù)的展示，同時(shí)具有強(qiáng)調(diào)作用。
年齡分析以縱列的柱狀圖，清晰的反應(yīng)每個(gè)年齡階段的對(duì)比情況；數(shù)據(jù)來源采用堆砌的橫向?qū)Ρ确绞剑阌谟^察每個(gè)單位來源與總的分類情況對(duì)比；人口結(jié)構(gòu)用雙向柱狀圖來進(jìn)行分析，更加直觀；特征人群的三大類，加入圖標(biāo)的設(shè)計(jì)來避免過多數(shù)據(jù)信息擾亂視覺，增加視覺舒適與解釋度。
在事件分析頁面的設(shè)計(jì)中，事件發(fā)生內(nèi)容較多，信息量較大，以列表翻頁的形式來展示，放大事件標(biāo)題，添加標(biāo)簽來給此事件定義類型，布局清晰直觀！
為預(yù)防事件的錯(cuò)誤傳遞，添加編輯功能，可進(jìn)行修正處理，在選中該事件后，頂部會(huì)進(jìn)行詳細(xì)信息的表述與補(bǔ)充，方便對(duì)事件的了解與直觀提取。
為預(yù)防事件的錯(cuò)誤傳遞，添加編輯功能，可進(jìn)行修正處理，在選中該事件后，頂部會(huì)進(jìn)行詳細(xì)信息的表述與補(bǔ)充，方便對(duì)事件的了解與直觀提取。
企業(yè)信息總覽中，主要分為5大模塊，對(duì)所提供的信息進(jìn)行圖形化處理，企業(yè)圖譜解讀商業(yè)關(guān)系；企業(yè)關(guān)系清晰的展示各個(gè)組織架構(gòu)層級(jí)，加入圖形間隔，增加信息識(shí)別性；高管信息和變更記錄都采用表格的方式，通過滾動(dòng)可以展示更多的信息。
在企業(yè)全息畫像直通車中，最主要的是對(duì)辦理狀態(tài)的信息處理，底部以時(shí)間段的形式來進(jìn)行事件的篩選；事件采用卡片的方式，具有易閱讀性；綠色以比較醒目的視覺感知綠色作為標(biāo)簽的底色，未解決則采用警告提示性質(zhì)的紅色；整體布局與信息反應(yīng)清晰明了！
在智慧城市管理中，從社區(qū)到個(gè)人，通過集中化信息洞察到個(gè)人的信息展示，詳細(xì)便捷的信息管理更好的幫助了城市的管理。
