【问题标题】:Progressive enhancement and Graceful degradation example, I don't get it渐进增强和优雅退化的例子,我不明白
【发布时间】:2016-05-16 09:01:00
【问题描述】:

我已经阅读了这两种不同的设计方法,我了解 Prog.Enhancement 和 Graceful Degradation 之间的理论区别,但是我没有得到您可以在此链接中阅读的示例: Progressive enhancement and Graceful degradation example

他通过 G.D. 创建了一个链接,该链接通过 Javascript 打印页面。 与体育做同样的事情,但他使用“按钮”而不是“链接”。

这是与 P.E. 一起使用的代码。进程:

    <p id="printthis">Thank you for your order. Please print this page for your records.</p>
<script type="text/javascript">
(function(){
  if(document.getElementById){
    var pt = document.getElementById('printthis');
    if(pt && typeof window.print === 'function'){
      var but = document.createElement('input');
      but.setAttribute('type','button');
      but.setAttribute('value','Print this now');
      but.onclick = function(){
        window.print();
      };
      pt.appendChild(but);
    }
  }
})();
</script>

难道他不能继续使用链接做同样的事情吗? 我的意思是 Javascript 支持的问题即使在 P.E. 中仍然存在。和G.D.一样解决了,告诉用户自己打印页面。

提前致谢

【问题讨论】:

    标签: javascript progressive-enhancement graceful-degradation


    【解决方案1】:

    没有。在此示例中,没有链接。只是一个&lt;p&gt;。输入一个普通的&lt;a&gt; 意味着任何禁用 JS 的人以及任何浏览器无法执行 window.print() 的人都会看到一个不执行任何操作或去任何地方的链接(如果浏览器可能会抛出一个错误框已经够老了)。用户界面会明显损坏。为了以另一种方式增强页面,作者可以将&lt;p&gt; 更改为&lt;a&gt;,但他选择使用&lt;input type="button"&gt;。有很多选择。

    但是这个例子的重点是从一个不会以任何方式破坏任何人的 UI 开始 - 包括禁用 JS 的用户和没有所需功能的浏览器 - 然后构建。这就是PE的重点。另一方面,GD 方式是为您的主要受众构建页面并找到隐藏损坏的东西的方法,因此较小的浏览器仍然可以获得一些不错的东西,而不会到处看到很多损坏的东西。

    我知道你没有问,但以我个人的经验,PE 和 GD 之间的区别完全是人为的,非常 2009 年。这很大程度上与 IE6(不会死的 2001 年浏览器)有关,但是移动设备赋予了它新的紧迫感。

    当时,许多人将移动设备视为需要特殊处理的独立系统,因此这是一个重要的问题:您是为移动设备和桌面设备构建的,然后为您的核心桌面用户添加功能吗?或者您是否为您的核心桌面受众构建网站,然后减少可能在移动设备上出现问题的内容。

    【讨论】:

    • 非常感谢,你把这个例子解释得很好:) 所以你认为现在PE和GD的区别是多余的吗?我认为它非常实际,最重要的是适用于各种设计,而不仅仅是 UX。我目前正在写我的学位论文,我正在疯狂地试图解释设计的哲学和技术,特别是 UX 设计,一切都变化如此之快......
    • 这种区别仍然可以作为描述您如何适应部分功能可用性的方式。您可以注入一个地理定位按钮 (PE) 或在默认情况下放置一个,并为无法使用它的用户隐藏它 (GD)。在某种程度上,您可以将响应式布局视为 PE 和 GD 之间的完美交汇点——根据用户的能力动态添加和删除、显示和隐藏。我认为这就是为什么区分变得不那么重要的原因:我们现在倾向于考虑在构建页面时同时针对相同的问题进行 PE 和 GD。
    【解决方案2】:

    渐进式增强和优雅降级通常看起来很相似,因为它们是相似的。所有逐渐增强的设计都会优雅地降级,但并非所有优雅地降级的设计都会逐渐增强。这是关于视角的。正如 Andrew 所说,渐进式增强是从一个普遍可用的核心体验开始,并尽可能地增强该体验(使用 HTML、CSS 和 JavaScript)。具有不同需求和能力的不同人将获得不同的体验——对他们有用且适合他们的体验——这没关系。相反,优雅降级将允许您阻止对站点的访问,因为该人没有使用您不想测试的浏览器,因为您没有抛出错误,您只是阻止他们访问网站(并且可能会推荐您测试过的其他浏览器)。

    不断增强的网站为人们使用您的产品和阅读您的内容创造了更多机会,因为该理念认识到网络作为一种交付机制的内在可变性和脆弱性。设计人员/开发人员采用纯粹的降级方法可能会无意中限制他们的受众并降低其网站的稳定性,因为他们没有考虑到这种可变性。

    我已经在我的自适应网页设计一书中详细介绍了这一点。第一版可在线免费获得。第二版于 2015 年底问世。

    【讨论】:

      猜你喜欢
      • 2011-08-06
      • 2011-02-02
      • 1970-01-01
      • 1970-01-01
      • 2012-03-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-09-08
      相关资源
      最近更新 更多