腾讯网Web页面设计规范
• 搜索按钮 a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标,而不能采用其他元素。
二、搜索框设计规范
c. 搜索button规范文字为“搜索”避免采用其他描述。比如: d. 图标形式(放大镜)和文字形式可搭配使用,会出现如下三种情况: 文字形式: 搭配使用: 图形形式: • 使用SOSO引擎的可考虑在搜索框前加SOSO LOGO
•同一个web产品中搜索的位置和表现形式尽量保持一致
二、搜索框设计规范
2. 应用场景 强表现方式:
• 加大搜索框的显示,输入框内采用大字体(14号) • 突出搜索button的表现,更直观,更有点击欲 • 位置放在页头的中间并明显标示
二、搜索框设计规范
2. 应用场景 弱表现方式:
• 输入框内采用小字体(12号) •长度大约以刚好放完提示文字为基准 • 弱化搜索button的表现,可考虑用icon代替 •搜索框通常放在页头的右上角
• 不要使用按钮作长句广告: 错误案例:
• 腾讯网避免出现企鹅形象广告
可参考《广告、营销消息与营销邮件体验规范》
五、文字的编排与设计
总体原则:提高文字的辨识性和页面的易读性
1. 文字大小:建议使用12号+14号字体的混合搭配,13号也可酌情考虑,因为13号字体的不对称性,目前非主流。
• 需突出的内容部分、新闻标题、栏目标题等多使用14号字体 • 广告内容、辅助信息或介绍性文字等多使用12号字体 • 避免大面积使用加粗字体
一、网页宽度
不同浏览器,不同分辨率下网页第一屏最大可视区域:
屏幕
IE6.0 IE7.0 Firefox2.0 Opera9.0
800 779(+21) 779(+21) 783(+17) 781(+19)
一 600 432(+168) 452(+148) 417(+183) 461(+139)
有效可视区域(单位:Px)
Web设计规范 V1.3
CDC WUI 2008/10/29
目录
一、 基础规范
01 网页宽度 02 搜索框设计规范 • 基础规范 • 应用场景 03 页码设计规范 • 普通页码翻页 • 小型页码翻页 04 广告设计规范 05 文字的编排与设计 • 文字大小 • 文字颜色 • 文字行距 • 英文字体规范 • 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息
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)显示,点击输入框后提示文字消失。提示文字应简明扼要,文字一般用于内容、用途、搜索范围等对用户有 真正帮助的提示,”请输入关键词”这样的提示不应出现.
建议使用:
五、文字的编排与设计
深蓝色 当使用纯蓝色为文字颜色时,明度数值(B)不大于60%。当蓝色介于纯蓝往天蓝之间的时候,根据色相不同,应对明度值(B)作相应调整。 当色相越接近天蓝时,(B)值应该越低。 很多门户网站使用蓝色为文字颜色,常用的有
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、网页宽度
最新显示器分辨率比例调查: 目前主流分辨率 1024X768,在此状态下,默认使用910的网页宽度,与腾讯网首页统一尺寸。
特殊情况 1 . 信息量或图片量过大的情况,可以考虑加宽承载,给出两个参考尺寸: 950(paipai,Qbar等) 990(QQshow,游戏产品等) 2. 搜索类信息页面,采用自适应屏幕方式(比如soso搜索产品)
五、文字的编排与设计
特别注意:菜单尽量不使用12号加粗,这样会导致复杂的文字难以辨认。多采用14号加粗
2.文字颜色: • 同一网站需要定出主文字颜色,特殊情况下可以有2种左右的辅助文字颜色 • 一般情况下字体变化不要超过三种,若有需要,可以尽量采用统一字体的不同字族。
五、文字的编排与设计
• 正文的文字颜色多采用深蓝色或深灰色。在讨论颜色前,首先要明确一这个判断的衡量标准。我们是以Ps的颜色系统为讨论基础的。 灰黑色 当使用灰色为文字颜色时,正灰色的明度数值(B)不大于30%。 当使用带有色彩倾向的灰色时,根据色相不同,应对明度值(B)作相应调整。 因为不同纯色亮度不同,黄色亮度最高,蓝色/紫色亮度最底,其他色相则属中间亮度。因此使用亮度越高的色彩,其明度值(B)应该越低。
二
1024
768
1003(+21)
600(+168)
1003(+21)
620(+148)
1007(+17)
585(+183)
1005(+19)
629(+139)
三
1280
1024
ቤተ መጻሕፍቲ ባይዱ
1259(+21)
856(+168)
1259(+21)
876(+148)
1263(+17)
841(+183)
1261(+19)
三、页码设计规范
1.普通页码翻页的表现方法:
• 页码由三部分构成:一为页码状态区,表明页码在当前第几页位置以及共有多少页;二为页码翻页区,由上下翻页按钮与页码显示区构成;三为跳 转翻页区。三部分组成页码翻页区域位于产品右下角,三部分距离不可分开过大。
• 链接页码的设计力求简明独立,页码与页码之间的间距不小于鼠标手型的距离,如图所示
三、页码设计规范
2. 小型页码翻页的表现方法: • 链接页码为简明独立,不加任何修饰的数字形式 • 链接颜色由当前页面设计决定 • 数字大小建议为12-14px ,以易于点击为原则.
详见《产品页码翻页普用标准》
四、广告设计规范
•
禁止模仿任何windows标准控件,windows标准控件包括但不限于:鼠标指针、按钮以及窗口控制按钮等。