您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 项目/工程管理 > 广东移动应用系统设计规范说明书
第一部分:移动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弧度:10pxWebpart头行高:1.黄金高度:25-28px;2.浮动范围:23px-30pxWebpart头字体大小:9pt,加粗,左间距20pxWebpart头字体颜色:#1C568AWebpart边框图例:Webpart边线:1pxsolid#DBDBDBWebpart底部弧度: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字体
本文标题:广东移动应用系统设计规范说明书
链接地址:https://www.777doc.com/doc-4821287 .html