WEBUI设计规范Word格式.docx
《WEBUI设计规范Word格式.docx》由会员分享，可在线阅读，更多相关《WEBUI设计规范Word格式.docx（9页珍藏版）》请在冰豆网上搜索。
①普通页面
②宽带页面
③自适应页面
④其他页面
普通页面宽带页面
自适应页面其他页面①
普通页面基本属性：
宽度
750px┊
背景白色#FFFFFF
┊
位置居中
边距上5px；
下20px；
左0px；
右0px适用范围：
系统首页正文页面等及其他非宽带产品线
②宽带页面基本属性：
900px┊
宽带频道首页和各级页面不包括正文页，及其他宽带产品线
③自适应基本属性：
100%┊
论坛聊天等页面
，
④其他页面基本属性：
500px┊
提示报错页面
基本结构：
其中每个模块之间的间距为10px，一般情况下标准头的高度为
页面版式：
版块基本元素：
所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。
版块组合形式：
版块元素之间距为8PX同名版块元素间的距离为6PX（例如EEC中EE距离为6EC距离为8PX
H2等分版式为6PX）
ABC版块AF版块DC版块EEC版块
!
CFC版块
FA版块
CD版式
CEE版式
H1通栏版式
H2等分版式
H3等分版式
H4等分版式
3：
色彩规范
白色正面：
雪花，纯静，清白，和平，轻盈,纯洁、天真、洁净、真理、反面：
寒冷，受伤，弱点，放弃,冷淡、贫乏，死寂白色在中华文化中也代表着死亡的颜色。
黑色正面：
夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致反面：
害怕，无效，死亡，秘密，阴险，邪恶，病态
灰色正面：
智能，成熟，财富，尊严，贡献,抑制否定：
混乱，衰变，具体，阴影，沮丧,厌烦
红色正面：
胜利激情爱力精力性别
热情、浪漫否定：
血战争火危险怒撒旦火焰、暴力、侵略红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作
$
黄色
正面：
明亮、光辉、黄金收获
改革否定：
懦弱
叛逆嫉妒冒险疾病愚蠢
紫色
懦弱，叛逆，妒忌，危机，否定：
疾病,愚蠢创造、谜、忠诚、神秘、稀有创造、谜、忠诚、神秘、稀有
绿色
植物，自然，春天，肥沃，希望,安全
自然、稳定、成长、反面：
衰变，无经验，羡慕，贪欲，逃避现实,坏的运气在北美文化中，绿色代表的是「行」，与环保意识有关，也经常被连结到有关财政方面的事物。
蓝色正面：
天空，海洋，精神性，定度，和平,个体忠诚、安全、保守、宁静、冷漠、悲伤否定：
寒冷，沮丧，忧郁，淫秽，神秘,保守主义
4：
字体规范
①文字格式
②连接样式
①
文字格式12号字格式：
字号12px┊字体宋体&
Arial┊
行距21px┊
粗体&
细体┊14号字格式：
字号14px┊字体宋体&
行距24px┊
细体┊10号字格式：
字号10px┊字体Arial
┊
行距无
细体
┊20号字格式：
字号20
px┊字体
黑体&
Arial┊
┊
说明：
10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体②
连接样式动态链接样式：
鼠标初始：
颜色#000099
■
┊状态下划线
__鼠标经过：
颜色#CC0000
__鼠标点击：
__鼠标结束：
颜色#660066
__
静态连接样式：
鼠标初始：
颜色#自定义□┊状态无鼠标经过：
颜色#自定义
□
颜色#自定义□┊状态无
重要链接样式：
应用组合：
①导航类
②标题类
③信息类
④段落类
⑤功能类
⑥注释类⑥表单类①导航类
a
统一导航：
12号文字格式=字号12px┊字体宋体&
细体┊颜色#333333
■┊
行距21px静态连接样式=鼠标初始：
颜色#333333
┊状态无鼠标经过：
┊状态无文字其它说明=关键词句之间用竖杠符号
|间隔
b
本页导航：
细体┊颜色#自定义
□┊
颜色#自定义□
c
标题导航：
12号文字格式=字号12px┊字体宋体&
■┊状态无鼠标经过：
┊状态无文字其它说明=关键词句之间用横杠符号
-间隔
d导航指向：
┊状态无文字其它说明=关键词句之间用大于号符号
>
间隔
②标题类
a版块标题：
20号文字格式=字号20px┊字体黑体┊
行距无静态连接样式=鼠标初始：
┊状态无文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为无
b一类标题：
14号文字格式=字号14px┊字体宋体&
粗体┊颜色#自定义
┊状态无文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为三角形符号
c二类标题：
行距24px静态连接样式=鼠标初始：
┊状态无文字其它说明=无
d三类标题：
e四类标题：
f头条标题：
20号文字格式=字号20px┊字体黑体&
g正文标题：
行距无文字其它说明=无
、
h段落标题：
行距24px文字其它说明=无③信息类
14项目列表：
14号文字格式=字号14px┊字体宋体&
行距24px动态连接样式=鼠标初始：
┊状态无文字项目符号
=点状·
&
数字01&
无符号文字其它说明
=
正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号
12项目列表：
行距21px动态连接样式=鼠标初始：
图片列表：
细体&
行距无动态连接样式=鼠标初始：
┊状态无文字其它说明
正常图片列表默认为细体，焦点图处采用粗体
④功能类
a普通功能文字：
细体┊颜色#000099
┊状态无文字其它说明=以下为各种功能文字应用形态更多：
更多>
更多应用于深背景连接连接色彩采用反白,连接颜色可自定义
全文：
[全文]详细：
[详细]评论：
[评论]翻页功能：
[上一页]
⑤注释类
（
a时间：
行距无b投票：
12号文字格式=字号14px┊字体宋体&
行距无c点击：
行距无
⑥表单类d表单文字：
行距无
正文类正文文字：
14号文字格式=字号14px
┊字体宋体&
Arial
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：
表单规范：
1按纽②输入框③文本框④菜单⑤复选框⑥单选框
1按纽字号12px┊字体宋体&
Arial┊细体┊颜色#333333
■┊行距无
按纽高度20px┊文字居中┊文字边距上4px下5px左20px右20px
2输入框字号12px┊字体宋体&
按纽高度20px┊文字居中┊文字边距上3px下5px左3px右3px
3文本框字号12px┊字体宋体&
行距无按纽高度20px┊文字居中┊文字边距上5px下5px左5px右5px
4复选框
默认单选框
默认
5菜单
字号12px┊字体宋体&
细体┊颜色#333333■
行距无按纽高度20px┊文字居中┊文字边距上3px下5px左3px右3px
升级会员 