和视频Wap页面设计开发规范.docVIP

WAP产品页面设计开发规范 和视频运营中心 2013年12月 目录 一、 设计理念 4 二、 设计规范 4 三、 设计指导原则 4 (一) 通用元素 4 1. 页面外观 5 2. 页面结构 6 3. 标准页面头部 6 4. 标准页面尾部 9 5. 页面导航 11 6. 色彩规范 13 7. 页面制作 16 (二) 基本元素 17 1. 触屏版UI设计规范 17 1) 图片样式 17 2) 通栏标题样式 18 3) 内容展现样式 19 4) 直播样式 23 5) 投票样式 24 6) 广告样式 25 7) 路径导航样式 25 8) 搜索样式 25 9) 按钮样式 26 10) 底部导航样式 27 11) 触屏版翻屏样式 27 2. 炫彩版UI设计规范 29 1) 图片样式 29 2) 通栏标题样式 30 3) 内容展示样式 31 4) 直播样式 33 5) 投票样式 34 6) 广告样式 34 7) 路径导航样式 34 8) 搜索样式 35 9) 按钮样式 35 10) 底部导航样式 36 3. 极简版UI设计规范 36 1) 图片样式 36 2) 内容展示样式 36 3) 直播样式 37 4) 投票样式 38 5) 广告样式 38 6) 路径导航样式 38 7) 搜索样式 38 8) 底部导航样式 39 四、 前端开发规范 39 1) 目的 39 2) 准则 40 3) 基本要求 40 4) HTML书写规范 42 5) CSS书写规范 43 6) JS书写规范 44 五、 上线流程 45 设计理念以用户需求为导向，保持清晰统一的设计风格，良好的直觉特征，以用户所熟悉的现实世界事务的抽象来给用户暗示与隐喻，帮助用户迅速使用页面内容，通过精心简约的设计，传达先进的技术给用户提供便捷简单的使用体验。设计规范逻辑性设计为内容服务，根据逻辑关系通过视觉表现引导用户使用扩展性采取模块化设计的可扩展性，减少修改和再开发的成本。统一性用统一的视觉规范，变化不能超越统一的尺度，个性化内容要有统一风格的继承首页、公共页、产品页、垂直栏目页、品牌栏目页、专题页、详情页标准头分为：首页标准头标准头标准头\产品页标准头垂直栏目标准头品牌栏目页标准头专题页标准头标准尾分为：首页标准尾 \ 标准尾内容版面：具体样式参见 标准页面头部 类型分类：80X30px（标蓝框位置） 栏目名称：影视、娱乐、原创、CCTV、央广视讯、G客等，其中垂直栏目统一使用两个字 字体 炫彩：font: 12px 微软雅黑触屏：font: 16px 微软雅黑70X24px（表蓝框位置） 栏目名称：影视、娱乐、原创、CCTV、央广视讯、G客等 极简版： 类型说明：栏目页面头部 基本属性：LOGO+栏目名称 ┊?功能性导航 ┊?各栏目内部导航入口 适用范围：产品页、垂直栏目页、品牌栏目页、专题页80X30px（标蓝框位置） 栏目名称：影视、娱乐、原创、CCTV、央广视讯、G客等 炫彩版： （标红框位置按栏目页面主题色而定） LOGO尺寸：70X24px（表蓝框位置） 栏目名称：影视、娱乐、原创、CCTV、央广视讯、G客等 极简版： 标准页面尾部 类型分类：类型分类： ┊ 颜色：#ffffff 高亮线条整体尺寸（3个汉字）：45X1px ┊ 颜色：#ffffff 高亮线条整体尺寸（4个汉字）：60X1px ┊ 颜色：#ffffff 适用版本：极简版 类型说明：栏目页面导航 基本属性：各栏目导航 适用范围：产品页、垂直栏目页、品牌栏目页、专题页 ┊ 颜色：#ffffff 高亮线条整体尺寸（3个汉字）：45X1px ┊ 颜色：#ffffff 高亮线条整体尺寸（4个汉字）：60X1px ┊ 颜色：#ffffff 适用版本：极简版 色彩规范 选择色盘时请考虑功能性的颜色 色彩构成（Interaction of color），可以理解为色彩的作用，是在色彩科学体系的基础上，研究符合人们知觉和心理原则的配色。配色有三类要素：光学要素（明度、色相、纯度），存在条件（面积、形状、肌理、位置），心理因素（冷暖、进退、轻重、软硬、朴素华丽），设计的时候运用逻辑思维选择合适的色彩搭配，产生恰当的色彩构成。最优秀的配色范本是自然界里的配色，我们观察自然界里的配色，通过理性的提炼最终获得我们所需要的东西。 小面积用强色，大面积用弱色 面积调和的原则是：色彩面积的大小可以改变对比效果，对比色双方面积越大，调和效果越弱；反之，双方面积越小，调和效果越强。对比双方面积均等，调和效果越弱；对比双方面积相差越大；调和效果越强。只有恰当的面积比才能取得最好的视觉平衡，形成最好的视觉效果。003a89（首页与公共页面使用，其他栏目页面不允许使用） 栏目页面请使用以下提供的web颜色： 玫红色 da2278 正面：否定：厌