腾讯的设计规范.pptVIP

火龙果 ? 整理 uml.org.cn Web 设计规范 V1.3 CDC WUI 2008/10/29 火龙果 ? 整理 uml.org.cn 目录 一、 基础规范 01 网页宽度 02 搜索框设计规范 ? 基础规范 ? 应用场景 03 页码设计规范 ? 普通页码翻页 ? 小型页码翻页 04 广告设计规范 05 文字的编排与设计 ? 文字大小 ? 文字颜色 ? 文字行距 ? 英文字体规范 ? 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息 二、参考指南 01 页面修饰 ? 简单的光影效果 ? 质感的表现 ? 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意 火龙果 ? 整理 uml.org.cn 一、网页宽度 最新显示器分辨率比例调查： 目前主流分辨率 1024X768 ，在此状态下，默认使用 910 的网页宽度，与腾讯网首页统一尺寸。 特殊情况 1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950 （ paipai ， Qbar 等 ) 990 （ QQshow ，游戏产品等 ) 2. 搜索类信息页面，采用自适应屏幕方式（比如 soso 搜索产品 ) 火龙果 ? 整理 uml.org.cn 一、网页宽度 不同浏览器，不同分辨率下网页第一屏最大可视区域： 有效可视区域（单位： Px ） 屏幕 一 二 三 800 600 1024 768 1280 1024 IE6.0 779 （ +21 ） 432 （ +168 ） 1003 （ +21 ） 600 （ +168 ） 1259 （ +21 ） 856 （ +168 ） IE7.0 779 （ +21 ） 452 （ +148 ） 1003 （ +21 ） 620 （ +148 ） 1259 （ +21 ） 876 （ +148 ） Firefox2.0 783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183) Opera9.0 781(+19) 461(+139) 1005(+19) 629(+139) 1261(+19) 885(+139) 说明： 比如 1024 × 768 下 IE7.0 的可视面积是（ 1024-21 ）×（ 768-148 ） 综合上面所有的数据，结论如下： 最保守的一屏大小是 IE6 下 800 × 600 ： 779 × 432 最广泛使用的一屏大小是 IE6 下 1024 × 768 ： 1003 × 600 火龙果 ? 整理 uml.org.cn 二、搜索框设计规范 1. 基础规范 ? 文本框 a. 搜索框文本框的长度应适中，至少应提供显示 10 个中文字符的宽度 b. 搜索组件中使用的文本框必须为单行文本框 c. 文本框的长度不得少于 130 个像素 高度不得低于 18 个像素 ? 帮助信息 a. 帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等， b. “限定标签提示”一般放在搜索框的上面 c. “热门关键词提示”一般放在搜索框下面 d. “标示性文字” 可设置灰色 (#cccccc) 显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有 真正帮助的提示，”请输入关键词”这样的提示不应出现 . ? 搜索按钮 a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标，而不能采用其他元素。 火龙果 ? 整理 uml.org.cn 二、搜索框设计规范 d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况： 文字形式： 搭配使用： 图形形式： c. 搜索 butto