企业应用集成之界面UI集成规范v02.docx
《企业应用集成之界面UI集成规范v02.docx》由会员分享，可在线阅读，更多相关《企业应用集成之界面UI集成规范v02.docx（30页珍藏版）》请在冰豆网上搜索。
企业应用集成之界面UI集成规范v02
企业应用集成之
界面（UI）设计规范
2015年4月
1引言
1.1编写目的
本规范的目的是通过建立UI规范，贯穿以用户为中心的设计指导方向，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。
1.2适用范围
本规范适用XX单位应用集成平台基于浏览器的B/S版软件项目开发工作。
开发过程中的模版页面编写和模版文件套用工作必须遵照此规范执行。
适用对象为开发人员、UI设计人员、模版编写人员以及后续新建业务系统等。
本规范不仅用于约束应用集成平台的建设过程，对于与应用集成平台进行集成的各业务系统也需要按本规范严格执行。
新建系统严格按本规范执行。
遗留系统按本规范进行改造，对于产品无法改造的需要业务系统厂商与应用集成平台实施方及客户方达成一致。
1.3术语定义
类型
名词
解释
UI
——
UI即UserInterface（用户界面）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。
图片
GIF
GIF，一种图像文件格式。
GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式，其压缩率一般在50％左右。
JPG
JPG，一种图像文件格式。
是经过静态图象压缩标准压缩的图像文件，具有很高的压缩比。
PNG
PNG，一种图像文件格式。
在保留GIF文件格式特性的基础上，增加了一些GIF文件格式所不具备的特性。
同时，PNG图片文件压缩比高，生成文件容量小。
Icon
指电脑屏幕的桌面上用来指示用户运行各种操作的图像，作为字符显示的重要辅助。
图片水印
给图片加上网站标志，保护图片版权的一种形式。
其他
网站Logo
在商业领域，LOGO是标志、徽标的意思。
常见的各种商品的标识即是Logo，它包括文字、图形、字母、数字、三维标志和颜色的组合。
本规范所指LOGO，是互联网上网站用来标识自己的图形标志，一般包含图形、名称和域名。
超链接
网页中，在文字和图片上设置的链接，用以把用户导向到新的页面中。
入口
用户点击进入网页的被链接文字或图片。
2概述
2.1设计原则
符合用户界面设计规范
页面设计中涉及XX单位视觉识别内容的，严格参照《XX单位视觉识别系统》（2014版）规定设计。
视觉识别系统对企业标志与企业标准字体的各种组合，包括位置、大小、距离均作了详细的规定，要求不得随意更改。
在各种运行环境下的兼容性
系统采用B/S结构，要求支持当前各流行浏览器的兼容性，确保在IE8能够正常浏览。
在常用显示屏大小的情况下，有良好的显示状态，在系统要求最低分辨率以外的情况下也可以正常浏览。
导航定位清晰易用
设计时要对企业门户平台的导航系统作出明确的策划，在视觉上上作出合理的呈现，同时要充分考虑到用户的使用习惯。
约定企业门户平台的主色调不能超过3种，虽然也可在门户网站上使用其他色彩，但只能作为点缀和衬托，不能与主题冲突。
界面风格统一性
在界面设计中要保持界面风格的统一性，统一性包括：
使用相同的信息表现方法，如在字体，标签风格、颜色、术语、显示错误信息等方面保持一致。
2.2界面结构
基本结构:
1门户及子平台首页②发布类详细页
③流程类、表单类界面④供iframe调用的界面、提示类界面及其他
类型说明：
1门户及子平台首页
适用范围：
适用于统一门户一二级页面、子系统首页
2发布类详细页等
适用范围：
信息发布类详细页面
3流程类、表单类界面
适用范围：
适用于所有流程类页面
4供iframe调用的界面、提示类界面及其他
适用范围：
适用于科研项目、保密管理等专业系统集成到门户中的页面
2.3配色规范
页面配色要求以中国船舶集团蓝色为主色调，搭配XX单位视觉识别系统的标准设计中的辅助色。
如下图：
2.4文字使用规范
样式类库：
①文字格式②连接样式
①文字格式
12号字格式：
字号12px┊字体宋体&Arial┊颜色#7F7F7F或其他┊行距21px┊粗体&细体┊
14号字格式：
字号14px┊字体宋体&Arial┊颜色#333333或其他┊行距24px┊粗体&细体┊
10号字格式：
字号10px┊字体Arial┊颜色#333333或其他┊行距无┊细体┊
26号字格式：
字号26px┊字体微软雅黑&Arial┊颜色#000000或其他┊行距无┊细体┊
说明：
10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体
②连接样式
鼠标初始：
如上
鼠标经过：
颜色#006CBD
鼠标点击：
颜色#006CBD
2.5图片使用规范
图片规范是指对XX单位应用集成平台上图片使用做出基本要求，并对图片的格式、尺寸、大小等做出规定。
图片常常是网页上最引人注目的内容，图片规范有助于保证图片的精致和页面的齐整，进而提升网页乃至整个网站的品质。
（1）图片使用的基本要求
图片的选用与反映的主题一致；
图片画面显示清晰，不采用改变显示尺寸的放大或缩小；
图片画面（尤其是人物图像）不允许变形；
图片文件大小控制在30KB内为宜；
图片按照“所属栏目名_图片描述名”的规则命名，图片名称均由小写字母、数字和“_”组成，不能有空格或其它字符；
（2）图片文件格式
GIF、JPG和PNG的图片格式均可被采用，不同格式的图片的应用场景：
图片中的颜色没有过渡渐变效果的时候用gif格式的图片；
图片中的颜色有复杂的过渡渐变效果的时候用jpg格式的图片；
图片中图形不规则，但又需要透明边缘时，一般使用png格式的图片。
2.6Logo设计规范
Logo标识是品牌的视觉象征，对于品牌的整体传播至关重要XX单位Logo的应用将遵循以下规定执行。
2.6.1Logo设置规范
网站的所有页面中都需要设置相应的Logo标识，且Logo的尺寸应保持一致；
使用Logo时需保证Logo的比例以及清晰度。
应用集成平台页面logo设计参照《XX单位视觉识别系统》（2014版）规定设计。
2.6.2系统院Logo设计
参照《XX单位视觉识别系统》（2014版），应用集成平台logo设置主要提供以下两种形式：
（1）Logo图文（中英文）上下组合标准：
（2）Logo图文（中英文）横排组合标准：
3典型页面布局规范
3.1门户系统
3.1.1登录页
门户登录页面结构及尺寸设计如下
3.1.2门户-新闻首页
适用范围：
门户一级页面（新闻首页）
页面要求：
在最佳分辨率1280*768，内容高度不超过三屏。
同时能够支持1366*768，1024*768分辨率。
页面总体色调为军工蓝。
页面整体分为Header区/头部区、导航区、信息提醒区、头版信息区，信息发布区、工具和综合查询区以及Footer区/版底区等几个部分，页面布局如下：
具体页面尺寸如下：
3.1.3门户-办公首页
适用范围：
门户一级页面（办公首页、二级应用首页）
页面要求：
在最佳分辨率1280*768，内容高度不超过两屏。
同时能够支持1366*768，1024*768分辨率。
页面总体色调为军工蓝。
页面整体分为Header区/头部区、导航区、链接区、工作区，工具和提醒区、以及Footer区/版底区等几个部分。
宽屏下主体内容居中显示header背景元素repead-x填充整个屏幕。
屏幕宽度小于1280px的，页面按以下规律进行自适应调整。
页面布局如下：
具体页面尺寸如下：
内容高度超过一屏时，头部定高，主体区高度随内容自适应拉抻，界面右侧滚动条宽度为16px，界面在滚动条以外的屏幕上仍居中显示。
屏幕宽度小于1280px的，不能实现自适应调整的，将出现横向滚动条，高度为16px，
宽屏下主体内容居中显示header背景元素repead-x填充整个屏幕。
屏幕宽度小于1280px的，页面按以下规律进行自适应调整：
3.1.4门户新闻类详细页
适用范围：
门户新闻类详细页面，新打开新闻公告类详细查看页面；信息发布的详细查看页以及资源共享类的详细查看页面。
Logo、Banner、Footer区域同门户首页，Center中间展示区展示布局如图所示：
3.2通用应用系统
3.2.1应用首页
适用范围：
信息发布、保密管理、项目管理等应用系统的首页
在最佳分辨率1024*768，内容高度不超过两屏。
同时能够支持1366*768，1024*768分辨率。
页面主色调统一为军工蓝。
最大化窗口状态下，页面布局如下：
具体页面尺寸如下：
3.2.2功能列表页
适用范围：
除门户、信息发布平台以外的信息发布、保密管理、项目管理等应用系统的功能应用页面。
在最佳分辨率1024*768，内容高度不超过两屏。
同时能够支持1366*768，1024*768分辨率。
页面主色调统一为军工蓝。
最大化窗口状态下，页面布局如下：
3.2.3详细功能页
适用范围：
除门户、信息发布平台以外的信息发布、保密管理、项目管理等应用系统的功能应用页面。
在最佳分辨率1024*768，内容高度不超过两屏，页面主色调统一为军工蓝。
最大化窗口状态下，页面布局如下：
3.2.4信息编辑页
适用范围：
除门户以外的各相关应用系统的信息编辑页/表单编辑页面。
在最佳分辨率1024*768，内容高度不超过两屏，页面主色调统一为军工蓝。
信息编辑页面/表单页面，主题包括了标题区、表单区和操作区三个部分。
标题区以文字居中统一居中显示，字体大小：
16px。
表单区，表单元素需用相应表格进行布局，表格边框为1px，表单元素要求详见UI控件规范要求。
操作区或按钮区统一在页面左下方显示，方便用户操作。
最大化窗口状态下，页面布局如下：
3.2.5信息查询页
适用范围：
除门户、信息发布平台以外的保密管理、项目管理等应用系统的查询页面。
要求功能：
查询区支持折叠和展开，查询结果区支持分页查询。
3.3搜索类
3.3.1搜索条
适用范围：
门户或应用系统集成的搜索条
3.3.2搜索结果页面
适用范围：
搜索结果展示页面
参考页面：
京东&enc=utf-8
XX&q2=&q3=&q4=&rn=10&lm=0&ct=0&ft=&q5=&q6=&tn=baiduadv
4UI开发规范
4.1设计工具
设计工具：
Photoshop、Fireworks
前端制作：
Dreamweaver
4.2目录结构
4.2.1Project工程目录结构
从上图可以看出，我们遵循的项目结构是标准的maven项目结构。
4.2.2WebRoot目录结构
web资源结构，也就是对项目结构中src/main/webapp目录进行详细的结构定义，具体的目录结构定义见下图：
4.3UI命名规范
文件名均为英文小写字母，并且文件需要结合文件内容进行命名。
如遇复杂的文件名称单词间可以：
“-”间隔组合，但不能超过3个单词，单词尽量选言简意赅的短词或缩写，如：
images文件夹可以命名为img文件夹。
4.3.1图片文件命名
页面用到的图片文件预先分为美术字体图、图标（icon）、背景图；、动态交互图片，这些图片的命名规则一般遵循：
门类-功能-（颜色-位置~尺寸）的顺序命名（）内根据实际情况三选一进行组合，如：
这个图片文件的意思是：
图标类-错误提示-5*5像素大小的png图片。
为了缩小不同人员协调开发的命名习惯差异我指定了图片文件的三级命名详单：
门类
功能
颜色（英文单词）
尺寸（像素）
实例名称
美术字体图
词首为msz-
第二为字体名拼音第一个字母如方正综艺体简为fzzytj
颜色单词如：
white
Red,yellow,black,green,blue,ash,purple
为实际图片尺寸大小（宽*高）数值。
如：
180*30
图标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*5
背景图
词首为bg-
第二为背景图的使用方式：
x横向平铺，y为竖向平铺，n为不循环。
背景图片对应的颜色单词，如：
white
Red,yellow,black,green,blue,ash,purple
无
动态交互图片
词首为do-
动态图片的内容对应名称英文名称，如progressbar，londing，
More,hot,new,drop,pop
背景图片对应的颜色单词，如：
white
Red,yellow,black,green,blue,ash,purple
为实际图片尺寸大小（宽*高）数值。
如：
5*5
另外的图片格式一般为png24位，碰到颜色丰富的图片如风景照片可用jpg格式来控制图片数据大小，这个根据具体情况掌握，还可用图片精灵把图片拼到一张图片上来提高浏览下载效率，目的是在保证图片显示效果的前提下尽可能压缩图片大小。
4.3.2css文件命名
css文件的命名根据css文件包含的css代码的相应功能来组织，分公用全局样式和页面功能样式。
一般为两到三个文件，为公用样式文件，用于规范统一不同浏览器对html标签渲染的差异，（xx为功能相应页面样式英文缩写）文件为页面大部分功能模块的样式，还有些只在特殊页面用到很少重复用到的样式可以单建一个样式文件，文件名要根据对应的功能及版本进行声明，可能合并到一个大文件中去。
这样可以防止相同样式名之间在分别调取时因为相同属性声明的值不一致导致页面元素渲染出现错误，并且可以减少浏览器对服务器的链接请求数，降低服务器压力，而且作为渲染还原页面的重要文件css文件需要放在页面代码的标签之前。
4.3.3js文件命名
Js文件的命名根据文件内js代码编写的相应功能来组织，命名结构和图片文件命名基本一致，但在最后一项没有三选一只有文件是否为压缩版的声明。
如有可加上min来标示，如：
这个js文件名的意思是：
属于jquery系列具有触发页面滚动至上部经过压缩的js文件，注意js文件如无特殊需求均放在页面代码的底部