能源管理系统视觉设计文档

能源管理系统V1.2
UI设计规范
设计良好的界面能够引导用户自己完成相应操作，起到向导作用。

引言：
在界面设计中应该保持界面的一致性。

一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、风格、颜色、术语、提示信息等方面确保一致
一.界面设计主要目的：
1）以用户为中心。

设计由用户控制的界面，而不是界面控制用户。

2）清楚一致的设计。

所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解和使用。

3）拥有良好的直觉特征。

以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，来帮助用户能迅速学会软件的使用。

4）较快的响应速度。

5）简洁、美观。

二.软件特点：
1）一款能效管理节能方面的软件（考虑到偏向于绿色蓝色，偏冷色系）
2） BS管理平台系统平台的开发（更多的基WEB框架内的设计）
3）使用对象，此版本针对主动用户（主要用户使用群体集中在25岁YO岁之间，颜色尽量跳跃）计算机操作水平普通。

绝大部分非专业人士,所以需要考虑到软件的易操作性
4）需要考虑到软件效果反馈意见动画效果比较多
三.设计规范：
1）界面设计中保持界面的一致性。

一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。

2）界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。

功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，
3）简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。

四.界面实施细则Detail
1）配色Color
考虑到本次是开发的节能型的XTS-9000 web版平台软件，一款综合能效管理节能方面的软件：针对主动用户（主要用户使用群体集中在25岁-40岁之间，颜色尽量年轻化），此类软件通常以绿色为基础色，再综合市面上现有软件的色彩样式（参考同行软件，色彩方面偏向于绿色和蓝色，偏冷色系），我们采用#labc9c蓝绿作为主要色调，#3498db蓝色作为主要辅助色，
博锐尚格
项目中使用到的颜色
蓝色和绿色为主色调,主要考虑到在色相环上两色是邻近色；绿色代表安全、节能、环保、清新、舒适等 含义； 蓝色有稳定，大气，科技，效率，理智等含义；灰色代表了稳重.
为了体现产品的统一性，将所有的∖TS-9000的产品的基础色调定义在绿色，蓝色，灰色三种基础颜色； 辅助色使用降低了饱和度粉一点的红色，在色相环上，红色在蓝色120°左右，属于对比色，使用跟蓝 色形成对比的红色可以起到突出重点的作用；降低对比色饱和度做法是为了在颜色上趋于统一
标准配色
*labc9c I #16a085
#3498db I *2980b9
绿色主要用于登录按钮， 鼠标经过区域等一些主要 色块区域。

蓝色主要内用于动态文
字，分类分项的图标等 颜色
辅助色
其他颜色主要 出现在图表中 多项分类；
灰色主要用于边框，抬头静态文字，抬头等颜色;
IBI 其他产品
■ F' ,≡"
（参考软件）
*f39cl2 I *eT4c3c
红色主要用于警示颜色
2.页面顶部灰色部分
height: 70px
上图标准配色，为界面中使用到的颜色，展示了主色调的同类色，另外辅助色中除了第一个的粉红色，其 他主要用于制作图表中的配色，以色相跟饱和度做区分
备注:页面大量使用了灰色,导航以#ececec 浅灰为主跟渐变的#333333色为主
线框的主要以#BEBEBE 浅灰色为主
2）字体Font
以微软雅黑为主采用20PX ； 18PX ； 16P× ； 15px 为主通用字体颜色#333333
（20PX 的文字为
#555555）
非重要文字为14PX12px 无效果的宋体颜色#333333 数字采用Arial 字体
3）页面中具体参数
size ： 1366*IOOOpx 分辨率 72px∕in
所有页面中所有出现的外边框Iine 为：IPX color:#bebebe
TOpx
ΛRW 61004¾wħ
l∏m. 4S515⅞k*ħ
• 21% MHM 10004⅛4
列举页面:
当日用电n 协
能救专率
42%
12%
本月顺珥£贵
jooo.0*wħ
4W∞1
本月3占比为
⅜ : 2M123 k»h 木：SOW T 0比
1，
、
因退出原统
遇入3D 总庭界再
T<ne2014-08-2β 2149 你用 Jeck
♦ 1020 W
« 98612GJ
I.因现场台式机显示器分辨率的不同，我们采用左右弹性布局的方式，选取中间比较常见的尺寸进行设计 R∑cursw<. SttltΛ-«««< t9W06nE> ∙ <⅛4M ∣∙.28759 京・・«(•收，万年余・宦由1，10务・
磔分析
±n∏t⅛ M∏44k*ħ
l≡
I I I 8px
3.页面中整体采用模块形式设计，所有模块中间间距8px （去除投影等效果后的间距）
f
右侧模块与右侧边距 X 为9px
4p×l
4所有页面右边大模块的圆为4px
X 5px
部分右边粗边线模块line-width:5px color :#e6e6e6
所有一右边框子效果投影：不透明度22%距离2px大小3px
描边：IPX color #bebebe eJ
模块内部横条上L总能耗能耗字距离边框20px字体：微软雅黑18px平滑#333333
导出
7. 按钮效果：投账：不透明17%距离2px大小2px
90°渐变慢加：1%#e8e8e8 67%#f4f4f4 100%#fbfbfb
描边：lpx#bebebe
字体：微软雅黑15px平滑#333333
5.页面中字体颜色分为普通字体颜色和动态字体颜色
4300
其中动态字体中动态数字采用Arial 24px平滑#0099CC
带警示性的文字颜色采用#e74c3c
五.页面整体效果
^Mganta^m2Tme 2014-08-26 2T49 iW： Jack < BS何血按»«»* Gm律能外专取节能&京映分析Sfiit≡ Tr馋断!≡iβ出系统
® ≡Λ3D飘期MI
tKSrt16892Q24B> 9t9ffi∑t0 ■ ■SR-
l«sn、•学、HW* Htt ^→WΞΛΦWβR∙ fB∙ββ*T MΞ<wrβWt∙ βttttΛ-RΛki <
l*MCIfiRε> >自第HiIne.28万早♦ . ∙W∙M*万年京- rtffi∣9∣0*∙
（EMSYL 2主页面）
三Urf<Φo
因退出兵统
切IEiItajwm.2
映分析
告警马家
孙颐分析
息
®
®
®
1集棚QK信
¼* 4 5%
tMt9S*:
1Q∙ 4 2%
BifSfiB
2* 12%
那中齐厢叫胃I5iσ»wt02ao⅜ * <αa> ∙∙nwαΛ∕awΛ
T<ne 2O14O8∙26 21 49做?：Jg
201221
（能耗分析页面）
R,B0 _ MIIllIlhlWlIhlIMll QO2O4MMM12l4l∙lβ2O22Σ4MMV22MS
StHm 杯比・里Cla a Aia 里n*<⅝∙m⅜”“，而《»∣IIIIM1阳♦■的A.P¾⅞
蚪缈情图启m ttβtatt KΦ^Wβttι%lxΦlMM2β 号ι0>wuκao⅛ en< **《恪》∙wκzm
■ MttH
Rbl tWΛ
4W
L ，20% t5%
■ E
■ Λ1MI BAflI 20111 kwħ
■ MIMt *KB 1SS1L43 kwh
■ ⅞mm平均■2121112 kwħ
-W-M WtCU
♦xi e*« “U W M *2X B*:8* *W M
∙w-ιι eieu ，
■Ml 8酰4S
Ht<FΛ
*U I ，Ii ：・ -W-It »u W 435 Se ““ ιrπ x
；wnIm)I m<*<∙"n :*：»：» WIl e 冰2
・■ RBt>itΦ<
“■ ∙∙tm≡∙<.
mw∙-ιι ι⅜.w. M
swe⅞mnwMH
t>tw i∙9∙m;WMN XMlHIlMMNt M9∙34Mtl∙N∙>∙ MOHMIIMtttU M∙3
tM∙⅞miMM∙n
TlLMR R9*ra
（账户管理页面） 设赫由的
/ *MΛ*R 安痴QiS a 时攵
δ≡UJ 正常 ⅛1ttt≡正火 设备启宽 通讯设卷
IfW∙
IWe 天∙βS⅛miW∙2e ∣ 号mwιso⅜ 电∣υ ・ <o»> ∙wκzm EW»1/W>y»
”京”美•同”结聚式，条
■大M 设街
∙ruua （设备管理页面）
节截31:3X0.2k 舶
I 访做；5.ιm
I 受害微I ： o.ea ∣∙h SVttlJO. 61 年的滥：60
制幅用：y 万 但干和B2∣∙*
I 9. OC
Q ⅜am ： ∙xeβτ a fiκ⅜M⅛
Tm 2014-08-2β 21 40 你H: J®Ck !3道出系统
=W<∙MΦ<∙ WRSa
∣⅝flsa 遇RM
HlBSB
日一秘
J⅜∙⅜H⅛
鸿。

本地
（能效专家页面）
狷余京艺檄Ht 皿 比冷W*SKECS r 4ttt‰sSW∏F<*「16本木出今■贸「冷用九■度 4WSMW 厂里位*∕÷1 f a 勺冏电费 ftQM⅞l
1号播冷融IOLQlfi （箝MM3）
1号帔泠鹿站EERr 曜效时U （ Xnm/13》
快蚓按
同比分
20%
IKte
持平
KM,0Λtt 皿平均■: 5200 kwh 4300 kwh
48SOkWh
Mgil
® m≡m
®
-∙M
Tme 2O14-Oβ-2β 2149 tW ： Jeck
回退出年统
首页
其时应按
⅛≡W* GHt 刊 IK 效专次 映分析 综合K 界
Tr 容断
E
■二号 ，三W*梭
MlLM
WHft @ HKWft 。

■大器缴件 ©己出Mt 事件 快M 捱
碑中天啪出依*1兴40公号 ∣5κt⅜wια2a ∣o⅜ 9H ∣ ■ <oβ> ∙βκ≡2m
tmnn∕ttmrM
白阳电
02
白吸色也
="<.⅜jHa “♦主改
E ÷w
笃三a 分M
（综合管理页面）
现IEMfaM 娩V1.2
Tm2014<08∙26 21:49 你好：J<κk 困甯出层统
I ≡δ
交时友投 Wft**
gκ律
Ira 专家 节1e 专率 映分析 综合曾力
华圆函
(2013/02/13)
I Wti^
α∙βfi
W∙⅜H1
*
异常总分
G∙M
0有
< 置 O
20
25 <βMtTΦt <
* /
⅜S∕%MMV
Hft S
异常总分
O
4女«
㈢和
是 无
• •
μτ
异常总分
O
元 •
异常总分
O
m
无 *
冷充站定锻分析U01W02/）
∏>I L
上 ΓΠΠTB 曰幺
*«■ IWe 天∙βS⅛miW∙2e ∣ 号mwιso⅜ 电∣υ ・ <o»> ∙wκzm EW»1/W>y»
苔页实时105 ®SW* GHt界能效专家节能专家 3 分析综合曾寿
HW∣≡) MSMH 国！1010 kM∣同Λ1V1M)∣S ι∙∣o
/*MΛ*R
网地A度19核f⅜Viδft I 2014 4-3 10:1
≡D∣V4Λ 2D
ID
SoWS 30 IO
20WS 20 IO
Λ1V<Λ ∞ IO
2DlVin 20 IO
a)∣V<Λ 20 W
301"S 20 IO
3OIV<Λ 8 10
SDWS 20 10
20IV<Λ 20 10
8OIV<Λ 20 10
201“S 20 ID
（告警管理页
面）Tvne 2014-0β-2β 2149W?: Jack
→t⅛≡
因退出原统EM京昌“电爆［啪ItS南昌厚地赤：麻
告f吩HW材品收森督・费叟传M^ 洋情MHT
(J
侑・«・增中。

19265殖相两2，H ITZSV ® ⅛κt≡"才4告做" fl≡l S*≡ U
T
_?吧也一
/ 以厚〜已E 电Qw maτ*∣Mxia s2±u m OjI
时刎匕、em⅞京RR£. &EL匆AXtM 回3倍⅝3 -/庄不平∙β∏3%, tfdiws%
借■我否(ιπβv毋,，兀≠ltλSUM AKM 夏K 》4.M ▲席还,独9 出I山I
CJf华.
m fl*λ电⅜RM电&不 J dU 回U
叫悯所决IMKS■心”。

手工量入⅜¾RK∙电5不J僵娱■fljħtt M RA
l■WS 日一皿不F-βi!R t*Λ9∙∣* ?XtA 电»R»«电8不4∙mn∙W SHI 1
T% X W及JtWBHetie 2If fx*λ® ⅝RB∙电后不3mkΛα去■. 3 M
M RWttM AV ι∏E(wα)手工∙入电QM msτ^∙mxi∙ ^ΛΛΛ Bl WI
3±ΛI∣W* e«・«♦£*! 电CrPMWtH OXM H ftΛ
WBffIM：We MT5TO:几3加已登》电.«■MTWMiill 会皿AQA 568⅛0 “幡七®m 电区不WMm∙皿PM QiSW 电.2«/ER Jm必由皿» U
M4∙W9
SJ0ΞBΞ≡
IWe天∙βS⅛miW∙2e∣号mwιso⅜ 电∣υ ・<o»> ∙wκzm EW»1/W>y»。