1. Web 设计规范 V1 .3
CDC WUI 2008/10/29

2. 目录
一、 基础规范 二、参考指南
01 网页宽度 01 页面修饰
02 搜索框设计规范 • 简单的光影效果
• 基础规范 • 质感的表现
• 应用场景 • 透明效果的应用
03 页码设计规范 02 个性皮肤的应用
• 普通页码翻页 03 图标的统一使用
• 小型页码翻页 04 图标表意
04 广告设计规范
05 文字的编排与设计
• 文字大小
• 文字颜色
• 文字行距
• 英文字体规范
• 文字链接
06 整齐的概念和应用
07 模块化表现
08 页脚信息

3. 一、网页宽度
最新显示器分辨率比例调查：
目前主流分辨率 1 024X768 ，在此状态下，默认使用 91 0 的网页宽度，与腾讯网首页统一尺寸。
特殊情况
1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸：
950 （ pa i ， Q ba
ipa r等 )
990 （ Q Q show ，游戏产品等 )
2. 搜索类信息页面，采用自适应屏幕方式（比如 soso 搜索产品 )

4. 一、网页宽度
不同浏览器，不同分辨率下网页第一屏最大可视区域：
有效可视区域（单位： Px ）
一 二 三
屏幕 800 600 1 024 768 1 280 1 024
I E6.0 779 （ + 21 ） 432 （ + 1 68 ） 1 003 （ + 21 ） 600 （ + 1 68 ） 1 259 （ + 21 ） 856 （ + 1 68 ）
I E7.0 779 （ + 21 ） 452 （ + 1 48 ） 1 003 （ + 21 ） 620 （ + 1 48 ） 1 259 （ + 21 ） 876 （ + 1 48 ）
Firefox2.0 783(+ 1 7) 41 7(+ 1 83) 1 007(+ 1 7) 585(+ 1 83) 1 263(+ 1 7) 841 (+ 1 83)
Opera9.0 781 (+ 1 9) 461 (+ 1 39) 1 005(+ 1 9) 629(+ 1 39) 1 261 (+ 1 9) 885(+ 1 39)
说明：
比如 1024×768 下 IE7.0 的可视面积是（ 1024-21 ） × （ 768-148 ）
综合上面所有的数据，结论如下：
最保守的一屏大小是 IE6 下 800×600 ： 779×432
最广泛使用的一屏大小是 IE6 下 1024×768 ： 1003×600

5. 二、搜索框设计规范
1 . 基础规范
• 文本框
a 搜索框文本框的长度应适中，至少应提供显示 1 0 个中文字符的宽度
.
b. 搜索组件中使用的文本框必须为单行文本框
c. 文本框的长度不得少于 1 30 个像素 高度不得低于 1 8 个像素
• 帮助信息
a 帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等，
.
b. “ 限定标签提示”一般放在搜索框的上面
c. “ 热门关键词提示” 一般放在搜索框下面
d. “ 标示性文字” 可设置灰色 (#cccccc) 显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有真正帮
助的提示，”请输入关键词”这样的提示不应出现 .
• 搜索按钮
a. 搜索按钮一般包含图标形式和文字形式两种
b. 使用图标形式时只能使用放大镜的图标，而不能采用其他元素。

6. 二、搜索框设计规范
c. 搜索 button 规范文字为“搜索”避免采用其他描述。比如：
d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况：
文字形式：
搭配使用：
图形形式：
• 使用 SOSO 引擎的可考虑在搜索框前加 SOSO LOGO
•同一个 web 产品中搜索的位置和表现形式尽量保持一致

7. 二、搜索框设计规范
2. 应用场景
强表现方式：
• 加大搜索框的显示，输入框内采用大字体（ 1 4 号）
• 突出搜索 button 的表现，更直观，更有点击欲
• 位置放在页头的中间并明显标示

8. 二、搜索框设计规范
2. 应用场景
弱表现方式：
• 输入框内采用小字体（ 1 2 号）
•长度大约以刚好放完提示文字为基准
• 弱化搜索 button 的表现，可考虑用 icon 代替
•搜索框通常放在页头的右上角

9. 三、页码设计规范
1 . 普通页码翻页的表现方法：
• 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮与页码显示区构成；三为跳
转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。
• 链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示

10. 三、页码设计规范
2. 小型页码翻页的表现方法：
• 链接页码为简明独立，不加任何修饰的数字形式
• 链接颜色由当前页面设计决定
• 数字大小建议为 1 2-1 4px , 以易于点击为原则 .
详见《产品页码翻页普用标准》

11. 四、广告设计规范
• 禁止模仿任何 windows标准控件， windows标准控件包括但不限于：鼠标指针、按钮以及窗口控制按钮等。
• 不要使用按钮作长句广告：
错误案例：
• 腾讯网避免出现企鹅形象广告
可参考《广告、营销消息与营销邮件体验规范》

12. 五、文字的编排与设计
总体原则：提高文字的辨识性和页面的易读性
• 文字大小：建议使用 1 2 号 + 1 4 号字体的混合搭配， 1 3 号也可酌情考虑，因为 1 3 号字体的不对称性，目前非主流。
• 需突出的内容部分、新闻标题、栏目标题等多使用 1 4 号字体
• 广告内容、辅助信息或介绍性文字等多使用 1 2 号字体
• 避免大面积使用加粗字体

13. 五、文字的编排与设计
特别注意：菜单尽量不使用 1 2 号加粗，这样会导致复杂的文字难以辨认。多采用 1 4 号加粗
2 ．文字颜色：
• 同一网站需要定出主文字颜色，特殊情况下可以有 2 种左右的辅助文字颜色
• 一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。

14. 五、文字的编排与设计
• 正文的文字颜色多采用深蓝色或深灰色。在讨论颜色前，首先要明确一这个判断的衡量标准。我们是以 Ps的颜色系统为讨论基础的。
灰黑色
当使用灰色为文字颜色时，正灰色的明度数值（ B ）不大于 30% 。
当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（ B ）作相应调整。
因为不同纯色亮度不同，黄色亮度最高，蓝色 /紫色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（ B ）应该越低。
建议使用：

15. 五、文字的编排与设计
深蓝色
当使用纯蓝色为文字颜色时，明度数值（ B ）不大于 60% 。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（ B ）作相应调整。
当色相越接近天蓝时，（ B ）值应该越低。
很多门户网站使用蓝色为文字颜色，常用的有
建议使用天蓝色的： 纯蓝色：

16. 五、文字的编排与设计
其他颜色
当使用其他颜色作为正文主色调时，安全起见可采用明度数值（ B ）不大于 30% 的颜色。

17. 五、文字的编排与设计
4 ．英文字体的使用：
英文建议使用 Aria Aria Helvetica / Univers并列为目前的标准无衬线字体（ Sa Serif），字型依据 Unicode 标准包含多国语言文字在内。
l： l与 ns
Arial比例及字重和 Helvetica c上用的字体 ) 极之相近
(ma
系统自带并能与汉字匹配的点阵字比较 :

18. 五、文字的编排与设计
Arial字体
优点 : 比例及字重（ weight）和 Helvetica 极之相近 ; 没有下划线贴边的问题； Q 字没尾巴；字高整齐
缺点 : 大写 I 与小写 L 无法区分
下划线 :
Tahoma字体
优点 : 字宽较阔 , 字母间距较窄，恒定 1 px （阅读单个字母有困难）形态上符合汉字“方块字”点阵字；能区分大写 I 与小写 L
缺点 :1 2 号字有下划线贴边的问题； Q 字有尾巴；字高不整齐
下划线 :

19. 五、文字的编排与设计
Verdana字体
优点 : 没有下划线贴边的问题 , 能区分大写 I 与小写 L
缺点 : 字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q 字有尾巴；字高不整齐
下划线 :
应用案例

20. 五、文字的编排与设计
CSS 书写规范
font-family:Helvetica,Arial,simsun;
各主要网站字体使用情况

21. 五、文字的编排与设计
5 ．文字链接：
文字链接形式不得超过 3 种颜色（规定其中一种为主链接色）。
显性链接：
大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。
隐性链接：
对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。

22. 六、整齐的概念和应用
类似这样“豆腐块”的文字排列，在大型网站中尤为重要。
如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。
• 对齐
网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。
并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。使我们的设计更有序。更方便阅读。

23. 六、整齐的概念和应用
• 首页上摘要无须空格。
内容正文应该空两格。

24. 六、整齐的概念和应用
• “ 豆腐块”四周应该空留均匀适当的间隔

25. 七、模块化表现
设计准则：同一个网站采用的模块化表现应该是全部统一的。
模块化的几类参考表现：
• 单线
• 3-5 个像素的圆角
• 内边修饰
… … ..

26. 八、页脚信息
• 页脚信息按照从上到下的排列次序为 :
1 、内部导航
2 、外部导航
3 、各类许可证、授权声明
4 、英文版权信息“ Copyright © ”
5 、中文版权信息
6 、各类网络安全 /工商证明 / 技术支持 LOGO
• 各链接间隔统一使用” | ”
• 建议采用 1 2 号字， 禁止使用加粗字体

27. 目录
一、 基础规范 二、参考指南
01 网页宽度 01 页面修饰
02 搜索框设计规范 • 简单的光影效果
• 基础规范 • 质感的表现
• 应用场景 • 透明效果的应用
03 页码设计规范 02 个性皮肤的应用
• 普通页码翻页 03 图标的统一使用
• 小型页码翻页 04 图标表意
04 广告设计规范
05 文字的编排与设计
• 文字大小
• 文字颜色
• 文字行距
• 英文字体规范
• 文字链接
06 整齐的概念和应用
07 模块化表现
08 页脚信息

28. 一、页面修饰
1 。简单的光影效果
2 。质感表现
基本采用简单的渐变，不需要繁杂的修饰

29. 一、页面修饰
3. 透明效果

30. 二、个性皮肤
Q Q 首页个性皮肤：

31. 二、个性皮肤
其他产品个性表现：

32. 二、个性皮肤
Hummer个性皮肤：

33. 二、个性皮肤
Q Q Pla 个性皮肤：
y

34. 三、图标的统一使用
下载地址：
http://v.cdc.com/r_ icons_ weather.ht
m

35. 三、图标的统一使用
下载地址：
http://v.cdc.com/r_ icons_ expression.htm
更多请参看： http://v.cdc.com/index.htm

36. 四、图标表意
详细参考《图标设计规范》

37. 四、图标表意
详细参考《图标设计规范》

38. 四、图标表意
详细参考《图标设计规范》

39. 完
Thanks