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