腾讯网Web页面设计规范

3,926 views
3,728 views

Published on

Published in: Technology
1 Comment
9 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,926
On SlideShare
0
From Embeds
0
Number of Embeds
550
Actions
Shares
0
Downloads
155
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

腾讯网Web页面设计规范

  1. 1. Web 设计规范 V1.3 CDC WUI
  2. 2. 目录 一、 基础规范 <ul><li>01 网页宽度 </li></ul><ul><li>02 搜索框设计规范 </li></ul><ul><li>基础规范 </li></ul><ul><li>应用场景 </li></ul><ul><li>03 页码设计规范 </li></ul><ul><li>普通页码翻页 </li></ul><ul><li>小型页码翻页 </li></ul><ul><li>04 广告设计规范  </li></ul><ul><li>05 文字的编排与设计 </li></ul><ul><li>文字大小 </li></ul><ul><li>文字颜色 </li></ul><ul><li>文字行距 </li></ul><ul><li>英文字体规范 </li></ul><ul><li>文字链接 </li></ul><ul><li>06 整齐的概念和应用 </li></ul><ul><li>07 模块化表现 </li></ul><ul><li>08 页脚信息 </li></ul>二、参考指南 <ul><li>01 页面修饰 </li></ul><ul><li>简单的光影效果 </li></ul><ul><li>质感的表现 </li></ul><ul><li>透明效果的应用    </li></ul><ul><li>02 个性皮肤的应用 </li></ul><ul><li>  </li></ul><ul><li>03 图标的统一使用 </li></ul><ul><li>04 图标表意 </li></ul>
  3. 3. <ul><li>一、网页宽度 </li></ul>最新显示器分辨率比例调查: 目前主流分辨率 1024X768 ,在此状态下,默认使用 910 的网页宽度,与腾讯网首页统一尺寸。 特殊情况 1 . 信息量或图片量过大的情况,可以考虑加宽承载,给出两个参考尺寸: 950 ( paipai , Qbar 等 ) 990 ( QQshow ,游戏产品等 ) 2. 搜索类信息页面,采用自适应屏幕方式(比如 soso 搜索产品 )    
  4. 4. <ul><li>一、网页宽度 </li></ul>不同浏览器,不同分辨率下网页第一屏最大可视区域: 说明: 比如 1024×768 下 IE7.0 的可视面积是( 1024-21 ) × ( 768-148 ) 综合上面所有的数据,结论如下: 最保守的一屏大小是 IE6 下 800×600 : 779×432 最广泛使用的一屏大小是 IE6 下 1024×768 : 1003×600 有效可视区域(单位: 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)
  5. 5. <ul><li>二、搜索框设计规范 </li></ul>1. 基础规范 <ul><li>文本框 </li></ul><ul><li>a. 搜索框文本框的长度应适中,至少应提供显示 10 个中文字符的宽度 </li></ul><ul><li>b. 搜索组件中使用的文本框必须为单行文本框 </li></ul><ul><li>c. 文本框的长度不得少于 130 个像素 高度不得低于 18 个像素 </li></ul><ul><li>帮助信息 </li></ul><ul><li>a. 帮助信息一般包括三块内容:限定标签提示、标示性文字、热门关键词提示等, </li></ul><ul><li>b. “ 限定标签提示”一般放在搜索框的上面 </li></ul><ul><li>c. “ 热门关键词提示”一般放在搜索框下面 </li></ul><ul><li>d. “ 标示性文字” 可设置灰色 (#cccccc) 显示,点击输入框后提示文字消失。提示文字应简明扼要,文字一般用于内容、用途、搜索范围等对用户有真正帮助的提示,”请输入关键词”这样的提示不应出现 . </li></ul><ul><li>搜索按钮 </li></ul><ul><li>a. 搜索按钮一般包含图标形式和文字形式两种 </li></ul><ul><li>b. 使用图标形式时只能使用放大镜的图标,而不能采用其他元素。 </li></ul>
  6. 6. <ul><li>二、搜索框设计规范 </li></ul>d. 图标形式(放大镜)和文字形式可搭配使用,会出现如下三种情况: 文字形式: 搭配使用: 图形形式: c. 搜索 button 规范文字为“搜索”避免采用其他描述。比如: <ul><li>使用 SOSO 引擎的可考虑在搜索框前加 SOSO LOGO </li></ul><ul><li>同一个 web 产品中搜索的位置和表现形式尽量保持一致 </li></ul>
  7. 7. <ul><li>二、搜索框设计规范 </li></ul>2. 应用场景 强表现方式: <ul><li>加大搜索框的显示,输入框内采用大字体( 14 号) </li></ul><ul><li>突出搜索 button 的表现,更直观,更有点击欲 </li></ul><ul><li>位置放在页头的中间并明显标示 </li></ul>
  8. 8. <ul><li>二、搜索框设计规范 </li></ul><ul><li>输入框内采用小字体( 12 号) </li></ul><ul><li>长度大约以刚好放完提示文字为基准 </li></ul><ul><li>弱化搜索 button 的表现,可考虑用 icon 代替 </li></ul><ul><li>搜索框通常放在页头的右上角 </li></ul>2. 应用场景 弱表现方式:
  9. 9. <ul><li>三、页码设计规范 </li></ul><ul><li>1. 普通页码翻页 的表现方法: </li></ul><ul><li>页码由三部分构成:一为页码状态区,表明页码在当前第几页位置以及共有多少页;二为页码翻页区,由上下翻页按钮与页码显示区构成;三为跳转翻页区。三部分组成页码翻页区域位于产品右下角,三部分距离不可分开过大。 </li></ul><ul><li>链接页码的设计力求简明独立, 页码与页码之间的间距不小于鼠标手型的距离,如图所示 </li></ul>
  10. 10. <ul><li>三、页码设计规范 </li></ul><ul><li>链接页码为简明独立,不加任何修饰的数字形式 </li></ul><ul><li>链接颜色由当前页面设计决定 </li></ul><ul><li>数字大小建议为 12-14px , 以易于点击为原则 . </li></ul>2. 小型 页码翻页 的表现方法: 详见《 产品页码翻页普用标准 》
  11. 11. <ul><li>四、广告设计规范 </li></ul><ul><li>禁止模仿任何 windows 标准控件, windows 标准控件包括但不限于:鼠标指针、按钮以及窗口控制按钮等。 </li></ul>可参考《 广告、营销消息与营销邮件体验规范 》 <ul><li>不要使用按钮作长句广告 : </li></ul><ul><li>错误案例: </li></ul><ul><li>腾讯网避免出现企鹅形象广告 </li></ul>
  12. 12. 五、文字的编排与设计 <ul><li>文字大小:建议使用 12 号 +14 号字体的混合搭配, 13 号也可酌情考虑,因为 13 号字体的不对称性,目前非主流。 </li></ul><ul><li>需突出的内容部分、新闻标题、栏目标题等多使用 14 号字体 </li></ul><ul><li>广告内容、辅助信息或介绍性文字等多使用 12 号字体 </li></ul><ul><li>避免大面积使用加粗字体 </li></ul>总体原则:提高文字的辨识性和页面的易读性
  13. 13. 五、文字的编排与设计 <ul><li>2 .文字颜色: </li></ul><ul><li>同一网站需要定出主文字颜色,特殊情况下可以有 2 种左右的辅助文字颜色 </li></ul>特别注意: 菜单尽量不使用 12 号加粗 ,这样会导致复杂的文字难以辨认。多采用 14 号加粗 <ul><li>一般情况下字体变化不要超过三种,若有需要,可以尽量采用统一字体的不同字族。 </li></ul>
  14. 14. 五、文字的编排与设计 灰黑色 当使用灰色为文字颜色时,正灰色的明度数值( B )不大于 30% 。 当使用带有色彩倾向的灰色时,根据色相不同,应对明度值( B )作相应调整。 因为不同纯色亮度不同,黄色亮度最高,蓝色 / 紫色亮度最底,其他色相则属中间亮度。因此使用亮度越高的色彩,其明度值( B )应该越低。 <ul><li>正文的文字颜色多采用深蓝色或深灰色。在讨论颜色前,首先要明确一这个判断的衡量标准。我们是以 Ps 的颜色系统为讨论基础的。 </li></ul>建议使用:
  15. 15. 五、文字的编排与设计 深蓝色 当使用纯蓝色为文字颜色时,明度数值( B )不大于 60% 。当蓝色介于纯蓝往天蓝之间的时候,根据色相不同,应对明度值( B )作相应调整。 当色相越接近天蓝时,( B )值应该越低。 很多门户网站使用蓝色为文字颜色,常用的有 建议使用天蓝色的: 纯蓝色:
  16. 16. 五、文字的编排与设计 其他颜色 当使用其他颜色作为正文主色调时,安全起见可采用明度数值( B )不大于 30% 的颜色。
  17. 17. 五、文字的编排与设计 4 .英文字体的使用: 英文建议使用 Arial : Arial 与 Helvetica / Univers 并列为 目前的标准无衬线字体( Sans Serif ), 字型依据 Unicode 标准包含多国语言文字在内。 Arial 比例及字重和 Helvetica(mac 上用的字体 ) 极之相近 系统自带并能与汉字匹配的点阵字比较 :
  18. 18. 五、文字的编排与设计 Arial 字体 优点 : 比例及字重( weight )和 Helvetica 极之相近 ; 没有下划线贴边的问题; Q 字没尾巴;字高整齐 缺点 : 大写 I 与小写 L 无法区分 下划线 : Tahoma 字体 优点 : 字宽较阔 , 字母间距较窄,恒定 1px (阅读单个字母有困难) 形态上符合汉字“方块字”点阵字 ;能区分大写 I 与小写 L 缺点 :12 号字有下划线贴边的问题; Q 字有尾巴;字高不整齐 下划线 :
  19. 19. 五、文字的编排与设计 Verdana 字体 优点 : 没有下划线贴边的问题 , 能区分大写 I 与小写 L 缺点 : 字体较宽,间距大,字型圆 同一宽度可显示字节比其他字体少得多 ; Q 字有尾巴;字高不整齐 下划线 : 应用案例
  20. 20. 五、文字的编排与设计 CSS 书写规范 各主要网站字体使用情况 font-family:Helvetica,Arial,simsun;
  21. 21. 五、文字的编排与设计 隐性链接: 对于混杂在页面文字中零散出现的文字链接,为了便于识别,默认时候可以出现下划线或使用辅助链接色,光标经过的时候,样式不变。 5 .文字链接: 文字链接形式不得超过 3 种颜色(规定其中一种为主链接色)。 显性链接: 大面积链接的网站,比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色,默认时不显示下划线,光标经过时才显示下划线。
  22. 22. 六、整齐的概念和应用 <ul><li>类似这样“豆腐块”的文字排列,在大型网站中尤为重要。 </li></ul><ul><li>如何去分割和组织大量繁杂的信息?将文字块当作图片一样来排版优化,来平衡页面。 </li></ul><ul><li>对齐 </li></ul><ul><li>网页设计中的 ” 对齐 ” 同传统的印刷排版中的对齐概念是一样的,并且同等重要。 </li></ul><ul><li>并不是说一切都应该在一条直线上,而是尽可能的保持一贯的整齐,不仅左对齐,也要尽量右对齐。使我们的设计更有序。更方便阅读。 </li></ul>
  23. 23. 六、整齐的概念和应用 <ul><li>首页上摘要无须空格。 </li></ul>内容正文应该空两格。
  24. 24. 六、整齐的概念和应用 <ul><li>“ 豆腐块”四周应该空留均匀适当的间隔 </li></ul>
  25. 25. <ul><li>模块化的几类参考表现: </li></ul><ul><li>单线 </li></ul><ul><li>3-5 个像素的圆角 </li></ul><ul><li>内边修饰 </li></ul><ul><li>…… .. </li></ul>七、模块化表现 设计准则:同一个网站采用的模块化表现应该是全部统一的。
  26. 26. <ul><li>页脚信息按照从上到下的排列次序为 : </li></ul><ul><li>1 、内部导航 </li></ul><ul><li>2 、外部导航 </li></ul><ul><li>3 、各类许可证、授权声明 </li></ul><ul><li>4 、英文版权信息“ Copyright ©” </li></ul><ul><li>5 、中文版权信息 </li></ul><ul><li>6 、各类网络安全 / 工商证明 / 技术支持 LOGO </li></ul><ul><li>各链接间隔统一使用” | ” </li></ul><ul><li>建议 采用 12 号字, 禁止使用加粗字体 </li></ul>八、页脚信息
  27. 27. 目录 一、 基础规范 二、参考指南 <ul><li>01 网页宽度 </li></ul><ul><li>02 搜索框设计规范 </li></ul><ul><li>基础规范 </li></ul><ul><li>应用场景 </li></ul><ul><li>03 页码设计规范 </li></ul><ul><li>普通页码翻页 </li></ul><ul><li>小型页码翻页 </li></ul><ul><li>04 广告设计规范  </li></ul><ul><li>05 文字的编排与设计 </li></ul><ul><li>文字大小 </li></ul><ul><li>文字颜色 </li></ul><ul><li>文字行距 </li></ul><ul><li>英文字体规范 </li></ul><ul><li>文字链接 </li></ul><ul><li>06 整齐的概念和应用 </li></ul><ul><li>07 模块化表现 </li></ul><ul><li>08 页脚信息 </li></ul><ul><li>01 页面修饰 </li></ul><ul><li>简单的光影效果 </li></ul><ul><li>质感的表现 </li></ul><ul><li>透明效果的应用    </li></ul><ul><li>02 个性皮肤的应用 </li></ul><ul><li>  </li></ul><ul><li>03 图标的统一使用 </li></ul><ul><li>04 图标表意 </li></ul>
  28. 28. 一、页面修饰 1 。简单的光影效果 2 。质感表现 基本采用简单的渐变,不需要繁杂的修饰
  29. 29. 一、页面修饰 3. 透明效果
  30. 30. 二、个性皮肤 QQ 首页个性皮肤:
  31. 31. 二、个性皮肤 其他产品个性表现:
  32. 32. 二、个性皮肤 Hummer 个性皮肤:
  33. 33. 二、个性皮肤 QQPlay 个性皮肤:
  34. 34. 三、图标的统一使用 下载地址: http://v.cdc.com/r_icons_weather.htm
  35. 35. 三、图标的统一使用 下载地址: http://v.cdc.com/r_icons_expression.htm 更多请参看: http://v.cdc.com/index.htm
  36. 36. 四、图标表意 详细参考《图标设计规范》
  37. 37. 四、图标表意 详细参考《图标设计规范》
  38. 38. 四、图标表意 详细参考《图标设计规范》
  39. 39. 完 Thanks

×