我在使用者體驗設計的前沿工作了二十多年。我記得從基於表格的佈局到 CSS 的轉變，iPhone 推出時轉向響應式設計的轉變，以及「注意力經濟」的興起。但當我們展望 2026 年時，該產業正面臨迄今為止最重大的轉變。我們正跨越「不惜一切代價設計」的時代，進入永續用戶體驗時代。 這並不是大多數設計師（包括我自己）所考慮的事情，直到我聽到這個概念後才意識到這一點。多年來，我們一直將網路視為飄逸、失重的雲端。我們假設數位產品是「綠色」的，只是因為它們不是印刷在紙上的。我曾經也這麼認為，在氣候變遷的概念出現之前，更多的是為了拯救樹木。 我們錯了。雲端是一種實體基礎設施，是由資料中心、海底電纜和 24/7 運轉的冷卻系統組成的龐大網路。雖然以人工智慧為中心的資料中心與大型鋁冶煉廠的功耗相匹配，但其高地理密度造成了更強烈和局部的環境壓力。 身為使用者體驗設計師，我們是這種能源消耗的建築師。我們批准的每一個高解析度英雄圖像、每一個自動播放的背景影片以及每一個複雜的 JavaScript 動畫都是對處理器消耗電量的直接指令。如果我們想建立一個持久的未來，我們必須停止為「哇」而設計，而開始為效率而設計。 深色模式 2000 年代初，白色背景成為標準，因為它們模仿了人們熟悉的紙張。然而，硬體已經發展，我們的設計理念也必須隨之發展。從 LCD 到 OLED（有機發光二極體）技術的轉變從根本上改變了顏色對能量的影響。
邏輯 與需要始終打開背光（即使顯示黑色時）的傳統 LCD 螢幕不同，OLED 螢幕單獨照亮每個像素。當像素設定為純黑色 (#000000) 時，該特定二極體將完全關閉。它消耗零功率。 透過設計偏向深色調色板的介面，我們不僅僅是在追隨潮流，而是在追隨潮流。我們正在物理上減少用戶設備的能源需求。 數據 節省的能源不容忽視。普渡大學在 2021 年進行的一項具有里程碑意義的研究已成為這一討論的黃金標準，該研究顯示，在 100% 亮度下，從淺色模式切換到深色模式可以平均節省 39% 至 47% 的電池電量。在全球範圍內，如果每個主要應用程式都預設為黑暗模式，那麼電網需求的減少將是天文數字。 設計目標 2026 年，深色模式不應再成為隱藏在設定選單中的次要「主題」。我們應該以「黑暗優先」的心態進行設計。這並不意味著每個網站都必須看起來像《駭客任務》，但它確實意味著優先考慮高對比度黑暗主題作為預設的系統首選狀態。這可以延長設備的硬體使用壽命並降低每次互動的碳足跡。 我個人更喜歡淺色模式閱讀，因此同時提供淺色和深色模式選項是有意義的。提供這兩種選項還需要考慮可訪問性。 影像和視訊優化 我們已經成為懶惰的設計師。借助高速 5G 和光纖，我們不再擔心檔案大小。在過去十年中，行動頁面的平均權重增加了 500% 以上，這主要是由於視覺資源未優化。 邏輯 網站的「數位脂肪」（4MB Unsplash 照片和 15MB 背景影片）是頁面加載能量的最大貢獻者。從伺服器傳輸到客戶端的每一兆位元組都需要電力來進行傳輸、伺服器的處理和用戶的渲染引擎。當我們使用大量文件時，我們本質上是在「燃燒」能量來顯示一張圖片，而圖片的大小本來可以同樣有效。更不用說，您還可以透過載入速度更快的頁面提供更好的使用者體驗。
數據 根據 HTTP Archive 的數據，圖像和影片始終佔據頁面總權重的大部分。然而，與 JPEG 相比，轉向 AVIF 和 WebP 等現代格式可以將影像重量減少多達 50%，而不會造成任何明顯的品質損失。 雖然這些格式對我來說不像 JPG 和 PNG 那麼熟悉，但我絕對期待使用它們來縮小頁面大小。 這設計目標 我最近領導了一個網路安全平台的重新設計。透過實施「前後」審核，我們發現他們的主頁載入了 5.5MB 的資料。透過用 SVG（可擴展向量圖形）藝術取代高解析度攝影，並使用巧妙的 CSS 漸變代替圖像資源，我們將負載降至 1.2MB。這意味著能源負荷減少了 78%！身為設計師，你的第一個問題應該永遠是： “我需要一張照片嗎？或者我可以通過代碼實現同樣的情感共鳴嗎？”
有意的動作：剪掉「大聲」的動畫 我們生活在一個「滾動劫持」和複雜 3D 視差效果的時代。雖然這些可能會在 Awwwards.com 上獲獎，但它們往往是生態災難。 邏輯 動畫不是免費的。為了渲染複雜的動畫，裝置的 GPU（圖形處理單元）必須以高容量運作。這會增加 CPU 溫度、觸發冷卻風扇（在筆記型電腦中）並快速耗盡電池電量。在後台不斷運行或觸發瀏覽器大量重新繪製的「大聲」動畫所消耗的能量相當於讓您的汽車在車道上空轉。
數據 谷歌的材料設計指南強調「有意義的動作」。他們認為動畫應該僅用於引導用戶或提供回饋。使用 WebP 取代 JPEG 可以節省頁面 25-50% 的資料。 設計目標 我們必須採取有意義的行動。如果動畫不能幫助使用者完成任務或理解層次結構，那就是一種浪費。我們應該盡可能支援 CSS 轉換，而不是像 GSAP 或 Lottie 這樣的重型 JavaScript 程式庫，因為 CSS 是硬體加速的，並且對於瀏覽器來說計算效率要高得多。 身為使用者體驗設計師，我無法否認這種方法。這不僅有助於減少數據浪費，還可以改善用戶的用戶體驗。 為每個項目設定“數據預算” 在我 20 多年的使用者體驗經驗中，最成功的專案通常都是那些約束最嚴格的專案。 正如專案有財務預算一樣，它也應該有碳和數據預算。 邏輯 資料預算是頁面總大小的硬性上限（例如，「此登陸頁面不能超過 1MB」）。這迫使設計團隊做出艱難的、有意義的選擇。如果您想要新增新的追蹤腳本或精美的字體粗細，則必須透過優化或刪除其他內容來「付費」。這可以防止“功能蠕變”變成“碳蠕變”。 數據 由 Wholegrain Digital 等先驅開發的可持續網頁設計模型提供了計算每次頁面瀏覽的二氧化碳排放量的公式。網站每次瀏覽平均產生約 0.5 克二氧化碳。對於每月瀏覽量為 100 萬的網站來說，每年排放 6 噸二氧化碳，相當於駕駛汽車行駛 15,000 英里。 設計目標 永續使用者體驗清單
減少影像問題每個視覺效果的必要性，並使用最小的解析度和最有效的檔案格式（如 AVIF）來最大程度地減少資料傳輸。 優化影片消除自動播放媒體並優先考慮高度壓縮的短循環，以確保精力僅花費在用戶想要查看的內容上。 限製字體最多使用兩種網頁字體粗細或堅持使用經典系統字體，以消除不必要的伺服器請求和渲染膨脹。 回收資產使用 CSS 過濾器和疊加層多次重新利用單個圖像或視頻，以創建視覺多樣性，而不會增加頁面總重量。 選擇綠色託管 在經綠色網路基金會驗證的伺服器上託管您的數位產品，以確保它們由再生能源供電。 最小化資料距離選擇地理位置靠近主要受眾的伺服器位置，以減少資料透過實體基礎設施傳輸所需的能源。
環保設計的商業案例 有些人可能會認為「綠色用戶體驗」聽起來像是對品質的妥協。相反，這是一種競爭優勢。永續設計是性能設計。 當您減少頁面重量時，您的網站載入速度會更快。當您的網站載入速度更快時，您的核心網路生命力就會改善。當您的核心網路生命力改善時，您的 SEO 排名就會上升。此外，使用較舊設備或較慢數據計劃（尤其是在新興市場）的用戶實際上可以存取您的產品。這就是「包容性設計」的定義。 透過削減“數位脂肪”，我們創建了一個更精簡、更快、更易於訪問的網路。我們正在擺脫 2010 年代的“一次性設計”，轉向更持久、更受尊重的數位建築。 結論：「清潔」設計的未來 在我二十年的設計生涯中，我見證了許多趨勢的來來去去。擬物化、扁平化、新擬化——它們都是美學選擇。但永續的使用者體驗並不是一種趨勢；而是一種趨勢。現在這是必需品。我們是第一代必須考慮數位工作的物理後果的設計師。 永續的使用者體驗是「三贏」。這對地球更好，因為它減少了能源消耗。這對用戶來說更好，因為它可以帶來更快、更靈敏的介面。這對企業來說更好，因為它降低了託管成本並提高了轉換率。 「無限像素」的時代已經結束。到 2026 年，最複雜的設計是留下最小足跡的設計。我們不再只是設計師；我們是用戶電池、數據計劃以及最終環境的守護者。 行動號召 我要求您今天僅審核當前專案的一頁。使用網站碳計算器等工具來查看其影響。然後，尋找“看不見的浪費”。該圖像可以是 SVG 嗎？該影片可以成為靜態英雄嗎？那個「大聲」的動畫可以被靜音嗎？ 從小處開始。最優雅的解決方案通常是位元組數最少的解決方案。
