腾讯设计规范.ppt

Web 设计规范 CDC WUI 2008/10/29 目录一、基础规范 01 网页宽度 02 搜索框设计规范基础规范应用场景 03 页码设计规范普通页码翻页小型页码翻页 04 广告设计规范 05 文字的编排与设计文字大小文字颜色文字行距英文字体规范文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息二、参考指南 01 页面修饰简单的光影效果质感的表现透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意?一、网页宽度最新显示器分辨率比例调查: 目前主流分辨率 1024X768 ,在此状态下,默认使用 910 的网页宽度,与腾讯网首页统一尺寸。特殊情况 1 . 信息量或图片量过大的情况,可以考虑加宽承载,给出两个参考尺寸: 950 ( paipai , Qbar 等) 990 ( QQshow ,游戏产品等) 2. 搜索类信息页面,采用自适应屏幕方式(比如 soso 搜索产品) ?一、网页宽度不同浏览器,不同分辨率下网页第一屏最大可视区域: 屏幕 有效可视区域(单位: Px ) 一 800 779 ( +21 ) 779 ( +21 ) 783(+17) 781(+19) 600 432 ( +168 ) 452 ( +148 ) 417(+183) 461(+139) 二 1024 1003 ( +21 ) 1003 ( +21 ) 1007(+17) 1005(+19) 768 600 ( +168 ) 620 ( +148 ) 585(+183) 629(+139) 三 1280 1259 ( +21 ) 1259 ( +21 ) 1263(+17) 1261(+19) 1024 856 ( +168 ) 876 ( +148 ) 841(+183) 885(+139) 说明: 比如 1024 × 768 下 的可视面积是( 1024-21 )×( 768-148 ) 综合上面所有的数据,结论如下: 最保守的一屏大小是 IE6 下 800 × 600 : 779 × 432 最广泛使用的一屏大小是 IE6 下 1024 × 768 : 1003 × 600 ?二、搜索框设计规范 a. 搜索框文本框的长度应适中,至少应提供显示 10 个中文字符的宽度 b. 搜索组件中使用的文本框必须为单行文本框 c. 文本框的长度不得少于 130 个像素高度不得低于 18 个像素帮助信息 a. 帮助信息一般包括三块内容:限定标签提示、标示性文字、热门关键词提示等, b. “限定标签提示”一般放在搜索框的上面 c. “热门关键词提示”一般放在搜索框下面 d. “标示性文字”可设置灰色(#) 显示,点击输入框后提示文字消失。提示文字应简明扼要,文字一般用于内容、用途、搜索范围等对用户有真正帮助的提示, ”请输入关键词”这样的提示不应出现. 搜索按钮 a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标,而不能采用其他元素。?二、搜索框设计规范 d. 图标形式(放大镜)和文字形式可搭配使用,会出现如下三种情况: 文字形式: 搭配使用: 图形形式: c. 搜索 button 规范文字为“搜索”避免采用其他描述。比如: 使用 SOSO 引擎的可考虑在搜索框前加 SOSO LOGO 同一个 web 产品中搜索的位置和表现形式尽量保持一致?二、搜索框设计规范 2. 应用场景强表现方式: 加大搜索框的显示,输入框内采用大字体( 14 号) 突出搜索 button 的表现,更直观,更有点击欲位置放在页头的中间并明显标示?二、搜索框设计规范输入框内采用小字体( 12 号) 长度大约以刚好放完提示文字为基准弱化搜索 button 的表现,可考虑用 icon 代替搜索框通常放在页头的右上角 2. 应用场景弱表现方式: ?三、页码设计规范 : 页码由三部分构成:一为页码状态区,表明页码在当前第几页位置以及共有多少页;二为页码翻页区,由上下翻页按钮与页码显示区构成;三为跳转翻页区。三部分组成页码翻页区域位于产品右下角,三部分距离不可分开过大。链接页码的设计力求简明独立,页码与页码之间的间距不小于鼠标手型的距离,如图所示?三、页码设计规范链接页码为简明独立,不加任何修饰的数字形式链接颜色由当前页面设计决定数字大小建议为 12-14px , 以易于点击为原则. 2. 小型页码翻页的表现方法: 详见《产品页码翻页普用标准》