UI设计规范 2

Web Ui规范 版 本 号：  2014050401   规范制作：      UI设计组    为规范公司所开发的软件产品界面风格，明确UI设计师在进行界面设计时所需要遵循的准则和、界面中各个元素的规格及要求，确保web页面在风格、结构和功能上的基本统一，提高工作效率，便于团队合作开发，特制定此UI设计规范。此规范不具有唯一性，不是最终版本，文档中部份规范内容可与实际情况有出入。 1 颜色 1.1 应用原则 ● 整体色彩不宜超过3种，并遵循对比原则，突出色彩层次感。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。整个界面色彩尽量少的使用类别不同的颜色。 ● 当页面需要加边框时，边框的颜色最小值为底色颜色深度的200%， 最大为300%，具体如下： 1.2 颜色代码 ● 在CSS中，所有颜色都以16进制色值来进行写，如：#a0a0a0。 1.3 界面色彩 2 字体 2.1 字体大小与字型选择 2.1.1 字体使用原则 ● 字体以不超过2种字体为准，特殊情况除外。 ● 字体大小号的选择以12px、14px、16px等偶数字体大小为准。 ● 中文采用标准字体：“宋体”、“微软雅黑”，英文采用“Arial”或“verdana”，不能使用特殊字体(如隶书、草书等，特殊情况、广告图片中可以使用图片替代)，保证用户使用起来显示都很正常。 ● 另外所有控件尽量使用大小统一的字体属性，除了特殊提示信息，加强显示等列外情况。 2.1.2 标题字体 “微软雅黑”为主，“宋体”为辅的使用原则，用加粗的方式表达加强突出效果。 2.1.2.1 菜单标题 ● 菜单标题字体大小：最小取14px，最大取16px。 2.1.2.2 正文标题 ● 正文标题字体大小：最小取24px，最大取32px。 2.1.3 正文的字体 ● “宋体”为主，“微软雅黑”为辅的使用原则。 ● 一般情况下，正文字体大小以12px为准，特殊情况下可以加粗或取14px大小的字体。 2.1.4 按钮字体 2.1.4.1 登录、注册页面按钮 ● 字体大小以14px-16px为准。 ●“宋体”需加粗，“微软雅黑”可视页面具体情况面定。 ● 为突出，按钮字体可添加1px的阴影以增加立体感。 2.1.4.2 链接导航字体 ● 链接字体颜色不超过2种，即鼠标移入颜色与正常显示颜色。 ● header中的导航文字：12px或14px。 ● Menu中的导航文字：14px或18px，视具体情况选择。 ● Sidebar中的文字：12px或14px，如一级菜单使用14px、二级菜单使用12px，或一级菜单使用12px加粗、二级菜单使用12px。 ● Content中的文字：12px或14px。 ● footer中的文字：12px。 2.1.5 广告语及特别情况下的字体 ● 尽量使用识别度比较高的字体，异形字体杜绝使用。 ● 在生成html页面时用图片的方式来展现，以保证不同用户，不同浏览器显示的效果基本一致。 2.2 字体排版样式 2.2.1 行距 ● 标题：取默认行距，正文取：2倍行距，如下： font-size: 12。 line-height: 24px。 2.2.2 间距 ● 取默字体间距，特殊情况除外。 2.2.3 字段框与文字的排列 ● 4个字以内的文字与字段框平行排列。 ● 4个字以上的文字与字段框分行排列，原则上文字行宽度不超过字段框宽度，并且统一以左 (left) 对齐的方式排列。 2.2.4 文字与表格\边框的边距 ● 文字在页面中的left、right方向对齐时，与边框或表格的距离最小为10px，最大以不超过20px为准，如果在特殊版面下情况下，可再另行考虑。 ● 文字在页面中的top、bottom方向对齐时，文字与其top边距最小边距为0.5倍字体大小，或者采取top、bottom方向居中对齐的方式，具体如下： 3 图形图标 图形图标包括图片、按钮、图形框等,遵循常用标准，绝对不能出现名奇妙的图形图标。 3.1 通用类 ● 。 3.2 业务相关类 ● 。 3.3 风格类 ● 。 3.4 提示功能类 ● 在很多情况需要系统发送一些必要的提示信息到页面显示给用户，这些信息的分类有： 警告信息 禁止信息 操作执行成功信息 操作执行失败信息 错误信息 。 3.5 图标尺寸 ● 在制作图标时，尺寸以偶数尺寸为准，如：16px,32px==。 ● 为保证图标的显示效果，绝对最小图标尺寸为14px，最小尺寸为16px。 ● 为保证Web页面的整体效果，图标的最大使用以不超过48px为准。 ● 特殊情况下可不受此标准限制。 4 图片 4.1 图片格式 4.1.1原则上图片都使用png\jpg\gif格式。 4.1.2滚动图片动画则使用多张png\jpg\格式图片，使用程序进行轮换显示。 4.1.3图片文件在命名时统一使用如： ● “banner_001.png  \  banner_001.jpg  \  banner_001.gif”,其中”001”代表此类文件序号。 ● 如需对“banner_001.png”同一图片进行尺寸大小不一的多次使用时，可在文件名后再加序号的方式来加以区分,如： “banner_001_01.png”，“banner_001_02.png”，“banner_001_03.png”......。 4.2 图片文件大小控制(单位KB) ● 为保证速度，图片大小以保证图片质量的前题下越小越好。 ● 图片大小上限以100kb为准，超出100kb的，可考虑分成多张图片显示。 4.3 图片尺寸 ● 以不超过最大屏幕显示为准，如在Web页面设计中考虑会最大显示为1920×1080，则图片的最大宽度不要超过1920px。 ● 在制作图片时，图片尺寸单位统一以像素 (px) 为单位。 4.4 图片分辨率 ● 图片分辨率统一为72像素/英寸。 5 布局 ● 目前显示器分辨率主要有 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”。 5.1 页面结构布局方式 ● 在页面的布局中，各个区域大小的定义方式如下图： 5.1.2 头部区域header ● header区域在布局时，宽度按照100%设置，高度采用固定像素值来确定。 ● header区域无Menu区时，高度一般设置到50px-60px ● header区域有menu区时，高度设置到70px-80px，特殊情况，可再不影响整体美观及操作的前提下作特殊处理。 ● header内的Menu区与header的配置要求基本一样，宽度按照%比来设置，高度结合header的高度设置来确定，当Menu区为图标形式按钮时，header区域高度相应增加。 5.1.3 主体区域main 5.1.3.1 sidenav侧面树形菜单区 ● sidenav区域宽度结合“content”之间的黄金切分比例，按照固定像素的方式确定，高度按照比例方式来设置。 5.1.3.2 content内容区 ● content区域高度和宽度方向布局都是按照比例方式来设置。 5.1.4 底部区域footer ● 底部区域内容包含”友情链接”、“版权信息”等，宽度按照100%设置，高度采用所占的固定像素值来确定，具体调度视内容而定。 5.1.5 菜单menu布局结构 ● 主菜单数目不应太多，以单行布置为准。 ● 菜单结构以：单行式、下拉式、树形目录式为主，菜单前的图标以24px为基准，可进行大小调节。 ● 主菜单的宽度要做到基本接近，字数最好不应多于4个，不少于2个。 ● 菜单深度层级要求控制在三层以内。 ● 下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列。 5.2 边距 ● 为避免页面元素紧贴边沿的情况发生，WEB页面和其中的表格都应该设定边距，最小边距值为“3px”。 5.3 对齐方式 5.3.1 表格 ● 表格内部文字及数据，都以左对齐为准。 ● 表格内内容在左对齐时应当与左边表格边距保持至少10px的位置。 ● 表格各个单元格宽度的设置应采用百分比方式来进行，特殊情况按固定值处理。 5.3.2 图片 ● 以居中或居左对齐为准，同一内容区域内的图片要做到大小统一，对齐方式统一。 5.3.3 其他元素 6 代码(html / css / div / 文件目录层级) 6.1 标准命名 头：header 内容：content/containe 尾：footer 导航：nav 侧栏：sidebar 栏目：column 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：Menu 子菜单：subMenu 搜索：search 友情链接：friendlink 页脚：footer 内容：content 注册：regsiter 投票：vote 合作伙伴：partner 6.1.1 id的命名 ● 页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center ● 导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：Menu 子菜单：submenu 标题: title 摘要: summary ● 功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright 6.1.2 Class的命名 ● 颜色，使用16进制代码如： .ff8600 { color: #ff8600; } ● 字体大小，直接使用“font+字体大小”作为名称如： .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } ● 对齐样式，使用对齐目标的英文名称如： .left { float:left; } .bottom { float:bottom; } ● 标题栏样式，使用"类别+功能"的方式命名如： .bar_news { } .bar_product { } 6.1.3 其它相关注意事项 ● 一律用小写 ● 尽量用英文，如需要用到拼音方式的需要完整的拼音方式书写 ● 不缩写，除非一看就明白的单词 主要的 master.css 模块 module.css 基本共用 base.css 布局，版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css 6.2 文件目录层级结构 以最少的层次提供最清晰简便的访问结构。