腾讯网Web页面设计规范.ppt

1、网页设计规范1.3，WUI疾控中心2008/10/29，目录，一.基本规范，01网页宽度02搜索框设计规范基本规范应用场景03页码设计规范普通页码翻页小页码翻页04广告设计规范05文本布局和设计文本大小文本颜色文本间距英文字体规范文本链接06整洁概念和应用07模块化性能08页脚信息，2。参考指南，01页装饰，简单光影效果，纹理表达，透明效果的应用，个性化皮肤的应用，图标的统一使用，04图标表示，1。网页宽度，最新显示分辨率调查：目前主流分辨率是1024X768，在这种状态下，默认使用910的网页宽度，和腾讯主页一样大。特殊情况1。如果信息量或图片量太大，我们可以考虑加宽方位，并给出两个参考尺寸

2、：950(排排、Qbar等)。)990(QQshow、游戏产品等。)2 .搜索信息页面，使用自适应屏幕模式(如搜搜搜索产品)，1。网页宽度，在不同的浏览器和不同的分辨率下，文件夹上方网页的最大可视区域：注：例如，IE7.0在1024768下的可视区域为(1024-21)(768-148)，结论如下：IE6下最保守的屏幕尺寸为800600: 779432，IE6下最广泛使用的屏幕尺寸为1024768: 1003600。第二，搜索框设计规范文本框a。搜索框中文本框的长度应适中，至少应显示10个汉字。b .搜索组件中使用的文本框必须是单行文本框。文本框的长度不应小于130像素，高度不应小于18像素。

3、帮助信息答：帮助信息通常包括三部分内容：有限标签提示、标记单词、热门关键词提示等。“有限标签提示”通常放在搜索框的顶部。“热门关键词提示”一般放在搜索框的底部。d .“指示性文本”可显示为灰色(#cccccc)，点击输入框后提示文本消失。提示文本应该简明扼要。文本通常用于内容、目的、搜索范围和其他对用户真正有帮助的提示。不应出现“请输入关键字”等提示。搜索按钮a。搜索按钮一般包括图标形式和文本形式b。使用图标形式时，只能使用放大镜图标，不能使用其他元素。2。搜索框设计规范，d。图标形式(放大镜)和文本形式可以一起使用，有如下三种情况：文本形式：一起使用：图形形式：c。搜索按钮规范文本是“搜索”

4、，以避免其他描述。例如，如果你使用SOSO引擎，你可以考虑在搜索框前添加SOSO LOGO，这样在同一个网页产品中的搜索位置和表达形式应该尽可能的一致。搜索框的设计规范。应用场景的强表达方式：增加搜索框的显示，在输入框中使用大字体(14号)突出搜索按钮的表现，更直观，点击想要的位置放在页眉中间，标记清晰。2.搜索框的设计规范，在输入框中使用小字体(12号)削弱了搜索按钮的性能，只需输出提示文本，可以考虑用图标代替搜索框，搜索框通常放在页眉的右上角。2.应用场景的弱表达模式：3 .页码设计规范。1.普通页码翻转的表示方法：页码由三部分组成：一是页码状态区，表示当前页码位置和页数。第二，翻页区，由

5、翻页按钮和页面显示区组成；第三，跳转翻页区。由三部分组成的翻页区域位于产品的右下角，三部分之间的距离不应太大。链接页码的设计力求简洁独立，页码之间的距离不小于鼠标手的距离，如图所示。3.链接页码的设计规范简洁独立，没有任何修改的数字形式的链接颜色由当前页面设计决定。基于易于点击的原则，建议数字大小为12-14px。2。小页码翻页的表达方法：见通用标准请参考广告、营销新闻和营销邮件的体验标准，长句广告不要使用按钮：错误案例：腾讯。避免企鹅图片广告。五、文字布局和设计、文字大小：建议采用12号和14号字体混合搭配，13号字体也可以考虑适当，因为13号字体的不对称是目前的非主流。突出内容部分、新闻标

6、题、栏目标题等使用14号字体。广告内容、辅助信息或介绍性文字等。使用12号字体，避免在大面积使用粗体。一般原则：提高文字的易读性和页面的可读性。五.文本布局和设计，2 .文本颜色：同一网站的主要文本颜色需要确定。在特殊情况下，可以有大约2种辅助文字颜色。特别注意：尽量不要在菜单中使用12号粗体。经常使用14 #粗体。一般来说，不应该有三个以上的字体变化。如有必要，可以尽可能使用具有统一字体的不同字体系列。5.字符的布局和设计，灰色和黑色当使用灰色作为字符的颜色时，正灰色的亮度值(b)不超过30%。当使用带有颜色倾向的灰色时，亮度值(b)应根据不同的色调进行调整。因为不同的纯色具有不同的亮度，黄

7、色具有最高的亮度，蓝色/紫色具有最低的亮度，而其他色调属于中等亮度。因此，亮度越高，亮度值(b)越低。主体的文本颜色大多是深蓝色或深灰色。在讨论颜色之前，我们应该首先定义这个判断的度量标准。我们基于Ps的颜色系统。5.字符的布局和设计，深蓝色当使用纯蓝色作为字符颜色时，亮度值(b)不超过60%。当蓝色介于纯蓝色和天蓝色之间时，亮度值(b)应根据不同的色调进行相应调整。色调越接近天蓝色，(b)的值应该越低。许多门户网站使用蓝色作为常用的文本颜色。建议使用天蓝色：纯蓝色：5.文本布局和设计。对于其他颜色，当使用其他颜色作为文本的主色时，为了安全起见，亮度值(b)不超过30%的颜色可以使用。5.人物

8、的布局和设计。行距：最佳视觉行距是字体大小的1.3-1.6倍。14号宋体，我们一般用的行距是10-11像素。大多数文本使用14位字符，行距可以适当调整到10-16像素。英语字体的使用：建议使用Arial:Arial和Helvetica/宇宙作为当前的标准无衬线字体，并且字体包括符合Unicode标准的多语言字符。Arial的比例和重量与Helvetica(在苹果电脑上使用的字体)非常相似，系统带来的可以与汉字匹配的点阵字符与：进行比较。五.文字布局和设计，Arial字体的优点是：而且比例和重量都非常类似于Helvetica。画线没有问题；q没有尾巴；字高工整。缺点：大写的I和小写的L不能区分下

9、划线：Tahoma字体的优点：有宽的字宽，窄的字母间距，恒定的1px(单个字母很难读)，这在形状上符合汉字“方字”点阵字；区分大写字母和小写字母的缺点。第：12号词的下划线和贴边问题；q有一条尾巴；不均匀下划线3360。五、文字的布局和设计。Verdana字体：的优点没有下划线和镶边的问题，它可以区分大写字母I和小写字母l。缺点：字体宽，间距大，在字体圆的相同宽度上显示的字节数比其他字体少得多；q有一条尾巴；不均匀下划线：应用案例，v .文本布局和设计，CSS书写标准，主要网站的字体使用，字体系列： Helvetica，arial，simsun5.文本编排和设计。隐式链接：对于分散在页面文本中

10、的文本链接，为了便于识别，可以使用默认时间加下划线或使用辅助链接颜色，光标经过时样式不会改变。5文字链接：文字链接的形式不得超过3种颜色(其中一种指定为主链接颜色)。显式链接：具有大面积链接的网站，如门户主页和内容列表页面。灰黑色和蓝色被用作整篇文章的链接颜色。默认情况下，不显示下划线，仅当光标经过时才显示。6.整洁的概念及其应用。像“豆腐块”这样的词语排列在大型网站中尤为重要。如何划分和组织大量复杂的信息？优化文本块作为图片的布局，以平衡页面。对齐网页设计中的“对齐”概念与传统排版中的相同，同样重要。这并不是说所有的东西都应该在一条直线上，而是要尽可能保持整洁，不仅要向左，还要向右。让我们的

11、设计更加有序。它更容易阅读。6.整洁的概念及其应用。主页上没有摘要的空间。内容体应该为空。6.整洁的概念和应用，“豆腐块”周围应留有均匀和适当的间隔，以及模块化的几种参考性能：3-5像素的圆角和内边缘装饰的单线，7。模块化性能，设计标准：同一网站采用的模块化性能应该统一。页脚信息按照： 1、内部导航2、外部导航3、各种许可证、授权声明4、英文版权信息5、中文版权信息6和各种网络安全/商业证书/技术支持LOGO的顺序从上到下排列。“|”建议使用12号字符，禁止使用粗体。八.页脚信息，目录，1。基本规格；2.参考指南；01网页宽度02搜索框设计规范；基本规范03页码设计规范的应用场景；普通页码翻页；小页码翻页；04广告设计规范；05文本布局和设计；文本大小；文本颜色；文本间距；英语字体规格；文本链接；06简洁的概念和应用；07模块化性能；08页脚信息；01页面装饰简单光影效果纹理表达透明效果应用02个性化皮肤应用03