广东移动应用系统设计规范说明书.doc

第一部分：移动VI设计VIS是Visual Identity System的简称，即视觉识别系统，VIS是一个企业重要的文化识别符号，是企业理念、企业精神、企业价值观的视觉载体。导入VIS系统是企业在文化和视觉上的一种统一，是一个企业提升企业凝聚力、塑造强有力的竞争团队、最直接的方法和渠道。1.1门户识别标志“广东移动”门户识别标志将取用中国移动的新识别标志，新识别包括：北京2008年奥运会标志、“中国移动”的企业符号和中英文字体。a：北京2008年奥运会标志b：“中国移动”企业识别标志c：“中国移动”企业符号d：“中国移动”的中文字体e：“中国移动”英文字体企业符号诠释：一组回旋错落的线条组成了一个平面造型为六面体的网络结构，象征着移动通信的蜂窝网络。线条纵横交错，着尾相连，其中包含了“CHINA MOBILE”的缩写“C”和“M”两个字母，寓意中国移动通信四通八达，无处不在。两组线条犹如握在一起的两只手，象征着中国移动通信通过自己的服务，拉近了人与人之间的距离；线条组成的图案适合在圆形（地球）之中，取其意为“全球通”。标志的尺寸与比例是固定的，应用时，各地不能自由更换，一切缩小与放大，必须是原标志的大小的百分比。1.2门户标准字、辅助字体考虑到各用户的系统字体，“广东移动”门户所使用的标准字规定为：中文标准字体为“宋体”；辅助字体为“方正黑体简体”；英文标准字体为Times New Roman;辅助字体主要用于题头图或页面中其它图片中，以保证页面的视觉效果。作为中文和英文字体字体对于文字大小及间距（字距和行距）将会在第二部分应用设计系统上详细说明。1.3门户标准色、辅助色彩“广东移动”门户所使用的标准色为企业的标准蓝色，富有高科技感、现代感、亲和力强、大方、稳重。使用时，必须依据本页所提供的色彩值。辅助色彩的设定是对标准色的补充和衬托，能丰富门户形象的表现力，使应用设计更具有选择性和针对性。本说明书将提供一套辅助色彩，使用时，必须依据本页所提供的色彩值。1.4标志的样式“广东移动”特别对门户标志的样式作了严格的要求，使用时请严格遵守以下规范。因标志色彩丰富，使用暗色调背景将影响标志的整体效果，要求背景色为明色调，样式如下，各地不能自由更换。有特殊情况需要变更标志的样式，必须提交由省移动审核通过后使用。第二部分：移动UI规范2.1应用系统界面组成我的工作台列表页面列表类型一表单页面2.2界面元素详细介绍2.2.1登录页设计规范（logon / lg）图例说明：规范说明：ID设计要素相关属性以及设计标准主体 宽度：规定为屏幕宽度的百分之百； 高度：规定为屏幕高度的百分之百； 背景线条 图例： 第一条线条：1颜色：#f3f3f3;2高度：35px 第二条线条：1颜色：# E9E9E9;2高度：55px3间距： 1）上下间距分别为： 5px 第三条线条：1颜色：#f3f3f3;2高度：35px主体外包框 顶部光面图例： 顶部高度：50px 顶部包框弧度：4px 顶部包框颜色：#B2B2B2 顶部背景：1渐变（#FFFFFD#EAEAEA, 75%#F1F1F1 ,90%#D7D7D7） 底部背景图例： 底部高度：55px 底部背景：1渐变：（#D7D7D7#EBEBEB, 40%#FFFFFF）主体内背景 图例： 宽度：640px 高度：195px 背景颜色：1渐变：（#9DC0F9,20%#F5FAFF, 80%）系统标识语 图例： 详见横幅设计规范中的“系统标识语”；公司LOGO 图例： 详见横幅设计规范中的“公司LOGO”；登录框 图例： 字体：1字体大小：11px2字体类型：宋体3字体颜色：#333333 文本框：1宽度：195px2高度：18px3边线框样式：1px solid #B2B2B24间距： 1）上下间距各为：5px 按钮：1对齐：与文本框左边线平齐；2间距：右,10px；范例：2.2.2我的工作台(首页)页面设计规范（）图例说明：规范说明：ID设计要素相关属性以及设计标准Webpart框架 Webpart头图例： Webpart弧度：10px Webpart头行高：1.黄金高度：25-28px；2.浮动范围：23px-30px Webpart头字体大小：9pt，加粗，左间距20px Webpart头字体颜色：#1C568A Webpart边框图例： Webpart边线：1px solid # DBDBDB Webpart底部弧度：10px图文导航区 图例： 四周边距：8px 图片文字：宽80px，高65px 图片大小：48x48 字体大小：9pt 字体类型：宋体 字体颜色：#999999 内部边线：1px solid #DBDBDB待办列表区 图例： 字体大小：9pt； 字体类型：宋体 字体颜色：# 333333 字体位置：水平居左 左间距：3px 背景颜色1：#ffffff 背景颜色2：#F2F5F9 行高：1.黄金高度：20-25px； 列表前小图标大小：16x16；（根据程序需要可省略）图标展示区1 图标展示区2 根据系统需要，可插入相关图表，见图例范例：2.2.3横幅设计规范（banner / bn）图例说明：规范说明：ID设计要素相关属性以及设计标准主体 宽度：规定为可用宽度的百分之百； 高度：65px1黄金高度：60-70px2浮动范围：55px-80px 表现形式：（横向）长方形 常用格式：jpg、gif、swf等 质量大小：1图片：2030k2Swf：4050k公司logo 图例： 宽度：与banner的图像相匹配 高度：与banner的图像相匹配 间距：1左右间距分别为：2030px2上下间距分别为：25px 位置：banner的左部系统标识语 图例： 宽度：与banner的图像相匹配 高度：与banner的图像相匹配 间距：1左右间距分别为：无限定，摆放在banner偏有即可2上下间距分别为：25px 位置：banner的中部偏右；细节说明 字体：1字体大小：24点（ps）2字体类型：华康简综艺3表现形式：1）描边2）字体颜色，渐变（#072798-#3C96D6）3）投影系统标识图 图例： 宽度：与banner的图像相匹配 高度：与banner的图像相匹配 间距：1左右间距分别为：向右顶边2上下间距分别为：上下顶边 位置：banner的右部顶边； 描述：能体现系统特色的图片范例：2.2.4导航菜单设计规范（navigation / nv）图例说明：规范说明：ID设计要素相关属性以及设计标准主体 宽度：规定为可用宽度的百分之百； 高度：28px1黄金高度：25-28px2浮动范围：23px-30px 表现形式：（横向）长方形 背景颜色：1渐变（# EFF6FF - # 94B5E7,95%） 常用格式：jpg、gif、swf等 质量大小：1图片：510k2Swf：4050k 左栏上弧 图例： 宽度：与整个界面宽度相匹配，15：100 高度：与导航菜单高度相匹配，28px 间距：1左右间距分别为：左，20px2上下间距分别为：上，18px，下，顶边 位置：导航菜单的左部；细节说明 弧形：1宽度：165px；1）黄金宽度：160200px2）浮动范围：150250px2弧度：10px3弧高：10px;菜单背景 图例： 宽度：与整个界面宽度相匹配，15：100 高度：与导航菜单高度相匹配，28px 间距：1左右间距分别为：左，20px2上下间距分别为：上，18px，下，顶边 位置：导航菜单，左栏上弧右间距10px；细节说明 字体1字体大小：13px2字体类型：宋体3字体颜色：# 1C568A 背景：1弧度：2px2弧高：23px3表现形式：1）描边（# B1CBF2）2）渐变（# ECF3FA - # BDD2F0,20% - # BDD2F0）范例：2.2.5左栏二级导航菜单设计规范（leftbar / lb）图例说明：规范说明：ID设计要素相关属性以及设计标准主体 宽度：165px； 1黄金宽度：160200px2浮动范围：150250px 高度：规定为屏幕分辨率高度的百分之百 左右边线：1颜色：#A8CFEB;2宽度：1px 表现形式：（纵向）长方形图像 常用格式：jpg、gif等 质量大小：1图片：510k2Swf：4050k 用户信息 图例： 宽度：在主体宽度之内 高度：20px 字体：1字体大小：11px2字体类型：宋体3字体颜色：#333333 间距：1左右间距分别为：左，15px 菜单标题 图标： 宽度：在主体宽度之内 高度：23px 字体：1字体大小：13px2字体类型：宋体3字体颜色：#3333334字体表现：加粗 间距：1左右间距分别为：左，15px 图标：1图标不做限制，但图片大小必须是：16x16、24x24菜单子标题 图例： 宽度：在主体宽度之内 高度：23px 字体：1字体大小：13px2字体类型：宋体3字体颜色：#3333334字体表现：加粗 背景：1渐变（# A8CFEB,4%- # ffffff,6% - # DAE8FE,10% - #F5FAFF） 间距：1左右间距分别为：左，15px 图标：1图标不做限制，但图片大小必须是：16x16菜单列表 图例： 宽度：在主体宽度之内 高度：22px 字体：1字体大小：11px2字体类型：宋体3字体颜色：#333333 背景：# F0F8FF 间距：1左右间距分别为：左，15px 图标：1图标不做限制，但图片大小必须是：16x16、24x24滚动信息 宽度：在主体宽度之内； 高度：100px 四周边线：1颜色：#A8CFEB;2宽度：1px 背景样色：F0F8FF底部阴影 图例： 高度：13px 宽度：8px 位置：二级导航菜单左右两边下部； 表现形式：1渐变（# 000000-# ffffff） 透明度：20%范例：2.2.6底栏版权信息设计规范（copyright / cr）图例说明：规范说明：ID设计要素相关属性以及设计标准主体 宽度：规定为屏幕分辨率宽度的百分之百； 高度：25px1黄金高度：25-28px2浮动范围：23px-30px 表现形式：（横向）长方形图像 背景颜色：1渐变（# DEEBFE - # 83A7E1） 常用格式：jpg、gif等 质量大小：1图片：510k2Swf：4050k左栏下弧 图例： 宽度：与整个界面宽度相匹配，15：100 高度：与底栏版权信息高度相匹配，25px 间距：1左右间距分别为：左，20px2上下间距分别为：上，18px，下，顶边 位置：底栏版权信息的左部；细节说明 弧形：1宽度：165px；1）黄金宽度：160200px2）浮动范围：150250px2弧度：10px3弧高：10px; 版权标识语 图例： 宽度：规定为屏幕分辨率宽度的百分之百 高度：与底栏版权信息高度相匹配，25px 字体：1字体大小：11px2字体类型：宋体3字体颜色：#1C568A 间距：1水平居中2纵向居中 位置：底栏版权信息的中部；范例：2.2.7列表页面设计规范（datagrid / dg ; gridview / gv）图例说明：规范说明：ID设计要素相关属性以及设计标准主体 宽度：规定为屏幕分辨率宽度的百分之百； 高度：规定为屏幕分辨率高度的百分之百 边框：1px solid #A8CFEB； 位置：包在每个表单的外边列表标题 图标： 宽度：15个字以内 高度：23px 字体：1字体大小：13px2字体类型：宋体3字体颜色：#1C568A4字体表现：加粗 图标：1图标不做限制，但图片大小必须是：16x16 位置：列表页面的左上角列表按钮 图例： 宽度：根据按钮字数可自动伸缩 高度：22px 字体：1字体大小：11px2字体类型：宋体3字体颜色：#1C568A 背景：1边线：1px solid #A8CFEB2渐变（# D9E8FE- # EFF6FF,20% - # C7DCFF,50% - # D7E7FE） 位置：列表页面的右上角列表表头 图例： 高度：25px1.黄金高度：23-25px；2.浮动范围：20px-30px 字体：1字体大小：11px2字体类型：宋体3字体颜色：#1C568A 背景：1边线：1px solid #A8CFEB2渐变（# EDF4FE- # B4CEF3,88% - # ffffff,93% - # B1CBF2,96%） 位置：列表的表头位置列表行1 图例： 高度：23px1.黄金高度：23-25px； 字体：1字体大小：11px2字体类型：宋体3字体颜色：#1C568A 底边线：1px dotted # A8CFEB 间距：1左右间距分别为：左，3px 位置：列表框内列表行2 图例： 高度：23px1.黄金高度：23-25px； 字体：1字体大小：11px2字体类型：宋体3字体颜色：#1C568A 底边线：1px dotted # A8CFEB 背景颜色：渐变（# EBF3FF-#ffffff） 间距：1左右间距分别为：左，3px 位置：列表框内列表翻页 图例： 高度：25px1.黄金高度：23-25px； 字体：1字体大小：11px2字体类型：宋体3字体颜色：#1C568A4表现形式：加粗 间距：1左右间距分别为：左边顶边 位置：列表的底部范例：2.2.8表单页面设计规范（formitem / fi）图例说明：规范说明：ID设计要素相关属性以及设计标准主体 宽度：规定为屏幕分辨率宽度的百分之百； 高度：规定为屏幕分辨率宽度的百分之百； 边框：1px solid #A8CFEB 位置：包在每个表单的外边表单字段栏 图标： 宽度：100px 高度：22px1黄金高度：20-25px；2浮动范围：20px-30px 字体：1字体大小：11px2字体类型：宋体3字体颜色：#333333 背景颜色：#E4EFFE 间距：1左右间距分别为：左，15px 位置：表单的左边表单信息栏 高度：22px1黄金高度：20-25px；2浮动范围：20px-30px 背景颜色：#F0F8FF 间距：1左右间距分别为：左，3px 位置：表单的左边 图例： 文本区域实例说明：1字体大小：11px2字体类型：宋体3字体颜色：#333333 图例： 按钮实例说明：1高度：20px2左右间距分别为：13px3. 边角，3度平角4背景1）边线：1px solid #A8CFEB2）渐变（#D9E8FE- # EFF5FF,85 % - # DFECFE,96%） 图例： 文本框实例说明：1高度：20px2. 边线：1px solid #A8CFEB 图例： 下拉框实例说明：1高度：20px 图例： 单选框实例说明 图例： 多选框实例说明表单标题栏 图例： 高度：25px1.黄金高度：23-25px；2.浮动范围：20px-30px 字体：1字体大小：11px2字体类型：宋体3字体颜色：#1C568A4表现形式：加粗 背景：1边线：1px solid #A8CFEB2渐变（# EDF4FE- # B4CEF3,88% - # ffffff,93% - # B1CBF2,96%） 位置：列表的表头位置范例：2.2.9弹出框设计规范（openwin /