单位网站及信息应用系统界面规范.docx

单位网站及信息应用系统界面规范.docx

《单位网站及信息应用系统界面规范.docx》由会员分享，可在线阅读，更多相关《单位网站及信息应用系统界面规范.docx（17页珍藏版）》请在冰点文库上搜索。

单位网站及信息应用系统界面规范

附件一

单位网站及信息应用系统界面规范

（试行版）

一、油田外部网站

油田外部网站的网页界面框架包括页眉区、栏目导航区、内容区、页尾区。

界面布局如下：

网页宽度1000px；页眉区高度78px；栏目导航区高度29px；主题宣传区整宽或2/3整宽、高度控制在230px以内；页尾区高度65px。

页面背景色为白色。

（一）页眉区

页眉包括标识、标题、站外热区、语言切换、内容搜索。

左侧为中石化标识、胜利油田中英文简称组合，右侧是站外热区、内容搜索、语言切换。

页眉区底色为白色。

样例：

1、参数说明

2、标识

采用标准色的中石化标识：

红色（R:

255,G:

0,B:

0），黑色（R:

0,G:

0,B:

0）。

标识宽高：

48px*50px；距页眉上边距14px；距页眉左边距20px。

3、标题

标题由主标题和子标题组成，主标题与子标题使用“

”符号居中间隔。

标题采用中石化与胜利油田中英文简称组合。

主标题为“中国石化”，文字字号26px，字体：

汉仪大宋简体，黑色；距页眉上边间距32px，距左边中国石化标识间距10px。

子标题为“胜利油田”，文字为字号28px，朱德体，黑色；距页眉上边间距28px，距主标题间距25px。

英文为中国石化胜利油田简称大写“SHENGLIOILFIELDOFSINOPEC”，文字为字号12px，ArialRoundedMTBold，黑色。

标题与中国石化标识组合如下：

4、站外热区、内容搜索框、语言切换链接

站外热区用于链接中石化门户网站及中石化网站群，使用“|”分割符及空格符号分隔。

文字字号为：

12px，字体：

宋体，色值：

#000000，导航链接文字距页眉上边距47px，最右侧距离页眉右边距25px，距离页眉下边距10px。

语言切换链接、内容搜索框根据需要定义。

语言切换链接文字为字号：

12px，字体：

宋体，色值：

#000000；距上边距10px。

内容搜索框距上边距15px。

（二）栏目导航区

高度：

29px，文字字号：

14px，字体：

宋体加粗，色值：

#ffffff；间距根据导航链接数量横向均匀分布，距离网页左右两侧边距25px。

（三）主题宣传区

网站首页包括主题宣传区，放置主视觉图，主视觉图整宽或2/3整宽、高度控制在230px以内。

（四）页尾区

必须包括版权信息、维护信息，其它信息可根据需要做适当添加。

页尾区高度：

65px；文字字号：

12px，字体：

宋体，色值：

#000000。

（五）样例

二、内部单位网站

油田局域网内各级单位网站的界面框架包括页眉区、栏目导航区、系统登录区、内容区、页尾区。

界面布局如下：

网页宽度采用1000px，页面背景色为白色；页眉区高度78px；栏目导航区高度29px；系统登录区高度29px。

页尾区高度65px。

（一）页眉区

页眉区包括标识、标题、主题宣传图、站外热区构成元素，页眉区底色为白色。

其中左侧为标识（Logo）、标题，右侧是主题宣传图、站外热区构成元素组合。

样例：

1、参数说明

2、标识

采用中石化标识与胜利油田名称竖排版式组合样式。

标识采用标准色：

红色（R:

255,G:

0,B:

0）；黑色（R:

0,G:

0,B:

0）。

宽高：

55px*66px；距上边距14px；距左边距20px。

胜利油田字样为朱德体黑色（R:

0,G:

0,B:

0）。

3、标题

由主标题和子标题组成，主标题与子标题使用“

”符号居中间隔。

主标题为单位名称或网站名称，子标题用于标识所属三、四级单位或网站专题名称。

其中主标题文字26px汉仪大宋简体黑色（R:

0,G:

0,B:

0），距页眉上边间距32px，与标识右间距10px；子标题文字字号：

22px，字体：

黑体，色值：

#000000，距页眉上边距35px；距主标题文字间距25px。

⏹胜利信息网标题：

胜利信息网

⏹二级单位标题：

二级单位或机关部门名称。

⏹三级单位标题：

由二级单位名称（主标题）+三级单位名称（子标题）组合而成。

⏹四级单位标题：

由二级单位+三级单位名称（主标题）+四级单位名称（子标题）组合而成。

说明：

三级及四级单位名称较长时可使用统一的简称。

4、宣传图

宣传图中间偏右不覆盖标题名称，图片背景与页眉左侧白色背景衔接自然。

口号文字字号：

18px；字体:

微软雅黑。

距页眉上边距17px。

5、站外热区

站外热区用于链接其它网站，导航链接使用“|”分割符及空格符号分隔；链接文字字号：

12px，字体：

宋体，色值：

#000000。

链接文字距页眉上边距47px，最右侧距离页眉右边距25px，距离页眉下边距10px。

（二）栏目导航区

栏目导航区用于网站内部栏目导航。

栏目导航区高度：

29px。

必须使用统一的背景：

样例：

左侧日期文字字号：

12px，字体：

宋体，色值：

#ffffff。

右侧栏目文字字号：

14px，字体：

宋体加粗，色值：

#ffffff；间距根据导航链接数量横向均匀分布；距离网页左右两侧边距25px。

（三）系统登录区

用于网站或系统登录，区域高度：

29px。

胜利信息网系统登录区用于登录油田工作平台。

样例：

左侧登录控件文字字号：

12px，字体：

宋体，色值：

#000000。

右侧链接文字可使用艺术字体（例如：

微软雅黑、方正黑体、综艺体等）。

（四）页尾区

必须包括版权信息、维护信息，其它信息可根据需要做适当添加。

页尾高度：

65px；文字12px宋体，色值：

#000000。

（五）样例

1、胜利信息网样例

2、单位网站样例

三、应用系统

应用系统的界面框架包括页眉区、菜单区、内容区、页尾区。

界面布局如下：

页面宽度1000px或自适应，页面底色为白色。

页眉区高度78px；菜单区高度29px；页尾区高度29px。

（一）页眉区

包括标识、标题、系统按钮，其中左侧为标识和标题，右侧是系统按钮组合，常用按钮样式固定。

页眉区统一使用如下背景图：

样例：

1、参数说明

2、标识

采用中石化标识与胜利油田名称竖排版式组合样式。

标识采用标准色：

红色（R:

255,G:

0,B:

0）；黑色（R:

0,G:

0,B:

0）。

宽高：

55px*66px；距上边距7px；距左边距15px。

胜利油田字样为朱德体黑色（R:

0,G:

0,B:

0）。

3、标题

由主标题和子标题两部分组成，主标题与子标题使用“

”符号居中间隔。

主标题为系统名称，子标题用于表示专题名称，子标题根据需要使用。

其中主标题文字字号：

26px，字体：

汉仪大宋简体，色值：

#000000；距页眉上边间距32px，与标识右间距15px。

子标题文字字号：

22px，字体：

黑体，色值：

#000000；距页眉上边距35px，距主标题文字间距25px。

4、系统按钮

按钮宽高控制在30px*45px以内，图标与按钮文字名称为上下布局；按钮距页眉上边距10px，按钮间距为15px，距页眉右侧边距25px。

必须包括首页、帮助、退出按钮，其余按钮可根据需要增加。

常用按钮及样式如下：

首页按钮用于首页面调用；设置按钮用于设置系统功能；帮助按钮用于帮助界面调用；退出按钮用于退出系统。

（二）菜单区

菜单区左侧用于显示用户信息或当前页面位置信息，右侧放置菜单功能模块。

菜单区高度：

29px，菜单区统一使用如下背景色：

菜单与页眉的组合样例：

菜单左侧用户信息或当前页面位置信息文字字号：

12px，宋体，色值：

#ffffff。

右侧菜单功能模块间距根据数量横向均匀分布，默认文字14px宋体白色，色值：

#ffffff；当前选中菜单背景色为白色，文字字号：

14px，字体：

宋体，色值：

#000000。

当前菜单建议样式：

（三）页尾区

包括版权信息、维护信息，其它信息可根据需要做适当添加。

页尾高度：

29px；文字字号：

12px，字体：

宋体，色值：

#000000。

（四）样例

1、样例一

2、样例二

附件二

多媒体汇报材料界面规范

（试行版）

一、油田外部汇报模板

向中石化总部等上级部门汇报时使用。

（一）标题页

说明：

1、位置：

标题放在页面醒目的地方，约整个封面高度的中间靠上位置；单位名称放在标题下面与标题左对齐；汇报时间放在下方居中对齐；

2、字体：

统一使用黑体；

3、字体颜色：

黑色，色值：

（R:

0,G:

0,B:

0）；

4、字号大小：

标题：

34号字～44号字之间；单位：

20号字；时间：

18号字。

（二）正文页

说明：

1、位置：

标题文字在页面上方；正文文字放在除标题行以下的主体位置；

2、字体：

统一使用黑体；

3、字体颜色：

黑色，色值：

（R:

0,G:

0,B:

0）；

4、字号大小：

标题：

28号字～34号字之间；正文：

16号字～22号字之间。

（三）结束页

说明：

1、位置：

页面主体位置；

2、字体：

统一使用黑体；

3、字体颜色：

红色,色值：

（R:

255,G:

0,B:

0）；

4、字体大小在40～50号字之间。

二、油田内部汇报模板

胜利油田内部汇报时使用。

（一）标题页

说明：

1、位置：

标题放在页面醒目的地方，约整个封面高度的中间靠上位置；单位名称放在标题下面与标题左对齐；汇报时间放在下方居中对齐；

2、字体：

统一使用黑体；

3、字体颜色：

黑色，色值：

（R:

0,G:

0,B:

0）；

4、字号大小：

标题：

34号字～44号字之间；单位：

20号字；时间：

18号字。

（二）正文页

说明：

1、位置：

标题文字在页面上方；正文文字放在除标题行以下的主体位置；汇报单位名称文字放在右下角红色背景内；

2、字体：

统一使用黑体；

3、字体颜色：

标题与正文字字体为黑色，色值：

（R:

0,G:

0,B:

0）；右下角汇报单位字体为白色，色值：

（R:

255,G:

255,B:

255）；

4、字号大小：

标题：

28号字～34号字之间；正文：

16号字～22号字之间；右下角汇报单位文字：

12号字～14号字之间。

（三）结束页

说明：

1、位置：

页面主体位置；

2、字体：

统一使用黑体；

3、字体颜色：

红色，色值：

（R:

255,G:

0,B:

0）；

4、字体大小在40～50号字之间。