新浪网UI设计规范Word文档下载推荐.docx

1、边距 上 5px；下 20px；左 0 px；右 0 px适用范围：新浪首页 频道首页 频道二级 频道各级 正文页面等及其他非宽带产品线 宽带页面900px 宽带频道首页和各级页面 不包括正文页，及其他宽带产品线 自适应100 % 论坛 聊天 直播 等页面500px 提示报错页面指导原则：属性中宽度、位置、边距为不可变数据。属性中背景白色为常用色值，对于特殊个性化频道可根据特殊要求变更色彩或者使用背景图。背景色彩遵循原则选择颜色尽量少用饱和度高的颜色，减少用户视觉疲劳。背景图片遵循原则尽量选择可复用的图片，减少页面文件量。如果遇到页面整体外描边效果参照图例（01）。页面结构基本结构： 标准头

2、内容区 标准尾标准头分为：新浪首页标准头 新闻中心标准头 频道首页标准头 频道二级标准头 正文页面标准头 产品页面标准头具体样式参见标准头规范标准尾分为：新浪首页标准尾 普通标准尾具体样式参见标准尾规范导航分为：频道导航 二级导航 专题导航&专题图 三级导航 导航指向具体样式参见导航规范内容版面：具体样式参见版式结构类型 通栏广告：具体样式参见广告规范结构应用： 新浪首页 新闻频道 普通频道 频道二级 专题页面 三级页面 正文页面 产品页面 标准头部类型分类： 新浪首页标准头 新闻中心标准头 频道首页标准头 频道二级标准头 正文页面标准头 产品页面标准头 新浪首页标准头组成部分：新浪网LOGO

3、 产品功能区 整体网站导航新浪首页 新闻中心标准头产品功能区 整体网站导航 广告区域新闻中心 频道首页标准头产品功能区 整体网站导航 广告区各频道首页 频道二级标准头频道LOGO 产品功能区 正文页面标准头正文导航 搜索功能频道二极三级和专题页面标准尾 首页标准头尾 通用标准尾 首页标准尾相关导航 版权信息 相关许可证号 通用标准尾本频道信息版权信息频道首页 频道二极三级和专题页面 正文页面页面导航 频道导航 二级导航 专题导航&专题图 三级导航 导航指向 频道导航频道LOGO 功能性导航 主导航位置区 次要导航位置区新闻中心、频道首页及产品页面均可使用 二级导航二级导航所有频道二级均可使用

4、专题导航专题图 导航专题页面 ，可根据需要添加删除专题导航 三级导航指向导航三级页面 正文导航正文页面版式结构：版块基本元素： 版块组合形式： 版块元素之间距为8PX同名版块元素间的距离为6PX（例如EEC中 EE距离为6 EC距离为8PX H2等分版式为6PX）ABC版块AF版块DC版块EEC版块CFC版块FA版块CD版式CEE版式H1通栏版式H2等分版式H3等分版式H4等分版式H（N）分版式模块类型标题种类： 焦点图 头条区 A类模块 B类模块 C类模块种类说明：以下图例除特殊注明外，所指距离均包括模块边框线焦点图头条区 模块标题 模块内容 图片列表和图文混排 段落关系 段落格式文字规范样

5、式类库： 文字格式 连接样式 项目符号注：所有文字设计均依据下列样式组合文字格式12号字格式： 字号 12 px 字体 宋体&Arial 行距 21 px 粗体&细体 14号字格式： 字号 14 px 字体 宋体&行距 24 px 10号字格式： 字号 10 px 字体 Arial 行距 无 细体 20号字格式： 字号 20px 字体黑体& 说明：10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体连接样式动态链接样式：鼠标初始： 颜色 #000099状态 下划线_鼠标经过： 颜色 #CC0000鼠标点击：鼠标结束： 颜色 #660066静态连接样式： 鼠标初始：

6、颜色 #自定义 状态 无 颜色 #自定义重要链接样式：项目符号：点状项目符号： 点 数字项目符号： 数字 01 02 03 04 05 06 07 08 09 10形状项目符号： 自定义应用组合： 导航类 标题类 信息类 段落类 功能类 注释类 表单类 导航类a统一导航： 12号文字格式 = 字号 12 px 字体 宋体&Arial 细体 颜色 #333333行距 21 px静态连接样式 = 鼠标初始： 颜色 #333333状态 无文字其它说明 = 关键词句之间用竖杠符号| 间隔b本页导航：细体 颜色 #自定义 颜色 #自定义 c标题导航：12号文字格式 = 字号 12 px 字体 宋体&状态

7、 无文字其它说明 = 关键词句之间用横杠符号- 间隔d 导航指向：文字其它说明 = 关键词句之间用大于号符号 间隔 标题类a 版块标题： 20号文字格式 = 字号 20 px 字体 黑体 行距 无文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为无a 一类标题： 14号文字格式 = 字号 14 px 字体 宋体&粗体 颜色 #自定义文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为三角形符号a 二类标题：行距 24 px文字其它说明 = 无a 三类标题：a 四类标题：c 头条标题：20号文字格式 = 字号 20 px 字体 黑体&c 正文标题：e 段落标题： 信息类14

8、项目列表：14号文字格式 = 字号 14 px 字体 宋体&动态连接样式 = 鼠标初始：文字项目符号= 点状 &数字01 &无符号文字其它说明=正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号12项目列表：图片列表：细体&正常图片列表默认为细体，焦点图处采用粗体 功能类a 普通功能文字：细体 颜色 #000099文字其它说明 = 以下为各种功能文字应用形态更多：更多更多应用于深背景连接连接色彩采用反白,连接颜色可自定义全文：全文详细：详细评论：评论翻页功能：上一页 注释类a 时间：b 投票： 12号文字格式 = 字号 14 px 字体 宋体&c 点击：行距 无a 表单文字

9、： 正文类正文文字：14号文字格式 = 字号 14 px 字体 宋体&Arial图片规范片类型： 横图 竖图 方图 专题图 横图比例 4:3 尺寸种类280*210应用 焦点图130*98应用 通栏图片列表120*90应用 图文混排 图片列表100*75应用 图片列表77*58 56*41 比例 3:2 130*87120*80比例 2:1 120*60 应用 广告性图片 竖图4 75*100 55*73 应用 图文混排 方图 比例 1:55*55 应用 图文混排38*38 专题图 普通专题 750*100 应用 普通专题特殊专题 750*200应用 特殊专题表单规范图片类型： 按纽 输入框

10、文本框 菜单 复选框 单选框 表单形式建议采用WIN2000默认外观。按纽字号 12 px 字体 宋体&按纽高度 20px文字居中 文字边距 上4px 下5px 左20px 右20px 输入框按纽高度 20px文字居中 文字边距 上3px 下5px 左3px 右3px 文本框按纽高度 20px文字居中 文字边距 上5px 下5px 左5px 右5px 复选框WIN2000默认外观。 单选框细体 颜色 #333333按纽高度 20px文字居中 文字边距 上3px 下5px 左3px 右3px色彩规范白色 正面：雪花，纯静，清白，和平，轻盈, 纯洁、天真、洁净、真理、反面：寒冷，受伤，弱点，放弃,

11、 冷淡、贫乏，死寂白色在中华文化中也代表着死亡的颜色。黑色夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致害怕，无效，死亡，秘密，阴险，邪恶，病态灰色智能，成熟，财富，尊严，贡献, 抑制否定：混乱，衰变，具体，阴影，沮丧, 厌烦红色胜利 激情 爱 力 精力 性别热情、浪漫血 战争 火 危险 怒 撒旦火焰、暴力、侵略红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作黄色明亮、光辉、黄金 收获改革懦弱叛逆 嫉妒 冒险 疾病 愚蠢紫色懦弱，叛逆，妒忌，危机，疾病, 愚蠢 创造、谜、忠诚、神秘、稀有创造、谜、忠诚、神秘、稀有绿色植物，自然，春天，肥沃，希望, 安全自然、稳定、成长、衰变，无经验，

12、羡慕，贪欲，逃避现实, 坏的运气在北美文化中，绿色代表的是行，与环保意识有关，也经常被连结到有关财政方面的事物。蓝色天空，海洋，精神性，定度，和平, 个体 忠诚、安全、保守、宁静、冷漠、悲伤 寒冷，沮丧，忧郁，淫秽，神秘, 保守主义白色在中华文化中也代表着死亡的颜色CULTUREREDBLUEGREENYELLOWWHITEUSA, EuropeDangerManliness, sweet, calm, AuthoritySafety, safe, sourCaution, CowardicePurityFranceNobilityFreedom, PeaceCriminalityprelim

13、inaryNeutralityEgypt, Arab NationsDeathVirtue, Faith, TruthFertility, StrengthHappiness, Welfare or WealthJoyIndiaLife, CreativityWelfare or Wealth, FertilitySuccessDeath, PurityJapanAnger, DangerShame, DespicablenessFuture, Youth, EnergyGrace, Dignity, Nobility, childish, joyfulChinaHappiness, Joy, FestivitySky, CloudsMing dynasty, royal