01
從需求出發(fā),重新梳理框架結(jié)構(gòu),進(jìn)行交互及布局優(yōu)化
全局化的設(shè)計(jì)是視覺統(tǒng)一的保證。在進(jìn)行前期調(diào)研時(shí)發(fā)現(xiàn),改版前的系統(tǒng)集成了較多功能,每種功能布局都不相同,這樣就會(huì)出現(xiàn)視覺語言的不統(tǒng)一。我們再后期的設(shè)計(jì)中,遵循“框架-布局-細(xì)節(jié)”的設(shè)計(jì)思路,將頁面功能重新梳理,提煉出全新的視覺語言和頁面布局,確保視覺的統(tǒng)一性。目標(biāo)人群和產(chǎn)品使用場景是決定產(chǎn)品設(shè)計(jì)的基礎(chǔ)性因素。我們在產(chǎn)品架構(gòu)設(shè)計(jì)時(shí),仔細(xì)研究目標(biāo)用戶使用場景,模擬用戶操作過程中所有可能行為,精簡產(chǎn)品架構(gòu),優(yōu)化頁面層級,合并頁面內(nèi)容,創(chuàng)新頁面展示方式。
02
注重簡潔的界面和直觀的用戶體驗(yàn),大屏以數(shù)據(jù)本身體現(xiàn)信息的傳達(dá)
采用扁平化和卡片相結(jié)合的設(shè)計(jì)風(fēng)格,摒棄了多余的裝飾圖標(biāo)和細(xì)節(jié),注重簡潔的界面和直觀的用戶體驗(yàn),以數(shù)據(jù)本身體現(xiàn)設(shè)計(jì),突出重要數(shù)據(jù)信息,使界面更加干凈、清晰,用戶可以更快速地理解和操作。卡片化設(shè)計(jì)采用區(qū)塊化結(jié)構(gòu),使層次清晰易讀,利用卡片形成的畫面區(qū)域,內(nèi)容呈現(xiàn)更加集中,有利于突出重點(diǎn)信息。
03
多種信息圖結(jié)合對能源業(yè)務(wù)的理解,準(zhǔn)確表達(dá)數(shù)據(jù)內(nèi)涵,展現(xiàn)數(shù)據(jù)之美
信息圖、數(shù)據(jù)報(bào)表可以包含很多內(nèi)容,是傳遞信息和數(shù)據(jù)的絕佳工具。將大量客觀而理性的數(shù)據(jù)以直觀而藝術(shù)的方式展現(xiàn)在用戶面前,“冰冷”的數(shù)據(jù)和統(tǒng)計(jì)結(jié)果因分析和設(shè)計(jì)而變得“有了溫度”,信息和數(shù)據(jù)因此變得生動(dòng)有趣,
04
將千篇一律的B端能源設(shè)備管理軟件設(shè)計(jì)的優(yōu)雅人性化,展現(xiàn)整體之美
雖然經(jīng)常有人說,B端軟件功能最重要,設(shè)計(jì)的實(shí)用性大于美觀,但是B端界面呈現(xiàn)的數(shù)據(jù)圖表之美也是一種特色。圖標(biāo)細(xì)節(jié)、風(fēng)格格調(diào)、數(shù)據(jù)可視化、信息結(jié)構(gòu)層級排版構(gòu)成了整體之美。
05
3D渲染效果圖或2.5D插畫圖形象表達(dá)港口煤炭裝載運(yùn)營管理數(shù)據(jù)可視化
攜手共進(jìn),揚(yáng)帆起航,基于港口裝截地理位置,通過孿生場景或2.5D的數(shù)字化重現(xiàn),全方位演示港口煤炭運(yùn)輸全產(chǎn)業(yè)鏈運(yùn)轉(zhuǎn)流程,從宏觀角度實(shí)時(shí)監(jiān)控港口重點(diǎn)數(shù)據(jù)內(nèi)容,協(xié)助客戶日常業(yè)務(wù)展示及領(lǐng)導(dǎo)匯報(bào),對各類異常事件進(jìn)行可視化預(yù)警告警,實(shí)時(shí)掌握整體運(yùn)行態(tài)勢,實(shí)現(xiàn)智能指控調(diào)度。
06
作業(yè)異動(dòng)識(shí)別及時(shí)觸達(dá),數(shù)據(jù)變身圖表,風(fēng)險(xiǎn)無處藏身
能源及發(fā)電企業(yè)生產(chǎn)作業(yè)流程較為復(fù)雜,生產(chǎn)作業(yè)人員安全的管控一直是安全管理工作的難點(diǎn)。有了巡檢機(jī)器人與智能攝像機(jī),通過采集現(xiàn)場儀表視頻圖像信息,再由機(jī)器視覺分析和圖像識(shí)別技術(shù)處理,及時(shí)對異常數(shù)據(jù)發(fā)出報(bào)警,可以一鍵生成報(bào)告提醒運(yùn)行人員,運(yùn)行人員只需要對檢測出的缺陷進(jìn)行復(fù)核并提交檢修工單,形成閉環(huán)。藍(lán)藍(lán)設(shè)計(jì)將這個(gè)工作任務(wù)流程設(shè)計(jì)的交互易用,首頁報(bào)警分級別顯示,考慮到數(shù)量多或少,所占區(qū)域合理,數(shù)據(jù)變身圖表,風(fēng)險(xiǎn)無處藏身。
07
多種風(fēng)格ICON圖標(biāo)繪制
圖標(biāo)(icon),GUI
中的圖形符號(hào),其形式即含義,代表應(yīng)用程序、對象和功能。圖標(biāo)有多種類型,大應(yīng)用圖標(biāo)(側(cè)重品牌性)、小功能圖標(biāo)(側(cè)重功能性)、系統(tǒng)圖標(biāo)、可定制圖標(biāo)、可交互圖標(biāo)、純展示圖標(biāo)。其中圖標(biāo)的風(fēng)格更是多種多樣,扁平的、擬物的、線性的、填充的、單色的、雙調(diào)的、2.5D
的、3D 的、靜置的、動(dòng)態(tài)的……藍(lán)藍(lán)設(shè)計(jì)針對各種場景,設(shè)計(jì)各種風(fēng)格的圖標(biāo)和設(shè)備。
08
信息卡片化設(shè)計(jì),突出重點(diǎn)數(shù)據(jù)減少視覺思考
信息采用卡片化設(shè)計(jì)能夠增加頁面的層次感和立體感,使得頁面更加美觀和吸引人。卡片化的設(shè)計(jì)方式也能夠減少用戶的認(rèn)知負(fù)擔(dān),使用戶更加輕松地瀏覽和使用頁面,能夠增加頁面的層次感和立體感,使得頁面更加美觀和吸引人,從而提高了用戶體驗(yàn)。
09
動(dòng)效示意,幫助用戶更好的理解產(chǎn)品
明確的動(dòng)效展示比文字描述更加直觀,在學(xué)習(xí)過程中,用戶往往更會(huì)選擇學(xué)習(xí)成本較低的方式,動(dòng)效的示意不僅可以直觀地展示給用戶,界面的樣式,也可以通過操作示意的方式,引導(dǎo)教育用戶如何快速學(xué)習(xí)軟件,了解操作方式,減少思考的時(shí)間成本,降低上手難度。