WEB UI 设计规范.doc

内蒙古万德系统集成有限公司
WEB UI设计(流程/界面)规范
目录
一:UI设计基本概念与流程 - 3 -
目的 - 3 -
- 3 -
概述 - 3 -
二:UI界面用户体验设计原则与规范 - 4 -
1:应该遵循的基本原则 - 4 -
2:页面外观规范 - 4 -
②宽带页面 - 5 -
③自适应 - 5 -
④其他页面 - 5 -
基本结构 - 6 -
页面版式: - 6 -
版块基本元素:所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。 - 6 -
版块组合形式 - 7 -
3:色彩规范 - 8 -
4:字体规范 - 10 -
① 文字格式 - 10 -
②标题类 - 12 -
④功能类 - 15 -
⑤注释类 - 16 -
正文类 - 16 -
5:图片规范 - 16 -
主要图片 - 16 -
图片规格 - 17 -
6:表单规范: - 17 -
① 按纽 - 17 -
② 输入框 - 17 -
③ 文本框 - 18 -
④ 复选框 - 18 -
⑤ 菜单 - 18 -
一:UI设计基本概念与流程
目的
规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。

本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。
概述
UI设计包括交互设计,用户研究,与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始,UI设计师就应根据流程规范,参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节,履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计,并根据客户(市场)要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求,以保证每个环节的工作质量。
二:UI界面用户体验设计原则与规范
1:应该遵循的基本原则
无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致。
2:页面外观规范
①普通页面   ②宽带页面   ③自适应页面   ④其他页面
普通页面宽带页面
自适应页面其他页面
① 普通页面
基本属性:宽度 750px ┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上 5px;下 20px;左 0 px;右 0 px
适用范围:系统首页正文页面等及其他非宽带产品线
②宽带页面
基本属性:宽度 900px ┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上 5px;下 20px;左 0 px;右 0 px
适用范围:宽带频道首页和各级页面不包括正文页,及其他宽带产品线
③自适应
基本属性:宽度 100 % ┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上 5px;下 20px;左 0 px;右 0 px
适用范围:论坛聊天等页面
④其他页面
基本属性:宽度 500px ┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上 5px;下 20px;左 0 px;右 0 px
适用范围:提示报错页面
基本结构:其中每个模块之间的间距为10px,一般情况下标准头的高度为
页面版式:
版块基本元素:所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。 
版块组合形式: 版块元素之间距为8PX同名版块元素间的距离为6PX(例如EEC中 EE距离为6 EC距离为8PX  H2等分版式为6PX)
ABC版块 AF版块 DC版块 EEC版块 
CFC版块      FA版块     CD版式       CEE版式
H1通栏版式       H2等分版式          H3等分版式       H4等分版式
3:色彩规范
白色正面:雪花,纯静,清白,和平,轻盈, 纯洁、天真、洁净、真理、
反面:寒冷,受伤,弱点,放弃, 冷淡、贫乏,死寂
白色在中华文化中也代表着死亡的颜色。
黑色正面:夜晚,煤碳,能力,稳定,拘谨,可靠,能力,精致
反面:害怕,无效,死亡,秘密,阴险,邪恶,病态
灰色正面:智能,成熟,财富,尊严,贡献, 抑制
否定:混乱,衰变,具体,阴影,沮丧, 厌烦
红色正面:胜利***爱力精力性别 热情、浪漫
否定:血战争火危险怒撒旦火焰、暴力、侵略
红色在很多文化中代表的是停止的讯号,用于警告或禁止一些动作
黄色 正面:明亮、光辉、黄金收获 改革
否定:懦弱 叛逆嫉妒冒险疾病愚蠢
紫色 正面:懦弱,叛逆,妒忌,危机,
否定:疾病, 愚蠢创造