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种字体为准,特殊情况除外。
● 字体大小号的选择以12px14px16px等偶数字体大小为准。
● 中文采用标准字体:“宋体”、“微软雅黑”,英文采用“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中的导航文字:12px14px
● Menu中的导航文字:14px18px,视具体情况选择。
● Sidebar中的文字:12px14px,如一级菜单使用14px、二级菜单使用12px,或一级菜单使用12px加粗、二级菜单使用12px
● Content中的文字:12px14px
● 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_001ui网页界面设计_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

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。