能源管理系统视觉设计文档.docx
能源管理系统V1.2UI设计规范设计良好的界面能够引导用户自己完成相应操作，起到向导作用。日期版本说明作者2014-10-9EMSV1.2Ul设计规范凌亢俊引言：在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在 字体、风格、颜色、术语、提示信息等方面确保一致一.界面设计主要目的：1）以用户为中心。设计由用户控制的界面，而不是界面控制用户。2）清楚一致的设计。所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解和使用。3）拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，来帮助用户能迅速学会软件的使用。4）较快的响应速度。5）简洁、美观。二.软件特点：1）一款能效管理节能方面的软件（考虑到偏向于绿色蓝色，偏冷色系）2） BS管理平台系统平台的开发（更多的基WEB框架内的设计）3）使用对象，此版本针对主动用户（主要用户使用群体集中在25岁YO岁之间，颜色尽量跳跃）计算机 操作水平普通。绝大部分非专业人士,所以需要考虑到软件的易操作性4）需要考虑到软件效果反馈意见动画效果比较多三.设计规范：1）界面设计中保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在 字体、标签风格、颜色、术语、显示错误信息等方面确保一致。2）界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要 表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用 性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，3）简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。四.界面实施细则Detail1）配色 Color考虑到本次是开发的节能型的XTS-9000 web版平台软件，一款综合能效管理节能方面的软件：针对 主动用户（主要用户使用群体集中在25岁-40岁之间，颜色尽量年轻化），此类软件通常以绿色为基础色， 再综合市面上现有软件的色彩样式（参考同行软件，色彩方面偏向于绿色和蓝色，偏冷色系），我们采用 #labc9c蓝绿作为主要色调，#3498db蓝色作为主要辅助色，博锐尚格IBI其他产品 F' ,"（参考软件）项目中使用到的颜色蓝色和绿色为主色调,主要考虑到在色相环上两色是邻近色；绿色代表安全、节能、环保、清新、舒适等 含义；蓝色有稳定，大气，科技，效率，理智等含义；灰色代表了稳重.为了体现产品的统一性，将所有的TS-9000的产品的基础色调定义在绿色，蓝色，灰色三种基础颜色； 辅助色使用降低了饱和度粉一点的红色，在色相环上，红色在蓝色120°左右，属于对比色，使用跟蓝 色形成对比的红色可以起到突出重点的作用；降低对比色饱和度做法是为了在颜色上趋于统一标准配色*labc9c I #16a085#3498db I *2980b9绿色主要用于登录按钮， 鼠标经过区域等一些主要 色块区域。蓝色主要内用于动态文 字，分类分项的图标等 颜色*f39cl2 I *eT4c3c红色主要用于警示颜色辅助色其他颜色主要 出现在图表中 多项分类；灰色主要用于边框，抬头静态文字，抬头等颜色;上图标准配色，为界面中使用到的颜色，展示了主色调的同类色，另外辅助色中除了第一个的粉红色，其 他主要用于制作图表中的配色，以色相跟饱和度做区分备注:页面大量使用了灰色,导航以#ececec浅灰为主跟渐变的#333333色为主线框的主要以#BEBEBE浅灰色为主2）字体Font以微软雅黑为主采用20PX ； 18PX ； 16P× ； 15px为主通用字体颜色#333333（20PX的文字为#555555）非重要文字为14PX12px无效果的宋体颜色#333333数字采用Arial字体3）页面中具体参数列举页面:当日用电n协能救专率42%12%本月顺珥£贵jooo.0*w4W1本月3占比为 : 2M123 k»h 木：SOW T0比1，、因退出原统遇入3D总庭界再T<ne2014-08-2 2149 你用 Jeck 1020 W« 98612GJI.因现场台式机显示器分辨率的不同，我们采用左右弹性布局的方式，选取中间比较常见的尺寸进行设计Rcursw<. Sttlt-«««< t9W06nE> <4M.28759 京«(收，万年余宦由1，10务磔分析RW 61004¾wlm. 4S515k*±nt M44k* 21% MHM 10004v4isize： 1366*IOOOpx 分辨率 72pxin所有页面中所有出现的外边框Iine为：IPX color:#bebebeTOpx2.页面顶部灰色部分height: 70pxlI I I 8px3.页面中整体采用模块形式设计，所有模块中间间距8px（去除投影等效果后的间距）f右侧模块与右侧边距 X 为9px4p×l4所有页面右边大模块的圆为4pxX 5px部分右边粗边线模块line-width:5px color :#e6e6e6所有一右边框子效果投影：不透明度22%距离2px大小3px描边：IPX color #bebebe eJ模块内部横条上L总能耗能耗字距离边框20px字体：微软雅黑18px平滑#333333导出7.按钮 效果：投账：不透明17%距离2px大小2px90° 渐变慢加：1%#e8e8e8 67%#f4f4f4 100%#fbfbfb描边：lpx#bebebe字体：微软雅黑15px平滑#3333335.页面中字体颜色分为普通字体颜色和动态字体颜色4300其中动态字体中 动态数字采用Arial 24px平滑#0099CC带警示性的文字颜色采用#e74c3c五.页面整体效果Mgantam2Tme 2014-08-26 2T49 iW： Jack< BS何血按 »«»* Gm律 能外专取 节能&京 映分析 Sfiit Tr馋断!i出系统® 3D飘期MItKSrt16892Q24B> 9t9ffit0 SR- l«sn、学、HW* Htt WWR fB*T M<wrWt tttt-Rki < l*MCIfiR> >自第HiIne.28万早 . WM*万年京- rtffi90*（EMSYL 2主页面）三 Urf<o因退出兵统切 IEiItajwm.2映分析告警马家孙颐分析息®®®1集棚QK信¼*4 5%tMt9S*:1Q4 2%BifSfiB2*12%那中齐厢叫胃 I5i»wt02ao * <a> kzw nwawT<ne 2O14O826 21 49做?： Jg201221（能耗分析页面）R,B0_MIIllIlhlWlIhlIMllQO2O4MMM12l4ll2O224MMV22MSStHm杯比里 Cla aAia里n*<m”“，而» iiiim1阳的 a.p¾蚪缈情图启mtttattKWtt%lxlMM2 号0>wuao en< *恪wzm MttHRbltW4WL，20%t 5% E 1MIBAflI20111 kw MIMt*KB1SS1L43 kwh mm平均2121112 kw-W-M WtCUxi e*«“U W M*2X B*:8*W Mw- eieu，Ml 8酰4SHt<F*U I，Ii：-W-It »uW 435 Se“ r x；wnIm)Im<*<"n :*：»：»WIl e冰2 RBt>it<“ tm<.mw- .w. MswemnwMHt>twi9m;WMNXMlHIlMMNtM934MtlN>MOHMIIMtttUM3tMmiMMnTlLMRR9*ra（账户管理页面）设赫由的/ *m*r安痴QiSa时攵UJ正常1ttt正火设备启宽通讯设卷IfWIWe天SmiW2e 号mwso 电 <o»> wzm EW»1/W>y»”京”美同”结聚式，条大M设街ruua（设备管理页面）Tm 2014-08-2 21 40你H: J®Ck!3道出系统=W<M< WRSaflsa 遇RM HlBSB日一秘JH 鸿。本地（能效专家页面）狷余京艺檄Ht皿 比冷W*SKECS r 4tttsSWF<*16本木出今贸冷用九度 4WSMW厂里位*÷1 fa勺冏电费 ftQMl1号播冷融IOLQlfi（箝MM3）1号帔泠鹿站EERr曜效时U （ Xnm/13快蚓按同比分20%IKte持平KM,0tt皿平均:5200 kwh4300 kwh48SOkWhMgil®mm®-MTme 2O14-O-2 2149 tW： Jeck回退出年统首页其时应按W* GHt刊IK效专次映分析综合K界Tr容断E二号 ，三W*梭MlLMWHft HKWft 。大器缴件 ©己出Mt事件快M捱碑中天啪出依*1兴40公号 5tw2ao 9H <o> 2m tmnnttmrM节截31:3X0.2k舶I访做；5.mI 受害微I： o.eahSVttlJO. 61 年的滥：60制幅用：y万 但干和B2* I 9. OCQ am： xeafiM冷充站定锻分析U01W02/）>I L上 TB 曰幺*«IWe天SmiW2e 号mwso 电 <o»> wzm EW»1/W>y»白阳电02白吸色也="<.jHa “主改 E ÷w笃三a分M（综合管理页面）现IEMfaM娩V1.2Tm2014<0826 21:49 你好：J<k困甯出层统I 交时友投 Wft*g律Ira专家 节1e专率映分析综合曾力华圆函(2013/02/13)I WtifiWH1
