为确保公司所开发的软件产品界面风格的统一与一致性，明确 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