EMS视觉设计规范.docx

《EMS视觉设计规范.docx》由会员分享，可在线阅读，更多相关《EMS视觉设计规范.docx（6页珍藏版）》请在第一文库网上搜索。

1、数字机电智慧运维平台交互视觉设计规范1前言31.1 文档简介31.2 系统定义31.3 编写目的32UI界面设计原则与规范32.1 设计概要32.2 主要内容32.2.7 登录界面.错误!未定义书签。2.2.8 导航菜单32.2.9 首页界面.错误!未定义书签。2.2.10 据呈现界面.错误!未定义书签。3交互设计原则与规范错误!未定义书签。3.1 设计概要错误!未定义书签。3.2 交互规范错误!未定义书签。3.2.1 分辨率和浏览器错误!未定义书签。3.3 设计流程错误!未定义书签。3.3.1 交互模型设计和评审错误!未定义书签。3.3.2 交互说明设计和评审错误!未定义书签。3.3.3 交

2、互模型修改错误!未定义书签。1前言1.1文档简介本文档是对整个系统界面设计风格进行描述，规范页面的使用字体、字号、页面比例等进行适当的规范，以便在后期开发中统一设计视觉风格。1-2系统定义用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。1.3编写目的统一图形界面规范，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面，便于用户识别与使用。2U1界面设计原则与规范2.1 设计概要界面设计中保持界面的一致性。一致性既包括使用标准的控件，也指使用相同

3、的信息图表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作便捷，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。2.2 主要内容2.2.1 配色1）考虑到本次是开发的是数字机电智慧运维管理平台软件，一款综合能效管理节能方面的软件；针对主动用户（主要用户使用群体集中在25岁-40岁之间，颜色尽量年轻化），

4、此类软件通常以绿色为基础色，我们采用#1abc9c蓝绿作为主要色调，#3498db蓝色作为主要辅助色。项目中使用到的颜色蓝色和绿色为主色调,主要考虑到在色相环上两色是邻近色；绿色代表安全、节能、环保、清新、舒适等含义;蓝色有稳定，大气，科技，效率，理智等含义；灰色代表了稳重。为了体现产品的统一性，将所有基础色调定义在绿色，蓝色，灰色三种基础颜色；辅助色使用降低了饱和度粉一点的红色，在色相环上,红色在蓝色120左右，属于对比色，使用跟蓝色形成对比的红色可以起到突出重点的作用；降低对比色饱和度做法是为了在颜色上趋于统一,标准配色绿色主要用于登录按钮，鼠标经过区域等一些主要色块区域。蓝色主要内用于动

5、态文字，分类分项的图标等颜色铺助色红色主要用于警示颜色以微软雅黑为E采用20PX；举例：北京朝阳医院非重要文字为14PX;12px18PX；16PX：15px为主通用字体颜色#333333（20PX的文字为#555555）18PX字体样式；上月认比15PX字体样式:无效果的宋体颜色#333333首都医科大学明屎北京期阳医院创建于1958年2月24日，是北京市卫生局自属医院，是集医疗、软字、科册、预防为一体的三级甲等医院，是首都医科大学第三临床医学院。医唉视为一院两址（本部和京西院区），占地面积10.28万平举例：米，建筑面板21万平米，床位1910张。数字采用Aria1字体，12PX,颜色：#

6、333333举例:1121.4其他颜色主要出现在图赛中多I财类；灰色主要用于边框，抬头静态文字，抬头等颜色;上图标准配色，为界面中使用到的颜色，展示了主色调的同类色，另外辅助色中除了第一个的粉红色,其他主要用于制作图表中的配色，以色相跟饱和度做区分2.2.2 字体2.2.3 页面中具体参数1.因现场台式机显示器分辨率，选取中间比较常见的尺寸进行设计size：1440*90OPX分辨率72pxin所有页面中所有出现的外边框Iine为：IPXco1or:#bebebe702.页面顶部灰色部分Hheight:70px。IBI1 I8px3 .页面中整体采用模块形式设计，所有模块中间间距8px（去除投

7、影等效果后的间距）右侧模的有侧边阻X9pxoI15511T25，G1S展示554 .上侧1导航每个按钮块height:55pxWidth:155px（包括IPX的线）边缘距离绿色箭头width：25px4ph5 .所有页面中模块边缘圆角为4px部分工x右边粗边线模块Iine-Width:5PXco1or:#e6e6e6所有右边框子效果投影：不透明度22%距离2px大小3px描边：IPXco1or:#bebebe6.曲线图、柱状图规范曲线图、柱状图背景为灰，绿相间的格子，具体样式如下图：其中线条宽度：30PX；间距为：30PX；颜色：ttf2f6f2（灰色）tte1f4e1（绿色）7.表格规范表

8、格题头高度：32PX,颜色：#3498db字体：微软雅黑：14PX,颜色：ffffff序号时间对分摊前费用（元）分摊费用（元）分摊总费用（元）表格背景由宽度为30PX的线条组成，间距30PX,颜色：tteeeeeeo12013-02-01泠东站2999001200.00419922013-02-01今蛀i29瓠0012.0041W.0032013-02-01冷炳52999001200.0041990042013-02-01冷冻站2999001200.004199.0052013-02-01今碰2999001200.004199.0062013-02-01泠东拈2999001200.004199002.2.4GIS界面设计规范GiS地图的尺寸不得低于1440*900,如遇到特殊情况既无法搜集到高分辨率的GiS地图或者无法找到该建筑物的实际设计图亦或是设计图与实际的建筑物差异较大，则采用图像拼接方式或采用修改图片方式进行补充修改。建筑物标示方式：描边边缘为3PX；颜色#C20000；覆盖建筑物颜色:#ff6c6c；不透明度：30%