腾讯Web页面设计规范
腾讯网WebWeb设计规范
• 搜索按钮 a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标，而丌能采用其他元素。
二、搜索框设计规范
c. 搜索button规范文字为“搜索”避免采用其他描述。比如：
d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况： 文字形式： 搭配使用： 图形形式：
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、页面修饰
1。简单的光影效果
2。质感表现 基本采用简单的渐变，丌需要繁杂的修饰
一、页面修饰
3. 透明效果
二、个性皮肤
QQ首页个性皮肤：
二、个性皮肤
其他产品个性表现：
2. 应用场景
弱表现方式：
• 输入框内采用小字体（12号） •长度大约以刚好放完提示文字为基准
• 弱化搜索button的表现，可考虑用icon代替
•搜索框通常放在页头的右上角
三、页码设计规范
1.普通页码翻页的表现方法：
• 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮不页码显示区构成；三为跳 转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离丌可分开过大。
五、文字的编排与设计
Verdana字体 优点:没有下划线贴边的问题,能区分大写I不小写L 缺点:字体较宽，间距大，字型囿同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高丌整齐 下划线:
应用案例
五、文字的编排与设计
CSS书写规范
font-family:Helvetica,Arial,simsun;
腾讯设计规范
font-family:Helvetica,Arial,simsun;
各主要网站字体使用情况
五、文字的编排与设计
5．文字链接：
文字链接形式丌得超过3种颜色（觃定其中一种为主链接色）。 显性链接：
火龙果 整理
大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时丌显示下划线，光标经过时才显示下划线。
火龙果 整理
特殊情况 1 . 信息量戒图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950（paipai，Qbar等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)
一、网页宽度
丌同浏觅器，丌同分辨率下网页第一屏最大可规区域：
• 页脚信息按照从上到下的排列次序为:
火龙果 整理
1、内部导航
2、外部导航 3、各类许可证、授权声明 4、英文版权信息“Copyright ©” 5、中文版权信息 6、各类网络安全/工商证明/技术支持 LOGO
• 各链接间隔统一使用”| ”
• 建议采用12号字， 禁止使用加粗字体
火龙果 整理
有效可视区域（单位：Px）
一 二 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)
腾讯的设计规范
隐性链接： 对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。
六、整齐的概念和应用
类似这样“豆腐块”的文字排列，在大型网站中尤为重要。 如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。
火龙果 整理
屏幕
IE6.0 IE7.0 Firefox2.0 Opera9.0
800 779（+21） 779（+21） 783(+17) 781(+19)
说明： 比如1024×768下IE7.0的可视面积是（1024-21）×（768-148） 综合上面所有的数据，结论如下： 最保守的一屏大小是IE6下800×600：779×432 最广泛使用的一屏大小是IE6下1024×768 ：1003×600
火龙果 整理
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、网页宽度
最新显示器分辨率比例调查： 目前主流分辨率 1024X768，在此状态下，默认使用910的网页宽度，与腾讯网首页统一尺寸。
• 使用SOSO引擎的可考虑在搜索框前加SOSO LOGO
•同一个web产品中搜索的位置和表现形式尽量保持一致
二、搜索框设计规范
2. 应用场景
火龙果 整理
强表现方式：
• 加大搜索框的显示，输入框内采用大字体（14号） • 突出搜索button的表现，更直观，更有点击欲
• 位置放在页头的中间并明显标示
五、文字的编排与设计
Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L 缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐 下划线:
腾讯网首页设计分析
~网页分析之腾讯网
指导老师：王 珺 小组成员：车顺星 王璐琳 孙朝阳
腾讯网，是中国主要综合类门
户网站，和新浪网、搜狐网、 网易网并称为“中国四大门 户”。该类网站以新闻信息、 娱乐资讯等信息为主。
一：腾讯网页面布局
• • • •
网页整体布局 造型与风格 网页边空设计 网页背景
• 秩序与统一 • 平稳与稳定 • 信息主次分明
腾讯网首页的广告设计
• 位置得当，内容简洁。
四：从腾讯网首页看未来门户网首页设计趋势
旧 页 面 2
旧页面3
目前腾讯网首页
分析
• 首页遵循着极简的设计理念，页面逐渐简约化，
符合目前主流的网页审美设计。
• 排版和颜色设计更加新颖独特，富有生机与活力。
• 搜索框，排版等方面改动，网页设计人性化趋势
发展。
放映结束， 感谢观看，谢谢。
3/8/2013
• 网格型布局 • 造型风格<矩形>
分析
• 1：综合类门户网信息量 庞大，但腾讯网首页设计， 排版合理，信息主次分明。
3：网格型布局：使网页信息 严谨、理性分割，使页面 整齐、条理，同时美化页 面。 4：矩形页面设计，给用户带 来平方，便于用户快 速检索信息。
网页空白
分析：腾讯网首页在页面四周留白，提高提高 可读性。
二：腾讯网色彩设计
分析
• 页面以白色为背景，使图像和文字更加醒目。 • 以时事新闻中“两会”为导航栏顶部背景，符合 腾讯网“门户网站”性质。
文字色彩
• 易于识别 • 增加美感
三：细节决定成败
• 腾讯网首页的设计右栏宽度是600px，整体版 面的宽度是960px，两者之间的比例是0.630。
Web应用界面设计规范
Web应用界面设计规范Web应用界面设计规范主讲人：ARay目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。
减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。
②产品设计通过规范的方式来达到以用户为中心的目的。
二、用户体验为何如此重要①日常生活中的遭遇X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。
一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。
到了地铁站，发现公交卡没有钱了。
无奈之下只能去排队买票。
排了3趟地铁，终于到公司了，但是你却迟到了。
结果：尽管你已经非常努力，但是你还是迟到了。
那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。
糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。
表现二：界面元素比例失调。
比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。
表现三：界面元素凌乱。
比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。
表现四：违背使用习惯。
你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。
表现五：消息框信息含糊、混乱。
比如软件弹出一个消息框。
把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。
表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。
这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。
什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。
web界面设计规范
web界面设计规范Web界面设计规范是一系列规定和约束，旨在确保网站或应用程序的用户界面设计符合统一的标准，以提供用户友好的体验和一致性的外观。
以下是一些常见的Web界面设计规范：1. 界面布局规范：- 使用网格系统来实现页面布局，确保页面的各个元素对齐和排列整齐。
- 确定主要内容的位置，如导航栏、辅助功能和主要内容区域。
- 使用一致的字体、颜色和图标来传达信息层次结构和用户导航。
2. 导航规范：- 使用清晰的导航栏，以帮助用户快速找到所需的功能和信息。
- 提供可见的面包屑导航，以显示用户当前所在位置和可点击的路径。
- 使用显眼的按钮和链接，以便用户点击并进行导航。
3. 内容呈现规范：- 使用有吸引力的图像和多媒体内容来吸引用户的注意力。
- 调整字体大小和行距，以确保易读性和可访问性。
- 使用合适的排版和格式，以将信息呈现清晰、易理解。
4. 表单规范：- 使用标签来描述每个输入字段，并对输入字段进行合适的格式控制。
- 提供明确的错误消息和验证规则，帮助用户填写表单。
- 为用户提供方便的方式来提交表单，如按钮或提交链接。
5. 响应式设计规范：- 确保网站或应用程序在不同设备上具有一致的外观和功能。
- 使用可自适应的布局和元素，以适应不同的屏幕尺寸和方向。
- 优化页面加载速度，减少数据传输和图像大小。
6. 可访问性规范：- 使用无障碍标准和技术，以确保残障用户能够方便地访问和使用网站。
- 提供有意义的文本替代品和注释，以帮助使用辅助技术的用户理解图像和多媒体内容。
- 使用明确和简洁的语言，避免使用模糊、不明确的术语和词语。
7. 交互规范：- 使用明确和一致的图标和按钮，以指示用户可执行的操作。
- 提供实时反馈和状态更新，以使用户意识到其操作的结果。
- 使用动画和过渡效果来增强用户体验，但不要过度使用，以免分散用户注意力。
以上是一些常见的Web界面设计规范，可以根据具体的项目需求和目标来制定和调整。
设计规范的核心目标是提供用户友好的体验和一致性的外观，为用户提供无障碍的操作和导航。
web功能界面设计规范标准[详]
![web功能界面设计规范标准[详]](https://img.taocdn.com/s3/m/aa7ccdaa1711cc7930b71638.png)
Web页面通用规XXXX软件技术修订记录目录WEB页面通用规11引言11.1目的11.2围12一般页面功能说明12.1新增12.2修改12.3删除12.4查询22.5取消22.6提交22.7重置22.8返回22.9分页22.10全选33一般页面规则说明33.1默认值33.2必填项33.3界面传递33.4窗口嵌套33.5输入框44页面元素交互44.1操作结果确认44.2其他规则41 引言1.1 目的本文用于规我公司所开发的产品中对于页面的通用需求设计工作，明确在设计中所要遵循的准则和方法，web页面中各个通用功能元素的规格要求，确保所实现的通用功能按钮在结构和功能上的统一，提升软件产品的品质。
1.2 围本规适用于公司所有的软件产品。
2 一般页面功能说明2.1 新增当新增一条或多条记录，要求：●新增的记录必须排在首页首行；●必填项字段必须有特殊标示；●提交时需对必填项字段进行重复值、空值（空格）判断；●新增容提交失败后，须保留用户修改的容，以便再次修改提交；●新增成功后必须有成功提示。
2.2 修改当进行单条或多条记录的修改时，要求：●如界面存在复选按钮，勾选多条记录进行修改时，每次只能对一条记录进行修改，默认修改容为第一条的提示信息；●必填项字段必须有特殊标示；●修改后加载的容应为的实际容，而不再为默认值；●修改完成后须回到原记录所在位置，且刷新显示修改后的值；●修改容提交失败后，须保留用户修改的容，以便再次修改提交；●在查询条件下修改后返回，如不满足查询条件则不显示；●需对主标识字段进行重复值、空值（空格）判断；●修改成功后必须有成功提示。
2.3 删除当删除一条或多条记录，要求：●必须有确认删除的提示信息；●删除成功后刷新，不显示删除的记录；●当被删除的记录与其他记录存在关联时，提示界面给予不允许删除、更明细提示等信息；●删除成功后必须有成功提示。
2.4 查询当按照条件查询时，要求：●每次查询后保留当前输入的查询条件；●当未查询到任何记录时，需给予未查找到相关记录的提示信息；●除了用户明确要求不需要外，需提供模糊查询功能；2.5 取消当进行取消当前修改并返回时，要求：●取消请给予提示；●取消返回到原记录所在状态；2.6 提交当提交容时，要求：●当提交所费的时间较长时，需给出等待的提示，如：沙漏；●提交成功后不可重复提交；2.7 重置重置是恢复变更前的状态，要求：●必须保证重置后与初始进入此页面时一致性；2.8 返回当需要返回前一个页面时，要求：●当从一个页面点击按钮或进入子页面时，子页面必须提供返回按钮；2.9 分页当需要分页显示数据时，要求：●当对查询结果进行分页时，分页的同时需要能够执行查询功能；●当页数较多时，允许输入具体页数进行查询；2.10 全选当在一个页面上存在多个同类容的复选框时，需要提供全选的功能，要求：●勾选全选，则选中当前页面所有记录；●去掉当前页面某个记录的勾选，则全选也去掉勾选；●刷新页面后，自动去掉已勾选的记录及全选的勾选；3 一般页面规则说明3.1 默认值各个页面都会存在默认值。
web界面设计规范
web界面设计规范随着互联网的快速发展，Web界面设计在现代社会中起着至关重要的作用。
一个精心设计的Web界面不仅能够吸引用户，并提供良好的用户体验，还能够帮助企业实现商业目标。
为了确保Web界面设计的高质量和一致性，制定并遵守一套Web界面设计规范是至关重要的。
一、色彩选择1.1 主题色调：选择适合品牌或产品形象的主题色调，并根据整体风格进行调整。
这主题色调应与品牌标识相协调。
1.2 背景色：选择适合的背景色，以确保内容清晰可读，并与主题色调相互衬托。
1.3 强调色：控制强调色的使用，确保高亮元素能够引起用户注意，同时不过度繁杂。
1.4 色彩搭配：合理搭配不同颜色，避免使用对比度过大的颜色搭配，以免影响用户阅读体验。
二、版面布局2.1 导航栏位置：将导航栏置于页面的显著位置，确保用户能够方便地找到所需信息。
2.2 间距和边距：合理设置页面元素间的间距和边距，增加页面的整体美感和可读性。
2.3 响应式设计：根据不同设备的屏幕大小和分辨率，采用响应式设计，使页面在各种设备上都能够呈现出最佳效果。
2.4 字体选择：选择适合的字体，确保字体的可读性和美观性。
在设计中最好只使用2至3种字体，以保持一致性。
三、交互设计3.1 页面结构：合理组织页面的内容，确保页面的结构清晰，并使用户能够轻松地理解页面信息的层次结构。
3.2 按钮设计：按钮应具有显著的形状和颜色，以吸引用户的点击，并明确按钮的功能。
3.3 图片使用：使用高质量的图片，确保图片清晰度，以增加页面的美观性和专业性。
3.4 表单设计：合理设计表单，简化用户的填写过程，并提供清晰的提示信息。
四、导航设计4.1 Breadcrumb导航：在页面中添加Breadcumb导航，以帮助用户了解当前页面的位置和层次。
4.2 友好的URL：使用简洁有意义的URL，以帮助用户和搜索引擎更好地理解页面的内容。
4.3 内部链接：合理设置页面内的内部链接，以便用户快速导航到其他相关页面，提供更好的用户体验。
Web界面设计规范
Web应用界面设计规范（Design Spe cification for Web UI）主讲人：ARay目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。
减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。
②产品设计通过规范的方式来达到以用户为中心的目的。
二、用户体验为何如此重要①日常生活中的遭遇X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。
一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。
到了地铁站，发现公交卡没有钱了。
无奈之下只能去排队买票。
排了3趟地铁，终于到公司了，但是你却迟到了。
结果：尽管你已经非常努力，但是你还是迟到了。
那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。
糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。
表现二：界面元素比例失调。
比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。
表现三：界面元素凌乱。
比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。
表现四：违背使用习惯。
你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。
表现五：消息框信息含糊、混乱。
比如软件弹出一个消息框。
把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。
表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。
这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。
WEB页面设计规范
WEB页面设计规范Web页面设计规范1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话，高度是612-615之间。
就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象。
页面标准按800*600分辨率制作，实际尺寸为778*434px页面长度原则上不超过3屏，宽度不超过1屏每个标准页面为A4幅面大小，即8.5X11英寸全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px另外120*90，120*60也是小图标的标准尺寸每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。
二、120*60，这种广告规格主要用于做LOGO使用。
三、120*90，主要应用于产品演示或大型LOGO。
四、125*125，这种规格适于表现照片效果的图像广告。
五、234*60，这种规格适用于框架或左右形式主页的广告链接。
六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
八、88*31，主要用于网页链接，或网站小型LOGO。
====================================== ==================================== 广告形式像素大小最大尺寸备注BUTTON 120*60（必须用gif） 7K215*50（必须用gif） 7K通栏 760*100 25K 静态图片或减少运动效果430*50 15K超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果巨幅广告 336*280 35K585*120竖边广告 130*300 25K全屏广告 800*600 40K 必须为静态图片，FLASH格式图文混排各频道不同 15K弹出窗口 400*300（尽量用gif） 40KBANNER 468*60（尽量用gif） 18K。
腾讯网web页面设计规范课件
优秀案例二：扁平化风格
总结词
简洁大气，时尚前卫
详细描述
该设计案例采用扁平化设计理念，去除冗余的装饰效果，强调简洁大气的视觉体验。色彩搭配明快， 符合年轻用户的审美需求。图标和按钮的设计简洁明了，方便用户识别和操作。
优秀案例三：极简风格
总结词
简约至极，精致优雅
VS
详细描述
该设计案例以极简主义为设计理念，追求 简约至极的视觉效果。色彩运用极致简约 ，以黑白灰为主色调，营造出高雅的氛围 。字体选择精致优雅，符合高端品牌的形 象定位。整体设计精致而不失大气，符合 高端用户的审美需求。
THANKS
感谢观看
色彩搭配
遵循色彩搭配原则，避免颜色冲突，保持页面整体协调。
图片与图标
图标设计
使用简洁、直观的图标，方便用户快速理解 功能或内容。
图片质量
确保图片清晰、无锯齿，提高用户体验。
图片与文字的配合
合理安排图片与文字的位置和比例，避免相 互干扰。
03 交互设计规范
按钮与链接
按钮与链接是网页中重要 的交互元素，设计时应遵 循以下规范
保持设计风格、色彩搭配、字体选择等的一 致性，提升品牌形象。
响应式设计
确保页面在不同设备和屏幕尺寸上均能良好 展示，提供优质的浏览体验。
简明了
避免过多的装饰和冗余元素，保持页面简洁 ，突出核心内容。
设计目标
提高用户体验
通过合理布局、易于理解的操作流程和友好的交互设计，提升用户满意度。
品牌传达
借助独特的设计风格和色彩搭配，传达腾讯网的专业性和品牌价值。
文字颜色
选择与背景色对比度适中的颜色，确保文字 清晰可见。
图标规范
图标风格
Web应用界面设计规范
Web 应用界面设计规范主讲人：ARay目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。
减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。
②产品设计通过规范的方式来达到以用户为中心的目的。
二、用户体验为何如此重要①日常生活中的遭遇X 员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。
一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开到了地铁站，发现公交卡没有钱了。
无奈之下只能去排队买票。
排了3 趟地铁，终于到公司了，但是你却迟到了。
结果：尽管你已经非常努力，但是你还是迟到了。
那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？② 什么是用户体验用户体验(user experience)是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。
糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。
表现二：界面元素比例失调。
比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。
表现三：界面元素凌乱。
比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。
表现四：违背使用习惯。
你按F1 ,它没有弹出帮助，却执行了一件绝对出乎你意料的动作。
表现五：消息框信息含糊、混乱。
比如软件弹出一个消息框。
把原本“确定”和“取消”写成为“是”和“否” ，让用户不知道什么意思。
表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。
这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。
什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 不要使用按钮作长句广告： 错误案例：
• 腾讯网避免出现企鹅形象广告
可参考《广告、营销消息与营销邮件体验规范》
五、文字的编排与设计
总体原则：提高文字的辨识性和页面的易读性
1. 文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、网页宽度
最新显示器分辨率比例调查： 目前主流分辨率 1024X768，在此状态下，默认使用910的网页宽度，与腾讯网首页统一尺寸。
特殊情况 1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950（paipai，Qbar等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)
六、整齐的概念和应用
类似这样“豆腐块”的文字排列，在大型网站中尤为重要。 如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。 • 对齐 网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。 并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。使我们的设计更有序。更方便阅读。
五、文字的编排与设计
3．文字行距： 视觉最佳行距是字体大小的1.3-1.6倍 12号宋体，我们一般使用的行距为8-9个像素。 14号宋体，我们一般使用的行距为10-11个像素。 正文多采用14号字，行距可适当调整为10-16个像素。 4．英文字体的使用：
英文建议使用Arial：Arial与Helvetica / Univers并列为目前的标准无衬线字体（Sans Serif），字型依据Unicode标准包含多国语言文字在内。 Arial比例及字重和Helvetica(mac上用的字体)极之相近 系统自带并能与汉字匹配的点阵字比较:
建议使用：
五、文字的编排与设计
深蓝色 当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。 当色相越接近天蓝时，（B）值应该越低。 很多门户网站使用蓝色为文字颜色，常用的有
建议使用天蓝色的：
纯蓝色：
五、文字的编排与设计
其他颜色 当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色。
目录
一、 基础规范
01 网页宽度 02 搜索框设计规范 • 基础规范 • 应用场景 03 页码设计规范 • 普通页码翻页 • 小型页码翻页 04 广告设计规范 05 文字的编排与设计 • 文字大小 • 文字颜色 • 文字行距 • 英文字体规范 • 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息
五、文字的编排与设计
• 正文的文字颜色多采用深蓝色或深灰色。在讨论颜色前，首先要明确一这个判断的衡量标准。我们是以Ps的颜色系统为讨论基础的。 灰黑色 当使用灰色为文字颜色时，正灰色的明度数值（B）不大于30%。 当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（B）作相应调整。 因为不同纯色亮度不同，黄色亮度最高，蓝色/紫色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（B）应该越低。
• 链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示
三、页码设计规范
2. 小型页码翻页的表现方法： • 链接页码为简明独立，不加任何修饰的数字形式 • 链接颜色由当前页面设计决定 • 数字大小建议为12-14px ,以易于点击为原则.
详见《产品页码翻页普用标准》
四、广告设计规范
一、网页宽度
不同浏览器，不同分辨率下网页第一屏最大可视区域： 有效可视区域（单位：Px）
一 二 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)
2. 应用场景 弱表现方式：
• 输入框内采用小字体（12号） •长度大约以刚好放完提示文字为基准 • 弱化搜索button的表现，可考虑用icon代替 •搜索框通常放在页头的右上角
三、页码设计规范
1.普通页码翻页的表现方法：
• 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮与页码显示区构成；三为跳 转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。
Web设计规范
CDC WUI 2008/10/29
V1.3
目录
一、 基础规范
01 网页宽度 02 搜索框设计规范 • 基础规范 • 应用场景 03 页码设计规范 • 普通页码翻页 • 小型页码翻页 04 广告设计规范 05 文字的编排与设计 • 文字大小 • 文字颜色 • 文字行距 • 英文字体规范 • 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、页面修饰
1。简单的光影效果
2。质感表现 基本采用简单的渐变，不需要繁杂的修饰
一、页面修饰
3. 透明效果
二、个性皮肤
QQ首页个性皮肤：
二、个性皮肤
其他产品个性表现：
五、文字的编排与设计
Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L 缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐 下划线:
应用案例
五、文字的编排与设计
CSS书写规范
font-family:Helvetica,Arial,simsun;
屏幕
IE6.0 IE7.0 Firefox2.0 Opera9.0
800 779（+21） 779（+21） 783(+17) 781(+19)
说明： 比如1024×768下IE7.0的可视面积是（1024-21）×（768-148） 综合上面所有的数据，结论如下： 最保守的一屏大小是IE6下800×600：779×432 最广泛使用的一屏大小是IE6下1024×768 ：1003×600
五、文字的编排与设计
Arial字体 优点:比例及字重（weight）和Helvetica极之相近 ; 没有下划线贴边的问题；Q字没尾巴；字高整齐 缺点:大写I与小写L无法区分 下划线:
Tahoma字体 优点:字宽较阔,字母间距较窄，恒定1px（阅读单个字母有困难）形态上符合汉字“方块字”点阵字；能区分大写I与小写L 缺点:12号字有下划线贴边的问题；Q字有尾巴；字高不整齐 下划线:
六、整齐的概念和应用
• 首页上摘要无须空格。
内容正文应该空两格。
六、整齐的概念和应用
• “豆腐块”四周应该空留均匀适当的间隔
七、模块化表现
设计准则：同一个网站采用的模块化表现应该是全部统一的。
模块化的几类参考表现： • 单线 • 3-5个像素的圆角 • 内边修饰 ……..
八、页脚信息
• 页脚信息按照从上到下的排列次序为: 1、内部导航 2、外部导航 3、各类许可证、授权声明 4、英文版权信息“Copyright ©” 5、中文版权信息 6、各类网络安全/工商证明/技术支持 LOGO • 各链接间隔统一使用”| ” • 建议采用12号字， 禁参考《图标设计规范》
四、图标表意
详细参考《图标设计规范》
四、图标表意
详细参考《图标设计规范》
完
Thanks
• • •
需突出的内容部分、新闻标题、栏目标题等多使用14号字体 广告内容、辅助信息或介绍性文字等多使用12号字体 避免大面积使用加粗字体
五、文字的编排与设计
特别注意：菜单尽量不使用12号加粗，这样会导致复杂的文字难以辨认。多采用14号加粗
2．文字颜色： • 同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色 • 一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。
• 使用SOSO引擎的可考虑在搜索框前加SOSO LOGO
•同一个web产品中搜索的位置和表现形式尽量保持一致
二、搜索框设计规范
2. 应用场景 强表现方式：
• 加大搜索框的显示，输入框内采用大字体（14号） • 突出搜索button的表现，更直观，更有点击欲 • 位置放在页头的中间并明显标示
二、搜索框设计规范
二、搜索框设计规范
1.基础规范
• 文本框 a. 搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度 b. 搜索组件中使用的文本框必须为单行文本框 c. 文本框的长度不得少于130个像素 高度不得低于18个像素 • 帮助信息 a. 帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等， b. “限定标签提示”一般放在搜索框的上面 c. “热门关键词提示”一般放在搜索框下面 d. “标示性文字” 可设置灰色(#cccccc)显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有 真正帮助的提示，”请输入关键词”这样的提示不应出现.