1、第一部分：移動(dòng)VI設(shè)計(jì)VIS是Visual Identity System的簡(jiǎn)稱，即視覺識(shí)別系統(tǒng)，VIS是一個(gè)企業(yè)重要的文化識(shí)別符號(hào)，是企業(yè)理念、企業(yè)精神、企業(yè)價(jià)值觀的視覺載體。導(dǎo)入VIS系統(tǒng)是企業(yè)在文化和視覺上的一種統(tǒng)一，是一個(gè)企業(yè)提升企業(yè)凝聚力、塑造強(qiáng)有力的競(jìng)爭(zhēng)團(tuán)隊(duì)、最直接的方法和渠道。1.1門戶識(shí)別標(biāo)志“廣東移動(dòng)”門戶識(shí)別標(biāo)志將取用中國(guó)移動(dòng)的新識(shí)別標(biāo)志，新識(shí)別包括：北京2008年奧運(yùn)會(huì)標(biāo)志、“中國(guó)移動(dòng)”的企業(yè)符號(hào)和中英文字體。a：北京2008年奧運(yùn)會(huì)標(biāo)志b：“中國(guó)移動(dòng)”企業(yè)識(shí)別標(biāo)志c：“中國(guó)移動(dòng)”企業(yè)符號(hào)d：“中國(guó)移動(dòng)”的中文字體e：“中國(guó)移動(dòng)”英文字體企業(yè)符號(hào)詮釋：一組回旋錯(cuò)落的線條組

2、成了一個(gè)平面造型為六面體的網(wǎng)絡(luò)結(jié)構(gòu)，象征著移動(dòng)通信的蜂窩網(wǎng)絡(luò)。線條縱橫交錯(cuò)，著尾相連，其中包含了“CHINA MOBILE”的縮寫“C”和“M”兩個(gè)字母，寓意中國(guó)移動(dòng)通信四通八達(dá)，無處不在。兩組線條猶如握在一起的兩只手，象征著中國(guó)移動(dòng)通信通過自己的服務(wù)，拉近了人與人之間的距離；線條組成的圖案適合在圓形（地球）之中，取其意為“全球通”。標(biāo)志的尺寸與比例是固定的，應(yīng)用時(shí)，各地不能自由更換，一切縮小與放大，必須是原標(biāo)志的大小的百分比。1.2門戶標(biāo)準(zhǔn)字、輔助字體考慮到各用戶的系統(tǒng)字體，“廣東移動(dòng)”門戶所使用的標(biāo)準(zhǔn)字規(guī)定為：中文標(biāo)準(zhǔn)字體為“宋體”；輔助字體為“方正黑體簡(jiǎn)體”；英文標(biāo)準(zhǔn)字體為Times N

3、ew Roman;輔助字體主要用于題頭圖或頁(yè)面中其它圖片中，以保證頁(yè)面的視覺效果。作為中文和英文字體字體對(duì)于文字大小及間距（字距和行距）將會(huì)在第二部分應(yīng)用設(shè)計(jì)系統(tǒng)上詳細(xì)說明。1.3門戶標(biāo)準(zhǔn)色、輔助色彩“廣東移動(dòng)”門戶所使用的標(biāo)準(zhǔn)色為企業(yè)的標(biāo)準(zhǔn)藍(lán)色，富有高科技感、現(xiàn)代感、親和力強(qiáng)、大方、穩(wěn)重。使用時(shí)，必須依據(jù)本頁(yè)所提供的色彩值。輔助色彩的設(shè)定是對(duì)標(biāo)準(zhǔn)色的補(bǔ)充和襯托，能豐富門戶形象的表現(xiàn)力，使應(yīng)用設(shè)計(jì)更具有選擇性和針對(duì)性。本說明書將提供一套輔助色彩，使用時(shí)，必須依據(jù)本頁(yè)所提供的色彩值。1.4標(biāo)志的樣式“廣東移動(dòng)”特別對(duì)門戶標(biāo)志的樣式作了嚴(yán)格的要求，使用時(shí)請(qǐng)嚴(yán)格遵守以下規(guī)范。因標(biāo)志色彩豐富，使用暗色

4、調(diào)背景將影響標(biāo)志的整體效果，要求背景色為明色調(diào)，樣式如下，各地不能自由更換。有特殊情況需要變更標(biāo)志的樣式，必須提交由省移動(dòng)審核通過后使用。第二部分：移動(dòng)UI規(guī)范2.1應(yīng)用系統(tǒng)界面組成我的工作臺(tái)列表頁(yè)面列表類型一表單頁(yè)面2.2界面元素詳細(xì)介紹2.2.1登錄頁(yè)設(shè)計(jì)規(guī)范（logon / lg）圖例說明：規(guī)范說明：ID設(shè)計(jì)要素相關(guān)屬性以及設(shè)計(jì)標(biāo)準(zhǔn)主體 寬度：規(guī)定為屏幕寬度的百分之百； 高度：規(guī)定為屏幕高度的百分之百； 背景線條 圖例： 第一條線條：1顏色：#f3f3f3;2高度：35px 第二條線條：1顏色：# E9E9E9;2高度：55px3間距： 1）上下間距分別為： 5px 第三條線條：1顏色：

5、#f3f3f3;2高度：35px主體外包框 頂部光面圖例： 頂部高度：50px 頂部包框弧度：4px 頂部包框顏色：#B2B2B2 頂部背景：1漸變（#FFFFFD#EAEAEA, 75%#F1F1F1 ,90%#D7D7D7） 底部背景圖例： 底部高度：55px 底部背景：1漸變：（#D7D7D7#EBEBEB, 40%#FFFFFF）主體內(nèi)背景 圖例： 寬度：640px 高度：195px 背景顏色：1漸變：（#9DC0F9,20%#F5FAFF, 80%）系統(tǒng)標(biāo)識(shí)語 圖例： 詳見橫幅設(shè)計(jì)規(guī)范中的“系統(tǒng)標(biāo)識(shí)語”；公司LOGO 圖例： 詳見橫幅設(shè)計(jì)規(guī)范中的“公司LOGO”；登錄框 圖例： 字體

6、：1字體大?。?1px2字體類型：宋體3字體顏色：# 文本框：1寬度：195px2高度：18px3邊線框樣式：1px solid #B2B2B24間距： 1）上下間距各為：5px 按鈕：1對(duì)齊：與文本框左邊線平齊；2間距：右,10px；范例：2.2.2我的工作臺(tái)(首頁(yè))頁(yè)面設(shè)計(jì)規(guī)范（）圖例說明：規(guī)范說明：ID設(shè)計(jì)要素相關(guān)屬性以及設(shè)計(jì)標(biāo)準(zhǔn)Webpart框架 Webpart頭圖例： Webpart弧度：10px Webpart頭行高：1.黃金高度：25-28px；2.浮動(dòng)范圍：23px-30px Webpart頭字體大?。?pt，加粗，左間距20px Webpart頭字體顏色：#1C568A We

7、bpart邊框圖例： Webpart邊線：1px solid # DBDBDB Webpart底部弧度：10px圖文導(dǎo)航區(qū) 圖例： 四周邊距：8px 圖片文字：寬80px，高65px 圖片大?。?8x48 字體大?。?pt 字體類型：宋體 字體顏色：# 內(nèi)部邊線：1px solid #DBDBDB待辦列表區(qū) 圖例： 字體大?。?pt； 字體類型：宋體 字體顏色：# 字體位置：水平居左 左間距：3px 背景顏色1：#ffffff 背景顏色2：#F2F5F9 行高：1.黃金高度：20-25px； 列表前小圖標(biāo)大?。?6x16；（根據(jù)程序需要可省略）圖標(biāo)展示區(qū)1 圖標(biāo)展示區(qū)2 根據(jù)系統(tǒng)需要，可插入相

8、關(guān)圖表，見圖例范例：2.2.3橫幅設(shè)計(jì)規(guī)范（banner / bn）圖例說明：規(guī)范說明：ID設(shè)計(jì)要素相關(guān)屬性以及設(shè)計(jì)標(biāo)準(zhǔn)主體 寬度：規(guī)定為可用寬度的百分之百； 高度：65px1黃金高度：60-70px2浮動(dòng)范圍：55px-80px 表現(xiàn)形式：（橫向）長(zhǎng)方形 常用格式：jpg、gif、swf等 質(zhì)量大?。?圖片：2030k2Swf：4050k公司logo 圖例： 寬度：與banner的圖像相匹配 高度：與banner的圖像相匹配 間距：1左右間距分別為：2030px2上下間距分別為：25px 位置：banner的左部系統(tǒng)標(biāo)識(shí)語 圖例： 寬度：與banner的圖像相匹配 高度：與banner的圖像

9、相匹配 間距：1左右間距分別為：無限定，擺放在banner偏有即可2上下間距分別為：25px 位置：banner的中部偏右；細(xì)節(jié)說明 字體：1字體大?。?4點(diǎn)（ps）2字體類型：華康簡(jiǎn)綜藝3表現(xiàn)形式：1）描邊2）字體顏色，漸變（#-#3C96D6）3）投影系統(tǒng)標(biāo)識(shí)圖 圖例： 寬度：與banner的圖像相匹配 高度：與banner的圖像相匹配 間距：1左右間距分別為：向右頂邊2上下間距分別為：上下頂邊 位置：banner的右部頂邊； 描述：能體現(xiàn)系統(tǒng)特色的圖片范例：2.2.4導(dǎo)航菜單設(shè)計(jì)規(guī)范（navigation / nv）圖例說明：規(guī)范說明：ID設(shè)計(jì)要素相關(guān)屬性以及設(shè)計(jì)標(biāo)準(zhǔn)主體 寬度：規(guī)定為可

10、用寬度的百分之百； 高度：28px1黃金高度：25-28px2浮動(dòng)范圍：23px-30px 表現(xiàn)形式：（橫向）長(zhǎng)方形 背景顏色：1漸變（# EFF6FF - # 94B5E7,95%） 常用格式：jpg、gif、swf等 質(zhì)量大小：1圖片：510k2Swf：4050k 左欄上弧 圖例： 寬度：與整個(gè)界面寬度相匹配，15：100 高度：與導(dǎo)航菜單高度相匹配，28px 間距：1左右間距分別為：左，20px2上下間距分別為：上，18px，下，頂邊 位置：導(dǎo)航菜單的左部；細(xì)節(jié)說明 弧形：1寬度：165px；1）黃金寬度：160200px2）浮動(dòng)范圍：150250px2弧度：10px3弧高：10px;菜

11、單背景 圖例： 寬度：與整個(gè)界面寬度相匹配，15：100 高度：與導(dǎo)航菜單高度相匹配，28px 間距：1左右間距分別為：左，20px2上下間距分別為：上，18px，下，頂邊 位置：導(dǎo)航菜單，左欄上弧右間距10px；細(xì)節(jié)說明 字體1字體大?。?3px2字體類型：宋體3字體顏色：# 1C568A 背景：1弧度：2px2弧高：23px3表現(xiàn)形式：1）描邊（# B1CBF2）2）漸變（# ECF3FA - # BDD2F0,20% - # BDD2F0）范例：2.2.5左欄二級(jí)導(dǎo)航菜單設(shè)計(jì)規(guī)范（leftbar / lb）圖例說明：規(guī)范說明：ID設(shè)計(jì)要素相關(guān)屬性以及設(shè)計(jì)標(biāo)準(zhǔn)主體 寬度：165px； 1黃

12、金寬度：160200px2浮動(dòng)范圍：150250px 高度：規(guī)定為屏幕分辨率高度的百分之百 左右邊線：1顏色：#A8CFEB;2寬度：1px 表現(xiàn)形式：（縱向）長(zhǎng)方形圖像 常用格式：jpg、gif等 質(zhì)量大?。?圖片：510k2Swf：4050k 用戶信息 圖例： 寬度：在主體寬度之內(nèi) 高度：20px 字體：1字體大?。?1px2字體類型：宋體3字體顏色：# 間距：1左右間距分別為：左，15px 菜單標(biāo)題 圖標(biāo)： 寬度：在主體寬度之內(nèi) 高度：23px 字體：1字體大?。?3px2字體類型：宋體3字體顏色：#4字體表現(xiàn)：加粗 間距：1左右間距分別為：左，15px 圖標(biāo)：1圖標(biāo)不做限制，但圖片大小

13、必須是：16x16、24x24菜單子標(biāo)題 圖例： 寬度：在主體寬度之內(nèi) 高度：23px 字體：1字體大?。?3px2字體類型：宋體3字體顏色：#4字體表現(xiàn)：加粗 背景：1漸變（# A8CFEB,4%- # ffffff,6% - # DAE8FE,10% - #F5FAFF） 間距：1左右間距分別為：左，15px 圖標(biāo)：1圖標(biāo)不做限制，但圖片大小必須是：16x16菜單列表 圖例： 寬度：在主體寬度之內(nèi) 高度：22px 字體：1字體大小：11px2字體類型：宋體3字體顏色：# 背景：# F0F8FF 間距：1左右間距分別為：左，15px 圖標(biāo)：1圖標(biāo)不做限制，但圖片大小必須是：16x16、24x

14、24滾動(dòng)信息 寬度：在主體寬度之內(nèi)； 高度：100px 四周邊線：1顏色：#A8CFEB;2寬度：1px 背景樣色：F0F8FF底部陰影 圖例： 高度：13px 寬度：8px 位置：二級(jí)導(dǎo)航菜單左右兩邊下部； 表現(xiàn)形式：1漸變（# -# ffffff） 透明度：20%范例：2.2.6底欄版權(quán)信息設(shè)計(jì)規(guī)范（copyright / cr）圖例說明：規(guī)范說明：ID設(shè)計(jì)要素相關(guān)屬性以及設(shè)計(jì)標(biāo)準(zhǔn)主體 寬度：規(guī)定為屏幕分辨率寬度的百分之百； 高度：25px1黃金高度：25-28px2浮動(dòng)范圍：23px-30px 表現(xiàn)形式：（橫向）長(zhǎng)方形圖像 背景顏色：1漸變（# DEEBFE - # 83A7E1） 常用

15、格式：jpg、gif等 質(zhì)量大?。?圖片：510k2Swf：4050k左欄下弧 圖例： 寬度：與整個(gè)界面寬度相匹配，15：100 高度：與底欄版權(quán)信息高度相匹配，25px 間距：1左右間距分別為：左，20px2上下間距分別為：上，18px，下，頂邊 位置：底欄版權(quán)信息的左部；細(xì)節(jié)說明 弧形：1寬度：165px；1）黃金寬度：160200px2）浮動(dòng)范圍：150250px2弧度：10px3弧高：10px; 版權(quán)標(biāo)識(shí)語 圖例： 寬度：規(guī)定為屏幕分辨率寬度的百分之百 高度：與底欄版權(quán)信息高度相匹配，25px 字體：1字體大小：11px2字體類型：宋體3字體顏色：#1C568A 間距：1水平居中2縱向

16、居中 位置：底欄版權(quán)信息的中部；范例：2.2.7列表頁(yè)面設(shè)計(jì)規(guī)范（datagrid / dg ; gridview / gv）圖例說明：規(guī)范說明：ID設(shè)計(jì)要素相關(guān)屬性以及設(shè)計(jì)標(biāo)準(zhǔn)主體 寬度：規(guī)定為屏幕分辨率寬度的百分之百； 高度：規(guī)定為屏幕分辨率高度的百分之百 邊框：1px solid #A8CFEB； 位置：包在每個(gè)表單的外邊列表標(biāo)題 圖標(biāo)： 寬度：15個(gè)字以內(nèi) 高度：23px 字體：1字體大?。?3px2字體類型：宋體3字體顏色：#1C568A4字體表現(xiàn)：加粗 圖標(biāo)：1圖標(biāo)不做限制，但圖片大小必須是：16x16 位置：列表頁(yè)面的左上角列表按鈕 圖例： 寬度：根據(jù)按鈕字?jǐn)?shù)可自動(dòng)伸縮 高度：2

17、2px 字體：1字體大?。?1px2字體類型：宋體3字體顏色：#1C568A 背景：1邊線：1px solid #A8CFEB2漸變（# D9E8FE- # EFF6FF,20% - # C7DCFF,50% - # D7E7FE） 位置：列表頁(yè)面的右上角列表表頭 圖例： 高度：25px1.黃金高度：23-25px；2.浮動(dòng)范圍：20px-30px 字體：1字體大?。?1px2字體類型：宋體3字體顏色：#1C568A 背景：1邊線：1px solid #A8CFEB2漸變（# EDF4FE- # B4CEF3,88% - # ffffff,93% - # B1CBF2,96%） 位置：列表的表

18、頭位置列表行1 圖例： 高度：23px1.黃金高度：23-25px； 字體：1字體大小：11px2字體類型：宋體3字體顏色：#1C568A 底邊線：1px dotted # A8CFEB 間距：1左右間距分別為：左，3px 位置：列表框內(nèi)列表行2 圖例： 高度：23px1.黃金高度：23-25px； 字體：1字體大?。?1px2字體類型：宋體3字體顏色：#1C568A 底邊線：1px dotted # A8CFEB 背景顏色：漸變（# EBF3FF-#ffffff） 間距：1左右間距分別為：左，3px 位置：列表框內(nèi)列表翻頁(yè) 圖例： 高度：25px1.黃金高度：23-25px； 字體：1字體大

19、小：11px2字體類型：宋體3字體顏色：#1C568A4表現(xiàn)形式：加粗 間距：1左右間距分別為：左邊頂邊 位置：列表的底部范例：2.2.8表單頁(yè)面設(shè)計(jì)規(guī)范（formitem / fi）圖例說明：規(guī)范說明：ID設(shè)計(jì)要素相關(guān)屬性以及設(shè)計(jì)標(biāo)準(zhǔn)主體 寬度：規(guī)定為屏幕分辨率寬度的百分之百； 高度：規(guī)定為屏幕分辨率寬度的百分之百； 邊框：1px solid #A8CFEB 位置：包在每個(gè)表單的外邊表單字段欄 圖標(biāo)： 寬度：100px 高度：22px1黃金高度：20-25px；2浮動(dòng)范圍：20px-30px 字體：1字體大?。?1px2字體類型：宋體3字體顏色：# 背景顏色：#E4EFFE 間距：1左右間距

20、分別為：左，15px 位置：表單的左邊表單信息欄 高度：22px1黃金高度：20-25px；2浮動(dòng)范圍：20px-30px 背景顏色：#F0F8FF 間距：1左右間距分別為：左，3px 位置：表單的左邊 圖例： 文本區(qū)域?qū)嵗f明：1字體大?。?1px2字體類型：宋體3字體顏色：# 圖例： 按鈕實(shí)例說明：1高度：20px2左右間距分別為：13px3. 邊角，3度平角4背景1）邊線：1px solid #A8CFEB2）漸變（#D9E8FE- # EFF5FF,85 % - # DFECFE,96%） 圖例： 文本框?qū)嵗f明：1高度：20px2. 邊線：1px solid #A8CFEB 圖例： 下拉框?qū)嵗f明：1高度：20px 圖例： 單選框?qū)嵗f明 圖例： 多選框?qū)嵗f明表單標(biāo)題欄 圖例： 高度：25px1.黃金高度：23-25px；2.浮動(dòng)范圍：20px-30px 字體：1字體大?。?1px2字體類型：宋體3字體顏色：#1C568A4表現(xiàn)形式：加粗 背景：1邊線：1px solid #A8CFEB2漸變（# EDF4FE- # B4CEF3,88% - # ffffff,93% - # B1CBF2,96%） 位置：列表的表頭位置范例：2.2.9彈出框設(shè)計(jì)規(guī)范（openwin / ow）圖例