WEB产品线设计指南.docx

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