2019腾讯网web页面设计规范_1450714103.ppt
Web页面设计规范
Web页面设计标准编号：版本号：受控状态：作者：分发号：文档修改历史记录文档修改记录目录1引言61.1 目的 61.2 范围 61.3 缩略术语 61.4 参考资料 62WEB页面框架内容6 2.1 页面框架 62.2 页面布局 6布局原那么 6布局要求72.2.2.1 页面分割72.2.2.2 页面构造82.2.2.3 页面展现92.2.2.4 页面美化102.3 页面字体112.4 边距112.5 表格122.6 段落排版132.7 Frame 132.8 其他页面元素143页面风格153.1 风格分类153.2 页面风格应用154WEB页面交互15 4.1 页面元素焦点切换16信息填写16鼠标交互响应164.2 页面信息交互18操作结果确认18其他规那么184.3 页面信息提示194.4 键盘响应支持215WEB页面通用标准22 5.1 一般页面功能22新增22修改22删除22查询23取消23保存23重置23返回23分页24全选245.2 一般页面规那么24默认值 24必填值 24界面传递25窗口嵌套25输入框操作25在线帮助功能25菜单功能要求26快捷键功能27快捷键的限制27页面的标准性28系统易用性29输入平安性要求30独特性要求31多窗口的应用与系统资源31 6页面编程技术使用标准32 6.1 页面元素命名326.2 DHTMLx控件356.3 Flex控件357页面资源规格说明357.1 图标357.2 图片367.3 多媒体 368附录378.1 基于DHX的CSS规格例如37表格CSS例如 378.2 典型应用的页面例如37引言目的本文用于标准我公司所开发的商业软件中对于web页面的设计工作，明确在设计中所要遵循的准那么和方法，web页面中各个元素的规格要求，确保所实现的web页面在风格、构造和功能上的统一，提升商业软件的外在品质。
范围本标准适用于公司所有的商业软件产品。
缩略术语DHMLX：web页面的UI控件参考资料WEB页面框架内容页面框架WEB的页面框架是指构成完好页面的组织构造。
第7章Web界面设计精品PPT课件
色彩：Web网站给人的第一印象来自视觉冲击。颜 色元素在网站的感知和展示上扮演重要的角色。某 个企业或个人的风格、文化和态度可以通过Web界 面中的色彩混合、调整或者对照的方式体现出来。 一般地，Web界面中色彩选择可考虑：鲜明性、独 特性、合适性、联想性、和谐性。
7.1 Web界面及相关概念
Web应用的成功与否，除了受其所采用的技术和所 能够提供的功能的限制，还受Web网页的外观的影 响。Web网页的外观经常是最先被用户注意到的。 用户对网站的第一印象与界面外观是否友好、吸引 人密切相关。所以对于设计人员来说，Web界面设 计至关重要。Web界面设计的人性化、易用性是Web 界面设计的核心。
7.3 Web界面要素设计
文本设计
文本不要太多，以免转移浏览者注意力。 要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视
觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色 所代表的内容。 选择的字体应和整个界面应融为一体；一旦已经为某些元素选择了字体 ，应该保证其在整个网站中应用的一致性。 网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据 或者信息。 通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉 。 应该重视标题的处理。标题一般无分级要求，其字形一般较大，字体的 选择一般具有多样性，字形的变化修饰则更为丰富。
Web界面设计是设计的一种，要求简练、明确。
7.2 Web界面设计原则
Байду номын сангаас
迪斯尼网站（，2008年7月）
Google首页 （，2009年9月）
web网页设计规范
web网页设计规范网页设计规范是指在设计和制作网页时应遵循的一系列规则和标准，旨在提高网页的可用性和用户体验。
以下是一些常见的网页设计规范，以帮助您制作出优秀的网页：1. 布局规范：- 使用网格系统：网格系统能帮助您保持页面的一致性和平衡感，同时也能让内容更易于阅读和理解。
- 使用响应式设计：确保您的网页能够适应不同的屏幕尺寸和设备，以提供更好的用户体验。
- 保持简洁明了：避免使用过多的装饰和不必要的元素，使页面看起来干净和易于理解。
2. 导航规范：- 显眼的导航栏：将主要的导航链接放置在页面的顶部或左侧，让用户能够轻松地找到所需信息。
- 使用面包屑导航：面包屑导航能够告诉用户当前所处的页面位置，方便用户进行导航和返回。
3. 字体规范：- 使用易于阅读的字体：选择适合在线阅读的字体，确保字体大小和间距合适，不影响用户的浏览体验。
- 限制字体种类和大小：过多的字体样式和大小会给用户带来混乱和困惑，尽量限制使用。
4. 图像和多媒体规范：- 优化图像和视频：确保您的图像和视频都经过压缩和优化，以提高页面加载速度和用户体验。
- 提供替代文本：对于图片和视频，提供替代的文本描述，以便于辅助技术用户和搜索引擎理解内容。
5. 颜色规范：- 使用品牌颜色：网页的颜色应与品牌色调相一致，以增加品牌识别度。
- 考虑色盲用户：避免依赖过多颜色来传达信息，确保页面的可读性和可理解性，特别是对于色盲的用户。
6. 可访问性规范：- 使用语义化标签：使用正确的标签来描述页面内容，以提升可访问性和搜索引擎的理解。
- 提供键盘导航：确保用户可以使用键盘进行导航和操作，尤其是对于残障用户。
7. 页面加载速度规范：- 压缩和优化文件：确保所有的代码和媒体文件（如图片和视频）都经过压缩和优化，以提高页面的加载速度。
- 使用缓存机制：利用浏览器缓存来提高页面的加载速度，减少用户等待时间。
总结：以上是一些常见的网页设计规范，通过遵循这些规范，您可以制作出易于使用和高效的网页，提供良好的用户体验。
Web页面设计规范
Web页面设计规范编号：版本号：受控状态：作者：分发号：文档修改历史记录文档修改记录文档审核记录目录1引言 (5)1.1目的 (5)1.2范围 (5)1.3缩略术语 (5)1.4参考资料 (5)2WEB页面框架内容 (5)2.1页面框架 (5)2.2页面布局 (6)2.2.1布局原则 (6)2.2.2布局要求 (6)2.2.2.1页面分割 (6)2.2.2.2页面结构 (7)2.2.2.3页面展现 (8)2.2.2.4页面美化 (8)2.3页面字体 (9)2.4边距 (9)2.5表格 (9)2.6段落排版 (10)2.7F RAME (10)2.8其他页面元素 (11)3页面风格 (11)3.1风格分类 (11)3.2页面风格应用 (12)4WEB页面交互 (12)4.1页面元素焦点切换 (12)4.1.1信息填写 (12)4.1.2鼠标交互响应 (12)4.2页面信息交互 (14)4.2.1操作结果确认 (14)4.2.2其他规则 (14)4.3页面信息提示 (14)4.4键盘响应支持 (16)5WEB页面通用规范 (17)5.1一般页面功能 (17)5.1.1新增 (17)5.1.2修改 (17)5.1.3删除 (17)5.1.4查询 (17)5.1.5取消 (18)5.1.6保存 (18)5.1.7重置 (18)5.1.8返回 (18)5.1.9分页 (18)5.1.10全选 (18)5.2一般页面规则 (18)5.2.1默认值 (18)5.2.2必填值 (19)5.2.3界面传递 (19)5.2.4窗口嵌套 (19)5.2.5输入框操作 (19)5.2.6在线帮助功能 (19)5.2.7菜单功能要求 (20)5.2.8快捷键功能 (20)5.2.9快捷键的限制 (21)5.2.10页面的规范性 (21)5.2.11系统易用性 (22)5.2.12输入安全性要求 (22)5.2.13独特性要求 (23)5.2.14多窗口的应用与系统资源 (23)6页面编程技术使用规范 (24)6.1页面元素命名 (24)6.2DHTML X控件 (25)6.3F LEX控件 (26)7页面资源规格说明 (26)7.1图标 (26)7.2图片 (26)7.3多媒体 (27)8附录 (28)8.1基于DHX的CSS规格示例 (28)8.1.1表格CSS示例 (28)8.2典型应用的页面示例 (28)1引言1.1 目的本文用于规范我公司所开发的商业软件中对于web页面的设计工作，明确在设计中所要遵循的准则和方法，web页面中各个元素的规格要求，确保所实现的web页面在风格、结构和功能上的统一，提升商业软件的外在品质。
Web界面设计规范
Web应用界面设计规范（Design Spe cification for Web UI）主讲人：ARay目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。
减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。
②产品设计通过规范的方式来达到以用户为中心的目的。
二、用户体验为何如此重要①日常生活中的遭遇X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。
一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。
到了地铁站，发现公交卡没有钱了。
无奈之下只能去排队买票。
排了3趟地铁，终于到公司了，但是你却迟到了。
结果：尽管你已经非常努力，但是你还是迟到了。
那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。
糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。
表现二：界面元素比例失调。
比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。
表现三：界面元素凌乱。
比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。
表现四：违背使用习惯。
你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。
表现五：消息框信息含糊、混乱。
比如软件弹出一个消息框。
把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。
表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。
这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。
Web页面设计要求规范
Web页面设计规编号：版本号：受控状态：作者：分发号：文档修改历史记录文档修改记录目录1引言61.1 目的 61.2 围 61.3 缩略术语 61.4 参考资料 62WEB页面框架容6 2.1 页面框架 62.2 页面布局 62.2.1 布局原则 62.2.2 布局要求72.2.2.1 页面分割72.2.2.2 页面结构82.2.2.3 页面展现92.2.2.4 页面美化92.3 页面字体102.4 边距112.5 表格112.6 段落排版122.7 Frame 122.8 其他页面元素133页面风格133.1 风格分类133.2 页面风格应用144WEB页面交互14 4.1 页面元素焦点切换14 4.1.1 信息填写144.1.2 鼠标交互响应154.2 页面信息交互164.2.1 操作结果确认164.2.2 其他规则164.3 页面信息提示174.4 键盘响应支持195WEB页面通用规19 5.1 一般页面功能195.1.1 新增205.1.2 修改205.1.3 删除205.1.4 查询205.1.5 取消215.1.6 保存215.1.7 重置215.1.8 返回215.1.9 分页215.1.10 全选215.2 一般页面规则215.2.1 默认值 215.2.2 必填值 225.2.3 界面传递225.2.4 窗口嵌套225.2.5 输入框操作225.2.6 在线帮助功能235.2.7 菜单功能要求235.2.8 快捷键功能245.2.9 快捷键的限制245.2.10 页面的规性255.2.11 系统易用性265.2.12 输入安全性要求265.2.13 独特性要求275.2.14 多窗口的应用与系统资源28 6页面编程技术使用规286.1 页面元素命名286.2 DHTMLx控件 306.3 Flex控件317页面资源规格说明317.1 图标317.2 图片317.3 多媒体 328附录338.1 基于DHX的CSS规格示例33 8.1.1 表格CSS示例 338.2 典型应用的页面示例33引言目的本文用于规我公司所开发的商业软件中对于web页面的设计工作，明确在设计中所要遵循的准则和方法，web页面中各个元素的规格要求，确保所实现的web页面在风格、结构和功能上的统一，提升商业软件的外在品质。
Web界面设计规范
Web应用界面设计规范（Design Spe cification for Web UI）主讲人：ARay目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。
减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。
②产品设计通过规范的方式来达到以用户为中心的目的。
二、用户体验为何如此重要①日常生活中的遭遇X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。
一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。
到了地铁站，发现公交卡没有钱了。
无奈之下只能去排队买票。
排了3趟地铁，终于到公司了，但是你却迟到了。
结果：尽管你已经非常努力，但是你还是迟到了。
那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。
糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。
表现二：界面元素比例失调。
比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。
表现三：界面元素凌乱。
比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。
表现四：违背使用习惯。
你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。
表现五：消息框信息含糊、混乱。
比如软件弹出一个消息框。
把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。
表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。
这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。
网页设计规范..共34页PPT资料
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、网页宽度
最新显示器分辨率比例调查： 目前主流分辨率 1024X768，在此状态下，默认使用960的网页宽度，与腾讯网首页统一尺寸。
特殊情况 1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950（paipai，Qbar等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)
建议使用：
五、文字的编排与设计
深蓝色 当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。 当色相越接近天蓝时，（B）值应该越低。 很多门户网站使用蓝色为文字颜色，常用的有
建议使用天蓝色的：
纯蓝色：
五、文字的编排与设计
其他颜色 当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色。
三、页码设计规范
2. 小型页码翻页的表现方法： • 链接页码为简明独立，不加任何修饰的数字形式 • 链接颜色由当前页面设计决定 • 数字大小建议为12-14px ,以易于点击为原则.
五、文字的编排与设计
总体原则：提高文字的辨识性和页面的易读性
1. 文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。
五、文字的编排与设计
Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L 缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐 下划线:
腾讯网web页面设计规范课件
优秀案例二：扁平化风格
总结词
简洁大气，时尚前卫
详细描述
该设计案例采用扁平化设计理念，去除冗余的装饰效果，强调简洁大气的视觉体验。色彩搭配明快， 符合年轻用户的审美需求。图标和按钮的设计简洁明了，方便用户识别和操作。
优秀案例三：极简风格
总结词
简约至极，精致优雅
VS
详细描述
该设计案例以极简主义为设计理念，追求 简约至极的视觉效果。色彩运用极致简约 ，以黑白灰为主色调，营造出高雅的氛围 。字体选择精致优雅，符合高端品牌的形 象定位。整体设计精致而不失大气，符合 高端用户的审美需求。
THANKS
感谢观看
色彩搭配
遵循色彩搭配原则，避免颜色冲突，保持页面整体协调。
图片与图标
图标设计
使用简洁、直观的图标，方便用户快速理解 功能或内容。
图片质量
确保图片清晰、无锯齿，提高用户体验。
图片与文字的配合
合理安排图片与文字的位置和比例，避免相 互干扰。
03 交互设计规范
按钮与链接
按钮与链接是网页中重要 的交互元素，设计时应遵 循以下规范
保持设计风格、色彩搭配、字体选择等的一 致性，提升品牌形象。
响应式设计
确保页面在不同设备和屏幕尺寸上均能良好 展示，提供优质的浏览体验。
简明了
避免过多的装饰和冗余元素，保持页面简洁 ，突出核心内容。
设计目标
提高用户体验
通过合理布局、易于理解的操作流程和友好的交互设计，提升用户满意度。
品牌传达
借助独特的设计风格和色彩搭配，传达腾讯网的专业性和品牌价值。
文字颜色
选择与背景色对比度适中的颜色，确保文字 清晰可见。
图标规范
图标风格
Web页面设计规范
Web页面设计规范编号：版本号：受控状态：作者：分发号：文档修改历史记录文档修改记录目录1引言61.1 目的 61。
2 范围 61。
3 缩略术语 61。
4 参考资料 62WEB页面框架内容6 2。
1 页面框架 62。
2 页面布局 62。
2.1 布局原则 62.2.2 布局要求72。
2.2。
1 页面分割7 2.2。
2。
2 页面结构8 2。
2。
2。
3 页面展现9 2.2。
2.4 页面美化10 2。
3 页面字体112。
4 边距112。
5 表格122.6 段落排版132.7 Frame 132。
8 其他页面元素143页面风格153.1 风格分类153。
2 页面风格应用154WEB页面交互15 4.1 页面元素焦点切换15 4。
1。
1 信息填写15 4.1.2 鼠标交互响应164.2 页面信息交互184.2。
1 操作结果确认184.2。
2 其他规则184。
3 页面信息提示184.4 键盘响应支持215WEB页面通用规范21 5.1 一般页面功能215.1.1 新增225。
1。
2 修改225.1.3 删除225。
1。
4 查询225.1。
5 取消235.1.6 保存235.1。
7 重置235。
1.8 返回235.1.9 分页235.1.10 全选235。
2 一般页面规则245。
2.1 默认值 245。
2。
2 必填值 245.2.3 界面传递245。
2。
4 窗口嵌套255。
2。
5 输入框操作255.2。
6 在线帮助功能255.2.7 菜单功能要求265.2。
8 快捷键功能275.2.9 快捷键的限制275.2.10 页面的规范性285.2。
11 系统易用性295。
2。
12 输入安全性要求305.2.13 独特性要求315。
2.14 多窗口的应用与系统资源31 6页面编程技术使用规范326.1 页面元素命名326.2 DHTMLx控件356.3 Flex控件357页面资源规格说明357.1 图标357.2 图片367。