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号字格式： 字号 20px字体黑体&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文字其它说明 = 无 信息类a14项目列表：14号文字格式 = 字号 14 px 字体 宋体&Arial 细体 颜色 #自定义 行距 24 px动态连接样式 = 鼠标初始： 颜色 #000099状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #660066状态 无文字项目符号= 点状 & 数字01 & 无符号文字其它说明=正常默认为点状符号，排行性质为数字符号，词语或小空间区域可采取无符号b12项目列表：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