新浪网UI设计规范

新浪网产品设计指南（含UI规范）摘要:以下分各模块介绍。设计规范介绍什么是设计规范？《产品设计部·人机交互界面设计规范》适用用于WEB产品线的人机交互界面设计方面的指导手册。贯穿以用户为中心的设计指导方向，根据新浪产品自身的特点制定出的一套规范，以达到提升用户体验，控制产品设...以下分各模块介绍。设计规范介绍什么是设计规范？《产品设计部·人机交互界面设计规范》适用用于WEB产品线的人机交互界面设计方面的指导手册。贯穿以用户为中心的设计指导方向，根据新浪产品自身的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。谁去读设计规范？设计规范手册适合界面设计师，用户体验设计师，前台技术工程师，发布支持人员，运营编辑人员的参照。设计理念精于心简于形通过精心简约的设计,传达先进的技术给用户提供便捷简单的使用体验设计指导原则A设计规范逻辑性设计为内容服务，根据逻辑关系通过视觉表现引导用户使用例如：googleyahoo搜索结果页通过字体的颜色大小突出重要度扩展性采取模块化设计的可扩展性，减少修改和再开发的成本。例如：奥运项目左右模块尺寸的统一可以方便编辑随时调用修改内容的位置统一性用统一的视觉规范，变化不能超越统一的尺度，个性化内容要有统一风格的继承例如：无论每个频道如何追求个性不能脱离新浪整体风格，要有继承和延续保持从属关系个案除外，个案量应有百分比，本地化考虑用户的文化背景及习惯，做到设计上本地化。体现人文关怀例如：google，被搜索文字连接采用红色，及中国传统节日的logo体现。设计上不照搬英文站应根据中文特色，体现中文之美遵循视觉设计原理页面外观页面类型：①普通页面②宽带页面③自适应页面④其他页面类型说明：①普通页面基本属性：宽度750px┊背景白色#FFFFFF┊位置居中┊边距上5px；下20px；左0px；右0px适用范围：新浪首页频道首页频道二级频道各级正文页面等及其他非宽带产品线②宽带页面基本属性：宽度900px┊背景白色#FFFFFF┊位置居中┊边距上5px；下20px；左0px；右0px适用范围：宽带频道首页和各级页面不包括正文页，及其他宽带产品线③自适应基本属性：宽度100%┊背景白色#FFFFFF┊位置居中┊边距上5px；下20px；左0px；右0px适用范围：论坛聊天直播等页面④其他页面基本属性：宽度500px┊背景白色#FFFFFF┊位置居中┊边距上5px；下20px；左0px；右0px适用范围：提示报错页面指导原则：属性中宽度、位置、边距为不可变数据。属性中背景白色为常用色值，对于特殊个性化频道可根据特殊要求变更色彩或者使用背景图。背景色彩遵循原则选择颜色尽量少用饱和度高的颜色，减少用户视觉疲劳。背景图片遵循原则尽量选择可复用的图片，减少页面文件量。如果遇到页面整体外描边效果参照图例(01)。页面结构基本结构：①标准头②内容区③标准尾标准头分为：新浪首页标准头\新闻中心标准头\频道首页标准头\频道二级标准头\正文页面标准头\产品页面标准头具体样式参见标准头规范标准尾分为：新浪首页标准尾\普通标准尾具体样式参见标准尾规范导航分为：频道导航\二级导航\专题导航&专题图\三级导航\导航指向具体样式参见导航规范内容版面：具体样式参见版式结构类型通栏广告：具体样式参见广告规范结构应用：①新浪首页②新闻频道③普通频道④频道二级⑤专题页面⑥三级页面⑦正文页面⑧产品页面标准头部类型分类：①新浪首页标准头②新闻中心标准头③频道首页标准头④频道二级标准头⑤正文页面标准头⑥产品页面标准头类型说明：①新浪首页标准头组成部分：新浪网LOGO┊产品功能区┊整体网站导航适用范围：新浪首页②新闻中心标准头基本属性：产品功能区┊整体网站导航┊广告区域适用范围：新闻中心③频道首页标准头基本属性：产品功能区┊整体网站导航┊广告区适用范围：各频道首页④频道二级标准头基本属性：频道LOGO┊产品功能区适用范围：各频道首页⑤正文页面标准头基本属性：正文导航┊搜索功能适用范围：频道二极三级和专题页面标准尾类型分类：①首页标准头尾②通用标准尾类型说明：①首页标准尾基本属性：相关导航┊版权信息┊相关许可证号适用范围：新浪首页②通用标准尾基本属性：本频道信息┊相关导航┊版权信息适用范围：频道首页频道二极三级和专题页面正文页面页面导航类型分类：①频道导航②二级导航③专题导航&专题图④三级导航⑤导航指向类型说明：①频道导航组成部分：频道LOGO┊功能性导航┊主导航位置区┊次要导航位置区适用范围：新闻中心、频道首页及产品页面均可使用②二级导航组成部分：二级导航适用范围：所有频道二级均可使用③专题导航组成部分：专题图┊导航适用范围：专题页面，可根据需要添加删除专题导航④三级导航组成部分：指向导航适用范围：三级页面⑤正文导航基本属性：频道LOGO┊指向导航适用范围：正文页面版式结构：版块基本元素：版块组合形式：版块元素之间距为8PX同名版块元素间的距离为6PX（例如EEC中EE距离为6EC距离为8PXH2等分版式为6PX）ABC版块AF版块DC版块EEC版块CFC版块FA版块CD版式CEE版式H1通栏版式H2等分版式H3等分版式H4等分版式H(N)分版式模块类型标题种类：①焦点图②头条区③A类模块④B类模块⑤C类模块种类说明：以下图例除特殊注明外，所指距离均包括模块边框线①焦点图②头条区③模块标题④模块内容⑤图片列表和图文混排⑥段落关系⑦段落格式文字规范样式类库：①文字格式②连接样式③项目符号注：所有文字设计均依据下列样式组合①文字格式12号字格式：字号12px┊字体宋体&Arial┊行距21px┊粗体&细体┊14号字格式：字号14px┊字体宋体&Arial┊行距24px┊粗体&细体┊10号字格式：字号10px┊字体Arial┊行距无┊细体┊20号字格式：字号20px┊字体黑体&Arial┊行距无┊细体┊说明：10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体②连接样式动态链接样式：鼠标初始：颜色#000099■┊状态下划线__鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#660066■┊状态下划线__静态连接样式：鼠标初始：颜色#自定义□┊状态无鼠标经过：颜色#自定义□┊状态下划线__鼠标点击：颜色#自定义□┊状态下划线__鼠标结束：颜色#自定义□┊状态无重要链接样式：鼠标初始：颜色#CC0000■┊状态下划线__鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#CC0000■┊状态下划线__③项目符号：点状项目符号：点·数字项目符号：数字01020304050607080910形状项目符号：自定义应用组合：①导航类②标题类③信息类④段落类⑤功能类⑥注释类⑥表单类①导航类a统一导航：12号文字格式=字号12px┊字体宋体&Arial┊细体┊颜色#333333■┊行距21px静态连接样式=鼠标初始：颜色#333333■┊状态无鼠标经过：颜色#333333■┊状态下划线__鼠标点击：颜色#333333■┊状态下划线__鼠标结束：颜色#333333■┊状态无文字其它说明=关键词句之间用竖杠符号|间隔b本页导航：12号文字格式=字号12px┊字体宋体&Arial┊细体┊颜色#自定义□┊行距21px静态连接样式=鼠标初始：颜色#自定义□┊状态无鼠标经过：颜色#自定义□┊状态下划线__鼠标点击：颜色#自定义□┊状态下划线__鼠标结束：颜色#自定义□┊状态无文字其它说明=关键词句之间用竖杠符号|间隔c标题导航：12号文字格式=字号12px┊字体宋体&Arial┊细体┊颜色#自定义□┊行距21px静态连接样式=鼠标初始：颜色#000099■┊状态无鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#000099■┊状态无文字其它说明=关键词句之间用横杠符号-间隔d导航指向：12号文字格式=字号12px┊字体宋体&Arial┊细体┊颜色#自定义□┊行距21px静态连接样式=鼠标初始：颜色#自定义□┊状态无鼠标经过：颜色#自定义□┊状态下划线__鼠标点击：颜色#自定义□┊状态下划线__鼠标结束：颜色#自定义□┊状态无文字其它说明=关键词句之间用大于号符号间隔②标题类a版块标题：20号文字格式=字号20px┊字体黑体┊细体┊颜色#自定义□┊行距无静态连接样式=鼠标初始：颜色#自定义□┊状态无鼠标经过：颜色#自定义□┊状态下划线__鼠标点击：颜色#自定义□┊状态下划线__鼠标结束：颜色#自定义□┊状态无文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为无a一类标题：14号文字格式=字号14px┊字体宋体&Arial┊粗体┊颜色#自定义□┊行距无静态连接样式=鼠标初始：颜色#000099■┊状态无鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#000099■┊状态无文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为三角形符号a二类标题：14号文字格式=字号14px┊字体宋体&Arial┊细体┊颜色#自定义□┊行距24px静态连接样式=鼠标初始：颜色#000099■┊状态无鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#000099■┊状态无文字其它说明=无a三类标题：12号文字格式=字号12px┊字体宋体&Arial┊粗体┊颜色#自定义□┊行距21px静态连接样式=鼠标初始：颜色#000099■┊状态无鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#000099■┊状态无文字其它说明=无a四类标题：12号文字格式=字号12px┊字体宋体&Arial┊细体┊颜色#自定义□┊行距21px静态连接样式=鼠标初始：颜色#000099■┊状态无鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#000099■┊状态无文字其它说明=无c头条标题：20号文字格式=字号20px┊字体黑体&Arial┊细体┊颜色#自定义□┊行距无静态连接样式=鼠标初始：颜色#CC0000■┊状态无鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#CC0000■┊状态无文字其它说明=无c正文标题：20号文字格式=字号20px┊字体黑体&Arial┊细体┊颜色#333333■┊行距无文字其它说明=无e段落标题：14号文字格式=字号14px┊字体宋体&Arial┊细体┊颜色#333333■┊行距24px文字其它说明=无③信息类a14项目列表：14号文字格式=字号14px┊字体宋体&Arial┊细体┊颜色#自定义□┊行距24px动态连接样式=鼠标初始：颜色#000099■┊状态无鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#660066■┊状态无文字项目符号=点状·&数字01&无符号文字其它说明=正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号b12项目列表：12号文字格式=字号12px┊字体宋体&Arial┊细体┊颜色#自定义□┊行距21px动态连接样式=鼠标初始：颜色#000099■┊状态无鼠标经过：颜色#CC0000■┊状态下划线__鼠标点击：颜色#CC0000■┊状态下划线__鼠标结束：颜色#660066■┊状态无文字项目符号=点状·&数字01&无符号文字其它说明=正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号b图片列表：12号文字格式=字号12px┊字体宋体&Arial┊细体&粗体┊颜色#自定义□┊行距无动态连接样式=鼠标初始：颜色#000099■┊状态无鼠标经