WEBUI设计要求规范.doc

《WEBUI设计要求规范.doc》由会员分享，可在线阅读，更多相关《WEBUI设计要求规范.doc（15页珍藏版）》请在课桌文档上搜索。

1、目录一：UI设计根本概念与流程- 3 -1.1 目的- 3 - 3 -1.3 概述- 3 -二：UI界面用户体验设计原如此与规X- 4 -1：应该遵循的根本原如此- 4 -2：页面外观规X- 4 - 宽带页面- 5 - 自适应- 5 - 其他页面- 5 -根本结构- 6 -页面版式：- 6 -版块根本元素：所谓根本元素就是将其中任意几块元素拼接起来形成所需网页版块。- 6 -版块组合形式- 7 -3：色彩规X- 8 -4：字体规X- 10 -文字格式- 10 - 标题类- 12 - 功能类- 15 - 注释类- 16 -正文类- 16 -5：图片规X- 16 -主要图片- 16 -图片规格-

2、17 -6：表单规X：- 17 -按纽- 17 -输入框- 17 -文本框- 18 -复选框- 18 -菜单- 18 -一：UI设计根本概念与流程1.1 目的规X公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进展全流程负责，使UI设计的流程规X化，保证UI设计流程的可操作性。本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。1.3 概述UI设计包括交互设计，用户研究，与界面设计三个局部。基于这三局部的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规X，参与需求阶段、分析设计阶段、调研验证阶段、方案

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

4、页 正文页面等与其他非宽带产品线 宽带页面根本属性：宽度900px 背景 白色#FFFFFF位置 居中边距 上 5px；下 20px；左 0 px；右 0 px适用X围：宽带频道首页和各级页面 不包括正文页，与其他宽带产品线 自适应根本属性：宽度100 % 背景 白色#FFFFFF位置 居中边距 上 5px；下 20px；左 0 px；右 0 px适用X围：论坛 聊天 等页面 其他页面根本属性：宽度500px 背景 白色#FFFFFF位置 居中边距 上 5px；下 20px；左 0 px；右 0 px适用X围：提示报错页面根本结构：其中每个模块之间的间距为10px，一般情况下标准头的高度为页面

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

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

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

8、动态样式：鼠标初始： 颜色 #000099状态 下划线_鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标完毕： 颜色 #660066状态 下划线_静态连接样式： 鼠标初始： 颜色 #自定义 状态 无鼠标经过： 颜色 #自定义状态 下划线_鼠标点击： 颜色 #自定义状态 下划线_鼠标完毕： 颜色 #自定义 状态 无重要样式： 鼠标初始： 颜色 #CC0000状态 下划线_鼠标经过： 颜色 #CC0000状态 下划线_鼠标点击： 颜色 #CC0000状态 下划线_鼠标完毕： 颜色 #CC0000状态 下划线_应用组合： 导航类 标题类 信息类 段落类

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

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

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

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

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

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

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

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

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

18、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：图片规X主要图片比例 4:3 尺寸种类280*210应用焦点图130*98应用 通栏图片

19、列表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：表单规X： 按纽 输入框 文本框 菜单 复选框 单项选择框 按纽字号 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