中国移动统一门户UI设计规范补充规范

中国移动统一门户UI设计规范补充规范


2024年5月14日发(作者:美菱冰箱怎么样质量好不好)

中国移动统一门户UI补

中国移动

业标准

中国移动通信集团公司 发布

目 录

前 言

......................................................................................................... III

1. 适用范围

................................................................................................... 4

2. 引用标准

................................................................................................... 4

3. 术语和定义

................................................................................................ 4

4. 符号和缩略语

............................................................................................. 5

5. 总体说明

................................................................... 错误!未定义书签。

5.1.

5.2.

5.3.

5.4.

规范目标 .......................................................................................... 错误!未定义书签。

章节简介 ......................................................................................................................... 5

注意事项 ......................................................................................................................... 6

网站兼容性说明 ............................................................................................................. 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

I

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

II

前 言

本规范由中国移动通信集团公司提出并归纳。

本规范由中国移动通信集团公司负责解释。

本规范起草机构:中国移动通信集团公司

本规范解释机构:中国移动通信集团公司

III

1. 适用范围

本规范适用于中国移动省级门户网站登录后页面设计与模版制作。

2. 引用标准

《中国移动VI规范》

《门户网站UEUI规范》

《增值业务统一查询和退订网上营业厅流程》

3. 术语和定义

类型

页面

名词

首页

网站菜单

GIF

JPG

网站的第一页。

网站菜单是网站各级栏目的导航,一般会出现在首页、栏目页

和列表页的页面主体内容上方。

GIF,一种图像文件格式。GIF文件的数据,是一种基于LZW算

法的连续色调的无损压缩格式,其压缩率一般在50%左右。

JPG,一种图像文件格式。是经过静态图象压缩标准压缩的图

像文件,具有很高的压缩比。

PNG,一种图像文件格式。在保留GIF文件格式特性的基础上,

增加了一些GIF文件格式所不具备的特性。同时,PNG图片文

件压缩比高,生成文件容量小。

指电脑屏幕的桌面上用来指示用户运行各种操作的图像,作为

字符显示的重要辅助。

给图片加上网站标志,保护图片版权的一种形式。

在商业领域,LOGO是标志、徽标的意思。常见的各种商品的标

识即是Logo,它包括文字、图形、字母、数字、三维标志和颜

色的组合。本规范所指LOGO,是互联网上网站用来标识自己的

图形标志,一般包含图形、名称和域名。

Flash是一种交互式矢量多媒体技术,通常既指macromedia出

品的动画制作软件,也指用此软件制作而成的多媒体作品。本

规范中所说的flash是指用软件制作而成的多媒体作品。

网页中,在文字和图片上设置的链接,用以把用户导向到新的

页面中。

用户点击进入网页的被链接文字或图片。

4

解释

图片

PNG

Icon

图片水印

网站Logo

其他

Flash

超链接

入口

网站title

4. 符号和缩略语

指用户在浏览器标题栏上看到的网站标题信息。

缩写

UI

VI

XHTML

英文描述

User Interface

Visual Identity

The Extensible HyperText Markup

中文描述

用户界面

视觉识别

可扩展超文本标识语言

Language

CSS

SEO

Rss

CMS

5. 总体说明

本文档用以详尽说明制作中国移动统一门户省级网站登录后页面的设计规范、页面制作

规范和页面模版规范。

统一门户省级网站登录后页面建设是统一门户整合建设进程中的关键阶段;是统一门

户整合建设及省级网站功能深度整合的成果输出;是客户享受一站式办理的集中展示界面。

本规范以《统一门户简洁版首页规范》作为基础,是对统一门户统一认证UIUE规范的

补充。登录后页面延续了简洁版首页的运营思路,给客户提供集中办理及体验的界面,通过

整合BOSS/CRM和业务平台中的客户信息,来满足客户登录后浏览、查询和办理的需求,

旨在对各省提出功能性要求,对业务集中呈现。登录后页面及相关页面流程遵循门户网站

UEUI信息架构架构,客户在网上营业厅登录后转入该页面。

5.1. 规范目标

Cascading Style Sheets

Search engine opitimation

Really Simple Syndication

Content Management System

层叠样式表单

搜索引擎优化

聚合内容

内容管理系统

通过对网站VI设计、图片使用、以及页面模板和结构的规范及完善,提供统一的视觉

5

设计、页面结构与代码制作的标准给网站开发和维护人员参照使用,以保证中国移动省级门

户网站所有登录后专区首页都在统一的标准下予以建设和维护,并且实现网站代码的精简、

高效和界面风格的统一、精致。本期登录后门户建设以整合省内BOSS/CRM和省内业务平

台为主,是配合省级网站功能深度整合的界面规范。

页面模版规范的总体目标是:形成统一的网站界面风格,确保网站传递给客户更为友好

一致的品牌形象,推进客户体验、功能整合、精准营销和渠道一站式办理效率。

具体表现为:

 实现中国移动省级门户网站登录后专区首页和页面vi设计和图片的规范使用、视

觉风格的统一;

 实现中国移动省级门户登录后专区首页和页面的模版结构都遵循网站设计思路和

结构原则。

 省门户和省内各业务平台间实现统一认证,登录后门户到各级页面应实现客户身份

携带跳转,省内各业务平台在省门户统一框架下实现业务查询受理及其他操作应

用。

5.2. 章节简介

本规范各章节内容如下:

第1章,适用范围。

第2章,引用标准。

第3章,术语和定义。

第4章,符号和缩略语。

第5章,总体说明。描述页面模版规范的目标、章节介绍、注意事项和网站兼容说明。

第6章,VI规范。对网站的VI设计进行规范。

第7章,图片规范。对网站设计、页面编辑中使用的图片进行规范。

第8章,页面模版和结构说明。描述主要页面的用户界面模版和各栏目信息内容。

5.3. 注意事项

 此文档依据此次统一门户网站登录后的改版而撰写,之后需时常保持更新,以确

6

保规范的时效性与准确性。

 本文档并不是CMS后台内容发布系统的用户手册,故并不会涉及任何与功能相关

的技术需求及说明。

 本文档中标题图片位置和广告位的图片均为示意图,正式上线的图将另行规定。

5.4. 网站兼容性说明

中国移动省级门户网站推荐在以下系统环境浏览:

平台

PC (推荐)

Macintosh

操作系统

Windows 98 以上

Mac OS

浏览器

IE 6.0 以上

Firefox 2.0 以上

分辨率

4:3显示屏:

1024*768

16:9显示屏:

1280*800

6. VI规范

VI规范是指对网站Logo、文字、格式、页面尺寸和页面结构样式等视觉元素进行规范,

从而实现网站的视觉风格统一。

中国移动网站要求整体视觉风格统一。因此,包括中国移动省级门户网站登录后的各个

页面的主要VI设计元素都必须严格遵循VI规范。在规范允许范围内,中国移动省级门户

公司网站以根据实际需要,进行个性化设计创意。

色彩

High Color

(16-bit)以

6.1. Logo设置

Logo标识是品牌的视觉象征,对于品牌的整体传播至关重要中国移动网站Logo的应用

将遵循以下规定执行。

6.1.1. Logo设置规范

 网站的所有页面中都需要设置相应的Logo标识,且Logo的尺寸应保持一致;

 所有在网页中显示的Logo标识都设定链接,点击可以返回对应网站首页。

 使用Logo时需保证Logo的比例以及清晰度(背景为黑色时,中国移动文字及网

址反白) 。

7

6.1.2. 中国移动网站Logo

注:Logo尺寸的度量单位是pixel(像素)。如上图所示,中国移动网站登录后专区Logo

的宽度为138px,高度为56px。

6.2. 文字

文字是多数网页的主体内容,中国移动网站各网页的文字在大小、字体、行高、颜色几

个方面需要遵循以下规范。

6.2.1. 大小和字体:

中国移动网站规范的文字大小和字体包含以下两种。其中,12px(宋体)用于正文及链接

文字,而13px(宋体)则用于各模块标题文字。注:各省根据自身需求可对字体加粗。

12px(宋体)

13px(宋体)

6.2.2. 颜色

文字颜色规范规定了带链接文字以及导航菜单的文字可以使用的颜色。

链接文字:使用通用字色,鼠标悬停状态加下划线。通用字色包括以下四种颜色:

注:其中#404040色为左侧导航文字颜。

头部导航菜单链接文字,鼠标悬停状态加下划线:

8

正文字体颜色(注:#555555为主要内容字体颜色,#8F8F8F为辅助字体颜色,

#BBBBBB为文本框内初始化字体颜色):

6.3. 页面尺寸

中国移动网站登录后所有页面的页宽设定为950px,用户在1024屏宽显示下能正常浏

览。

6.4. 页面模板结构

页面结构是指页面主体区域的排版结构。在中国移动网站登录后页面模版设计中,主要

是标题正文型设计。

9

10

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格式的图片。

11

7.3. 图片尺寸和大小

7.3.1. 中国移动网站内容图片

7.3.1.1. 中国移动网站登录后专区首页

7.3.1.1.1 顶部搜索栏:

搜索框部分尺寸:434x31 搜索框部分大小:1K以内 搜索框内初始文字颜色:#b2b2b2

搜索按钮尺寸: 77x31 搜索按钮大小:2KB以内 按钮上文字颜色:#555555

7.3.1.1.2

规格一:

用户个人头像:

首页个人信息尺寸:70x70 图片大小:5K以内

规格二:

动态信息个人头像尺寸:50x50 图片大小:5K以内

其他规格:

其它页面个人头像尺寸保持1:1比例,大小控制在20KB以内

7.3.1.1.3 页面功能模块标题栏:

12

规格一:

图片尺寸:560x30 图片大小:2KB以内

规格二:

优惠业务

图片尺寸:560x30 图片大小:2KN以内

选中状态:

选中状态图片尺寸:95x30 图片大小:2KB以内

7.3.1.1.4 话费信息按钮:

按钮尺寸:99x 27 按钮大小:2KB以内 按钮文字大小:12px

按钮背景图:

悬停状态:

按钮尺寸:99x 27 按钮大小:2KB以内 按钮文字大小:12px

悬停状态按钮背景图:

更多查询按钮:

按钮尺寸:99x 27 按钮大小:2KB以内 按钮文字大小:12px

更多查询按钮背景:

按钮文字颜色:#055093

按钮文字颜色:#055093

按钮文字颜色:# b33e3e

13

7.3.1.1.5 左侧导航图标:

图标尺寸:24x24 图标大小:2K以内 图标背景:半圆角矩形

7.3.1.1.6 页面按钮:

按钮尺寸:auto x 50 按钮大小:2K以内 按钮文字大小:12px 按钮文字颜色:#B33E3E

8. 页面模版和结构说明

8.1. 省级门户网站登录后页面

中国移动省级门户网站登录后设计图如下:

14

1

2

3

8

9

4

10

5

11

6

7

12

13

14

15

其中1、2、3、4、5、6、7、9、14区块为规范区域,各省必须严格按规范执行,其

他区块为机动区域,各省可根据本地情况进行改动,也可以新增其他功能应用模块。

页面分为三列,三列的宽度分别为:

左侧:150px 中间:560px; 右侧:212px;

三列之间左右间距为:14px;

页面各模块之间的上下间距为:10px;

8.1.1. 页面标记1(页头)

1

4

3

7

内容定义:

1 全站导航

2 网站公告

3 网站Logo

城市,日期及天气

4

预报

5 头部快捷导航

2

5

6

8

网站菜单导航,点击各菜单项链接到对应的页面。

链接颜色:#555555

机动区域,只展示一条,链接在新窗口打开。

展示网站Logo;

文字为中国移动**公司欢迎您,文字颜色:#7ec6fd

显示当前号码归属城市,日期及天气预报

天气图标参考通用识别图标,确保信息准确并及时更新

文字颜色:#7ec6fd,城市文字颜色: #ffe63d

提供中国移动、在线客服等相应链接及功能。

文字颜色为:#7ec6fd

提供站内搜索功能。

文本框内默认文字为:请输入您想查找的业务、套餐、手机及

各类优惠信息

详细规范见7.3.1.1.1

机动区域,点击下拉箭头可更换心情。

更换心情展开规范见8.4

机动区域,提供换肤、消息提示、个人设置相应链接及功能。

链接颜色:#ffffff

6 搜索

7 个人心情

8

登录后专区快捷导

16

8.1.2. 页面标记2(左侧导航)

1

2

3

4

5

17

内容定义

编号 板块 构成 备注

本区域为可管理类业务呈现区,

提供在用业务、飞信、短信仓库、凡是需要客户对业务内容管理的

号簿管家、彩铃管理、139邮箱相业务平台界面,均整合在这里,

应链接 具体业务由各省根据实际情况而

提供即时话费查询、账单查询、短

信发送记录、通话记录查询相应链

提供发短信/彩信、基础服务、积

分计划、收藏夹、咨询服务、购物

车、我的订单相应链接

提供移动博文、移动微博、移动相

册、论坛、活动、通讯录、音乐盒

子等相应链接

提供添加和管理左侧导航模块的

功能,以及复制地址的链接

提供用户帐户的各类消费信息及

消费情况的详细查询

为用户提供移动基础类服务,及

移动商城的订单、购物车服务

1 我的业务

2 话费服务

3 移动服务

4 社区应用

左侧导航设置

及邀请好友链

为用户提供社区部分的应用

5

连接邀请功能

导航设置详细效果见8.5

注:1-3的3个分类,各省需保持一致;无社区的省份可不显示分类4;除1-4分类外,各

省可根据情况增加其他分类目录;区域5为机动区域,由各省视实际情况确定是否设置。各

分类下的栏目标题,各省可根据本地情况做调整。

8.1.3. 页面标记3(客户个人信息)

1

3

2

内容定义

1 用户信息

2 个人设置

3 微博

省级网站如无社区,个人信息部分显示如下:

用户头像展示(头像规范见7.3.1.1.2),用户号码及所属品

牌套餐链接,退出按钮。

提供用户等级展示,E币数量链接以及荣誉等级展示及链接

提供修改头像及进入我的空间链接

提供微博输入及发表功能,以及一条微博信息

1

18

内容定义

1 用户信息

8.1.4. 页面标记4(我的业务话费信息)

用户号码及所属品牌套餐链接,退出按钮。

1

2

3

4

内容定义

1 标题栏

我的话费信息标题及在线客服链接。

标题栏规范见7.3.1.1.3

展示移动业务的三个类别按钮,分别是:自有业务、集团业务、

梦网业务。客户点击可进入网上营业厅>业务办理中对应业务的

页面查看,各省应按《增值业务统一查询和退订的网上营业厅

流程》完成增值业务查询和退订页面开发上线。(详阅《关于

规范增值业务统一查询和退订服务的通知中移有限市 [2010]

41 号》)

提供话费详细信息展示

建议各省优先显示账户余额、话费有效期、本月话费、月账单

等信息,月账单显示最近月份账单

查询时间默认为客户本次登录时间,考虑话费查询对系统压力

的因素,用户本次登录周期内相关话费信息可以只刷新一次

提供月账单查询,通话详单查询等常用功能链接。4个功能按

钮,一个更多查询链接按钮,具体由各省公司自行确定

链接按钮规范见7.3.1.1.4

2 业务分类

3 话费详情

4 常用功能链接

19

8.1.5. 页面标记5(业务、活动推荐区)

1

2

3

内容定义

1 标题栏

优惠活动/业务推荐页签切换,各页签均为机动,由省公司根据

本地情况确定具体内容

标题栏规范见7.3.1.1.3

提供推荐活动大图及活动主题文字链接

大图的尺寸:273x113 填充:1px 边框:1px 边框颜色值:D5D5D5

提供详细各活动的链接

2 活动大图

3 活动列表

8.1.6. 页面标记6(基地业务内容推荐区)

1 2

3

内容定义

以标签形式展示,包括:音乐、阅读、游戏、12580等4个内

容,点击切换显示内容,目前不采用轮播。页面初始默认显示

“音乐”标签。

每个页签对应内容详细展示见8.6

标题栏规范见7.3.1.1.3

1 标题栏

20

按关键字搜索当前标签中的内容,结果在新窗口打开,跳转到

各基地网站搜索结果页面。

2 搜索框

搜索框:147x22 搜索按钮:40x22

依不同标签显示不同内容,链接在新窗口打开。

整体尺寸:560x240

内容区域尺寸:540x220

内容区域边距:上下10px,左右9px

基地业务的内容来源说明:

各基地网站负责具体内容提供,包括:阅读、音乐、游戏、12580,

具体内容格式参见总部关于产品频道的基地内容规范。

本区域的内容采用两级抓取的方式实现,各基地网站负责定期

提供业务内容供集团一级门户抓取,一级门户抓取后生成本区

域的固定样式页面,省门户抓取一级门户页面页面内容后做本

地展现。

本区域的链接采用新窗口打开,链接为各基地的特定内容页面,

具体页面地址在上述内容抓取时可以获得。

3 内容展示

8.1.7. 页面标记7(省内业务聚合区)

1

2

内容定义

要求各省将本省内的业务平台整合入本区域,在省门户中实现

各业务的查询、受理及其他操作应用,原则上不允许链接跳出

省门户网站。

具体业务内容由各省根据省内实际情况确定,更多业务可以在

首页左侧菜单中的第一个分类“我的业务”下逐一列出。

1 标题栏

21

省门户从业务平台提取用户相关信息,并做展示(遇业务信息

过多时可做局部展示),并提供相关操作入口。用户操作时可

在本窗口打开操作界面,页面规范参考内页规范。

遇用户未办该业务时,页面给予明确的信息提醒,并向用户做

业务推荐。

每个主分类对应内容展示见8.7

整体尺寸:560x215

内容区域尺寸:540x190

内容区域边距:上下12px,左右9px

该区域集中展现省内完成功能和内容整合,实现统一认证后的省内后的业务,各省不得出现

以链接方式展现的业务。

8.1.8. 页面标记8(广告位)

2 业务内容区域

尺寸:212x88

8.1.9. 页面标记9(充值)

1

2

3

内容定义

1 标题栏

网上充值标题展示

标题尺寸:212 x28 标题文字颜色:#555555

提供手机号及充值金额输入功能,并要求具备简单的号码、金

额判断识别功能,如号码位数等。

输入框尺寸:170 x19 边框:1px 边框颜色:#d8d8d8

输入错误状态:

22

2 输入框

输入正确状态:

3 充值按钮及广告位

提供充值按钮以及文字链接广告位

按钮尺寸:64 x25

8.1.10. 页面标记10(业务关注排行)

1

2

本区域为机动区域,各省可根据自身情况选择是否显示本模块,也可以更换排行榜类型和

榜单数量。

内容定义

1 标题栏

业务关注排行榜标题展示

各省根据自身情况可改变标题

各条业务信息展示,并提供业务及评分的链接

各省根据自身情况可改变显示条数

2 业务列表

23

8.1.11. 页面标记11(发短信)

各省可根据自身情况选择是否显示本模块

内容定义

1 标题栏

2 功能区

8.1.12. 页面标记12(其他广告位)

发短信

填写手机号码及内容短信、验证码

1

内容定义

1 广告位

广告图片尺寸:212x88

24

8.1.13. 页面标记13(飞信聊天)

1

内容定义

1 飞信聊天

8.1.14. 页面标记14(页尾版权说明)

该模块始终显示在浏览器下边框之上,详细规范见8.2

具体要求同简洁版首页规范要求保持一致。

8.2. 省级登录后专区飞信模块

此区域为服务模块,供已实现统一认证的省门户展现产品服务信息,各省不得链接进入

其他页面。

1,飞信聊天初始状态

整体尺寸:266x33 会话尺寸:85x33 好友尺寸:101x33 飞信Logo:72x33

图片大小:1KB以内

2,飞信聊天好友展开状态

25

1

好友展开窗口的尺寸:262x169

由飞信提供接口实现此效果。

标记1:

好友展开时,1处于选中状态。其背景图为:

见附件:飞信好友背景.jpg

3,飞信聊天窗口展开状态

2

1

26

飞信聊天窗口展开的尺寸:356x245

由飞信提供接口实现此效果。

标记1:

好友展开时,1处于选中状态。其背景图为:

见附件:飞信好友背景.jpg

标记2:

未输入文字时的按钮

输入字符后按钮变为:

27

8.3. 内页

1

2

3

内容定义

1 头部

2 左侧导航

保持与首页相同

保持与首页相同

28

内页对应的左侧导航条目状态变化:

背景色为:# a8dbf9 字体:加粗

示例:

3 内页内容

8.4. 顶部心情更换

 点击三角形显示下拉菜单,如下图所示:

各省根据自身情况放置内容。

1、下拉菜单尺寸宽度为131PX,下拉的长度根据各省市心情下拉设置的数量自行调

整。下拉菜单背景色:#cfeafa 边框:1px # 1190db 边框阴影:右下各2px 阴

影颜色:#dcdcdc

2、当前显示心情尺寸:131 x 34PX

下拉菜单选择心情文字项尺寸:131x29 PX

下拉心情选项尺寸:131x31PX

3、心情项悬停背景:

 本区域为机动其余,各省市可根据自身运营需要确定是否设置本区域,选择心情显

示的文案内容和对应的图标也由省公司根据实际情况确定。

8.5. 左侧导航管理应用展示详细效果。

 点击左侧导航的管理应用链接,弹出层显示效果图如下:

29

3

2

1

4

标记1:

半透明遮盖层颜色:#000;透明度80%;

标记2:

我的业务,话费服务,移动服务,社区应用分类展示;每个小条目可选是否显示。

条目展示同首页左侧。

模块标题如下图:

标题尺寸:140x28 标题文字大小:14px 标题文字规格:加粗 标题文字颜色:

#555555

模块标题背景图:

标记3:

弹出层尺寸:670x545 弹出层边框:2px #5cc4f8

标记4:

保存及取消按钮组

30

背景:670x65 背景颜色:# d1e5eb

保存按钮:

按钮尺寸:100x34 按钮文字大小:4px 按钮文字颜色:#b33e3e 规格:加粗

取消按钮:

按钮尺寸:100x34 按钮文字大小:4px 按钮文字颜色:#555555 规格:加粗

按钮背景:

 鼠标移动至左侧主应用分类时显示当前应用管理,效果如下:

1

2

3

5

4

标记1:

鼠标移动至主应用分类,标题右侧显示设置图标,规范如下:

图示: 图标尺寸:16x16

鼠标点击设置图标,弹出层显示!

标记2:

主应用分类标题

文字大小:14px 文字颜色:#555555 文字规格:加粗

标记3:

主应用分类各项展示,复选框选中项目显示在左侧,未选中则不显示。

每项尺寸:90x18 每项间距:左右上下5px

标记4:

弹出层框架

尺寸:宽度为220px,高度根据各主分类项目数量变化。

31

背景颜色:#ef8fc 边框:1px #70c1ea

标记5:

保存及取消按钮

背景:220x50 背景颜色:# d1e5eb

保存按钮:

按钮尺寸:80x25 按钮文字大小:4px 按钮文字颜色:#b33e3e 规格:加粗

取消按钮:

按钮尺寸:80x25 按钮文字大小:4px 按钮文字颜色:#555555 规格:加粗

按钮背景:

8.6. 基地业务内容推荐各页签对应内容展示。

各省获取基地业务内容方式;由基地向一级门户提供业务信息,一级平台集中展现,由各省

到一级平台抓取业务数据。抓取数据页面地址为:

/newbusiness/index_

每个页签对应内容分为两部分,分类(标记1)以及内容列表(标记2)。以阅读为例

1

2

标记1:分类

背景尺寸:538x43 背景颜色:#f8f8f8 背景边框: 1px #e5e5e5

标记2:内容列表

与分类之间上下的边距为:10px

32

内容列表区域尺寸:540x165

各页签对应内容详细展示:

1. 音乐内容展示

2. 游戏内容展示

3. 阅读内容展示

33

4. 12580内容展示

8.7. 省内业务聚合区每个主分类对应内容展示。

每个页签对应内容分为两部分,分类(标记1)以及内容列表(标记2)。以手机签名为例

1

2

34

标记1:业务图标,业务子分类以及搜索

整体尺寸:540x66 业务图标尺寸:66x66 业务子分类与图标间距:23px

业务子分类尺寸:83x21 业务子分类文字颜色:#ffffff 业务子分类文字大小:14px

业务子分类间距:4px

标记2:内容列表

与标记1之间上下的边距为:12px

内容列表区域尺寸:540x112

各页签对应内容详细展示:

1、 手机签名对应内容

2、 短信仓库对应内容

3、 号簿管家对应内容

35

8.8. Title及收藏夹图标信息

8.8.1. Title信息

网站的Title统一为:我的移动 – 中国移动XX公司欢迎您。例:我的移动 – 中

国移动浙江公司欢迎您。

其中××代表当前省(直辖市)的名称。

在用户中心与××移动中间,用“ - ”(空格,英文的短横,空格)来连接。

8.8.2. 收藏夹图标信息

为省级门户网站登录后专区添加统一的收藏夹图标信息(Icon),Icon的图标样式

为中国移动通信的LOGO。图标的大小为:16×16,文件后缀名为:.icon。

36


发布者:admin,转转请注明出处:http://www.yc00.com/num/1715623354a2646512.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信