中国移动统一门户UI设计规范补充规范
中国移动通信企业标准 中国移动通信集团公司 发布
中国移动统一门户U I 补充规范
目录
前言......................................................................................................... I II
1.适用范围 (4)
2.引用标准 (4)
3.术语和定义 (4)
4.符号和缩略语 (5)
5.总体说明 ................................................................ 错误！未定义书签。
5.1.规范目标 ....................................................................................... 错误！未定义书签。
5.2.章节简介 (5)
5.3.注意事项 (6)
5.4.网站兼容性说明 (7)
6.VI规范 (7)
6.1.L OGO设置 (7)
6.1.1.Logo设置规范 (7)
6.1.2.中国移动网站Logo (8)
6.2.文字 (8)
6.2.1.大小和字体： (8)
6.2.2.颜色 (8)
6.3.页面尺寸 (9)
6.4.页面模板结构 (9)
7.图片规范 (11)
7.1.图片使用基本要求 (11)
7.2.图片文件格式 (11)
7.2.1.GIF文件 (11)
7.2.2.JPG文件 (11)
7.2.3.PNG文件 (11)
7.3.图片尺寸和大小 (12)
7.3.1.中国移动网站内容图片 (12)
8.页面模版和结构说明 (14)
8.1.省级门户网站登录后页面 (14)
8.1.1.页面标记1（页头） (16)
8.1.2.页面标记2（左侧导航） (17)
8.1.3.页面标记3（客户个人信息） (18)
8.1.4.页面标记4（我的业务话费信息） (19)
8.1.5.页面标记5（业务、活动推荐区） (20)
8.1.6.页面标记6（基地业务内容推荐区） (20)
8.1.7.页面标记7（省内业务聚合区） (21)
8.1.8.页面标记8（广告位） (22)
8.1.9.页面标记9（充值） (22)
8.1.10.页面标记10（业务关注排行） (23)
8.1.11.页面标记11（发短信） (24)
8.1.12.页面标记12（其他广告位） (24)
8.1.13.页面标记13（飞信聊天） (25)
8.1.14.页面标记14（页尾版权说明） (25)
8.2.省级登录后专区飞信模块 (25)
8.3.内页 (28)
8.4.顶部心情更换 (29)
8.5.左侧导航管理应用展示详细效果。 (29)
8.6.基地业务内容推荐各页签对应内容展示。 (32)
8.7.省内业务聚合区每个主分类对应内容展示。 (34)
8.8.T ITLE及收藏夹图标信息 (36)
8.8.1.Title信息 (36)
8.8.2.收藏夹图标信息 (36)
前言本规范由中国移动通信集团公司提出并归纳。本规范由中国移动通信集团公司负责解释。本规范起草机构：中国移动通信集团公司
本规范解释机构：中国移动通信集团公司
1. 适用范围
本规范适用于中国移动省级门户网站登录后页面设计与模版制作。
2. 引用标准
《中国移动VI规范》
《门户网站UEUI规范》
《增值业务统一查询和退订网上营业厅流程》
3. 术语和定义
网站title 指用户在浏览器标题栏上看到的网站标题信息。
4.符号和缩略语
5. 总体说明
本文档用以详尽说明制作中国移动统一门户省级网站登录后页面的设计规范、页面制作规范和页面模版规范。
统一门户省级网站登录后页面建设是统一门户整合建设进程中的关键阶段；是统一门户整合建设及省级网站功能深度整合的成果输出；是客户享受一站式办理的集中展示界面。
本规范以《统一门户简洁版首页规范》作为基础，是对统一门户统一认证UIUE规范的补充。登录后页面延续了简洁版首页的运营思路，给客户提供集中办理及体验的界面，通过整合BOSS/CRM和业务平台中的客户信息，来满足客户登录后浏览、查询和办理的需求，旨在对各省提出功能性要求，对业务集中呈现。登录后页面及相关页面流程遵循门户网站UEUI信息架构架构，客户在网上营业厅登录后转入该页面。
5.1.规范目标
通过对网站VI设计、图片使用、以及页面模板和结构的规范及完善，提供统一的视觉
设计、页面结构与代码制作的标准给网站开发和维护人员参照使用，以保证中国移动省级门户网站所有登录后专区首页都在统一的标准下予以建设和维护，并且实现网站代码的精简、高效和界面风格的统一、精致。本期登录后门户建设以整合省内BOSS/CRM和省内业务平台为主，是配合省级网站功能深度整合的界面规范。
页面模版规范的总体目标是：形成统一的网站界面风格，确保网站传递给客户更为友好一致的品牌形象，推进客户体验、功能整合、精准营销和渠道一站式办理效率。
具体表现为：
?实现中国移动省级门户网站登录后专区首页和页面vi设计和图片的规范使用、视
觉风格的统一；
?实现中国移动省级门户登录后专区首页和页面的模版结构都遵循网站设计思路和
结构原则。
?省门户和省内各业务平台间实现统一认证，登录后门户到各级页面应实现客户身份
携带跳转，省内各业务平台在省门户统一框架下实现业务查询受理及其他操作应
用。
5.2.章节简介
本规范各章节内容如下：
第1章，适用范围。
第2章，引用标准。
第3章，术语和定义。
第4章，符号和缩略语。
第5章，总体说明。描述页面模版规范的目标、章节介绍、注意事项和网站兼容说明。
第6章，VI规范。对网站的VI设计进行规范。
第7章，图片规范。对网站设计、页面编辑中使用的图片进行规范。
第8章，页面模版和结构说明。描述主要页面的用户界面模版和各栏目信息内容。
5.3.注意事项
?此文档依据此次统一门户网站登录后的改版而撰写，之后需时常保持更新，以确
保规范的时效性与准确性。
?本文档并不是CMS后台内容发布系统的用户手册，故并不会涉及任何与功能相关
的技术需求及说明。
?本文档中标题图片位置和广告位的图片均为示意图，正式上线的图将另行规定。
5.4.网站兼容性说明
中国移动省级门户网站推荐在以下系统环境浏览：
6. VI规范
VI规范是指对网站Logo、文字、格式、页面尺寸和页面结构样式等视觉元素进行规范，从而实现网站的视觉风格统一。
中国移动网站要求整体视觉风格统一。因此，包括中国移动省级门户网站登录后的各个页面的主要VI设计元素都必须严格遵循VI规范。在规范允许范围内，中国移动省级门户公司网站以根据实际需要，进行个性化设计创意。
6.1.Logo设置
Logo标识是品牌的视觉象征，对于品牌的整体传播至关重要中国移动网站Logo的应用将遵循以下规定执行。
6.1.1. Logo设置规范
?网站的所有页面中都需要设置相应的Logo标识，且Logo的尺寸应保持一致；
?所有在网页中显示的Logo标识都设定链接，点击可以返回对应网站首页。
?使用Logo时需保证Logo的比例以及清晰度（背景为黑色时，中国移动文字及网
址反白）。
6.1.2. 中国移动网站Logo
注：Logo尺寸的度量单位是pixel（像素)。如上图所示，中国移动网站登录后专区Logo 的宽度为138px，高度为56px。
6.2.文字
文字是多数网页的主体内容，中国移动网站各网页的文字在大小、字体、行高、颜色几个方面需要遵循以下规范。
6.2.1. 大小和字体：
中国移动网站规范的文字大小和字体包含以下两种。其中，12px(宋体)用于正文及链接文字，而13px（宋体）则用于各模块标题文字。注：各省根据自身需求可对字体加粗。
12px(宋体)
13px(宋体)
6.2.2. 颜色
文字颜色规范规定了带链接文字以及导航菜单的文字可以使用的颜色。
链接文字：使用通用字色，鼠标悬停状态加下划线。通用字色包括以下四种颜色：
注：其中＃404040色为左侧导航文字颜。
头部导航菜单链接文字，鼠标悬停状态加下划线：
正文字体颜色（注：＃555555为主要内容字体颜色，＃8F8F8F为辅助字体颜色，
＃BBBBBB为文本框内初始化字体颜色）：
6.3.页面尺寸
中国移动网站登录后所有页面的页宽设定为950px，用户在1024屏宽显示下能正常浏览。
6.4.页面模板结构
页面结构是指页面主体区域的排版结构。在中国移动网站登录后页面模版设计中，主要是标题正文型设计。
7. 图片规范
图片规范是指对中国移动网站上图片使用做出基本要求，并对图片的格式、尺寸、大小等做出规定。
图片常常是网页上最引人注目的内容，图片规范有助于保证图片的精致和页面的齐整，进而提升网页乃至整个网站的品质。
7.1.图片使用基本要求
?图片的选用与反映的主题一致；
?图片画面显示清晰，不采用改变显示尺寸的放大或缩小；
?图片画面（尤其是人物图像）不允许变形；
?图片文件大小控制在30 KB内为宜；
?图片按照“所属栏目名_图片描述名”的规则命名，图片名称均由小写字母、数字
和“_”组成，不能有空格或其它字符；
?每张图片必须添加图片注释文字（alternative text）；
7.2.图片文件格式
GIF 、 JPG和PNG 的图片格式均可被采用。
7.2.1. GIF文件
图片中的颜色没有过渡渐变效果的时候用gif格式的图片。
7.2.2. JPG文件
图片中的颜色有复杂的过渡渐变效果的时候用jpg格式的图片。
7.2.3. PNG文件
图片中图形不规则，但又需要透明边缘时，一般使用png格式的图片。
7.3.图片尺寸和大小
7.3.1. 中国移动网站内容图片
7.3.1.1. 中国移动网站登录后专区首页
7.3.1.1.1 顶部搜索栏：
搜索框部分尺寸：434x31 搜索框部分大小：1Ｋ以内搜索框内初始文字颜色：#b2b2b2 搜索按钮尺寸: 77x31 搜索按钮大小：2KB以内按钮上文字颜色：#555555
7.3.1.1.2 用户个人头像：
规格一：
首页个人信息尺寸：70x70 图片大小：5Ｋ以内
规格二：
动态信息个人头像尺寸：50x50 图片大小：5Ｋ以内
其他规格：
其它页面个人头像尺寸保持1：1比例，大小控制在20KB以内
7.3.1.1.3 页面功能模块标题栏：
规格一：
图片尺寸：560x30 图片大小：2KB以内
规格二：
优惠业务
图片尺寸：560x30 图片大小：2KN以内
选中状态：
选中状态图片尺寸：95x30 图片大小：2KB以内
7.3.1.1.4 话费信息按钮：
按钮尺寸：99x 27 按钮大小：2KB以内按钮文字大小：12px 按钮文字颜色：#055093 按钮背景图：
悬停状态：
按钮尺寸：99x 27 按钮大小：2KB以内按钮文字大小：12px 按钮文字颜色：#055093 悬停状态按钮背景图：
更多查询按钮：
按钮尺寸：99x 27 按钮大小：2KB以内按钮文字大小：12px 按钮文字颜色：#b33e3e 更多查询按钮背景：
7.3.1.1.5 左侧导航图标：
图标尺寸：24x24 图标大小：2Ｋ以内图标背景：半圆角矩形
7.3.1.1.6 页面按钮：
按钮尺寸：auto x 50 按钮大小：2Ｋ以内按钮文字大小：12px 按钮文字颜色：＃B33E3E 8. 页面模版和结构说明
8.1.省级门户网站登录后页面
中国移动省级门户网站登录后设计图如下：
1
2
3
4
5
6
7
8 9 10
12
13
11
其中1、2、3、4、5、6、7、9、14区块为规范区域，各省必须严格按规范执行，其他区块为机动区域，各省可根据本地情况进行改动，也可以新增其他功能应用模块。 页面分为三列，三列的宽度分别为：
左侧：150px 中间：560px; 右侧：212px; 三列之间左右间距为：14px;
页面各模块之间的上下间距为：10px; 8.1.1. 页面标记1（页头）
内容定义：
3
4
6
8.1.2. 页面标记2（左侧导航）
注：1-3的3个分类，各省需保持一致；无社区的省份可不显示分类4；除1-4分类外，各省可根据情况增加其他分类目录；区域5为机动区域，由各省视实际情况确定是否设置。各分类下的栏目标题，各省可根据本地情况做调整。 8.1.3. 页面标记3（客户个人信息）
内容定义
省级网站如无社区，个人信息部分显示如下：
1
3
8.1.4. 页面标记4（我的业务话费信息）
1
2
3
4 内容定义