為確保公司所開(kāi)發(fā)的軟件產(chǎn)品界面風(fēng)格的統(tǒng)一與一致性，明確 UI 設(shè)計(jì)師在進(jìn)行界面設(shè)計(jì)時(shí)所需要遵循的準(zhǔn)則和方法、 界面中各個(gè)元素的規(guī)格及要求，確保 web 頁(yè)面在風(fēng)格、結(jié)構(gòu)和功能上的基本統(tǒng)一，提高工作效率，便于團(tuán) 隊(duì)合作開(kāi)發(fā)，特制定此 UI 設(shè)計(jì)規(guī)范。此規(guī)范不具有唯一性，不是最終版本，文檔中部份規(guī)范可根據(jù)實(shí)際項(xiàng)目情況調(diào)整。 

1. 顏色

1.1  應(yīng)用原則

整體色彩不宜超過(guò)3種，并遵循對(duì)比原則，突出色彩層次感，除非特殊場(chǎng)合，杜絕使用對(duì)比強(qiáng)烈，讓人產(chǎn)生極度不舒適體驗(yàn)的顏色，整個(gè)界面色彩盡量少使用類(lèi)別不同的顏色。

1.2  顏色代碼標(biāo)準(zhǔn)

在 CSS 中，所有顏色都以16進(jìn)制色值來(lái)進(jìn)行書(shū)寫(xiě)，如:#a0a0a0。

1.3 界面色彩 

2. 字體

2.1  字體的選擇與字體大小

2.1.1 字體使用原則

字體以不超過(guò)2種字體為準(zhǔn)，特殊情況除外

中文采用標(biāo)準(zhǔn)字體:“宋體”、“微軟雅黑”，英文采用“Arial”或“verdana”，盡量不使用特殊字體(如 隸書(shū)、草書(shū)等，特殊情況、廣告圖片中可以使用圖片替代)，保證用戶(hù)使用起來(lái)顯示都很正常。

標(biāo)題字體以“微軟雅黑”為主，“宋體”為輔的使用原則，用不同的字重以達(dá)到不同的效果。

2.1.2 字體大小的選擇

字體大小號(hào)的選擇以 12px、14px、16px 等偶數(shù)字體大小為準(zhǔn)。

另外所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息，加強(qiáng)顯示等列外情況。 

菜單標(biāo)題字體大?。鹤钚≈?4px,最大值16px。

正文標(biāo)題字體大?。鹤钚≈?4px,最大值32px。

2.2 字體排版樣式

2.2.1 行距

標(biāo)題：取默認(rèn)行距；正文：取2倍行距，如下：

Font-size :12       line-height:24px

2.2.2 間距

取字體默認(rèn)間距，特殊情況除外。

2.2.3 文字與表格/邊框的邊距 

文字在頁(yè)面中的 left、right 方向?qū)R時(shí)，與邊框或表格的距離最小為 10px，最大以不超過(guò) 20px 為準(zhǔn)，如果在特殊版面情況下，可再適當(dāng)調(diào)整。

文字在頁(yè)面中的 top、bottom 方向?qū)R時(shí)，文字與其 top 邊距最小邊距為 0.5 倍文字高度，或者 采取 top、bottom 方向居中對(duì)齊的方式。

3. 圖形圖標(biāo)

 圖形圖標(biāo)包括圖片、按鈕、圖標(biāo)等, 應(yīng)遵循常用標(biāo)準(zhǔn)，杜絕標(biāo)新立異的讓人無(wú)法理解的圖形圖標(biāo)。

3.1 系統(tǒng)發(fā)送提示信息分類(lèi)展示給用戶(hù)，不同性質(zhì)圖標(biāo)分類(lèi)使用，分類(lèi)有：

警告信息

禁止信息

操作成功信息

操作失敗信息

錯(cuò)誤信息

3.2 圖標(biāo)尺寸

圖標(biāo)尺寸以偶數(shù)為主，如：16px,32px…..

為保證圖標(biāo)顯示效果，圖標(biāo)最小尺寸為14px,最大不超過(guò)48px。

3.3 圖片格式

原則上使用png/jpg/gif格式。滾動(dòng)輪播圖片則使用png/jpg格式

圖片文件命名統(tǒng)一使用如：

 banner_001.png / banner_001.jpg,其中“001”代表圖片的順序號(hào)

如需對(duì)統(tǒng)一圖片不同尺寸的使用，可對(duì)命名進(jìn)行區(qū)分：

 banner_001_01.png，banner_001_02.png……

3.4 圖片文件大小

為保證速度，圖片大小以保證圖片質(zhì)量的前題下越小越好。

圖片大小上限以 100kb 為準(zhǔn)，超出 100kb 的，可考慮分成多張圖片顯示。

3.5 圖片尺寸

以不超過(guò)最大屏幕顯示為準(zhǔn)，如在 Web 頁(yè)面設(shè)計(jì)中考慮會(huì)最大顯示為 1920×1080，則圖片的最大寬度不要超過(guò) 1920px。

在制作圖片時(shí)，圖片尺寸單位統(tǒng)一以像素 (px) 為單位。 

3.6 圖片分辨率

圖片分辨率統(tǒng)一為 72 像素/英寸。 

4. 布局

目前顯示器分辨率主要有 

16:9 的 

1920×1080 

1600×900 

1366×768 

16:10 的 

1920×1200

1680×1050

1440×900 

4:3 的

1024×768 

為了更好的適應(yīng)不同的寬度，在布局時(shí)以自適應(yīng)寬度為主。

最小顯示寬度統(tǒng)一為 980px。

一個(gè)完整的web頁(yè)面必須由以下三部分構(gòu)成:

頭部區(qū)域header 、主體區(qū)域main、底部區(qū)域footer， 有時(shí)出于布局需要，在“Header”下面還會(huì)加上用于頁(yè)面功能導(dǎo)航“Menu”。

Header 區(qū)域無(wú)menu時(shí)，高度一般設(shè)置40-60px。

Header 區(qū)域有menu時(shí)，高度設(shè)置到50-80px,特殊情況下，可適當(dāng)調(diào)整。

4.1 菜單 menu 布局結(jié)構(gòu) 

主菜單數(shù)目不應(yīng)太多，以單行布置為準(zhǔn)。

菜單結(jié)構(gòu)以:單行式、下拉式、樹(shù)形目錄式為主，菜單前的圖標(biāo)以 24px 為基準(zhǔn)，可進(jìn)行大小調(diào)節(jié)。

主菜單的寬度要做到基本接近，字?jǐn)?shù)最好不多于 4 個(gè)，不少于 2 個(gè)。

菜單深度層級(jí)要求控制在三層以?xún)?nèi)。
下拉菜單要根據(jù)菜單選項(xiàng)的含義進(jìn)行分組，并切按照一定的規(guī)則進(jìn)行排列。 

4.2 邊距

為避免頁(yè)面元素緊貼邊沿的情況發(fā)生，WEB 頁(yè)面和其中的表格都應(yīng)該設(shè)定邊距，最小邊距值為 “10px”。 

4.3 對(duì)齊方式

表格 表格內(nèi)部文字及數(shù)據(jù)，都以左對(duì)齊為準(zhǔn)。

表格內(nèi)內(nèi)容在左對(duì)齊時(shí)應(yīng)當(dāng)與左邊表格邊距保持至少 10px 的位置。

表格各個(gè)單元格寬度的設(shè)置應(yīng)采用百分比方式來(lái)進(jìn)行，特殊情況按固定值處理。 

圖片 以居中或左對(duì)齊為準(zhǔn)，同一內(nèi)容區(qū)域內(nèi)的圖片要做到大小統(tǒng)一，對(duì)齊方式統(tǒng)一。 

5. 其他注意事項(xiàng)

命名一律用小寫(xiě)，用：“_”連接

盡量用英文，如需要用到拼音方式的需要完整的拼音方式書(shū)寫(xiě)

不縮寫(xiě)，除非一看就明白的單詞

盡量用常見(jiàn)的的英文表達(dá)如：

消息message 

浮框 popover

單選框 Radiobox    

復(fù)選框 Checkbox    

上傳 Upload