WEBUI设计规范Word文档下载推荐.docx
《WEBUI设计规范Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《WEBUI设计规范Word文档下载推荐.docx（12页珍藏版）》请在冰豆网上搜索。
①
普通页面
基本属性：
宽度
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段落标题：
③信息类
14项目列表：
14号文字格式=字号14px┊字体宋体&
动态连接样式=鼠标初始：
文字项目符号
=点状·
&
数字01&
无符号
文字其它说明
=
正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号
12项目列表：
图片列表：
细体&
正常图片列表默认为细体，焦点图处采用粗体
④功能类
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■
6按纽高度20px┊文字居中┊文字边距上3px下5px左3px右3px
升级会员 