网站vi规范

中国联通网站VI规范中国联合通信有限公司二○○六年二月目录第一章前言..............................................................1第二章企业VI的应用与扩展...............................................12.1企业VI应用......................................................12.2.1公司标识.......................................................12.2.2品牌标识.......................................................22.2.3产品标识.......................................................5第三章网站配色方案......................................................53.1网站标准栏目配色.................................................63.1.1首页配色.......................................................63.1.2网站内页配色...................................................8第四章网页整体布局.....................................................144.1网站标准网页布局................................................144.1.1首页布局......................................................144.1.2一级栏目网页布局..............................................164.1.3正文页面布局..................................................25第五章导航条规范.......................................................275.1一级栏目导航条..................................................275.2常用链接导航条..................................................275.3二级栏目导航条..................................................275.4三级栏目导航条..................................................28第六章标题规范.........................................................286.1首页板块标题....................................................296.2栏目标题........................................................296.3内页板块标题....................................................296.4正文标题........................................................30第七章正文文字规范.....................................................30第1页第一章前言中国联通网站VI规范是按照中国联通网站整合工作总体思路，以中国联通企业识别系统为基础，由总部信息化部、市场营销部组织各单位、部门结合互联网网络特点形成的中国联通网站设计与制作规范。此规范具有统一性、整体性，适用于中国联通总部及全国各省级分公司网站系统。第二章企业VI的应用与扩展中国联通网站应用了中国联通企业VI及品牌VI，并在企业识别系统的基础上对VI规范进行扩展，以满足其互联网应用特点。本章对网站设计与制作规范中应用的企业VI、品牌VI、产品VI进行规范，并对VI扩展范围进行界定。2.1企业VI应用联通网站中对企业VI应用主要有以下几方面：适合网页显示的VI标识尺寸范围：为保证网页效果和VI标识的清晰，根据网页内容的需要，对VI标识尺寸的最大、最小值做了明确规定。适合网页视觉效果的VI标识颜色：对网站中所使用的VI标识颜色以RGB方式标注色值。网页中可使用的显示效果：在网页的非严格界定色值板块内，允许VI标识在企业识别系统的范围内使用反白，灰度，组合等效果。本规范中对上述各方面逐一说明。2.2.1公司标识尺寸网页页眉中显示的公司标识尺寸固定为：106px×41px。网页其他部分可使用的公司标识尺寸范围，最大为500px×n（按比例），最小为60px第2页×n（按比例）。在此规定范围内，根据网页的布局需要，可对公司标识按比例缩放使用。图1标准显示色值标准企业标识：R：215；G：25；B：32（#D71920）标准企业标识：R：0；G：0；B：0（#000000）显示效果在网站各级网页的页眉中，公司标识严格使用反白显示（图2）；网页其他部分使用的公司标识效果可参照企业VI中的相关规定。各省分公司在使用企业标识的时候，需在总公司标识后面添加各省分公司的全称，同样使用反白显示。省分公司企业标识以下图为例：图22.2.2品牌标识尺寸根据网页显示需要，建议尺寸：范围最大为500px×n（按比例），最小为50px×n（按比例）。标准颜色世界风标识：图3123第3页主要色值：1.R：0；G：0；B：0；（#000000）2.R：0；G：0；B：0；（#000000）3.R：179；G：155；B：31；（#B39B1F）R：255；G：255；B：0；（#FFFF00）R：179；G：154；B：12；（#B39A0C）新势力标识：图4主要色值：1.R：139；G：211；B：229；（#8BD3E5）2.R：0；G：160；B：198；（#00A0C6）3.R：0；G：0；B：0；（#000000）4.R：255；G：0；B：0；（#FF0000）联通新时空标识：图513142第4页主要色值：1.R：14；G：49；B：146；（#0E3192）如意通标识：图6主要色值：1.R：255；G：89；B：0；（#FF5900）2.R：0；G：0；B：0；（#000000）宝视通标识：图7主要色值：1.R：37；G：64；B：143；（#25408F）uni标识：112第5页图8主要色值：1.R：0；G：0；B：0；（#000000）2.R：255；G：0；B：0；（#595959）3.R：89；G：89；B：89；（#FF0000）显示效果在网站首页、“品牌专区”栏目首页和各品牌详细介绍首页中：规定品牌标识使用标准显示效果。在相对独立的品牌活动宣传网页中，允许品牌标识在企业VI规范的范围内使用反白，灰度，组合等效果。2.2.3产品标识尺寸网页可使用的产品标识尺寸范围最大为500px×n（按比例），最小为50px×n（按比例）。在此规定范围内，根据网页布局需要的，品牌标识可按比例缩放使用。颜色网站中涉及到的产品标识颜色，需严格按照企业VI中的相关规定使用。若为保证网页中产品标识的视觉效果、在一定范围内调整产品标识的色值，需由联通总部统一规划调整，形成本规范条款的补充。显示效果网站中涉及到的产品标识，需严格按照企业VI中的相关规定使用。不允许随意组合，添加、删减产品标识的组成部分。不允许对网页中的产品标识变形处理。第三章网站配色方案为统一中国联通国际化企业互联网网络形象，公司各级网站必须按照展现视觉效果达到风格统一。本章对网站中各级网页所使用的主要颜色及搭配方案做了详细规定和标注，作为123第6页网站设计的配色依据。3.1网站标准栏目配色为保证网站设计风格统一，除“品牌专区”栏目内页需结合品牌VI配色之外，网站中各级栏目均采用统一配色方案。具体方案如下：3.1.1首页配色图91.页眉背景：R：255；G：255；B：255（#FFFFFF）2.一级栏目导航背景：R：215；G：25；B：32（#D71920）1432第7页3.内容板块渐变背景：图10R：217；G：217；B：217（#D9D9D9）R：239；G：239；B：239（#EFEFEF）图11R：233；G：233；B：233（#E9E9E9）R：255；G：255；B：255（#FFFFFF）图12R：183；G：201；B：211（#B7C9D3）R：255；G：255；B：255（#FFFFFF）4.内容板块单色背景：联通新闻背景：R：237；G：237；B：237（#EDEDED）常用链接背景：R：160；G：160；B：160（#A0A0A0）第8页3.1.2网站内页配色图1314582376第9页1.页眉背景：R：255；G：255；B：255（#FFFFFF）2.一级栏目导航背景：R：215；G：25；B：32（#D71920）3.栏目形象图片衬托背景：R：255；G：255；B：255；（#FFFFFF）4．所在位置导航背景：R：230；G：230；B：230；（#E6E6E6）5．子栏目导航背景：R：247；G：247；B：247；（#F7F7F7）6．子业务导航背景：R：230；G：230；B：230；（#E6E6E6）7．小图标色彩：R：215；G：25；B：32；（#D71920）8．常用链接背景：R：160；G：160；B：160（#A0A0A0）客户服务首页配色：第10页图141.页眉背景：R：255；G：255；B：255（#FFFFFF）2.一级栏目导航背景：R：215；G：25；B：32（#D71920）3.栏目形象图片衬托背景：R：255；G：255；B：255（#FFFFFF）4．所在位置导航背景：R：230；G：230；B：230；（#E6E6E6）5．子栏目导航背景：1457236第11页R：247；G：247；B：247；（#F7F7F7）6.小图标色彩：R：215；G：25；B：32；（#D71920）7．常用链接背景：R：160；G：160；B：160（#A0A0A0）终端专区首页配色：图151.页眉背景：R：255；G：255；B：255；（#FFFFFF）2.一级栏目导航背景：R：215；G：25；B：32（#D71920）3.栏目形象图片衬托背景：R：255；G：255；B：255；（#FFFFFF）4.所在位置导航背景：R：230；G：230；B：230；（#E6E6E6）14523第12页5.常用链接背景：R：160；G：160；B：160（#A0A0A0）关于中国联通首页配色：图161.页眉背景：R：255；G：255；B：255；（#FFFFFF）2.一级栏目导航背景：145623第13页R：215；G：25；B：32（#D71920）3.栏目形象图片衬托背景：R：255；G：255；B：255；（#FFFFFF）4.所在位置导航背景：R：230；G：230；B：230；（#E6E6E6）5.子栏目导航背景：R：247；G：247；B：247；（#F7F7F7）6.常用链接背景：R：160；G：160；B：160（#A0A0A0）正文内页配色：图171.页眉背景：R：255；G：255；B：255；（#FFFFFF）14523第14页2.一级栏目导航背景：R：215；G：25