中国移动统一门户UI设计规范补充规范 - 图文 下载本文

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