腾讯Web页面设计规范

Web应用界面设计规范Web应用界面设计规范主讲人：ARay目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。

减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。

②产品设计通过规范的方式来达到以用户为中心的目的。

二、用户体验为何如此重要①日常生活中的遭遇X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。

一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。

到了地铁站，发现公交卡没有钱了。

无奈之下只能去排队买票。

排了3趟地铁，终于到公司了，但是你却迟到了。

结果：尽管你已经非常努力，但是你还是迟到了。

那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。

糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。

表现二：界面元素比例失调。

比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。

表现三：界面元素凌乱。

比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。

表现四：违背使用习惯。

你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。

表现五：消息框信息含糊、混乱。

比如软件弹出一个消息框。

把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。

表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。

这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。

什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。

web界面设计规范Web界面设计规范是一系列规定和约束，旨在确保网站或应用程序的用户界面设计符合统一的标准，以提供用户友好的体验和一致性的外观。

以下是一些常见的Web界面设计规范：1. 界面布局规范：- 使用网格系统来实现页面布局，确保页面的各个元素对齐和排列整齐。

- 确定主要内容的位置，如导航栏、辅助功能和主要内容区域。

- 使用一致的字体、颜色和图标来传达信息层次结构和用户导航。

2. 导航规范：- 使用清晰的导航栏，以帮助用户快速找到所需的功能和信息。

- 提供可见的面包屑导航，以显示用户当前所在位置和可点击的路径。

- 使用显眼的按钮和链接，以便用户点击并进行导航。

3. 内容呈现规范：- 使用有吸引力的图像和多媒体内容来吸引用户的注意力。

- 调整字体大小和行距，以确保易读性和可访问性。

- 使用合适的排版和格式，以将信息呈现清晰、易理解。

4. 表单规范：- 使用标签来描述每个输入字段，并对输入字段进行合适的格式控制。

- 提供明确的错误消息和验证规则，帮助用户填写表单。

- 为用户提供方便的方式来提交表单，如按钮或提交链接。

5. 响应式设计规范：- 确保网站或应用程序在不同设备上具有一致的外观和功能。

- 使用可自适应的布局和元素，以适应不同的屏幕尺寸和方向。

- 优化页面加载速度，减少数据传输和图像大小。

6. 可访问性规范：- 使用无障碍标准和技术，以确保残障用户能够方便地访问和使用网站。

- 提供有意义的文本替代品和注释，以帮助使用辅助技术的用户理解图像和多媒体内容。

- 使用明确和简洁的语言，避免使用模糊、不明确的术语和词语。

7. 交互规范：- 使用明确和一致的图标和按钮，以指示用户可执行的操作。

- 提供实时反馈和状态更新，以使用户意识到其操作的结果。

- 使用动画和过渡效果来增强用户体验，但不要过度使用，以免分散用户注意力。

以上是一些常见的Web界面设计规范，可以根据具体的项目需求和目标来制定和调整。

设计规范的核心目标是提供用户友好的体验和一致性的外观，为用户提供无障碍的操作和导航。

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界面设计规范是至关重要的。

一、色彩选择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应用界面设计规范（Design Spe cification for Web UI）主讲人：ARay目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。

减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。

②产品设计通过规范的方式来达到以用户为中心的目的。

二、用户体验为何如此重要①日常生活中的遭遇X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。

一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。

到了地铁站，发现公交卡没有钱了。

无奈之下只能去排队买票。

排了3趟地铁，终于到公司了，但是你却迟到了。

结果：尽管你已经非常努力，但是你还是迟到了。

那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。

糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。

表现二：界面元素比例失调。

比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。

表现三：界面元素凌乱。

比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。

表现四：违背使用习惯。

你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。

表现五：消息框信息含糊、混乱。

比如软件弹出一个消息框。

把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。

表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。

这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。

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 应用界面设计规范主讲人：ARay目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。

减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。

②产品设计通过规范的方式来达到以用户为中心的目的。

二、用户体验为何如此重要①日常生活中的遭遇X 员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。

一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开到了地铁站，发现公交卡没有钱了。

无奈之下只能去排队买票。

排了3 趟地铁，终于到公司了，但是你却迟到了。

结果：尽管你已经非常努力，但是你还是迟到了。

那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？② 什么是用户体验用户体验(user experience)是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。

糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。

表现二：界面元素比例失调。

比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。

表现三：界面元素凌乱。

比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。

表现四：违背使用习惯。

你按F1 ,它没有弹出帮助，却执行了一件绝对出乎你意料的动作。

表现五：消息框信息含糊、混乱。

比如软件弹出一个消息框。

把原本“确定”和“取消”写成为“是”和“否” ，让用户不知道什么意思。

表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。

这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。

什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。