WEBUI设计规范Word文档下载推荐.docx

1、普通页面基本属性：宽度750px 背景 白色#FFFFFF位置 居中边距 上 5px；下 20px；左 0 px；右 0 px适用范围：系统首页 正文页面等及其他非宽带产品线 宽带页面900px 宽带频道首页和各级页面 不包括正文页，及其他宽带产品线 自适应100 % 论坛 聊天 等页面 其他页面500px 提示报错页面基本结构：其中每个模块之间的间距为10px，一般情况下标准头的高度为 页面版式：版块基本元素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。 版块组合形式： 版块元素之间距为8PX同名版块元素间的距离为6PX（例如EEC中 EE距离为6 EC距离为8PX H2等分

2、版式为6PX）ABC版块 AF版块 DC版块 EEC版块CFC版块 FA版块 CD版式CEE版式 H1通栏版式 H2等分版式 H3等分版式 H4等分版式3：色彩规范白色 正面：雪花，纯静，清白，和平，轻盈, 纯洁、天真、洁净、真理、反面：寒冷，受伤，弱点，放弃, 冷淡、贫乏，死寂白色在中华文化中也代表着死亡的颜色。黑色 正面：夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致害怕，无效，死亡，秘密，阴险，邪恶，病态灰色 正面：智能，成熟，财富，尊严，贡献, 抑制否定：混乱，衰变，具体，阴影，沮丧, 厌烦红色 正面：胜利 激情 爱 力 精力 性别热情、浪漫血 战争 火 危险 怒 撒旦火焰、暴力、侵略

3、红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作黄色正面：明亮、光辉、黄金 收获改革懦弱叛逆 嫉妒 冒险 疾病 愚蠢紫色懦弱，叛逆，妒忌，危机，疾病, 愚蠢 创造、谜、忠诚、神秘、稀有创造、谜、忠诚、神秘、稀有绿色植物，自然，春天，肥沃，希望, 安全自然、稳定、成长、衰变，无经验，羡慕，贪欲，逃避现实, 坏的运气在北美文化中，绿色代表的是行，与环保意识有关，也经常被连结到有关财政方面的事物。蓝色正面：天空，海洋，精神性，定度，和平, 个体 忠诚、安全、保守、宁静、冷漠、悲伤 寒冷，沮丧，忧郁，淫秽，神秘, 保守主义4：字体规范 文字格式 连接样式 文字格式12号字格式： 字号 12

4、px 字体 宋体&Arial 行距 21 px 粗体&细体 14号字格式： 字号 14 px 字体 宋体&行距 24 px 10号字格式： 字号 10 px 字体 Arial 行距 无 细体 20号字格式： 字号 20px字体黑体&Arial说明：10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体连接样式动态链接样式：鼠标初始： 颜色 #000099状态 下划线_鼠标经过： 颜色 #CC0000鼠标点击：鼠标结束： 颜色 #660066静态连接样式： 鼠标初始： 颜色 #自定义 状态 无 颜色 #自定义重要链接样式：应用组合： 导航类 标题类 信息类 段落类 功能

5、类 注释类 表单类 导航类a统一导航： 12号文字格式 = 字号 12 px 字体 宋体&细体 颜色 #333333行距 21 px静态连接样式 = 鼠标初始： 颜色 #333333状态 无文字其它说明 = 关键词句之间用竖杠符号| 间隔b本页导航：细体 颜色 #自定义 颜色 #自定义 c标题导航：12号文字格式 = 字号 12 px 字体 宋体&状态 无文字其它说明 = 关键词句之间用横杠符号- 间隔d 导航指向：文字其它说明 = 关键词句之间用大于号符号 间隔 标题类a 版块标题： 20号文字格式 = 字号 20 px 字体 黑体 行距 无文字其它说明 = 标题文字位置前可选择性修饰符号和

6、图片,默认为无b 一类标题： 14号文字格式 = 字号 14 px 字体 宋体&粗体 颜色 #自定义文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为三角形符号c 二类标题：行距 24 px文字其它说明 = 无d 三类标题：e四类标题：f 头条标题：20号文字格式 = 字号 20 px 字体 黑体&g 正文标题：h 段落标题： 信息类14项目列表：14号文字格式 = 字号 14 px 字体 宋体&动态连接样式 = 鼠标初始：文字项目符号= 点状 &数字01 &无符号文字其它说明=正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号12项目列表：图片列表：细体&正常

7、图片列表默认为细体，焦点图处采用粗体 功能类a 普通功能文字：细体 颜色 #000099文字其它说明 = 以下为各种功能文字应用形态更多：更多更多应用于深背景连接连接色彩采用反白,连接颜色可自定义全文：全文详细：详细评论：评论翻页功能：上一页 注释类a 时间：b 投票： 12号文字格式 = 字号 14 px 字体 宋体&c 点击：行距 无 表单类d 表单文字： 正文类正文文字：14号文字格式 = 字号 14 px 字体 宋体&Arial5：图片规范主要图片比例 4:3 尺寸种类280*210应用焦点图130*98应用 通栏图片列表120*90应用 图文混排 图片列表100*75应用 图片列表7

8、7*58 56*41 比例 3:2 尺寸种类130*87120*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 字体 宋体&按纽高度 20px文字居中 文字边距 上3px 下5px 左3px 右3px3 文本框 字号 12 px 字体 宋体&行距 无按纽高度 20px文字居中 文字边距 上5px 下5px 左5px 右 5px4 复选框默认 单选框默认5 菜单字号 12 px 字体 宋体&细体 颜色 #3333336 按纽高度 20px文字居中 文字边距 上3px 下5px 左3px 右3px