北京科銳慧云智慧能源服務(wù)平臺(tái)界面設(shè)計(jì)

北京科銳慧云智慧能源服務(wù)平臺(tái)界面設(shè)計(jì)

圖標(biāo)交互 | 交互設(shè)計(jì) | 界面設(shè)計(jì)

圖標(biāo)交互 | 交互設(shè)計(jì) | 界面設(shè)計(jì)

APP頁面設(shè)計(jì)前

App在設(shè)計(jì)之前已經(jīng)開發(fā)完畢,功能布局客戶的客戶是認(rèn)可的,所以只是做了視覺上的變化。

APP頁面設(shè)計(jì)前01
APP頁面設(shè)計(jì)前02
APP頁面設(shè)計(jì)前03
APP頁面設(shè)計(jì)前04
APP頁面設(shè)計(jì)前05
APP頁面設(shè)計(jì)前06
APP頁面設(shè)計(jì)前07

北京科銳主要從事配電設(shè)備及電力電子的研發(fā)與制造。 近年來致力于企事業(yè)單位的電力物業(yè)服務(wù)、分布式光伏、能源綜合利用及配售電業(yè)務(wù),建設(shè)微能源網(wǎng)平臺(tái),擁有微網(wǎng)群監(jiān)控、電能質(zhì)量治理、節(jié)能低碳、儲(chǔ)能增效、智慧城市及有軌電車和電動(dòng)車充電裝置等方面的系列解決方案,并積極參與電力市場(chǎng)化改革實(shí)踐,努力為電力用戶和配網(wǎng)系統(tǒng)提供貼心、優(yōu)質(zhì)和增值服務(wù)。

科銳慧云產(chǎn)品線由科銳幾家控股公司分別負(fù)責(zé)不同的產(chǎn)品,用于各個(gè)電力物業(yè)的能源監(jiān)控和管理分析。藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé)設(shè)計(jì)界面設(shè)計(jì)、建立統(tǒng)一的UI規(guī)范,應(yīng)用于不同的軟件。在設(shè)計(jì)中,藍(lán)藍(lán)設(shè)計(jì)找到許多國內(nèi)外的相關(guān)競(jìng)品和卓越設(shè)計(jì)做參考,勇于創(chuàng)新、敏捷迭代,用心設(shè)計(jì),工作中,雙方合作友好默契。

首頁設(shè)計(jì)

原來的項(xiàng)目頁面是上下結(jié)構(gòu)的,此次為和其它二個(gè)軟件統(tǒng)一,經(jīng)過大家討論,決定用左右結(jié)構(gòu)形式做為軟件框架。

根據(jù)原來頁面內(nèi)容梳理信息優(yōu)先級(jí)重新設(shè)計(jì)新頁面。

1 增加最近訪問欄目,可根據(jù)使用軟件頻率提供快捷方式。

2 減小了項(xiàng)目信息區(qū)域,將系統(tǒng)指標(biāo)與項(xiàng)目信息合并展示,綜合展示結(jié)果。

3 以tab簽的形式設(shè)計(jì)各標(biāo)目的標(biāo)題,簡(jiǎn)潔明確,視覺整體統(tǒng)一美觀。

4 以圓環(huán)的形式表達(dá)指標(biāo)統(tǒng)計(jì)設(shè)備數(shù)量及百分比。

5 優(yōu)化交互 左側(cè)菜單可以收起,上方告警信息每一個(gè)看后可關(guān)閉。

設(shè)計(jì)前

首頁設(shè)計(jì)--設(shè)計(jì)前
首頁設(shè)計(jì)

競(jìng)品分析   首頁三類布局分析各自特點(diǎn),選擇目前交互布局形式。

競(jìng)品分析
上下結(jié)構(gòu)
左右結(jié)構(gòu)
整體結(jié)構(gòu)

設(shè)計(jì)原則

  • 準(zhǔn)確表達(dá)功能含義

  • 簡(jiǎn)單

    減少用戶記憶負(fù)擔(dān)

  • 自然

    界面風(fēng)格統(tǒng)一

  • 信息優(yōu)先級(jí)

    確定主次及順序

  • 對(duì)齊

    建立元素間的視覺聯(lián)系

  • 關(guān)聯(lián)

    相關(guān)的元素放在一起

  • 對(duì)比

    劃分層次、重點(diǎn)

  • 重復(fù)

    統(tǒng)一表現(xiàn)形式及風(fēng)格

品牌及色彩

品牌及色彩01
品牌及色彩02

氛圍和定位     體現(xiàn)能源互聯(lián)網(wǎng)、新能源、電力運(yùn)維服務(wù)、科銳VI . 為正確傳達(dá)企業(yè)的品牌形象,軟件產(chǎn)品的主色調(diào)以藍(lán)色為主,紅色為輔。

能源互聯(lián)網(wǎng)

能源互聯(lián)網(wǎng)

能源互聯(lián)網(wǎng)

能源互聯(lián)網(wǎng)

電力運(yùn)維服務(wù)

電力運(yùn)維服務(wù)

科銳VI

科銳VI

設(shè)計(jì)過程和迭代

第一次提案

第一次提案

第二次修改   設(shè)計(jì)過程迭代修改局部、內(nèi)容調(diào)整許多次。

第二次修改

國外優(yōu)秀gis地圖軟件欣賞

國外優(yōu)秀gis地圖軟件

GIS頁之前的原型

根據(jù)溝通決定將兩屏切換的內(nèi)容放到一頁上,去掉一些重復(fù)的信息。在設(shè)計(jì)過程中嘗試了不同的配色及視覺表現(xiàn)方式。

GIS頁之前的原型01GIS頁之前的原型02GIS頁之前的原型03

GIS圖:根據(jù)用戶訪問項(xiàng)目的權(quán)限,當(dāng)訪問的項(xiàng)目地理位置都在一個(gè)城市時(shí),顯示這個(gè)城市范圍的GIS;當(dāng)訪問的項(xiàng)目地理位置不在同一個(gè)城市但在同一個(gè)?。ㄗ灾螀^(qū))時(shí),顯示這個(gè)省(自治區(qū))范圍的GIS圖;當(dāng)訪問的項(xiàng)目地理位置不在同一個(gè)城市,也不在同一?。ㄗ灾螀^(qū)),但在同一個(gè)國家時(shí),顯示這個(gè)國家范圍的GIS圖;其它情況顯示世界地圖。

GIS圖上的項(xiàng)目標(biāo)注:在GIS圖的經(jīng)緯度上顯示項(xiàng)目標(biāo)注。項(xiàng)目的經(jīng)緯度一般是項(xiàng)目管理方的地址。

VI塊:用戶所在單位的企業(yè)VI和公司運(yùn)營時(shí)間。

業(yè)績(jī)塊:根據(jù)用戶訪問項(xiàng)目的權(quán)限,所訪問項(xiàng)目的系統(tǒng)名稱及數(shù)量合計(jì)。系統(tǒng)包括:能源管控、配電自動(dòng)化、故障定位系統(tǒng)等。

終端統(tǒng)計(jì)塊:根據(jù)用戶訪問項(xiàng)目的權(quán)限,所訪問項(xiàng)目的終端名稱及數(shù)量合計(jì)。終端名稱包括:RTU、FTU、DTU、故障定位通信終端、一遙故障指示器、二遙故障指示器、低壓智能儀表……等。

行業(yè)統(tǒng)計(jì)塊:根據(jù)用戶訪問項(xiàng)目的權(quán)限,所訪問項(xiàng)目中各行業(yè)名稱及數(shù)量合計(jì)。行業(yè)包括:供電企業(yè)、工業(yè)園區(qū)、工廠、學(xué)校、醫(yī)院、政府機(jī)關(guān)、住宅小區(qū)、酒店……等

界面響應(yīng)

客戶信息塊:鼠標(biāo)點(diǎn)擊某一項(xiàng)目標(biāo)注時(shí),顯示項(xiàng)目信息和各客戶信息。鼠標(biāo)點(diǎn)擊此信息塊外區(qū)域時(shí),此塊消失。

客戶頁界面:鼠標(biāo)左鍵雙擊某一項(xiàng)目標(biāo)注時(shí),進(jìn)入客戶頁界面。

GIS頁三個(gè)配色新方案

GIS頁三個(gè)配色新方案01GIS頁三個(gè)配色新方案02GIS頁三個(gè)配色新方案03

GIS頁定稿方案

GIS頁定稿方案

其他頁面

其他頁面01
其他頁面02
其他頁面03
其他頁面04

  返回