EMS视觉设计规范.docx

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

1、数字机电智慧运维平台交互视觉设计规范1前言31.1 文档简介31.2 系统定义31.3 编写目的32 UI界面设计原则与规范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编写目的统一图形界面规范，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面， 便于用户识别与使用。2 Ul界面设计原则与规范2.1 设计概要界面设计中保持界面的一致性。一致性既包括使用标准的控件，也

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

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

5、98db I #2980b9绿色主要用于登录按钮，鼠标经过区域等一些主要 色块区域。蓝色主要内用于动态文字，分类分项的图标等颜色铺助色红色主要用于警示颜色以微软雅黑为E采用20PX ；举例：北京朝阳医院非重要文字为14PX;12px18PX ； 16PX ： 15px为主 通用字体颜色#333333（20PX的文字为#555555）18PX字体样式； 上月认比 15PX字体样式:无效果的宋体颜色#333333首都医科大学明屎北京期阳医院创建于1958年2月24日，是北京市卫生局 自属医院，是集医疗、软字、科册、预防 为一体的三级甲等医院，是首都医科大学 第三临床医学院。医唉视为一院两址（ 本部

6、和京西院区），占地面积10.28万平 举例：米，建筑面板21万平米，床位1910张。 数字采用Arial字体，12PX,颜色：#333333举例:1121.4其他颜色主要 出现在图赛中 多I财类；灰色主要用于边框，抬头静态文字，抬头等颜色;上图标准配色，为界面中使用到的颜色，展示了主色调的同类色，另外辅助色中除了第一个的粉红色, 其他主要用于制作图表中的配色，以色相跟饱和度做区分2.2.2 字体2.2.3 页面中具体参数1.因现场台式机显示器分辨率，选取中间比较常见的尺寸进行设计size： 1440*90OPX分辨率72pxin所有页面中所有出现的外边框Iine为：IPX color:#beb

7、ebe702.页面顶部灰色部分Hheight : 70px 。IBI1 I 8px3 .页面中整体采用模块形式设计，所有模块中间间距8px （去除投影等效果后的间距）右侧模的有侧边阻X 9pxo I15511T 25，GlS展示 554 .上侧1 导航每个按钮块 height :55px Width: 155px（包括IPX的线）边缘距离绿色箭头width： 25px4ph5 .所有页面中 模块边缘圆角为4px部分 工x右边粗边线模块Iine-Width: 5PX color :#e6e6e6所有右边框子效果投影：不透明度22%距离2px大小3px描边：IPX color: #bebebe 6

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