转载 一篇UI规范文件
這是一個UI模板規范，在做B/S版應用程序時比較適用，其實這樣的東西算不上什么正規的規范，只是為了適應我們現在面對的開發環境和組織流程做的一些權宜的努力，和解決了一些與程序溝通和接口的問題，盡量避免誤會和摩擦。
一 適用環境和對象
二 必要性
三 技術原則
四 代碼編寫規范
五 頁面模版使用規范
?
一 適用環境和對象
本規范適用基于瀏覽器的B/S版軟件項目開發工作。開發流程中的模版頁面編寫和模版文件套用工作必須遵照此規范執行。適用對象為開發編碼人員、UI設計人員、模版編寫人員、界面測試人員等。
基于客戶端的C/S版軟件開發工作不適用本技術規范。
二 必要性
本規范旨在制訂開發編碼人員和UI模版編寫人員之間在工作交叉部分的技術標準，使他們遵循同一操作規范，利于交叉工作的平緩順利交接。以標準化方式，提高溝通和技術協作的水平，提高工作效率。減少和改變責任不明，任務不清，和由此產生的信息溝通不暢、反復修改、重復勞動、效率低下的現象。
三 技術原則
代碼規范化書寫
代碼規范化書寫實現了腳本整體風格的一致，保證了同一個人不同時期寫的腳本風格保持一致，以及同一個工作組中不同的開發人員編寫的腳本風格保持一致。因為開發不可能在孤立中進行，所以代碼規范化書寫是項目組人員合作溝通的前提。
數據層、結構層、表現層分離
數據內容就是頁面實際要傳達的真正信息，包含數據、文檔或者圖片等。這里強調的“真正”，是指純粹的數據信息本身。把信息內容以一種合適的方式格式化，簡言之就是頁面排版，例如：分成標題、作者、章、節、段落和列表等，使內容更加具有邏輯性，條理清晰易讀易懂，叫做“結構(Structure)” 雖然定義了結構，但是內容還是相同的樣式沒有改變，例如標題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。所有這些用來改變內容外觀的東西，稱之為“表現(Presentation)” “表現”的作用使內容看上去漂亮、賞心悅目、打動人心！
所有HTML和XHTML頁面就是由“結構、表現和行為”這三方面組成的。抽象一點理解，內容是基礎層，然后是附加上去結構層和表現層，人對頁面內容的交互及操作效果叫做“行為（Behavior）”,
對于數據、結構與表現相分離，最早是在軟件開發架構理論中提出來的。UI設計師設計出頁面模版，程序員負責內容數據的嵌入，數據可能是從數據庫中提取出來，也可能是靜態寫入的提示性文字，最后形成一個新的頁面展示給軟件操作者。模版文件的結構利用HTML＋XHTML標簽來定義，而所有涉及表現的東西通通剝離出來，把它放到一個單獨的文件里，這個單獨的文件就是CSS。
數據、結構與表現相分離的好處是：
程序員不需要過多的思考頁面顯示問題，而只需要根據模版效果把數據放入模版相應的位置。界面的結構和表現由UI設計師負責。填入結構的數據自覺套用設計好了的表現效果。最后呈現一個實現功能的完整界面。
表現層的分離保持整個軟件界面視覺的一致性，使改版也變得非常簡單，修改樣式表就可以了；
由于結構清晰，數據層相對獨立，對數據的集成、更新、處理和再利用也更加方便靈活；
四 代碼編寫規范
（一）目錄結構及命名規則
目錄結構規范
1、目錄建立的原則：以最少的層次提供最清晰簡便的訪問結構。
2、根目錄一般只存放index.htm以及其他必須的系統文件
3、在根目錄中原則上應該按照系統的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個images 和media 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。根目錄下的images用于存放各頁面都要使用的公用圖片，子目錄下的images目錄存放本欄目頁面使用的私有圖片
4、所有JS,ASP,PHP等腳本存放在根目錄下的scripts目錄
5、所有CGI程序存放在根目錄下的cgi-bin目錄
6、所有CSS文件存放在根目錄下style目錄
7、每個語言版本存放于獨立的目錄。例如：簡體中文gb
8、所有flash, avi, ram, quicktime 等多媒體文件存放在根目錄下的media目錄
9、temp 子目錄放客戶提供的各種文字圖片等等原始資料，以時間為名稱開設目錄，將客戶陸續提供的資料歸類整理。
文件和目錄命名規范
1、文件命名的原則：以最少的字母達到最容易理解的意義。
2、每一個目錄中包含的缺省html 文件，文件名統一用index.htm
3、文件名稱統一用小寫的英文字母、數字和下劃線的組合，不得包含漢字、空格和特殊字符
4、盡量按單詞的英語翻譯為名稱。例如：feedback(信息反饋)，aboutus(關于我們) 不到萬不得已不要以拼音作為目錄名稱
5、多個同類型文件使用英文字母加數字命名，字母和數字之間用_分隔。例如：news_01.htm。注意，數字位數與文件個數成正比，不夠的用0補齊。例如共有200條新聞，其中第18條命名為news_018.htm
圖片的命名規范
1、名稱分為頭尾兩兩部分，用下劃線隔開。
2、頭部分表示此圖片的大類性質。例如： 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們取名：banner ；標志性的圖片我們取名為：logo ；在頁面上位置不固定并且帶有鏈接的小圖片我們取名為button ；在頁面上某一個位置連續出現，性質相同的鏈接欄目的圖片我們取名：menu ；裝飾用的照片我們取名：pic ；不帶鏈接表示標題的圖片我們取名：title 依照此原則類推。
3、尾部分用來表示圖片的具體含義，用英文字母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.
4、有onmouse效果的圖片，兩張分別在原有文件名后加"_on"和"_off"命名
其它文件命名規范
1、js的命名原則以功能的英語單詞為名。例如：廣告條的js文件名為:ad.js
2、所有的CGI文件后綴為cgi。所有CGI程序的配置文件為config.cgi
（二） html編寫規則
一般原則
1、在編寫模版文件，排布結構表格之前，要思考一個最佳方案，表格的嵌套盡量控制在三層以內；要考慮程序套用的可實現性、通用性、靈活性、預見性，所有內容均采用積木式組織，可替換和刪除，并對總體結構不會造成破壞性影響
2、盡量避免 <colspan> <rowspan> 兩個標記，經驗表明，這兩個標記會帶來許多麻煩
3、一個網頁要盡量避免用整個一張大表格，所有的內容都嵌套在這個大表格之內。因為瀏覽器在解釋頁面元素時，是以表格為單位逐一顯示，如果一張網頁是嵌套在一個大表格之內，那么很可能造成的后果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，然后所有的網頁內容同時出現。如果必須這樣做，請使用 <tbody>標記，以便能夠使這個大表格分塊顯示
4、排版中經常會遇到需要進行首行縮進的處理，不要使用全角空格來達到效果，規范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標記，注意，一般情況下，請不要省略 </p> 結束標記
5、原則上，我們禁止用 <img width=? height=?> 來人為干預圖片顯示的尺寸，而且建議 <img> 標簽中不要帶上width 和height 兩個屬性，這是因為制作過程中，圖片往往需要反復的修改，這樣可以避免人為干預圖片顯示的尺寸，盡可能的發揮瀏覽器自身的功能；但是這樣的一個副作用是當網頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現象），尤其是當圖片的尺寸較大時，這種現象會很明顯，所以當預料到這種會明顯導致網頁抖動的情況會發生時，務必在最后給 <img>附上 width 和 height 屬性
6、為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中盡量不要使用<br> 來人工干預分段
7、不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外，漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號
8、為貫徹結構層和表現層分離的原則，嚴禁使用傳統的HTML3.2/4.0控制表現的標簽，例如<font>,<b>，還有本意用于結構后來被濫用于控制表現的標簽，例如：<h1>,<table>等。所有的字號都應該用樣式表來實現，禁止在頁面中出現 <font size= > 標記，<b> </b> <h1> </h1>標記，嚴禁在結構頁面寫表現標簽
9、不要在網頁中連續出現多于一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。
10、中英文混排時，我們盡可能的將英文和數字定義為verdana 和arial 兩種字體
11、行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%
12、系統中的路徑全部采用相對路徑
13、為保證系統和瀏覽器的兼容性，當設置背景圖片時，要堅持用雙引號。
14、“網頁大小”為網頁的所有文件大小的總和，包括HTML文件和所有的嵌入的對象。頁面大小保持在34K以下為合適
代碼規則
head區標識（head區是指首頁HTML代碼的<head>和</head>之間的內容）
1、公司版權注釋
<!--
Generator: 中軟融鑫
Creation Data: 2005-8-1
Original Author: 張三
-->
2、網頁顯示字符集
簡體中文：
<META. HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁體中文：
<META. HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 語：
<META. HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
?
3、簡介
<META. NAME="DESCRIPTION" CONTENT="這里填您網站的簡介">?
4、網頁的css文件定義，所有css文件盡量采用外部調用
<LINK href="style/style.css" rel="stylesheet" type="text/css">
5、網頁標題
<title>這里是你的網頁標題</title>
6、所有的javascript腳本盡量采取外部調用
<SCRIPT. LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>
head區可以選擇加入的標識
7、設定網頁的到期時間。一旦網頁過期，必須到fwq上重新調閱。
<META. HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
8、禁止瀏覽器從本地機的緩存中調閱頁面內容。
<META. HTTP-EQUIV="Pragma" CONTENT="no-cache">
9、用來防止別人在框架里調用你的頁面。
<META. HTTP-EQUIV="Window-target" CONTENT="_top">
10、自動跳轉。
<META. HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
5指時間停留5秒。
11、網頁搜索機器人向導.用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
<META. NAME="robots" CONTENT="none">
CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。
12、收藏夾圖標
<link rel = "Shortcut Icon" href="favicon.ico">
13、搜索關鍵字
<META. NAME="keywords" CONTENT="關鍵字1,關鍵字2,關鍵字3,...">
head區以下的標記
1、body標記
為了保證瀏覽器的兼容性，必須設置頁面背景
<body bgcolor="#FFFFFF">
2、table標記
在寫 <table> 互相嵌套時，嚴格按照的規范，對于單獨的一個<table>來說，<tr>，<td>各縮進兩個半角空格，結束標記和開始標記平齊。<td> 中如果還有嵌套的表格，<table>也縮進兩個半角空格，如果<td>中沒有任何嵌套的表格，</td> 結束標記應該與 <td> 處于同一行，不要換行。
正確寫法：
a\
<table width="100%"? border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td>
<table width="100%"? border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
b\
<td><img src=”../images/sample.gif”></td>
錯誤寫法
a\
<table width="100%"? border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><table width="100%"? border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
b\
<td><img src=”../images/sample.gif”>
</td>
這是因為瀏覽器認為換行相當于一個半角空格，以上不規范的寫法相當于無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應該這樣寫：
<td><img src=”../images/sample.gif”> </td>
于同一個級別的 <table> 一定是左首對齊的，另外不允許沒有任何內容的空的單元格存在，高度大于等于12px 的單元格應該 在 <td> 和 </td> 之間寫一個 ，如果高度小于12px, 則應該 在 <td> 和 </td> 之間插入一個1*1 大小的透明的gif 圖片，這是因為某些瀏覽器認為空單元格非法而不會予以解釋。如果代碼順序較亂，在DW中可以通過command->apply souce formatting進行重新整理！
3、Width 和height標記
一般情況下只有一列的表格，width 寫在<table> 的標簽內，只有一行的表格，height 寫在 <table> 的標簽內，多行多列的表格，width 和height 寫在第一行或者第一列的 <td> 標簽內。總之遵循一條原則：不出現多于一個的控制同一個單元格大小的height 和width, 保證任何一個width 和height 都是有效的，也就是改動代碼中任何一個width 和height 的數值，都應該在瀏覽器中看到變化。
a、只一列的表格的width標記
<table width="100%"? border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
b、只一行的表格的height標記
<table width="100%" height="30"? border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
c、多行多列表格的width和height標記
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="30"> </td>
<td width="200"> </td>
<td width="300"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
4、table的width屬性
為遵循頁面結構靈活性、通用性原則，table的width屬性原則上全部寫成100％或者不寫width屬性，不推薦寫成其他非100％寬度屬性。留空顯示效果通過其給外部td施加style的padding屬性實現。
<table width="100%"? border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="200" bgcolor="#FF0000" style="padding:20px; ">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>table寬度100％</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
需要說明的是這里td的style雖然是css的寫法，但不屬于表現層的內容，而是屬于結構層的內容，所以可以直接寫在html標記中間。
5、數據列表表格代碼寫法
表格外加上一個<div>，并對<div>賦一個id，即<div id =list>，然后通過樣式表對這個id下的所有html元素進行控制，
用<th>表示表頭
設置每列寬度的位置在表頭對應的<th>中，其中列表項中，字數最多或者字數不定的一項不設置寬度。
寬度的值依據列表項內容的多少來定，2個字的30px，三個字40px，時間、年月日（比如2004-11-11）80-120px,
類似于標題的列表項，表格對齊方式為左對齊（align=left）,時間，人名一般居中對齊，數據一般右對齊（align=right）。
對齊頁面內容時不要用div來對齊，直接在td 或th中寫align=…
表頭文字一般不折行，方法是在<th>中加上nowrap,或者通過樣式表來控制
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="30" nowrap>選擇</th>
<th align="left" nowrap>標題</th>
<th width="80" nowrap>發表人</th>
<th width="120" nowrap>時間</th>
<th width="40" nowrap>大小</th>
</tr>
<tr>
<td> </td>
<td align="left"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="right"> </td>
</tr>
<tr>
<td> </td>
<td align="left"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="right"> </td>
</tr>
</table>
（三） css編寫規則
css文件調用寫法
1、所有的CSS的盡量采用外部調用，特殊情況才允許使用內置html寫法。
<LINK href="style/style.css" rel="stylesheet" type="text/css">
css文件結構組織
1、文件提頭，css文件名稱、時間、作者
2、 將不同目的和效果的CSS選擇符分別編組，編組分層級使結構清晰，便于查對。并恰當地成塊注釋，注釋要說明施加的頁面文件的對象。頂級注釋用*TOP*打頭，次級注釋不用。
.headtext {
font-size: 14px;
color: #ffffff;
font-weight: bold;
}?
.headtext a:link {
color: #ffffff;
text-decoration: none;
}
.headtext a:visited {
color: #ffffff;
text-decoration: none;
}
.headtext a:hover {
color: FED078;
text-decoration:none ;
}
#clientcard {
align:left;
}
#clientcard th {
height:20;
font-size: 12px;
color: #737373;
padding-left:10;
font-weight: bold;
background-attachment: fixed;
background:url(images/dot2.gif)
background-repeat: no-repeat;
background-position: left center;
}
#clientcard td {
height:20;
font-size: 12px;
color: #FD783A;
padding-right:25;
}
3、選擇符分組的順序是重定義的最先，偽類其次，自定義最后。便于自己和他人閱讀。
例如：
BODY {
margin-left: 0px;
…
}
TD {
font-size: 12px;
…
}
a:link {
color:?#484848;
text-decoration: none;
}
a:visited {
color: #484848;
text-decoration: none;
}
a:hover {
color:#BD0800;
text-decoration: underline;
}
.ltreename {
font-size: 14px;
…
}
類和ID命名規則
1、以功能和定義對象的位置，而不是外觀為類和ID命名。例如創建了一個 .smallblue 類，后來打算將文字改大，顏色變為紅色，這個類名就不再有任何意義了。所以，用更有描述性的名字如 .copyright 和.info-list更加合適。
單位
1、0不用單位
2、非零值要指明單位，指定字體、邊距或大小時，必須指明所用的單位
例如： padding: 0 2px 0 1em;
3、特例：line-height不需要單位
字號大小
1、為了保證不同瀏覽器上字號保持一致，字號像素px來定義，一般使用中文宋體12px 和14.7px 這是經過優化的字號，黑體字或者宋體字加粗時，一般選用14.7px 的字號比較合適
例如： font-size: 12px;
順序
1、a:link a:visited a:hover a:actived 要按照規范順序寫
2、邊框(border)、邊距(margin)和補白(padding)的簡寫次序為：順時針方向從上開始，即 Top, Right, Bottom, Left。
例如： margin: 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。
組合選擇符
1、保持CSS短小對減少下載時間非常重要。盡量為選擇符分組、利用繼承(inheritance)以及使用簡寫(shorthand)來減少冗余。
使用圖片
1、css中經常遇到使用圖片的情況, 圖片的路徑一律采用相對路徑。
例如：
.hurdlename {
font-size: 14px;
color: #0B43C2;
height:25px;
font-weight: bold;
background-image: url(images/rbar_bg.gif);
background-repeat: repeat-y;
text-indent: 12px;
}
.but1{
background-image: url(../images/but1.gif);
font-size: 12px;
color: #000000;
border: 0;
width:85px;
height:26px;
cursor: hand;
}
2、使用圖片替換技術時要考慮與系統和文件結構的親和力。如果引用css的所有文件不在同一級相對路徑，就會出現css指定的圖片無法顯示的問題。在這種情況下不支持使用圖片技術。建議采用filter技術
例如：
input.buttton {
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#CFD1CF, endcolorstr=#EFEFEF);
border: #B5B6B5 1px solid;
font-size: 12px;
color: #000000;
cursor: hand;
height:24px;
background:#ffffff;
}
五 頁面模版使用規范
頁面模版使用規范的目的是統一和約定UI設計、界面工程師與不同的程序編碼人員的行為方式，光有了書寫代碼的規范還不能完全解決界面套用的統一性問題。因為不同的編碼人員對同一個模版的理解有可能不同，再加上個人工作習慣的不同，界面套用的結果往往很容易出現差異。哪怕是每人一點點差異，都可能使軟件的質量收到很大的影響。
責任分工明確
1、 UI設計、界面工程師負責界面風格的設計和軟件模版的編寫，并監督界面套用的效果。對軟件最終的界面負責。
2、 編碼工程師負責軟件業務邏輯的實現，軟件模版的套用。對軟件的數據和程序負責。
3、現實的情況是個別編碼工程師在模版套用出現偏差后，在界面工程師提出修改意見的時候拒絕修改，以開發進度、時間不夠為由搪塞，甚至主觀認為“這個（界面）不重要”致使界面工程師的作用得不到應有的發揮，影響軟件產品質量。
4、 解決辦法是各負其責。界面問題提高重視程度，并納入開發流程和進度管理之中。
界面模版交界過程
1、 模版文件制作完成后，在提交給編碼工程師時，要簡要說明模版的文件的使用說明和提醒。
2、 編碼工程師和界面工程師密切合作，完全理解模版使用說明。
3、對界面結構層html的table嵌套關系理解清楚并明確和程序結合的用意。有和程序不相配合的情況，進一步和界面工程師討論，獲得解決方案。不得在界面工程師不知情的情況下隨意修改table結構、定位屬性和嵌套關系。這樣做的壞處是雖然一個人解決了暫時的顯示問題，但和其他編碼工程師套用的結果出現不同。也不利于界面工程師控制總體界面。
4、 對表現層的界面元素和css文件選擇符的對應關系。做到心中有數，理解一個模版文件，到套用其他文件時就能夠舉一反三。
5、編碼工程師完全理解了界面模版后，就能夠順暢的把數據層的內容放到結構層合適的位置，并指定表現層合適的選擇符屬性。完成界面套用工作。
模版說明的內容
1、 總體的界面結構
2、 頁面板塊的布局和定位table的寫法
3、 table嵌套的方式的理由
4、 不同功能的界面顯示單元說明和使用方法
5、 css文件中選擇符的使用說明，一般的都能理解，個別特殊的要著重說明。
Css文件的版本控制
Css文件應引入版本控制的機制，項目組中應指定專人負責css文件的上傳和修改。fwq的css文件和界面工程師的css文件應該同步更新。不支持編碼工程師隨意添加選擇符修改css文件。誰都可以改就沒有標準，沒有版本控制就做很難做到界面統一
轉載于:https://www.cnblogs.com/chenhuzi/archive/2010/07/09/1774306.html
總結
以上是生活随笔為你收集整理的转载 一篇UI规范文件的全部內容，希望文章能夠幫你解決所遇到的問題。
