企业应用集成之界面(UI)集成规范v0.2

QUOTEFILLIN输入姓名企业应用集成之界面（UI）设计规范2015年4月1 引言 11.1 编写目的 11.2 适用范围 11.3 术语定义 12 概述 22.1 设计原则 22.2 界面结构 22.3 配色规范 32.4 文字使用规范 42.5 图片使用规范 52.6 Logo设计规范 5 Logo设置规范 5 系统院Logo设计 53 典型页面布局规范 63.1 门户系统 6 登录页 6 门户-新闻首页 7 门户-办公首页 8 门户-子页面（两栏） 11 门户新闻类详细页 133.2 通用应用系统 133.2.1 应用首页 13 功能列表页 15 详细功能页 15 信息编辑页 16 信息查询页 173.3 搜索类 18 搜索条 18 搜索结果页面 184 UI开发规范 194.1 设计工具 194.2 目录结构 20 Project工程目录结构 20 WebRoot目录结构 204.3 UI命名规范 21 图片文件命名 21 css文件命名 22 js文件命名 225 UI控件 225.1 Header头部 225.2 footer版底 235.3 导航栏 235.4 列表框List 245.5 表格 245.6 Tab页 245.7 操作按钮 255.8 单选按钮 255.9 多选按钮 255.10 图片轮换 255.11 输入框 265.12 弹出窗口 265.13 日历、时间 276 其他规约 276.1 版底版权说明 286.2 兼容性说明 286.3 其他事项 28引言编写目的本规范的目的是通过建立UI规范，贯穿以用户为中心的设计指导方向，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。适用范围本规范适用XX单位应用集成平台基于浏览器的B/S版软件项目开发工作。开发过程中的模版页面编写和模版文件套用工作必须遵照此规范执行。适用对象为开发人员、UI设计人员、模版编写人员以及后续新建业务系统等。本规范不仅用于约束应用集成平台的建设过程，对于与应用集成平台进行集成的各业务系统也需要按本规范严格执行。新建系统严格按本规范执行。遗留系统按本规范进行改造，对于产品无法改造的需要业务系统厂商与应用集成平台实施方及客户方达成一致。术语定义类型名词解释UI——UI即UserInterface（用户界面）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。图片GIFGIF，一种图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式，其压缩率一般在50％左右。JPGJPG，一种图像文件格式。是经过静态图象压缩标准压缩的图像文件，具有很高的压缩比。PNGPNG，一种图像文件格式。在保留GIF文件格式特性的基础上，增加了一些GIF文件格式所不具备的特性。同时，PNG图片文件压缩比高，生成文件容量小。Icon指电脑屏幕的桌面上用来指示用户运行各种操作的图像，作为字符显示的重要辅助。图片水印给图片加上网站标志，保护图片版权的一种形式。其他网站Logo在商业领域，LOGO是标志、徽标的意思。常见的各种商品的标识即是Logo，它包括文字、图形、字母、数字、三维标志和颜色的组合。本规范所指LOGO，是互联网上网站用来标识自己的图形标志，一般包含图形、名称和域名。超链接网页中，在文字和图片上设置的链接，用以把用户导向到新的页面中。入口用户点击进入网页的被链接文字或图片。概述设计原则符合用户界面设计规范页面设计中涉及XX单位视觉识别内容的，严格参照《XX单位视觉识别系统》（2014版）规定设计。视觉识别系统对企业标志与企业标准字体的各种组合，包括位置、大小、距离均作了详细的规定，要求不得随意更改。在各种运行环境下的兼容性系统采用B/S结构，要求支持当前各流行浏览器的兼容性，确保在IE8能够正常浏览。在常用显示屏大小的情况下，有良好的显示状态，在系统要求最低分辨率以外的情况下也可以正常浏览。导航定位清晰易用设计时要对企业门户平台的导航系统作出明确的策划，在视觉上上作出合理的呈现，同时要充分考虑到用户的使用习惯。约定企业门户平台的主色调不能超过3种，虽然也可在门户网站上使用其他色彩，但只能作为点缀和衬托，不能与主题冲突。界面风格统一性在界面设计中要保持界面风格的统一性，统一性包括：使用相同的信息表现方法，如在字体，标签风格、颜色、术语、显示错误信息等方面保持一致。界面结构基本结构:门户及子平台首页②发布类详细页③流程类、表单类界面④供iframe调用的界面、提示类界面及其他类型说明：门户及子平台首页适用范围：适用于统一门户一二级页面、子系统首页发布类详细页等适用范围：信息发布类详细页面流程类、表单类界面适用范围：适用于所有流程类页面供iframe调用的界面、提示类界面及其他适用范围：适用于科研项目、保密管理等专业系统集成到门户中的页面配色规范页面配色要求以中国船舶集团蓝色为主色调，搭配XX单位视觉识别系统的标准设计中的辅助色。如下图：文字使用规范样式类库：①文字格式②连接样式①文字格式12号字格式：字号12px┊字体宋体&Arial┊颜色#7F7F7F或其他┊行距21px┊粗体&细体┊14号字格式：字号14px┊字体宋体&Arial┊颜色#333333或其他┊行距24px┊粗体&细体┊10号字格式：字号10px┊字体Arial┊颜色#333333或其他┊行距无┊细体┊26号字格式：字号26px┊字体微软雅黑&Arial┊颜色#000000或其他┊行距无┊细体┊说明：10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体②连接样式鼠标初始：如上鼠标经过：颜色#006CBD鼠标点击：颜色#006CBD图片使用规范图片规范是指对XX单位应用集成平台上图片使用做出基本要求，并对图片的格式、尺寸、大小等做出规定。图片常常是网页上最引人注目的内容，图片规范有助于保证图片的精致和页面的齐整，进而提升网页乃至整个网站的品质。图片使用的基本要求图片的选用与反映的主题一致；图片画面显示清晰，不采用改变显示尺寸的放大或缩小；图片画面（尤其是人物图像）不允许变形；图片文件大小控制在30KB内为宜；图片按照“所属栏目名_图片描述名”的规则命名，图片名称均由小写字母、数字和“_”组成，不能有空格或其它字符；图片文件格式GIFXE"GIF"、JPG和PNGXE"JPG"的图片格式均可被采用，不同格式的图片的应用场景：图片中的颜色没有过渡渐变效果的时候用gif格式的图片；图片中的颜色有复杂的过渡渐变效果的时候用jpg格式的图片；图片中图形不规则，但又需要透明边缘时，一般使用png格式的图片。Logo设计规范Logo标识是品牌的视觉象征，对于品牌的整体传播至关重要XX单位Logo的应用将遵循以下规定执行。Logo设置规范网站的所有页面中都需要设置相应的Logo标识，且Logo的尺寸应保持一致；使用Logo时需保证Logo的比例以及清晰度。应用集成平台页面logo设计参照《XX单位视觉识别系统》（2014版）规定设计。系统院Logo设计参照《XX单位视觉识别系统》（2014版），应用集成平台logo设置主要提供以下两种形式：（1）Logo图文（中英文）上下组合标准：（2）Logo图文（中英文）横排组合标准：典型页面布局规范门户系统登录页门户登录页面结构及尺寸设计如下门户-新闻首页适用范围：门户一级页面（新闻首页）页面要求：在最佳分辨率1280*768，内容高度不超过三屏。同时能够支持1366*768，1024*768分辨率。页面总体色调为军工蓝。页面整体分为Header区/头部区、导航区、信息提醒区、头版信息区，信息发布区、工具和综合查询区以及Footer区/版底区等几个部分，页面布局如下：具体页面尺寸如下：门户-办公首页适用范围：门户一级页面（办公首页、二级应用首页）页面要求：在最佳分辨率1280*768，内容高度不超过两屏。同时能够支持1366*768，1024*768分辨率。页面总体色调为军工蓝。页面整体分为Header区/头部区、导航区、链接区、工作区，工具和提醒区、以及Footer区/版底区等几个部分。宽屏下主体内容居中显示header背景元素repead-x填充整个屏幕。屏幕宽度小于1280px的，页面按以下规律进行自适应调整。页面布局如下：具体页面尺寸如下：内容高度超过一屏时，头部定高，主体区高度随内容自适应拉抻，界面右侧滚动条宽度为16px，界面在滚动条以外的屏幕上仍居中显示。屏幕宽度小于1280px的，不能实现自适应调整的，将出现横向滚动条，高度为16px，宽屏下主体内容居中显示header背景元素repead-x填充整个屏幕。屏幕宽度小于1280px的，页面按以下规律进行自适应调整：门户新闻类详细页适用范围：门户新闻类详细页面，新打开新闻公告类详细查看页面；信息发布的详细查看页以及资源共享类的详细查看页面。Logo、Banner、Footer区域同门户首页，Center中间展示区展示布局如图所示：通用应用系统应用首页适用范围：信息发布、保密管理、项目管理等应用系统的首页在最佳分辨率1024*768，内容高度不超过两屏。同时能够支持1366*768，1024*768分辨率。页面主色调统一为军工蓝。最大化窗口状态下，页面布局如下：具体页面尺寸如下：功能列表页适用范围：除门户、信息发布平台以外的信息发布、保密管理、项目管理等应用系统的功能应用页面。在最佳分辨率1024*768，内容高度不超过两屏。同时能够支持1366*768，1024*768分辨率。页面主色调统一为军工蓝。最大化窗口状态下，页面布局如下：详细功能页适用范围：除门户、信息发布平台以外的信息发布、保密管理、项目管理等应用系统的功能应用页面。在最佳分辨率1024*768，内容高度不超过两屏，页面主色调统一为军工蓝。最大化窗口状态下，页面布局如下：信息编辑页适用范围：除门户以外的各相关应用系统的信息编辑页/表单编辑页面。在最佳分辨率1024*768，内容高度不超过两屏，页面主色调统一为军工蓝。信息编辑页面/表单页面，主题包括了标题区、表单区和操作区三个部分。标题区以文字居中统一居中显示，字体大小：16px。表单区，表单元素需用相应表格进行布局，表格边框为1px，表单元素要求详见UI控件规范要求。操作区或按钮区统一在页面左下方显示，方便用户操作。最大化窗口状态下，页面布局如下：信息查询页适用范围：除门户、信息发布平台以外的保密管理、项目管理等应用系统的查询页面。要求功能：查询区支持折叠和展开，查询结果区支持分页查询。搜索类搜索条适用范围：门户或应用系统集成的搜索条搜索结果页面适用范围：搜索结果展示页面参考页面：京东百度UI开发规范设计工具设计工具：Photoshop、Fireworks前端制作：Dreamweaver目录结构Project工程目录结构java源代码资源文件测试代码测试资源文件webcontext根目录java源代码资源文件测试代码测试资源文件webcontext根目录编译、打包输出文件maven构建脚本项目自述文件从上图可以看出，我们遵循的项目结构是标准的maven项目结构。WebRoot目录结构web资源结构，也就是对项目结构中src/main/webapp目录进行详细的结构定义，具体的目录结构定义见下图：webcontext根目录静态资源文件CSS样式图片javascript脚本多媒体（音频、视频等）展示webcontext根目录静态资源文件CSS样式图片javascript脚本多媒体（音频、视频等）展示页面公共页面（错误页面等）具体模块页面web描述文件首页（后缀可为.html等）UI命名规范文件名均为英文小写字母，并且文件需要结合文件内容进行命名。如遇复杂的文件名称单词间可以：“-”间隔组合，但不能超过3个单词，单词尽量选言简意赅的短词或缩写，如：images文件夹可以命名为img文件夹。图片文件命名页面用到的图片文件预先分为美术字体图、图标（icon）、背景图；、动态交互图片，这些图片的命名规则一般遵循：门类-功能-（颜色-位置~尺寸）的顺序命名（）内根据实际情况三选一进行组合，如：icon-error-5-5.png这个图片文件的意思是：图标类-错误提示-5*5像素大小的png图片。为了缩小不同人员协调开发的命名习惯差异我指定了图片文件的三级命名详单：门类功能颜色（英文单词）尺寸（像素）实例名称美术字体图词首为msz-第二为字体名拼音第一个字母如方正综艺体简为fzzytj颜色单词如：white,Red,yellow,black,green,blue,ash,purple为实际图片尺寸大小（宽*高）数值。如：180*30msz-fzzytj-180-30.png图标icon词首为icon-第二为图标功能名如：error，ok，off，home，download，more，in，out，user，tags，set，Search，star，upload，trash，list，edit，refresh，file，plus，minus，sign，share，right-arrow，left-arrow，up-arrow，down-arrow等图标对应的颜色单词，如：white,Red,yellow,black,green,blue,ash,purple为实际图片尺寸大小（宽*高）数值。如：5*5icon-off-5-5.png背景图词首为bg-第二为背景图的使用方式：x横向平铺，y为竖向平铺，n为不循环。背景图片对应的颜色单词，如：white,Red,yellow,black,green,blue,ash,purple无bg-x-blue.png动态交互图片词首为do-动态图片的内容对应名称英文名称，如progressbar，londing，More,hot,new,drop,pop背景图片对应的颜色单词，如：white,Red,yellow,black,green,blue,ash,purple为实际图片尺寸大小（宽*高）数值。如：5*5do-londing-5-5.gif另外的图片格式一般为png24位，碰到颜色丰富的图片如风景照片可用jpg格式来控制图片数据大小，这个根据具体情况掌握，还可用图片精灵把图片拼到一张图片上来提高浏览下载效率，目的是在保证图片显示效果的前提下尽可能压缩图片大小。css文件命名css文件的命名根据css文件包含的css代码的相应功能来组织，分公用全局样式和页面功能样式。一般为两到三个文件，style.css为公用样式文件，用于规范统一不同浏览器对html标签渲染的差异，xxx-xx.css(xx为功能相应页面样式英文缩写)文件为页面大部分功能模块的样式，还有些只在特殊页面用到很少重复用到的样式可以单建一个样式文件，文件名要根据对应的功能及版本进行声明，可能合并到一个大文件中去。这样可以防止相同样式名之间在分别调取时因为相同属性声明的值不一致导致页面元素渲染出现错误，并且可以减少浏览器对服务器的链接请求数，降低服务器压力，而且作为渲染还原页面的重要文件css文件需要放在页面代码的</head>标签之前。js文件命名Js文件的命名根据文件内js代码编写的相应功能来组织，命名结构和图片文件命名基本一致，但在最后一项没有三选一只有文件是否为压缩版的声明。如有可加上min来标示，如：jquery-scrollUp-min.js这个js文件名的意思是：属于jquery系列具有触发页面滚动至上部经过压缩的js文件，注意js文件如无特殊需求均放在页面代码的底部</body></html>标签之前。UI控件Header头部门户标准头部：注：头部Logo必须参照《XX单位视觉识别系统》（2014版）相关要求设计。footer版底页面标准版底导航栏（1）系统一级导航栏注：导航栏宽1280px，高40px，背景色#2860BD，选中状态#00416B（2）系统二级导航栏注：导航栏宽1280px，高35px，背景色#CCEBF8，选中状态#78A0E2（3）系统侧导航注：侧导航适用于导航大于2级的情况系统，导航栏宽250px，高不限。列表框List表格显示内容的表格：表格边框1px，边框颜色#C8EAF7；表格以白色和浅蓝色（#F4F7F