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

第一部分：移动VI设计VIS是VisualIdentitySystem的简称，即视觉识别系统，VIS是一个企业重要的文化识别符号，是企业理念、企业精神、企业价值观的视觉载体。导入VIS系统是企业在文化和视觉上的一种统一，是一个企业提升企业凝聚力、塑造强有力的竞争团队、最直接的方法和渠道。1.1．门户识别标志“广东移动”门户识别标志将取用中国移动的新识别标志，新识别包括：北京2008年奥运会标志、“中国移动”的企业符号和中英文字体。a：北京2008年奥运会标志b：“中国移动”企业识别标志c：“中国移动”企业符号d：“中国移动”的中文字体e：“中国移动”英文字体企业符号诠释：一组回旋错落的线条组成了一个平面造型为六面体的网络结构，象征着移动通信的蜂窝网络。线条纵横交错，着尾相连，其中包含了“CHINAMOBILE”的缩写“C”和“M”两个字母，寓意中国移动通信四通八达，无处不在。两组线条犹如握在一起的两只手，象征着中国移动通信通过自己的服务，拉近了人与人之间的距离；线条组成的图案适合在圆形（地球）之中，取其意为“全球通”。标志的尺寸与比例是固定的，应用时，各地不能自由更换，一切缩小与放大，必须是原标志的大小的百分比。1.2．门户标准字、辅助字体考虑到各用户的系统字体，“广东移动”门户所使用的标准字规定为：中文标准字体为“宋体”；辅助字体为“方正黑体简体”；英文标准字体为TimesNewRoman;辅助字体主要用于题头图或页面中其它图片中，以保证页面的视觉效果。作为中文和英文字体字体对于文字大小及间距（字距和行距）将会在第二部分应用设计系统上详细说明。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．边线框样式：1pxsolid#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边线：1pxsolid#DBDBDBWebpart底部弧度：10px②图文导航区图例：四周边距：8px图片＋文字：宽80px，高65px图片大小：48x48字体大小：9pt字体类型：宋体字体颜色：#999999内部边线：1pxsolid#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．图片：20－30k2．Swf：40－50k②公司logo图例：宽度：与banner的图像相匹配高度：与banner的图像相匹配间距：1．左右间距分别为：20－30px2．上下间距分别为：2－5px位置：banner的左部③系统标识语图例：宽度：与banner的图像相匹配高度：与banner的图像相匹配间距：1．左右间距分别为：无限定，摆放在banner偏有即可2．上下间距分别为：2－5px位置：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．图片：5－10k2．Swf：40－50k②左栏上弧图例：宽度：与整个界面宽度相匹配，15：100高度：与导航菜单高度相匹配，28px间距：1．左右间距分别为：左，20px2．上下间距分别为：上，18px，下，顶边位置：导航菜单的左部；＝＝＝细节说明＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝弧形：1．宽度：165px；1）黄金宽度：160－200px2）浮动范围：150－250px2．弧度：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．黄金宽度：160－200px2．浮动范围：150－250px高度：规定为屏幕分辨率高度的百分之百左右边线：1．颜色：#A8CFEB;2．宽度：1px表现形式：（纵向）长方形图像常用格式：jpg、gif等质量大小：1．图片：5－10k2．Swf：40－50k②用户信息图例：宽度：在主体宽度之内高度：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．图片：5－10k2．Swf：40－50k②左栏下弧图例：宽度：与整个界面宽度相匹配，15：100高度：与底栏版权信息高度相匹配，25px间距：1．左右间距分别为：左，20px2．上下间距分别为：上，18px，下，顶边位置：底栏版权信息的左部；＝＝＝细节说明＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝弧形：1．宽度：165px；1）黄金宽度：160－200px2）浮动范围：150－250px2．弧度：10px3．弧高：10px;③版权标识语图例：宽度：规定为屏幕分辨率宽度的百分之百高度：与底栏版权信息高度相匹配，25px字体：1．字体大小：11px2．字体类型：宋体3．字体颜色：#1C568A间距：1．水平居中2．纵向居中位置：底栏版权信息的中部；·范例：2.2.7．列表页面设计规范（datagrid/dg;gridview/gv）·图例说明：·规范说明：ID设计要素相关属性以及设计标准①主体宽度：规定为屏幕分辨率宽度的百分之百；高度：规定为屏幕分辨率高度的百分之百边框：1pxsolid#A8CFEB；位置：包在每个表单的外边②列表标题图标：宽度：15个字以内高度：23px字体