WEBUI设计标准规范.doc

内蒙古万德系统集成
WEB UI设计(步骤/界面)规范
目录
一：UI设计基础概念和步骤 - 3 -
1.1 目标 - 3 -
1.2范围 - 3 -
1.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设计基础概念和步骤
1.1 目标
规范企业UI设计步骤，使UI设计师参与到产品设计整个步骤中来，对产品易用性进行全步骤负责，使UI设计步骤规范化，确保UI设计步骤可操作性。
1.2范围
本文档用于界面设计,本文档读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。
1.3 概述
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：色彩规范
白色 正面：雪花，纯静，清白，和平，轻盈, 纯洁、天真、洁净、真理、
反面：严寒，受伤，弱点，放弃, 冷淡、贫乏，死寂
白色在中华文化中也代表着死亡颜色。
黑色 正面：夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精巧
反面：害怕，无效，死亡，秘密，阴险，邪恶，病态
灰色 正面：智能，成熟，财富，尊严，贡献, 抑制
否定：混乱，衰变，具体，阴影，沮丧, 厌烦
红色 正面：胜利 激情 爱 力 精力 性别 热情、浪漫
否定：血 战争 火 危险 怒 撒旦火焰、暴力、侵略
红色在很多文化中代表是停止讯号，用于警告或严禁部分动作
黄色 正面：明亮、光辉、黄金 收获 改革
否定：懦弱 叛逆 嫉妒 冒险 疾病 愚蠢
紫色 正面：懦弱，叛逆，妒忌，危机，
否定：疾病, 愚蠢 发明、谜、忠诚、神秘、稀有
发明、谜、忠诚、神秘、稀有
绿色 正面：植物，自然，春天，肥沃，期望, 安全  自然、稳定、成长、
反面：衰变，无经验，羡慕，贪欲，逃避现实, 坏运气
在北美文化中，绿色代表是「行」，和环境保护意识相关，也常常被连结到相关财政方面事物。
蓝色正面：天空，海洋，精神性，定度，和平, 个体 忠诚、安全、保守、宁静、冷漠、悲伤
否定： 严寒，沮丧，忧郁，淫秽，神秘, 保守主义

4：字体规范
① 文字格式     ② 连接样式   
① 文字格式
12号字格式： 字号 12 px ┊字体 宋体&Arial ┊ 行距 21 px ┊ 粗体&细体 ┊
14号字格式： 字号 14 px ┊字体 宋体&Arial ┊ 行距 24 px ┊ 粗体&细体 ┊
10号字格式： 字号 10 px ┊字体 Arial    ┊ 行距 无   ┊ 细体    ┊
20号字格式： 字号 20 px┊字体 黑体&Arial┊ 行距 无   ┊ 细体    ┊
说明：10号字格式，12号字格式，14号字格式中数字英文字母为Arial，汉字为宋体
② 连接样式
动态链接样式： 鼠标初始： 颜色 #000099 ■ ┊状态 下划线 __
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #660066 ■ ┊状态 下划线 __
静态连接样式： 鼠标初始： 颜色 #自定义 □ ┊状态 无
鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __
鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __
鼠标结束： 颜色 #自定义 □ ┊状态 无
关键链接样式： 鼠标初始： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #CC0000 ■ ┊状态 下划线 __
应用组合：① 导航类 ② 标题类 ③ 信息类 ④ 段落类 ⑤ 功效类  ⑥注释类 ⑥ 表单类

① 导航类
a 统一导航： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #333333 ■ ┊状态 无
鼠标经过： 颜色 #333333 ■ ┊状态 下划线 __
鼠标点击： 颜色 #333333 ■ ┊状态 下划线 __
鼠标结束： 颜色 #333333 ■ ┊状态 无
文字其它说明 = 关键词句之间用竖杠符号 | 间隔
b 本页导航： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #自定义 □ ┊状态 无
鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __
鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __
鼠标结束： 颜色 #自定义 □ ┊状态 无
文字其它说明 = 关键词句之间用竖杠符号 | 间隔
c 标题导航： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #000099 ■┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 关键词句之间用横杠符号 - 间隔
d 导航指向： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #自定义 □ ┊状态 无
鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __
鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __
鼠标结束： 颜色 #自定义 □ ┊状态 无
文字其它说明 = 关键词句之间用大于号符号 > 间隔
② 标题类
a 版块标题： 20号文字格式 = 字号 20 px ┊ 字体 黑体 ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 无
静态连接样式 = 鼠标初始： 颜色 #自定义 □ ┊状态 无
鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __
鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __
鼠标结束： 颜色 #自定义 □ ┊状态 无
文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为无
b 一类标题： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 粗体 ┊ 颜色 #自定义 □ ┊ 行距 无
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为三角形符号
c 二类标题： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 24 px
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 无
d 三类标题： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 粗体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 无
e四类标题： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 无
f 头条标题： 20号文字格式 = 字号 20 px ┊ 字体 黑体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 无
静态连接样式 = 鼠标初始： 颜色 #CC0000 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #CC0000 ■ ┊状态 无
文字其它说明 = 无
g 正文标题： 20号文字格式 = 字号 20 px ┊ 字体 黑体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无
文字其它说明 = 无
h 段落标题： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 24 px
文字其它说明 = 无

③ 信息类
a 14项目列表： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 24 px
动态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #660066 ■ ┊状态 无
文字项目符号 = 点状· &  数字01 &  无符号
文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或小空间区域可采取无符号
b 12项目列表： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px
动态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #660066 ■ ┊状态 无
文字项目符号 = 点状· &  数字01 &  无符号
文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或小空间区域可采取无符号
c 图片列表：   12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体&粗体 ┊ 颜色 #自定义 □ ┊ 行距 无
动态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #660066 ■ ┊状态 无
文字其它说明 = 正常图片列表默认为细体，焦点图处采取粗体
④ 功效类
a 一般功效文字： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #000099 ■ ┊ 行距 无
静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无
鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __
鼠标结束： 颜色 #000099 ■ ┊状态 无
文字其它说明 = 以下为多种功效文字应用形态
更多：更多>>    更多应用于深背景连接连接色彩采取反白,连接颜色可自定义
全文：[全文]
具体：[具体]
评论：[评论]
翻页功效：[上一页]
⑤ 注释类
a 时间： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无
b 投票： 12号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无
c 点击： 12号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无             ⑥ 表单类
d 表单文字：12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■┊ 行距 无
正文类
正文文字：14号文字格式 = 字号 14 px  ┊ 字体 宋体&Arial  ┊ 细体 ┊ 颜色 #333333 ■┊ 行距 无
5：图片规范
关键图片
百分比 4:3 ┊尺寸种类280*210┊应用焦点图
130*98  ┊ 应用 通栏图片列表
120*90  ┊ 应用 图文混排 图片列表
100*75  ┊ 应用 图片列表
77*58   ┊ 应用 图片列表
56*41   ┊ 应用 图片列表
百分比 3:2 ┊尺寸种类  130*87┊ 应用 通栏图片列表
120*80  ┊应用 图片列表
百分比 2:1 ┊尺寸种类120*60 ┊应用 广告性图片
图片规格
1、文件小而且画质要相对清楚。通常300K左右，不能超出500K。
2、图片格式为jpg、gif、png格式。
3、必需是RGB色图片，CMYK等标准无法显示。
6：表单规范：
① 按纽 ② 输入框 ③ 文本框 ④ 菜单 ⑤ 复选框 ⑥ 单选框 
① 按纽 字号 12 px ┊字体 宋体&Arial┊细体┊颜色 #333333 ■┊行距 无
按纽高度 20px┊文字居中┊ 文字边距 上4px 下5px 左20px右20px        
② 输入框 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■┊行距 无
按纽高度 20px┊文字居中┊ 文字边距 上3px 下5px 左3px 右3px
③ 文本框 字号 12 px ┊字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无按纽高度 20px┊文字居中┊ 文字边距 上5px 下5px 左5px 右 5px
④ 复选框  默认 单选框  默认
⑤ 菜单 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333■ ┊ 行距 无
按纽高度 20px┊文字居中┊ 文字边距 上3px 下5px 左3px 右3px