企業(yè)應(yīng)用集成之界面(UI)集成規(guī)范v0.2

QUOTEFILLIN輸入姓名企業(yè)應(yīng)用集成之界面（UI）設(shè)計(jì)規(guī)范2015年4月1 引言 11.1 編寫目的 11.2 適用范圍 11.3 術(shù)語定義 12 概述 22.1 設(shè)計(jì)原則 22.2 界面結(jié)構(gòu) 22.3 配色規(guī)范 32.4 文字使用規(guī)范 42.5 圖片使用規(guī)范 52.6 Logo設(shè)計(jì)規(guī)范 5 Logo設(shè)置規(guī)范 5 系統(tǒng)院Logo設(shè)計(jì) 53 典型頁面布局規(guī)范 63.1 門戶系統(tǒng) 6 登錄頁 6 門戶-新聞首頁 7 門戶-辦公首頁 8 門戶-子頁面（兩欄） 11 門戶新聞?lì)愒敿?xì)頁 133.2 通用應(yīng)用系統(tǒng) 133.2.1 應(yīng)用首頁 13 功能列表頁 15 詳細(xì)功能頁 15 信息編輯頁 16 信息查詢頁 173.3 搜索類 18 搜索條 18 搜索結(jié)果頁面 184 UI開發(fā)規(guī)范 194.1 設(shè)計(jì)工具 194.2 目錄結(jié)構(gòu) 20 Project工程目錄結(jié)構(gòu) 20 WebRoot目錄結(jié)構(gòu) 204.3 UI命名規(guī)范 21 圖片文件命名 21 css文件命名 22 js文件命名 225 UI控件 225.1 Header頭部 225.2 footer版底 235.3 導(dǎo)航欄 235.4 列表框List 245.5 表格 245.6 Tab頁 245.7 操作按鈕 255.8 單選按鈕 255.9 多選按鈕 255.10 圖片輪換 255.11 輸入框 265.12 彈出窗口 265.13 日歷、時(shí)間 276 其他規(guī)約 276.1 版底版權(quán)說明 286.2 兼容性說明 286.3 其他事項(xiàng) 28引言編寫目的本規(guī)范的目的是通過建立UI規(guī)范，貫穿以用戶為中心的設(shè)計(jì)指導(dǎo)方向，以達(dá)到提升用戶體驗(yàn)，控制產(chǎn)品設(shè)計(jì)質(zhì)量，提高設(shè)計(jì)效率的目的。適用范圍本規(guī)范適用XX單位應(yīng)用集成平臺(tái)基于瀏覽器的B/S版軟件項(xiàng)目開發(fā)工作。開發(fā)過程中的模版頁面編寫和模版文件套用工作必須遵照此規(guī)范執(zhí)行。適用對(duì)象為開發(fā)人員、UI設(shè)計(jì)人員、模版編寫人員以及后續(xù)新建業(yè)務(wù)系統(tǒng)等。本規(guī)范不僅用于約束應(yīng)用集成平臺(tái)的建設(shè)過程，對(duì)于與應(yīng)用集成平臺(tái)進(jìn)行集成的各業(yè)務(wù)系統(tǒng)也需要按本規(guī)范嚴(yán)格執(zhí)行。新建系統(tǒng)嚴(yán)格按本規(guī)范執(zhí)行。遺留系統(tǒng)按本規(guī)范進(jìn)行改造，對(duì)于產(chǎn)品無法改造的需要業(yè)務(wù)系統(tǒng)廠商與應(yīng)用集成平臺(tái)實(shí)施方及客戶方達(dá)成一致。術(shù)語定義類型名詞解釋UI——UI即UserInterface（用戶界面）的簡稱，是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。圖片GIFGIF，一種圖像文件格式。GIF文件的數(shù)據(jù)，是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式，其壓縮率一般在50％左右。JPGJPG，一種圖像文件格式。是經(jīng)過靜態(tài)圖象壓縮標(biāo)準(zhǔn)壓縮的圖像文件，具有很高的壓縮比。PNGPNG，一種圖像文件格式。在保留GIF文件格式特性的基礎(chǔ)上，增加了一些GIF文件格式所不具備的特性。同時(shí)，PNG圖片文件壓縮比高，生成文件容量小。Icon指電腦屏幕的桌面上用來指示用戶運(yùn)行各種操作的圖像，作為字符顯示的重要輔助。圖片水印給圖片加上網(wǎng)站標(biāo)志，保護(hù)圖片版權(quán)的一種形式。其他網(wǎng)站Logo在商業(yè)領(lǐng)域，LOGO是標(biāo)志、徽標(biāo)的意思。常見的各種商品的標(biāo)識(shí)即是Logo，它包括文字、圖形、字母、數(shù)字、三維標(biāo)志和顏色的組合。本規(guī)范所指LOGO，是互聯(lián)網(wǎng)上網(wǎng)站用來標(biāo)識(shí)自己的圖形標(biāo)志，一般包含圖形、名稱和域名。超鏈接網(wǎng)頁中，在文字和圖片上設(shè)置的鏈接，用以把用戶導(dǎo)向到新的頁面中。入口用戶點(diǎn)擊進(jìn)入網(wǎng)頁的被鏈接文字或圖片。概述設(shè)計(jì)原則符合用戶界面設(shè)計(jì)規(guī)范頁面設(shè)計(jì)中涉及XX單位視覺識(shí)別內(nèi)容的，嚴(yán)格參照《XX單位視覺識(shí)別系統(tǒng)》（2014版）規(guī)定設(shè)計(jì)。視覺識(shí)別系統(tǒng)對(duì)企業(yè)標(biāo)志與企業(yè)標(biāo)準(zhǔn)字體的各種組合，包括位置、大小、距離均作了詳細(xì)的規(guī)定，要求不得隨意更改。在各種運(yùn)行環(huán)境下的兼容性系統(tǒng)采用B/S結(jié)構(gòu)，要求支持當(dāng)前各流行瀏覽器的兼容性，確保在IE8能夠正常瀏覽。在常用顯示屏大小的情況下，有良好的顯示狀態(tài)，在系統(tǒng)要求最低分辨率以外的情況下也可以正常瀏覽。導(dǎo)航定位清晰易用設(shè)計(jì)時(shí)要對(duì)企業(yè)門戶平臺(tái)的導(dǎo)航系統(tǒng)作出明確的策劃，在視覺上上作出合理的呈現(xiàn)，同時(shí)要充分考慮到用戶的使用習(xí)慣。約定企業(yè)門戶平臺(tái)的主色調(diào)不能超過3種，雖然也可在門戶網(wǎng)站上使用其他色彩，但只能作為點(diǎn)綴和襯托，不能與主題沖突。界面風(fēng)格統(tǒng)一性在界面設(shè)計(jì)中要保持界面風(fēng)格的統(tǒng)一性，統(tǒng)一性包括：使用相同的信息表現(xiàn)方法，如在字體，標(biāo)簽風(fēng)格、顏色、術(shù)語、顯示錯(cuò)誤信息等方面保持一致。界面結(jié)構(gòu)基本結(jié)構(gòu):門戶及子平臺(tái)首頁②發(fā)布類詳細(xì)頁③流程類、表單類界面④供iframe調(diào)用的界面、提示類界面及其他類型說明：門戶及子平臺(tái)首頁適用范圍：適用于統(tǒng)一門戶一二級(jí)頁面、子系統(tǒng)首頁發(fā)布類詳細(xì)頁等適用范圍：信息發(fā)布類詳細(xì)頁面流程類、表單類界面適用范圍：適用于所有流程類頁面供iframe調(diào)用的界面、提示類界面及其他適用范圍：適用于科研項(xiàng)目、保密管理等專業(yè)系統(tǒng)集成到門戶中的頁面配色規(guī)范頁面配色要求以中國船舶集團(tuán)藍(lán)色為主色調(diào)，搭配XX單位視覺識(shí)別系統(tǒng)的標(biāo)準(zhǔn)設(shè)計(jì)中的輔助色。如下圖：文字使用規(guī)范樣式類庫：①文字格式②連接樣式①文字格式12號(hào)字格式：字號(hào)12px┊字體宋體&Arial┊顏色#7F7F7F或其他┊行距21px┊粗體&細(xì)體┊14號(hào)字格式：字號(hào)14px┊字體宋體&Arial┊顏色#333333或其他┊行距24px┊粗體&細(xì)體┊10號(hào)字格式：字號(hào)10px┊字體Arial┊顏色#333333或其他┊行距無┊細(xì)體┊26號(hào)字格式：字號(hào)26px┊字體微軟雅黑&Arial┊顏色#000000或其他┊行距無┊細(xì)體┊說明：10號(hào)字格式，12號(hào)字格式，14號(hào)字格式中的數(shù)字英文字母為Arial，中文為宋體②連接樣式鼠標(biāo)初始：如上鼠標(biāo)經(jīng)過：顏色#006CBD鼠標(biāo)點(diǎn)擊：顏色#006CBD圖片使用規(guī)范圖片規(guī)范是指對(duì)XX單位應(yīng)用集成平臺(tái)上圖片使用做出基本要求，并對(duì)圖片的格式、尺寸、大小等做出規(guī)定。圖片常常是網(wǎng)頁上最引人注目的內(nèi)容，圖片規(guī)范有助于保證圖片的精致和頁面的齊整，進(jìn)而提升網(wǎng)頁乃至整個(gè)網(wǎng)站的品質(zhì)。圖片使用的基本要求圖片的選用與反映的主題一致；圖片畫面顯示清晰，不采用改變顯示尺寸的放大或縮?。粓D片畫面（尤其是人物圖像）不允許變形；圖片文件大小控制在30KB內(nèi)為宜；圖片按照“所屬欄目名_圖片描述名”的規(guī)則命名，圖片名稱均由小寫字母、數(shù)字和“_”組成，不能有空格或其它字符；圖片文件格式GIFXE"GIF"、JPG和PNGXE"JPG"的圖片格式均可被采用，不同格式的圖片的應(yīng)用場景：圖片中的顏色沒有過渡漸變效果的時(shí)候用gif格式的圖片；圖片中的顏色有復(fù)雜的過渡漸變效果的時(shí)候用jpg格式的圖片；圖片中圖形不規(guī)則，但又需要透明邊緣時(shí)，一般使用png格式的圖片。Logo設(shè)計(jì)規(guī)范Logo標(biāo)識(shí)是品牌的視覺象征，對(duì)于品牌的整體傳播至關(guān)重要XX單位Logo的應(yīng)用將遵循以下規(guī)定執(zhí)行。Logo設(shè)置規(guī)范網(wǎng)站的所有頁面中都需要設(shè)置相應(yīng)的Logo標(biāo)識(shí)，且Logo的尺寸應(yīng)保持一致；使用Logo時(shí)需保證Logo的比例以及清晰度。應(yīng)用集成平臺(tái)頁面logo設(shè)計(jì)參照《XX單位視覺識(shí)別系統(tǒng)》（2014版）規(guī)定設(shè)計(jì)。系統(tǒng)院Logo設(shè)計(jì)參照《XX單位視覺識(shí)別系統(tǒng)》（2014版），應(yīng)用集成平臺(tái)logo設(shè)置主要提供以下兩種形式：（1）Logo圖文（中英文）上下組合標(biāo)準(zhǔn)：（2）Logo圖文（中英文）橫排組合標(biāo)準(zhǔn)：典型頁面布局規(guī)范門戶系統(tǒng)登錄頁門戶登錄頁面結(jié)構(gòu)及尺寸設(shè)計(jì)如下門戶-新聞首頁適用范圍：門戶一級(jí)頁面（新聞首頁）頁面要求：在最佳分辨率1280*768，內(nèi)容高度不超過三屏。同時(shí)能夠支持1366*768，1024*768分辨率。頁面總體色調(diào)為軍工藍(lán)。頁面整體分為Header區(qū)/頭部區(qū)、導(dǎo)航區(qū)、信息提醒區(qū)、頭版信息區(qū)，信息發(fā)布區(qū)、工具和綜合查詢區(qū)以及Footer區(qū)/版底區(qū)等幾個(gè)部分，頁面布局如下：具體頁面尺寸如下：門戶-辦公首頁適用范圍：門戶一級(jí)頁面（辦公首頁、二級(jí)應(yīng)用首頁）頁面要求：在最佳分辨率1280*768，內(nèi)容高度不超過兩屏。同時(shí)能夠支持1366*768，1024*768分辨率。頁面總體色調(diào)為軍工藍(lán)。頁面整體分為Header區(qū)/頭部區(qū)、導(dǎo)航區(qū)、鏈接區(qū)、工作區(qū)，工具和提醒區(qū)、以及Footer區(qū)/版底區(qū)等幾個(gè)部分。寬屏下主體內(nèi)容居中顯示header背景元素repead-x填充整個(gè)屏幕。屏幕寬度小于1280px的，頁面按以下規(guī)律進(jìn)行自適應(yīng)調(diào)整。頁面布局如下：具體頁面尺寸如下：內(nèi)容高度超過一屏?xí)r，頭部定高，主體區(qū)高度隨內(nèi)容自適應(yīng)拉抻，界面右側(cè)滾動(dòng)條寬度為16px，界面在滾動(dòng)條以外的屏幕上仍居中顯示。屏幕寬度小于1280px的，不能實(shí)現(xiàn)自適應(yīng)調(diào)整的，將出現(xiàn)橫向滾動(dòng)條，高度為16px，寬屏下主體內(nèi)容居中顯示header背景元素repead-x填充整個(gè)屏幕。屏幕寬度小于1280px的，頁面按以下規(guī)律進(jìn)行自適應(yīng)調(diào)整：門戶新聞?lì)愒敿?xì)頁適用范圍：門戶新聞?lì)愒敿?xì)頁面，新打開新聞公告類詳細(xì)查看頁面；信息發(fā)布的詳細(xì)查看頁以及資源共享類的詳細(xì)查看頁面。Logo、Banner、Footer區(qū)域同門戶首頁，Center中間展示區(qū)展示布局如圖所示：通用應(yīng)用系統(tǒng)應(yīng)用首頁適用范圍：信息發(fā)布、保密管理、項(xiàng)目管理等應(yīng)用系統(tǒng)的首頁在最佳分辨率1024*768，內(nèi)容高度不超過兩屏。同時(shí)能夠支持1366*768，1024*768分辨率。頁面主色調(diào)統(tǒng)一為軍工藍(lán)。最大化窗口狀態(tài)下，頁面布局如下：具體頁面尺寸如下：功能列表頁適用范圍：除門戶、信息發(fā)布平臺(tái)以外的信息發(fā)布、保密管理、項(xiàng)目管理等應(yīng)用系統(tǒng)的功能應(yīng)用頁面。在最佳分辨率1024*768，內(nèi)容高度不超過兩屏。同時(shí)能夠支持1366*768，1024*768分辨率。頁面主色調(diào)統(tǒng)一為軍工藍(lán)。最大化窗口狀態(tài)下，頁面布局如下：詳細(xì)功能頁適用范圍：除門戶、信息發(fā)布平臺(tái)以外的信息發(fā)布、保密管理、項(xiàng)目管理等應(yīng)用系統(tǒng)的功能應(yīng)用頁面。在最佳分辨率1024*768，內(nèi)容高度不超過兩屏，頁面主色調(diào)統(tǒng)一為軍工藍(lán)。最大化窗口狀態(tài)下，頁面布局如下：信息編輯頁適用范圍：除門戶以外的各相關(guān)應(yīng)用系統(tǒng)的信息編輯頁/表單編輯頁面。在最佳分辨率1024*768，內(nèi)容高度不超過兩屏，頁面主色調(diào)統(tǒng)一為軍工藍(lán)。信息編輯頁面/表單頁面，主題包括了標(biāo)題區(qū)、表單區(qū)和操作區(qū)三個(gè)部分。標(biāo)題區(qū)以文字居中統(tǒng)一居中顯示，字體大小：16px。表單區(qū)，表單元素需用相應(yīng)表格進(jìn)行布局，表格邊框?yàn)?px，表單元素要求詳見UI控件規(guī)范要求。操作區(qū)或按鈕區(qū)統(tǒng)一在頁面左下方顯示，方便用戶操作。最大化窗口狀態(tài)下，頁面布局如下：信息查詢頁適用范圍：除門戶、信息發(fā)布平臺(tái)以外的保密管理、項(xiàng)目管理等應(yīng)用系統(tǒng)的查詢頁面。要求功能：查詢區(qū)支持折疊和展開，查詢結(jié)果區(qū)支持分頁查詢。搜索類搜索條適用范圍：門戶或應(yīng)用系統(tǒng)集成的搜索條搜索結(jié)果頁面適用范圍：搜索結(jié)果展示頁面參考頁面：京東百度UI開發(fā)規(guī)范設(shè)計(jì)工具設(shè)計(jì)工具：Photoshop、Fireworks前端制作：Dreamweaver目錄結(jié)構(gòu)Project工程目錄結(jié)構(gòu)java源代碼資源文件測試代碼測試資源文件webcontext根目錄java源代碼資源文件測試代碼測試資源文件webcontext根目錄編譯、打包輸出文件maven構(gòu)建腳本項(xiàng)目自述文件從上圖可以看出，我們遵循的項(xiàng)目結(jié)構(gòu)是標(biāo)準(zhǔn)的maven項(xiàng)目結(jié)構(gòu)。WebRoot目錄結(jié)構(gòu)web資源結(jié)構(gòu)，也就是對(duì)項(xiàng)目結(jié)構(gòu)中src/main/webapp目錄進(jìn)行詳細(xì)的結(jié)構(gòu)定義，具體的目錄結(jié)構(gòu)定義見下圖：webcontext根目錄靜態(tài)資源文件CSS樣式圖片javascript腳本多媒體（音頻、視頻等）展示webcontext根目錄靜態(tài)資源文件CSS樣式圖片javascript腳本多媒體（音頻、視頻等）展示頁面公共頁面（錯(cuò)誤頁面等）具體模塊頁面web描述文件首頁（后綴可為.html等）UI命名規(guī)范文件名均為英文小寫字母，并且文件需要結(jié)合文件內(nèi)容進(jìn)行命名。如遇復(fù)雜的文件名稱單詞間可以：“-”間隔組合，但不能超過3個(gè)單詞，單詞盡量選言簡意賅的短詞或縮寫，如：images文件夾可以命名為img文件夾。圖片文件命名頁面用到的圖片文件預(yù)先分為美術(shù)字體圖、圖標(biāo)（icon）、背景圖；、動(dòng)態(tài)交互圖片，這些圖片的命名規(guī)則一般遵循：門類-功能-（顏色-位置~尺寸）的順序命名（）內(nèi)根據(jù)實(shí)際情況三選一進(jìn)行組合，如：icon-error-5-5.png這個(gè)圖片文件的意思是：圖標(biāo)類-錯(cuò)誤提示-5*5像素大小的png圖片。為了縮小不同人員協(xié)調(diào)開發(fā)的命名習(xí)慣差異我指定了圖片文件的三級(jí)命名詳單：門類功能顏色（英文單詞）尺寸（像素）實(shí)例名稱美術(shù)字體圖詞首為msz-第二為字體名拼音第一個(gè)字母如方正綜藝體簡為fzzytj顏色單詞如：white,Red,yellow,black,green,blue,ash,purple為實(shí)際圖片尺寸大?。▽?高）數(shù)值。如：180*30msz-fzzytj-180-30.png圖標(biāo)icon詞首為icon-第二為圖標(biāo)功能名如：error，ok，off，home，download，more，in，out，user，tags，set，Search，star，upload，trash，list，edit，refresh，file，plus，minus，sign，share，right-arrow，left-arrow，up-arrow，down-arrow等圖標(biāo)對(duì)應(yīng)的顏色單詞，如：white,Red,yellow,black,green,blue,ash,purple為實(shí)際圖片尺寸大小（寬*高）數(shù)值。如：5*5icon-off-5-5.png背景圖詞首為bg-第二為背景圖的使用方式：x橫向平鋪，y為豎向平鋪，n為不循環(huán)。背景圖片對(duì)應(yīng)的顏色單詞，如：white,Red,yellow,black,green,blue,ash,purple無bg-x-blue.png動(dòng)態(tài)交互圖片詞首為do-動(dòng)態(tài)圖片的內(nèi)容對(duì)應(yīng)名稱英文名稱，如progressbar，londing，More,hot,new,drop,pop背景圖片對(duì)應(yīng)的顏色單詞，如：white,Red,yellow,black,green,blue,ash,purple為實(shí)際圖片尺寸大?。▽?高）數(shù)值。如：5*5do-londing-5-5.gif另外的圖片格式一般為png24位，碰到顏色豐富的圖片如風(fēng)景照片可用jpg格式來控制圖片數(shù)據(jù)大小，這個(gè)根據(jù)具體情況掌握，還可用圖片精靈把圖片拼到一張圖片上來提高瀏覽下載效率，目的是在保證圖片顯示效果的前提下盡可能壓縮圖片大小。css文件命名css文件的命名根據(jù)css文件包含的css代碼的相應(yīng)功能來組織，分公用全局樣式和頁面功能樣式。一般為兩到三個(gè)文件，style.css為公用樣式文件，用于規(guī)范統(tǒng)一不同瀏覽器對(duì)html標(biāo)簽渲染的差異，xxx-xx.css(xx為功能相應(yīng)頁面樣式英文縮寫)文件為頁面大部分功能模塊的樣式，還有些只在特殊頁面用到很少重復(fù)用到的樣式可以單建一個(gè)樣式文件，文件名要根據(jù)對(duì)應(yīng)的功能及版本進(jìn)行聲明，可能合并到一個(gè)大文件中去。這樣可以防止相同樣式名之間在分別調(diào)取時(shí)因?yàn)橄嗤瑢傩月暶鞯闹挡灰恢聦?dǎo)致頁面元素渲染出現(xiàn)錯(cuò)誤，并且可以減少瀏覽器對(duì)服務(wù)器的鏈接請(qǐng)求數(shù)，降低服務(wù)器壓力，而且作為渲染還原頁面的重要文件css文件需要放在頁面代碼的</head>標(biāo)簽之前。js文件命名Js文件的命名根據(jù)文件內(nèi)js代碼編寫的相應(yīng)功能來組織，命名結(jié)構(gòu)和圖片文件命名基本一致，但在最后一項(xiàng)沒有三選一只有文件是否為壓縮版的聲明。如有可加上min來標(biāo)示，如：jquery-scrollUp-min.js這個(gè)js文件名的意思是：屬于jquery系列具有觸發(fā)頁面滾動(dòng)至上部經(jīng)過壓縮的js文件，注意js文件如無特殊需求均放在頁面代碼的底部</body></html>標(biāo)簽之前。UI控件Header頭部門戶標(biāo)準(zhǔn)頭部：注：頭部Logo必須參照《XX單位視覺識(shí)別系統(tǒng)》（2014版）相關(guān)要求設(shè)計(jì)。footer版底頁面標(biāo)準(zhǔn)版底導(dǎo)航欄（1）系統(tǒng)一級(jí)導(dǎo)航欄注：導(dǎo)航欄寬1280px，高40px，背景色#2860BD，選中狀態(tài)#00416B（2）系統(tǒng)二級(jí)導(dǎo)航欄注：導(dǎo)航欄寬1280px，高35px，背景色#CCEBF8，選中狀態(tài)#78A0E2（3）系統(tǒng)側(cè)導(dǎo)航注：側(cè)導(dǎo)航適用于導(dǎo)航大于2級(jí)的情況系統(tǒng)，導(dǎo)航欄寬250px，高不限。列表框List表格顯示內(nèi)容的表格：表格邊框1px，邊框顏色#C8EAF7；表格以白色和淺藍(lán)色（#F4F7F