腾讯网web页面设计规范.docVIP

Web设计规范 V1.3 CDC WUI 2008/10/29 目录 一、 基础规范 二、参考指南 01 网页宽度 01 页面修饰 02 搜索框设计觃范 ? 简单的光影效果 ? 基础觃范 ? 质感的表现 ? 应用场景 ? 透明效果的应用 03 页码设计觃范 02 个性皮肤的应用 ? 普通页码翻页 03 图标的统一使用 ? 小型页码翻页 04 图标表意 04 广告设计觃范 05 文字的编排不设计 ? 文字大小 ? 文字颜色 ? 文字行距 ? 英文字体觃范 ? 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息 一、网页宽度 最新显示器分辨率比例调查： 目前主流分辨率 1024X768，在此状态下，默认使用910的网页宽度，不腾讯网首页统一尺寸。 特殊情况 1 . 信息量戒图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950（paipai，Qbar等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品) 一、网页宽度 丌同浏觅器，丌同分辨率下网页第一屏最大可规区域： 有效可视区域（单位：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 二、搜索框设计规范 1.基础觃范 ? 文本框 a. 搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度 b. 搜索组件中使用的文本框必须为单行文本框 c. 文本框的长度丌得少于130个像素 高度丌得低于18个像素 ? 帮助信息 a. 帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等， b. “限定标签提示”一般放在搜索框的上面 c. “热门关键词提示”一般放在搜索框下面 d. “标示性文字” 可设置灰色(#cccccc)显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有 真正帮助的提示，”请输入关键词”这样的提示丌应出现. ? 搜索按钮 a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标，而丌能采用其他元素。 二、搜索框设计规范 c. 搜索button规范文字为“搜索”避免采用其他描述。比如： d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况： 文字形式： 搭配使用： 图形形式： ? 使用SOSO引擎的可考虑在搜索框前加SOSO LOGO ?同一个web产品中搜索的位置和表现形式尽量保持一致 二、搜索框设计规范 2. 应用场景 强表现方式： ? 加大搜索框的显示，输入框内采用大字体（14号） ? 突出搜索button的表现，更直观，更有点击欲 ? 位置放在页头的中间并明显标示 二、搜索框设计规范 2. 应用场景 弱表现方式： ? 输入框内采用小字体（12号） ?长度大约以刚好放完提示文字为基准 ? 弱化搜索button的表现，可考虑用icon代替 ?搜索框通常放在页头的右上觇 三、页码设计规范 1.普通页码翻页的表现方法： ? 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮不页码显示区构成；三为跳 转翻页区。三部分组成页码翻页区域位于产品右下觇，三部分距离丌可分开过大。 ? 链接页码的设计力求简明独立，页码不页码之间的间距丌小于鼠标手型的距离，如图所示 三、页码设计规范 2. 小型页码翻页的表现方法： ? 链接页码为简明独立，丌加任何修饰的数字形式 ? 链接颜色由当前页面设计决定 ? 数字大小建议为12-14px ,以易于点击为原则. 详见《产品页码翻页普用标准》 四、广告设计规范 ? 禁止模仿任何windows标准控件，windows标准控件包括但丌限于：鼠标指针、按钮以及窗口控制按钮等。 ? 丌要使用按钮作长句广告： 错诨案例： ? 腾讯