WEB产品线设计指南.docx

新浪网WEB产品线产品设计指南（含UI规范） 摘要: 以下分各模块介绍。设计规范介绍 顶顶顶顶什么是设计规范？《产品设计部·人机交互界面设计规范 》适用用于WEB产品线的人机交互界面设计方面的指导手册。贯穿以用户为中心的设计指导方向，根据新浪产品自身的特点制定出的一套规范，以达到提升用户体验，控制产品设... 以下分各模块介绍。 设计规范介绍 什么是设计规范？《产品设计部·人机交互界面设计规范 》适用用于WEB产品线的人机交互界面设计方面的指导手册。贯穿以用户为中心的设计指导方向，根据新浪产品自身的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。 谁去读设计规范？设计规范手册适合界面设计师，用户体验设计师，前台技术工程师，发布支持人员，运营编辑人员的参照。 设计理念 精于心 简于形 通过精心简约的设计,传达先进的技术给用户提供便捷简单的使用体验 设计指导原则 A 设计规范 逻辑性 设计为内容服务，根据逻辑关系通过视觉表现引导用户使用例如：google yahoo搜索结果页通过字体的颜色大小突出重要度 扩展性 采取模块化设计的可扩展性，减少修改和再开发的成本。例如：奥运项目左右模块尺寸的统一可以方便编辑随时调用修改内容的位置 统一性 用统一的视觉规范，变化不能超越统一的尺度，个性化内容要有统一风格的继承例如：无论每个频道如何追求个性不能脱离新浪整体风格，要有继承和延续保持从属关系 个案除外，个案量应有百分比， 本地化 考虑用户的文化背景及习惯，做到设计上本地化。体现人文关怀 例如：google，被搜索文字连接采用红色，及中国传统节日的logo体现。设计上不照搬英文站应根据中文特色，体现中文之美 遵循视觉设计原理 页面外观 页面类型： ① 普通页面 ????② 宽带页面 ????③ 自适应页面 ????④ 其他页面 类型说明： ①?普通页面基本属性：宽度?750px ┊?背景 白色#FFFFFF?┊?位置 居中?┊?边距 上 5px；下 20px；左 0 px；右 0 px适用范围：新浪首页 频道首页 频道二级 频道各级 正文页面等及其他非宽带???品线 ② 宽带页面基本属性：宽度?900px ┊?背景 白色#FFFFFF?┊?位置 居中?┊?边距 上 5px；下 20px；左 0 px；右 0 px适用范围：宽带频道首页和各级页面 不包括正文页，及其他宽带产品线 ③ 自适应基本属性：宽度?100 % ┊?背景 白色#FFFFFF?┊?位置 居中?┊?边距 上 5px；下 20px；左 0 px；右 0 px适用范围：论坛 聊天 直播 等页面 ④ 其他页面基本属性：宽度?500px ┊?背景 白色#FFFFFF?┊?位置 居中?┊?边距 上 5px；下 20px；左 0 px；右 0 px适用范围：提示报错页面 指导原则： 属性中宽度、位置、边距为不可变数据。属性中背景白色为常用色值，对于特殊个性化频道可根据特殊要求变更色彩或者使用背景图。背景色彩遵循原则选择颜色尽量少用饱和度高的颜色，?减少用户视觉疲劳。背景图片遵循原则尽量选择可复用的图片，减少页面文件量。如果遇到页面整体外描边效果参照图例(01)。 页面结构 基本结构： ① 标准头 ?② 内容区 ?③ 标准尾 标准头分为：新浪首页标准头 \ 新闻中心标准头 \ 频道首页标准头? \ 频道二级标准头 \ 正文页面标准头 \ 产品页面标准头具体样式参见 HYPERLINK /design_spec/web/d3.html \t _blank 标准头规范 标准尾分为：新浪首页标准尾 \ 普通标准尾具体样式参见 HYPERLINK /design_spec/web/d4.html \t _blank 标准尾规范 导航分为：?频道导航 \ 二级导航 \ 专题导航专题图 \ 三级导航 \ 导航指向?具体样式参见HYPERLINK /design_spec/web/d4.html \t _blank导航规范内容版面：具体样式参见HYPERLINK /design_spec/web/d6.html \t _blank版式结构类型 通栏广告：具体样式参见广告规范 结构应用： ① 新浪首页 ?② 新闻频道 ?③ 普通频道 ?④ 频道二级 ?⑤ 专题页面 ?⑥ 三级页面 ?⑦ 正文页面 ?⑧ 产品页面 标准头部 类型分类：① 新浪首页标准头 ??② 新闻中心标准头 ??③ 频道首页标准头?? ④ 频道二级标准头???⑤ 正文页面标准头 ?⑥　产品页面标准头?类型说明：① 新浪首页标准头组成部分：新浪网LOGO ┊ 产品功能区 ┊ 整体网站导航适用范围：新浪首页 ② 新闻中心标准头