progressive enhancement, graceful degradation

漸進增強和優雅降級這兩個概念是在 css3 出現之後火起來的。由於低階瀏覽器不支援 css3,但是 css3 特效太優秀不忍放棄,所以在高階瀏覽器中使用css3,而在低階瀏覽器只保證最基本的功能。二者的目的都是關注不同瀏覽器下的不同體驗,但是它們側重點不同,所以導致了工作流程上的不同。

「優雅降級」還是「漸進增強」?

圖上方為「優雅降級(Graceful Degradation)」的網頁設計模式;下方為「漸進增強(Progressive Enhancement)」模式

漸進增強

針對低版本瀏覽器進行構建頁面,並且保證最基本的功能,然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

關注於內容本身,內容是我們建立網站的誘因,有的網站展示他,有的網站蒐集他,有的尋求,有的操作,還有的網站甚至會包含以上的種種,但相同點是他們全都涉及到內容。這使得 " 漸進增強 " 成為一種更為合理的設計範例。

這個方式與「優雅降級(Graceful Degradation)」的方式相反,是先針對最不完整或是限制最多的平台上創建最重要的基本內容,用最精簡的方式呈現;然後以這些基本內容都存在的狀況下,開始慢慢擴展其佈局,隨著平台的限制越來越少,內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。

優雅降級

一開始就夠建完整的功能,然後再針對低版本瀏覽器進行兼容。

一開始就針對「功能最完整」的平台來設計、開發網站,完成所有的功能和體驗後,再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案,以確保網站能在最新、最完整的平台上完美呈現,擁有「最好的使用者體驗」

認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為過時或是有功能缺失的瀏覽器下的測試工作安排在開發周期的最後階段,並且把測試對象限定為主流瀏覽器的前一個版本

在這種觀點下,舊版的瀏覽器被認為只能提供"簡陋卻無妨"的瀏覽體驗,你可以作揖些小的調整來適應某個特定的瀏覽器。但由於他們並非我們所關注的焦點,因此除了修復大的錯誤之外,其他的差異將被直接忽略。

difference

優雅降級是從複雜的現狀開始,並試圖減少用戶體驗的供給。

漸進增強則是從一個非常基礎的,能夠起作用的版本開始,並且不斷擴充,以適應未來環境的需要。

降級 (功能衰減) 意味著往回看 ; 而增強則意味著向前看,同時保證其根基處於安全地帶。

(4)如何抉擇

現在有很成熟的技術,能夠讓你分析使用你客戶端程式的版本比例。如果低版本使用者居多,當然優先採用漸進增強的開發流程;如果高版本使用者居多,為了提高大多數使用者的使用體驗,那當然優先採用優雅降級的開發流程。

Reference

  1. https://chowdera.com/2021/05/20210519132712124N.html
  2. https://www.hacker543.com/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E6%95%99%E6%95%99%E6%88%91%E3%80%8C%E5%84%AA%E9%9B%85%E9%99%8D%E7%B4%9A%E3%80%8Dv-s%E3%80%8C%E6%BC%B8%E9%80%B2%E5%A2%9E%E5%BC%B7%E3%80%8D/
  3. https://www.w3study.wiki/a/202108/543629.html

--

--