渐进增强和优雅降级有啥区别?

Posted

技术标签:

【中文标题】渐进增强和优雅降级有啥区别?【英文标题】:What is the difference between progressive enhancement and graceful degradation?渐进增强和优雅降级有什么区别? 【发布时间】:2011-02-02 18:33:26 【问题描述】:

我对渐进式增强优雅降级之间的区别感到困惑。在我看来,它们看起来是一样的。

您能否向我解释一下两者之间的区别以及在什么情况下我会使用其中一种而不是另一种?

【问题讨论】:

这也是我的理解。 【参考方案1】:

如果您的网站在所有浏览器上看起来都一样好,但某些浏览器获得了,比如说,跳舞小马,因为它们支持跳舞小马,那么这就是渐进增强。它适用于所有浏览器,但某些浏览器可以获得额外的东西。通常,该术语适用于某些 javascript 功能,这些功能可能会增强“原始 html”之外的可用性。

如果您的网站仅在完全支持 CSS 3 和 Internet Explorer 8 的浏览器上看起来像您想要的那样,将显示相同的页面而没有圆角,那么这就是优雅降级。该网站确实适用于最先进的浏览器,但它仍然可以在旧浏览器中使用,只是没有那么花哨。

从两个不同的角度来看,它们实际上是同一件事。

【讨论】:

【参考方案2】:

它们几乎完全相同的东西,但它们的上下文不同。

有一类浏览器称为“A 级浏览器”。这些是您的典型受众成员,(可能)构成了您的大多数访问者。您将从这些用户的基线开始。将此称为最佳现代实践

如果您想增强任何碰巧使用 Firefox 3.6 或 Safari 4 或其他一些 whizbang 开发人员夜间 WebKit 的人的体验,您会想要做一些很棒的事情,例如

通过 CSS 实现圆角 阴影文字(但请上帝,不要太多太多) 投影(见上面的括号)

这些使您的网站看起来很酷,但不会破坏它。这是渐进式增强。从最佳实践的角度拥抱未来。

另一方面,您的小众任天堂网站吸引了相当数量的Internet Explorer 5 用户。可怜的你,但你也想确保他们不断回来。您可以通过将 Ajax 脚本包含在外部文件中来提供 Ajax 行为的替代方法,如果未打开其 JavaScript,则您的链接可能会更新整个页面。等等。从最佳现代实践的角度来看,您要确保某些功能性网站正在满足某些历史市场的需求。这是优雅的降级

它们大多相同,但对于许多开发团队而言,它们的优先级不同:如果有时间,渐进式增强非常好,但通常需要优雅降级。

【讨论】:

【参考方案3】:

我发现这往往是一种态度 - 你是在说“好吧,我的网站与 Lynx 合作,用户可以做我希望他们能够做的一切,现在让我们添加一些华丽”,或者你是在说“好的,我的网站在 Firefox 中运行,现在让我们尝试为那些不愿意使用它/关闭 JavaScript/etc 的人修复它。”

【讨论】:

【参考方案4】:

每个概念的选择基线的方向是不同的。

优雅降级从理想的用户体验级别开始,并根据用户代理的能力下降到最低级别,以迎合不支持基线使用的某些功能的代理。

渐进式增强从广泛的最低用户体验开始,并根据用户代理功能增加到更强大的水平,以满足支持比基线更高级功能的代理。

我认为如果时间/预算允许,可以同时使用这两种概念。如果不是,则首选优雅降级。

【讨论】:

【参考方案5】:

虽然我在某种程度上同意 Alex Mcp 和 deceze,但“优雅退化”和“渐进增强”这两个词的含义与我的立场略有不同。

优雅降级,很多时候(在我看来),根据我的经验,在应用程序最初构建得很糟糕之后,它似乎更像是一种将应用程序击败提交的棍子。就像有人构建了一个巨大的 JavaScript 对象,为用户提供了一些非常酷的东西来玩,直到经理出现,测试了这个东西,每个人都尖叫着四处张开,当他们注意到他们的应用程序不起作用时在 35% 的浏览器中。 “最好有人为此提供备用方案。”

渐进式增强(这也是一个更好的术语)在我看来更多是关于通过最基本的方法在入门级,无处不在地构建一些可行的东西可用,以提供用户需要的所有功能。然后可以通过简洁的、不显眼的助手、样式等来添加它,这实际上增强了相关应用程序的用户体验,而不仅仅是让它几乎不可用。 “看起来很酷。它在 Internet Explorer 6 中有效吗?哦,是的。有效。”

我认为也许在前两个答案中将样式作为 两个 术语的示例忽略了 渐进式增强 经常通过其非常解决的真正潜在可用性问题自然,优雅的退化会一直忽略,直到出现问题。

吐槽……

【讨论】:

【参考方案6】:

为了更容易,只需将您的栏设置在顶部,然后您可以忽略渐进增强。当一个新功能出现时,提高你的标准;)

或者,将您的标准设置为最低级别(Lynx 可能?)并使用渐进增强。

【讨论】:

【参考方案7】:

优雅降级

优雅退化是计算机、机器、电子设备的能力 系统或网络保持有限的功能,即使在一个大 它的一部分已被破坏或无法使用。目的 优雅降级是为了防止灾难性的失败。

优雅降级是一种解决方案。这是构建网站或应用程序的实践,因此它在现代浏览器中提供了良好的用户体验。但是,对于那些使用旧浏览器的人来说,它会优雅地降级。该系统可能不那么令人愉快或漂亮,但基本功能将适用于旧系统。

一个简单的例子是使用 24 位 alpha 透明 PNG 图像。这些图像可以毫无问题地显示在现代浏览器上。 Internet Explorer 5.5 和 Internet Explorer 6 会显示图像,但透明效果会失败(如有必要,可以使其工作)。不支持 PNG 的旧版浏览器会显示 alt 文本或空白区域。

采用优雅降级的开发人员通常会指定他们的浏览器支持级别,例如1 级浏览器(最佳体验)和 2 级浏览器(降级体验)。

渐进式增强

渐进式增强是一种网页设计策略,它强调 可访问性、语义 HTML 标记和外部样式表和 脚本技术。渐进式增强使用网络技术 以分层方式允许每个人访问基本内容 网页的功能和功能,使用任何浏览器或互联网 连接,同时还提供了增强版的页面 那些拥有更先进的浏览器软件或更大带宽的用户。

渐进式增强与优雅降级的概念相似,但相反。网站或应用程序将为大多数浏览器建立基本级别的用户体验。当浏览器支持时,将添加更高级的功能。

渐进式增强不需要我们选择支持的浏览器或恢复为基于表格的布局。我们选择技术水平;即浏览器必须支持 HTML 4.01 和标准页面请求/响应。

回到我们的图像示例,我们可能会决定我们的应用程序应该在所有图形浏览器中都能正常工作。我们可以默认使用质量较低的 GIF 图片,但在浏览器支持时将其替换为 24 位 PNG。


链接

***:Progressive enhancementGraceful degradation (fault tolerance)

来源:SitePoint Blog

【讨论】:

以上是关于渐进增强和优雅降级有啥区别?的主要内容,如果未能解决你的问题,请参考以下文章

渐进增强和优雅降级的区别

渐进增强和优雅降级

渐进增强和优雅降级之间的区别

渐进增强和优雅降级有什么区别

优雅降级和渐进增强的理解:

渐进增强和优雅降级