1、企業應用集成之界面(UI)設計規范2015年4月丄並1編9丨|的1適用范困1術語定義12 O 2設訃原則2界而結構2配色規范3文字使用規范4圖片使用規范5Lcco i殳汁規范5Log。設遛規范5系統院Logo如53 典型頁面布局規范6門戶系統6登錄貞6門戶-新聞首頁7訂戶辦公F皿s門戶-子頁面（衲欄）a門戶新聞類詳細貞13通用應用系統13應用首貞13功能列表頁15詳細功能頁15信息編耕頁16信息查詢頁17捜索類18搜穽條1S搜索結果頁面is4 UI開發規范19設訃匸具19II求結構20Project工程目錄結構20HQbRoot目錄結構20UI命名規范21圖片文件命名21css文件命名22js

2、文件命名225 UI控件22Header 頭部22footer 版底23導航欄23列表框List24表格24Tab 頁24操作按鈕25單選按鈕25多選按鈕25圖片輪換25輸入框26彈出窗門26日歷、時間276 其他規約27版底版權說明28兼容性說明28其他事項281引言11編寫目的本規范的目的是通過建立門規范，貫穿以用戶為中心的設計指導方向，以達到提升用戶體驗，控制產品設計 質量，提高設計效率的目的。12適用范圍本規范適用XX單位應用集成平臺基于瀏覽器的B/S版軟件項目開發工作。開發過程中的模版頁而編寫和模版 文件套用工作必須遵照此規范執行。適用對象為開發人員、UI設計人員、模版編寫人員以及后

3、續新建業務系統等。本規范不僅用于約束應用集成平臺的建設過程，對于與應用集成平臺進行集成的各業務系統也需要按本規范 嚴格執行。新建系統嚴格按本規范執行。遺留系統按本規范進行改造，對于產品無法改造的需要業務系統廠商與應用集成平臺實施方及客戶方達成一致。1. 3術語定義類型名詞解釋UI門即Unr Interface （用戶界而）的簡稱，是指對軟件的人機交互、操 作邏輯、界而美觀的整體設計。圖片GIFGIF, 一種圖像文件格式。GIF文件的數據，是一種基于LZW算法的連續 色調的無損壓縮格式，其壓縮率一般在50%左右。JPGJPG, 一種圖像文件格式。是經過靜態圖象壓縮標準壓縮的圖像文件，具 有很髙的

4、壓縮比。PNGPNG, 一種圖像文件格式。在保留GIF文件格式特性的基礎上，增加了一 些GIF文件格式所不具備的特性。同時，P7G圖片文件壓縮比髙，生成文 件容量小。Icon指電腦屏幕的桌而上用來指示用戶運行各種操作的圖像，作為字符顯示的 重要輔助。圖片水印給圖片加上網站標志，保護圖片版權的一種形式。其他網站Logo在商業領域丄0G0是標志、徽標的意思。常見的各種商品的標識即是Logo, 它包括文字、圖形、字母、數字、三維標志和顏色的組合。本規范所指 LOGO,是互聯網上網站用來標識自己的圖形標志，一般包含圖形、需稱和 域名。門戶及子平臺首頁發布類詳細頁超鏈接網頁中，在文字和圖片上設置的鏈接，

5、用以把用戶導向到新的頁而中。入口用戶點擊進入網頁的被鏈接文字或圖片。2概述2. 1設計原則符合用戶界面設計規范頁而設計中涉及XX單位視覺識別內容的，嚴格參照XX單位視覺識別系統（2014版）規左設汁。視覺識 別系統對企業標志與企業標準字體的各種組合，包括位置、大小、距離均作了詳細的規泄，要求不得隨意更改。在各種運行環境下的兼容性系統采用B/S結構，要求支持當前各流行瀏覽器的兼容性，確保在IE8能夠正常瀏覽。在常用顯示屏大小的 情況下，有良好的顯示狀態，在系統要求最低分辨率以外的情況下也可以正常瀏覽。導航定位清晰易用設計時要對企業門戶平臺的導航系統作出明確的策劃，在視覺上上作出合理的呈現，同時要

6、充分考慮到用戶 的使用習慣。約定企業門戶平臺的主色調不能超過3種，雖然也可在門戶網站上使用英他色彩，但只能作為點綴和襯托， 不能與主題沖突。界面風格統一性在界面設計中要保持界而風格的統一性，統一性包括：使用相同的信息表現方法，如在字體，標簽風格、顏 色、術語、顯示錯誤信息等方而保持一致。22界面結構基本結構：標準尾供iframe 用的界面.提示類界面及其他標準頭內容區內容區內容區類型說明: 門戶及子平臺首頁適用范圍：適用于統一門戶一二級頁而、子系統首頁 發布類詳細頁等適用范圍：信息發布類詳細頁而 流程類、表單類界面適用范圍：適用于所有流程類頁而 供iframe調用的界面.提示類界而及其他 適用

7、范圍：適用于科研項目、保密管理等專業系統集成到門戶中的頁面2. 3配色規范頁而配色要求以中國船舶集團藍色為主色調，搭配xx單位視覺識別系統的標準設汁中的輔助色。如下圖:rr選輔勵色C0U1WV10QK0C1KM100VCKOC1CCMWV1CKKOXM5Y0K 伽C1MWYOGCOMiOYSOKOwr.COVYDKSO毎灰COWYOKJO中灰COVOVOKIOJ顏色7F7F7F或其他行距21!粗體&細體i14號字格式:字號14!字休2顏色牡333333或其他行距24!粗體&細體i10號字格式:字號10!字體ArialI顏色戲333333或其他I行距!細體26號字格式:字號26i字體微軟雅黑&A

8、riali顏色牡oooooo或其他i行距!細體說明：10號字格式，12號字格式，14號字格式中的數字英文字母為Arial,中文為宋體 連接樣式鼠標初始：如上鼠標經過：顏色C006CBD亂標點擊：顏色C006CBD25圖片使用規范圖片規范是指對xx單位應用集成平臺上圖片使用做出基本要求，并對圖片的格式、尺寸、大小等做岀規左。 圖片常常是網頁上最引人注目的內容，圖片規范有助于保證圖片的精致和頁面的齊整，進而提升網頁乃至整 個網站的品質。（1）圖片使用的基本要求圖片的選用與反映的主題一致；圖片畫而顯示淸晰，不采用改變顯示尺寸的放大或縮小；圖片畫而（尤英是人物圖像）不允許變形：圖片文件大小控制在30

9、KB內為宜；圖片按照“所屬欄目名圖片描述名”的規則命名,圖片名稱均由小寫字母、數字和組成， 不能有空格或英它字符：（2）圖片文件格式GIF、JPG和PNG的圖片格式均可被采用，不同格式的圖片的應用場景：圖片中的顏色沒有過渡漸變效果的時候用gif格式的圖片：圖片中的顏色有復雜的過渡漸變效果的時候用jpg格式的圖片：圖片中圖形不規則，但又需要透明邊緣時，一般使用png格式的圖片。2. 6 Logo設計規范Logo標識是品牌的視覺象征，對于品牌的整體傳播至關重要XX單位Logo的應用將遵循以下規左執行。2. 6. 1 Logo設置規范網站的所有頁面中都需要設置相應的Logo標識，且Logo的尺寸應保

10、持一致：使用Logo時需保證Logo的比例以及淸晰度。應用集成平臺頁而log。設計參照XX單位視覺識別系統（2014版）規立設計。2. 6. 2系統院Logo設計參照XX單位視覺識別系統（2014版），應用集成平臺logo設置主要提供以下兩種形式：（1）Logo圖文（中英文）上下組合標準：（2） Logo圖文（中英文）橫排組合標準:3典型頁面布局規范3.1門戶系統3. 1. 1 登錄頁門戸登錄頁而結構及尺寸設訃如下3. 1. 2門戶-新聞首頁適用范圍：門戶一級頁而（新聞首頁）頁面要求：在最佳分辨率1280*768,內容奇度不超過三屏。同時能夠支持1366*768, 1024*768分辨率。頁而

11、總體色調為軍工藍。頁而整體分為Header區/頭部區、導航區、信息提醒區、頭版信息區，信息發布區、工具和綜合查詢區以及Footer區/版底區等幾個部分，頁面布局如下:Header(res布區footer90pxHeader40px45px275px頭爍要岡ElOOOpxifi-. taftEL280px60pxFooter3. 1. 3門戶-辦公首頁適用范圍：門戶一級頁而（辦公首頁、二級應用首頁）頁面要求：在最佳分辨率1280*768,內容髙度不超過兩屏。同時能夠支持1366*768, 1024*768分辨率。頁而總體色調為軍工藍。頁而整體分為Header區/頭部區、導航區、鏈接區、工作區，工

12、具和提醒區、以及Footer區/版底區等幾個 部分。寬屏下主體內容居中顯示header背景元素repead-x填充整個屏幕。屏幕寬度小于1280px的，頁而按以下 規律進行自適應調整。頁而布局如下：Headc-導航區工作區工貝、推送區footer90px40pxHeader235px23Spx520pxft!建區工具、工作區5pxlOOOpxFooter1280px60px內容高度超過一屏時，頭部左髙，主體區高度隨內容自適應拉抻，界而右側滾動條寬度為16px,界面在滾動 條以外的屏幕上仍居中顯示。屏幕寬度小于1280px的，不能實現自適應調整的，將出現橫向滾動條，高度為16px,寬屏下主體內容

13、居中顯示header背景元素repead-x填充整個屏幕。屏幕寬度小于1280px的，頁而按以下規 律進行自適應調整:Heedei制豆間逅縮短面距定寬定寬豆度自適應工詐區工耳、雄送區Footer3. 1.4門戶新聞類詳細頁適用范圍：門戶新聞類詳細頁面，新打開新聞公告類詳細查看頁面：信息發布的詳細查看頁以及資源共享類 的詳細查看頁而。Logo、Bannerx Footer區域同門戶首頁，Center中間展示區展示布局如圖所示:1- logo2.Banner4 CenterlOOOpx1280pxGOpx4. Footer ft32通用應用系統3. 2.1應用首頁適用范圍：信息發布、保密管理、項目

14、管理等應用系統的首頁在最佳分辨率1024*768,內容髙度不超過兩屏。同時能夠支持1366*768, 1024*768分辨率。頁而主色調統一為軍工藍。最大化窗口狀態下，頁而布局如下:1 LOgC2.BannerS Center中冃Jg禾區6 FCKR阪底d.Left左側導筑區6Opx具體頁面尺寸如下:90px1. LOgO乙Banner區| 40px3.NavSJKS245750px5. Center中間展示區lOOGpx1280px6.rooteifitt3. 2. 2功能列表頁適用范圍：除門戸、信息發布平臺以外的信息發布、保密管理、項目管理等應用系統的功能應用頁而。在最佳分辨率1024*7

15、68,內容髙度不超過兩屏。同時能夠支持1366*768, 1024*768分辨率。頁而主色調統一為軍工藍。最大化窗口狀態下，頁而布局如下：90px1. Logo2.8anner 區40px245px修改3. No與航區ww90px750pxA. left左例導號區6.功陰列戔區 lOOOpx1280pxco60px7. Footer fife fe3. 2. 3詳細功能頁適用范圍：除門戶、信息發布平臺以外的信息發布保密管理、項目管理等應用系統的功能應用頁而。在最佳分辨率1024*768,內容髙度不超過兩屏，頁而主色調統一為軍工藍。最大化窗口狀態下，頁而布局如T：90px1. Logo40pxX

16、Banner 區lOOOpx1280px60px4.roote*iX:Mao bMu comt$on9HH0 htnl3 搜索主體頁血區BP il8何 2007-01夠毗耐加！1齊麗升走出ftlMWWIE用海朗融真氏玄+甥氓勘MN溺aHtffiUWWWH畫!中業紅 6PWilbMiWi8fidi+方別注斷*耐 tU品bom ynttamortf ft 么 乂 BPIGlUt 么 1W? 2009-07-01驚時M(Bsm$Phxm Mo腳nenOH蚌8S丄JWMffW疫化貝2人易人羽.人號賈妙疵的1合&也湖凸方芒幀血 ITIM.蚌iUMTSSiififihM魏冊怙帕HJFJUJC力Mao bM

17、u comtauts*on6932410 l*nl2345下一頁共5頁到第頁確定4. Footer參考頁面：京東&enc=utf-8百度 &q2二&q3二&q4二&rn二 10&lm=0&ct=0&ft=&q5=&q6=&tn=ba iduadv4 UI開發規范4.1設計工具設計工具：Photoshopx Fireworks前端制作:Dreamweaver4.2目錄結構4. 2. 1 Project工程目錄結構 y javaweb-demo0 src/main/java 金0 色 src/main/resources D src/test/java 礙D 色 src/test/resource

18、st 山 JRE System Library jdkl.6.)_41D 場 Maven DependEncies & webapp & test0 D targetm pom.xmlreadme.txtja“源代碼 資源文件 測試代碼 測試資源文件web context 根 El 錄編譯.打包輸出文件maven構建腳本項目自述文件從上圖可以看岀，我們遵循的項目結構是標準的maven項目結構。4. 2.2 WebRoot目錄結構web資源結構，也就是對項目結構中src/main/webapp目錄進行詳細的結構左義，具體的目錄結構左義見下圖:4. 3 UI命名規范文件名均為英文小寫字母，并且文件

19、需要結合文件內容進行命名。如遇復雜的文件名稱單詞間可以：“-”間 隔組合，但不能超過3個單詞，單詞盡屋選言簡意賅的短詞或縮寫，如：images文件夾可以命名為img文件夾。4. 3.1圖片文件命名頁而用到的圖片文件預先分為美術字體圖、圖標（icon）、背景圖：、動態交互圖片，這些圖片的命名規則一 般遵循：門類-功能-（顏色-位置尺寸）的順序命需（）內根據實際情況三選一進行組合，如：這個圖片文件 的意思是：圖標類-錯誤提示-5*5像素大小的png圖片。為了縮小不同人員協調開發的命劃習慣差異我指泄了圖 片文件的三級命劃詳單：門類功能顏色（英文單詞）尺寸（像索）實例名稱美術字體圖詞首為msz-第二為

20、字體名拼音第一 個字僚如方正綜藝體簡 為 fzzytj顏色單詞如:white ,Red, yellow, blac k, green, blue, ash ,purple為實際圖片尺寸大小（寬* 高）數值。如：180*30圖標ioon詞首為icon-第二為圖標功能名如： error. ok off home, download,more.in.out, user. tags, set Search, star, uploads trash, list edit refresh. file plus, minus sign share, right-arrow, leftarrow, up-ar

21、row, down-arrow 等圖標對應的顏色氓 詞，如：white,Red, yellow, blac k, green, blue, ash,purple為實際圖片尺寸大小（寬*高）數值。如：5*5背杲圖詞首為bg-第二為背景圖的使用 方式：X橫向平鋪，y 為豎向平鋪，n為不循 環。背景圖片對應的顏 色單詞如：white ,Red, yellow, blac k,green, blue, ash,purple無動態交互圖片詞首為do-動態圖片的內容對應 名稱英文名稱，如 progressbar,londingMore, hot, new, drop, POP背景圖片對應的顏 色單詞如：w

22、hite ,Red, yellow, blac k, green, blue, ash,purple為實際圖片尺寸大小（寬*高）數值。如：5*5另外的圖片格式一般為png24位，碰到顏色豐富的圖片如風景照片可用jpg格式來控制圖片數據大小，這個根據具體情況掌握，還可用圖片精靈把圖片拼到一張圖片上來提髙瀏覽下載效率，目的是在保證圖片顯示效果的 前提下盡可能壓縮圖片大小。4. 3. 2 css文件命名CSS文件的命名根據CSS文件包含的CSS代碼的相應功能來組織，分公用全局樣式和頁面功能樣式。一般為 兩到三個文件，為公用樣式文件，用于規范統一不同瀏覽器對html標簽渲染的差異，（XX為功能相應頁面

23、樣式英 文縮寫）文件為頁而大部分功能模塊的樣式，還有些只在特殊頁而用到很少重復用到的樣式可以單建一個樣式文 件，文件名要根據對應的功能及版本進行聲明，可能合并到一個大文件中去。這樣可以防止相同樣式名之間在分 別調取時因為相同屬性聲明的值不一致導致頁而元素渲染出現錯誤，并且可以減少瀏覽器對服務器的鏈接請求 數，降低服務器壓力，而且作為渲染還原頁面的重要文件css文件需要放在頁面代碼的/head標簽之前。4. 3. 3 js文件命名Js文件的命爼根據文件內js代碼編寫的相應功能來組織，命名結構和圖片文件命名基本一致，但在最后一 項沒有三選一只有文件是否為壓縮版的聲明。如有可加上min來標示，如：這

24、個js文件需的意思是：屬于jquery 系列具有觸發頁而滾動至上部經過壓縮的js文件，注意js文件如無特殊需求均放在頁而代碼的底部/body /html標簽之前。5 UI控件5. 1 Header 頭部門戶標準頭部:SYSTEMS ENGINCERINO RESeAACH IMSTITUTE5. 2 footer 版底頁而標準版底畑權斯有：中 Lit系絨工桂釧究扶泡卅信持運紋電話：D10-8K20D435- 3導航欄1)系統一級導航欄祈麗1心處公桌面瀟呈中心資源中心訓蒞間殺統膏理注：導航欄寬1280px,高40px背景色#2860BD.選中狀態tt00416B(2)系統二級導航欄汛程6!樂瞬1

25、8注:導航欄寬1280px,高85px背景色5CCEBF8.選中狀態# 78A0E2(3)系統側導航250pxE舞直幼阿05)3安全傻衛(2)公艾&(如B外公吏拎(6)務醬辦坯程 務1L加強見我杈 ftsuasa處事童理何)eRia(o)e(o)dtKYUkO)帛場昇炭(0)Wl-tttftOjBW 發(0注：側導航適用于導航大于2級的情況系統.導航欄寬250pm高不限。5. 4列表框List中船航海科技有限公司召開成立大會2014-12-23優勢互補、互惠互利、共同岌展、實2014-12-17系統工程研究院與滬東重機釜署2014-11-23浪漫七夕韶橋會緣走青看這一刻2014-10-29系統

26、工程研究院順利民成首次館藏2014-10-27中船航海科技有呢公司召開成立大會2014-12-23更多55表格顯示內容的表格：表格邊框lpx,邊框顏色SC8EAF7；表格以白色和淺藍色（#F4F7FE）隔行顯示不同的背景顏色;單元格文字大小統一為12px,不能出現折行情況。標題類型發逹人發送航（堂）芫亍XXXX去辜務曙小 6B9牛百辦張sfl2015-01-09M傳品懇舷宜傳呂田請甘思龍2015-01-03XX手辦 Q33牛咅辦2014-12-30XX科硏頃目付款申謗 呼9付款申請肖水江2O14-12-2SXX合議彌莎言理葉玲玲2014-12-11綜臺豈理部XX合同簽訂用印申話用印申詰日思龍2

27、014-12-05XX現會汶言理葉玲玲2014-12-11宣傳品鐵月師宣？專品曰請H思花2015-01-03XX少任笛晉辦201412-30XX科硏項弓付款田譴付款申諸目水江2014-12-23XX卻會義借理葉玲玲2014-12-11綜合雪理SSXX合同簽訂用印田請用印田諸苛思龍2014-12-06記錄拔共32聚記殺1頁嗎2少曇勇r|K|5. 6 Tab 頁Tab頁的展示方式適用于相同類型不同業務的信息展示，例如：門戶系統中的統一待辦、傳閱信息等功能。Tab的展開和關閉狀態應使用不同的樣式，用戶能夠一目了然泄位到當前所在的Tab。 各Tab頁中展示的內容以表格進行布局，展示風格要統一。焼一袴辦q 電于公文（？）綜合管理（12）粥勰梓卿歆3）標弦發送人發送時問（催門中）關淫盍廠孝頂嘻交苕舌尋9315#凱2015-01-09亙傳厳用甘思龍2015-01-03対至事辟務警辦卿2014-12-30矢于罰置理平臺虹巨付款史滋IJE）冉