WEB UI 设计要求规范.docx

1、WEB UI 设计要求规范内蒙古万德系统集成有限公司WEB UI设计(流程/界面)规范一：UI设计基本概念与流程1.1 目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。1.2范围本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。1.3 概述UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶

2、段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。二：UI界面用户体验设计原则与规范1：应该遵循的基本原则无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。 2：页面外观规范 普通页面 宽带页面 自适应页面 其他页面普通页面 宽带页面自适应页面 其他页面普通页面基本属性：宽度750px 背景 白色#FFFFFF位置 居中边距 上 5px；下 20px；左 0 px；右 0 px适用范围：系统首页 正文页面等及其他

3、非宽带产品线 宽带页面基本属性：宽度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，一般情况下标准头的高度为 页面版式： 版块基本元

4、素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。 版块组合形式： 版块元素之间距为8PX同名版块元素间的距离为6PX（例如EEC中 EE距离为6 EC距离为8PX H2等分版式为6PX）ABC版块 AF版块 DC版块 EEC版块CFC版块 FA版块 CD版式CEE版式 H1通栏版式 H2等分版式 H3等分版式 H4等分版式3：色彩规范白色 正面：雪花，纯静，清白，和平，轻盈, 纯洁、天真、洁净、真理、反面：寒冷，受伤，弱点，放弃, 冷淡、贫乏，死寂白色在中华文化中也代表着死亡的颜色。黑色 正面：夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致反面：害怕，无效，死亡，秘密，阴险，邪

5、恶，病态灰色 正面：智能，成熟，财富，尊严，贡献, 抑制否定：混乱，衰变，具体，阴影，沮丧, 厌烦红色 正面：胜利 激情 爱 力 精力 性别热情、浪漫否定：血 战争 火 危险 怒 撒旦火焰、暴力、侵略红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作黄色正面：明亮、光辉、黄金 收获改革否定：懦弱叛逆 嫉妒 冒险 疾病 愚蠢紫色正面：懦弱，叛逆，妒忌，危机，否定：疾病, 愚蠢 创造、谜、忠诚、神秘、稀有创造、谜、忠诚、神秘、稀有绿色正面：植物，自然，春天，肥沃，希望, 安全自然、稳定、成长、反面：衰变，无经验，羡慕，贪欲，逃避现实, 坏的运气在北美文化中，绿色代表的是行，与环保意识有关，

6、也经常被连结到有关财政方面的事物。蓝色正面：天空，海洋，精神性，定度，和平, 个体 忠诚、安全、保守、宁静、冷漠、悲伤否定： 寒冷，沮丧，忧郁，淫秽，神秘, 保守主义4：字体规范 文字格式 连接样式 文字格式12号字格式： 字号 12 px 字体 宋体&Arial 行距 21 px 粗体&细体 14号字格式： 字号 14 px 字体 宋体&Arial 行距 24 px 粗体&细体 10号字格式： 字号 10 px 字体 Arial 行距 无 细体 20号字格式： 字号 20px字体黑体&Arial行距 无 细体 说明：10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为

7、宋体连接样式动态链接样式：鼠标初始： 颜色 #000099状态 下划线_鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #660066状态 下划线_静态连接样式： 鼠标初始： 颜色 #自定义 状态 无鼠标经过： 颜色 #自定义状态 下划线_鼠标点击： 颜色 #自定义状态 下划线_鼠标结束： 颜色 #自定义 状态 无重要链接样式： 鼠标初始： 颜色 #CC0000状态 下划线_鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #CC0000状态 下划线_应用组合： 导航类 标

8、题类 信息类 段落类 功能类 注释类 表单类 导航类a统一导航： 12号文字格式 = 字号 12 px 字体 宋体&Arial 细体 颜色 #333333行距 21 px静态连接样式 = 鼠标初始： 颜色 #333333状态 无鼠标经过： 颜色 #333333状态 下划线_鼠标点击： 颜色 #333333状态 下划线_鼠标结束： 颜色 #333333状态 无文字其它说明 = 关键词句之间用竖杠符号| 间隔b本页导航： 12号文字格式 = 字号 12 px 字体 宋体&Arial 细体 颜色 #自定义 行距 21 px静态连接样式 = 鼠标初始： 颜色 #自定义状态 无鼠标经过： 颜色 #自定义

9、状态 下划线_鼠标点击： 颜色 #自定义状态 下划线_鼠标结束： 颜色 #自定义 状态 无文字其它说明 = 关键词句之间用竖杠符号| 间隔c标题导航：12号文字格式 = 字号 12 px 字体 宋体&Arial 细体 颜色 #自定义 行距 21 px静态连接样式 = 鼠标初始： 颜色 #000099状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #000099状态 无文字其它说明 = 关键词句之间用横杠符号- 间隔d 导航指向： 12号文字格式 = 字号 12 px 字体 宋体&Arial 细体 颜色 #自定义 行距 21

10、px静态连接样式 = 鼠标初始： 颜色 #自定义状态 无鼠标经过： 颜色 #自定义状态 下划线_鼠标点击： 颜色 #自定义状态 下划线_鼠标结束： 颜色 #自定义 状态 无文字其它说明 = 关键词句之间用大于号符号 间隔 标题类a 版块标题： 20号文字格式 = 字号 20 px 字体 黑体 细体 颜色 #自定义 行距 无静态连接样式 = 鼠标初始： 颜色 #自定义状态 无鼠标经过： 颜色 #自定义状态 下划线_鼠标点击： 颜色 #自定义状态 下划线_鼠标结束： 颜色 #自定义 状态 无文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为无b 一类标题： 14号文字格式 = 字号 1

11、4 px 字体 宋体&Arial 粗体 颜色 #自定义 行距 无静态连接样式 = 鼠标初始： 颜色 #000099状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #000099状态 无文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为三角形符号c 二类标题： 14号文字格式 = 字号 14 px 字体 宋体&Arial 细体 颜色 #自定义 行距 24 px静态连接样式 = 鼠标初始： 颜色 #000099状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束

12、： 颜色 #000099状态 无文字其它说明 = 无d 三类标题： 12号文字格式 = 字号 12 px 字体 宋体&Arial 粗体 颜色 #自定义 行距 21 px静态连接样式 = 鼠标初始： 颜色 #000099状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #000099状态 无文字其它说明 = 无e四类标题： 12号文字格式 = 字号 12 px 字体 宋体&Arial 细体 颜色 #自定义 行距 21 px静态连接样式 = 鼠标初始： 颜色 #000099状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标

13、点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #000099状态 无文字其它说明 = 无f 头条标题：20号文字格式 = 字号 20 px 字体 黑体&Arial 细体 颜色 #自定义 行距 无静态连接样式 = 鼠标初始： 颜色 #CC0000状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #CC0000状态 无文字其它说明 = 无g 正文标题：20号文字格式 = 字号 20 px 字体 黑体&Arial 细体 颜色 #333333行距 无文字其它说明 = 无h 段落标题： 14号文字格式 = 字号 14 px

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

15、rial 细体 颜色 #自定义 行距 21 px动态连接样式 = 鼠标初始： 颜色 #000099状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #660066状态 无文字项目符号= 点状 & 数字01 & 无符号文字其它说明=正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号c图片列表：12号文字格式 = 字号 12 px 字体 宋体&Arial 细体&粗体 颜色 #自定义 行距 无动态连接样式 = 鼠标初始： 颜色 #000099状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色

16、#CC0000状态 下划线_鼠标结束： 颜色 #660066状态 无文字其它说明=正常图片列表默认为细体，焦点图处采用粗体 功能类a 普通功能文字： 12号文字格式 = 字号 12 px 字体 宋体&Arial 细体 颜色 #000099行距 无静态连接样式 = 鼠标初始： 颜色 #000099状态 无鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标结束： 颜色 #000099状态 无文字其它说明 = 以下为各种功能文字应用形态更多：更多 更多应用于深背景连接连接色彩采用反白,连接颜色可自定义全文：全文详细：详细评论：评论翻页功能：上一页 注释类

17、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 尺寸种类2

18、80*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：表单规范：1按纽 输入框 文本框 菜单 复选框 单选框1按纽 字号 12 px 字体 宋体&Arial细体颜色 #333333行距 无按纽高度 20px文字居中 文字边距 上4px 下5px 左20px右20px2输入框 字号 12 px 字体 宋体&Arial 细体 颜色 #333333行距 无按纽高度 20px文字居中 文字边距 上3px 下5px 左3px 右3px3文本框 字号 12 px 字体 宋体&Arial 细体 颜色 #333333行距 无按纽高度 20px文字居中 文字边距 上5px 下5px 左5px 右 5px4复选框默认 单选框默认5菜单字号 12 px 字体 宋体&Arial 细体 颜色 #333333行距 无按纽高度 20px文字居中 文字边距 上3px 下5px 左3px 右3px