我在用户体验设计的前沿工作了二十多年。我记得从基于表格的布局到 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 吗？该视频可以成为静态英雄吗？那个“大声”的动画可以被静音吗？ 从小处开始。最优雅的解决方案通常是字节数最少的解决方案。
