為確保公司所開發的軟件產品界面風格的統一與一致性，明確 UI 設計師在進行界面設計時所需要遵循的準則和方法、 界面中各個元素的規格及要求，確保 web 頁面在風格、結構和功能上的基本統一，提高工作效率，便於團 隊合作開發，特制定此 UI 設計規範。此規範不具有唯一性，不是最終版本，文檔中部份規範可根據實際項目情況調整。
1. 顏色
1.1 應用原則
整體色彩不宜超過3種，並遵循對比原則，突出色彩層次感，除非特殊場合，杜絕使用對比強烈，讓人產生極度不舒適體驗的顏色，整個界面色彩儘量少使用類別不同的顏色。
1.2 顏色代碼標準
在 CSS 中，所有顏色都以16進制色值來進行書寫，如:#a0a0a0。
1.3 界面色彩
2. 字體
2.1 字體的選擇與字體大小
2.1.1 字體使用原則
字體以不超過2種字體為準，特殊情況除外
中文采用標準字體:“宋體”、“微軟雅黑”，英文采用“Arial”或“verdana”，儘量不使用特殊字體(如 隸書、草書等，特殊情況、廣告圖片中可以使用圖片替代)，保證用户使用起來顯示都很正常。
標題字體以“微軟雅黑”為主，“宋體”為輔的使用原則，用不同的字重以達到不同的效果。
2.1.2 字體大小的選擇
字體大小號的選擇以 12px、14px、16px 等偶數字體大小為準。
另外所有控件儘量使用大小統一的字體屬性，除了特殊提示信息，加強顯示等列外情況。
菜單標題字體大小：最小值14px,最大值16px。
正文標題字體大小：最小值24px,最大值32px。
2.2 字體排版樣式
2.2.1 行距
標題：取默認行距；正文：取2倍行距，如下：
Font-size :12 line-height:24px
2.2.2 間距
取字體默認間距，特殊情況除外。
2.2.3 文字與表格/邊框的邊距
文字在頁面中的 left、right 方向對齊時，與邊框或表格的距離最小為 10px，最大以不超過 20px 為準，如果在特殊版面情況下，可再適當調整。
文字在頁面中的 top、bottom 方向對齊時，文字與其 top 邊距最小邊距為 0.5 倍文字高度，或者 採取 top、bottom 方向居中對齊的方式。
3. 圖形圖標
圖形圖標包括圖片、按鈕、圖標等, 應遵循常用標準，杜絕標新立異的讓人無法理解的圖形圖標。
3.1 系統發送提示信息分類展示給用户，不同性質圖標分類使用，分類有：
警告信息
禁止信息
操作成功信息
操作失敗信息
錯誤信息
3.2 圖標尺寸
圖標尺寸以偶數為主，如：16px,32px…..
為保證圖標顯示效果，圖標最小尺寸為14px,最大不超過48px。
3.3 圖片格式
原則上使用png/jpg/gif格式。滾動輪播圖片則使用png/jpg格式
圖片文件命名統一使用如：
banner_001.png / banner_001.jpg,其中“001”代表圖片的順序號
如需對統一圖片不同尺寸的使用，可對命名進行區分：
banner_001_01.png，banner_001_02.png……
3.4 圖片文件大小
為保證速度，圖片大小以保證圖片質量的前題下越小越好。
圖片大小上限以 100kb 為準，超出 100kb 的，可考慮分成多張圖片顯示。
3.5 圖片尺寸
以不超過最大屏幕顯示為準，如在 Web 頁面設計中考慮會最大顯示為 1920×1080，則圖片的最大寬度不要超過 1920px。
在製作圖片時，圖片尺寸單位統一以像素 (px) 為單位。
3.6 圖片分辨率
圖片分辨率統一為 72 像素/英寸。
4. 佈局
目前顯示器分辨率主要有
16:9 的
1920×1080
1600×900
1366×768
16:10 的
1920×1200
1680×1050
1440×900
4:3 的
1024×768
為了更好的適應不同的寬度，在佈局時以自適應寬度為主。
最小顯示寬度統一為 980px。
一個完整的web頁面必須由以下三部分構成:
頭部區域header 、主體區域main、底部區域footer， 有時出於佈局需要，在“Header”下面還會加上用於頁面功能導航“Menu”。
Header 區域無menu時，高度一般設置40-60px。
Header 區域有menu時，高度設置到50-80px,特殊情況下，可適當調整。
4.1 菜單 menu 佈局結構
主菜單數目不應太多，以單行佈置為準。
菜單結構以:單行式、下拉式、樹形目錄式為主，菜單前的圖標以 24px 為基準，可進行大小調節。
主菜單的寬度要做到基本接近，字數最好不多於 4 個，不少於 2 個。
菜單深度層級要求控制在三層以內。
下拉菜單要根據菜單選項的含義進行分組，並切按照一定的規則進行排列。
4.2 邊距
為避免頁面元素緊貼邊沿的情況發生，WEB 頁面和其中的表格都應該設定邊距，最小邊距值為 “10px”。
4.3 對齊方式
表格 表格內部文字及數據，都以左對齊為準。
表格內內容在左對齊時應當與左邊表格邊距保持至少 10px 的位置。
表格各個單元格寬度的設置應採用百分比方式來進行，特殊情況按固定值處理。
圖片 以居中或左對齊為準，同一內容區域內的圖片要做到大小統一，對齊方式統一。
5. 其他注意事項
命名一律用小寫，用：“_”連接
儘量用英文，如需要用到拼音方式的需要完整的拼音方式書寫
不縮寫，除非一看就明白的單詞
儘量用常見的的英文表達如：
消息message
浮框 popover
單選框 Radiobox
複選框 Checkbox
上傳 Upload