Perspectives

不同视角的数字产品可持续策略

来源:https://sustainablewebdesign.org/guidelines/

用户体验设计

  • 用户需求的准确把握
  • 高效易用的交互路径
  • 字体、动画、文件格式的选择

页面代码开发

  • 确定相关技术指标
  • 压缩HTML, CSS, and JavaScript代码
  • 避免代码重复

托管和基础设施

  • 选择使用可持续能源的托管服务商
  • 优化浏览器缓存
  • 自动化编译、部署、测试等

商业和产品策略

  • 声明可持续性愿景与产品策略
  • 传达用户选择对生态的影响
  • 估算产品或服务的环境影响

Sec. 02 — Background

研究背景:数字化的环境代价

ENVIRONMENTAL FOOTPRINT

字产品并非表面看起来的"虚拟"与"清洁"。每一次数字交互,都会触发服务器、网络与终端设备上的数据传输与计算处理,从而消耗能源。数字产品在全生命周期内造成的物理资源消耗与环境足迹,被称为"世界范围的浪费"(World Wide Waste)

Exhibit 01/ 关键数据 Key Figures

Share of total emissions

现状 · Status Quo

3%-4%

信息与通信技术(ICT)行业碳排放量占全球总量的比例,已与全球航空业排放水平相当

预测 · Projection

11.63%

据预测,截至2030年中国数字经济碳排放占比或将达到的水平,将成为主要碳排放源之一

Problem Statement

设计师面临的三重困境

设计决策直接决定数据传输量与设备计算负荷,但设计师长期处于"有心无力"的状态

01

认知鸿沟

缺少把抽象的环境可持续理念同具体Web设计实践联系起来的知识体系,设计师难以认知设计决策所造成的环境影响。

02

方法缺失

缺少一套真正面向设计过程的环境影响评价方法及分析工具,无法在"知道"与"做到"之间架起桥梁。

03

工具错配

现有的Web性能评估工具(如Lighthouse)主要为开发者设计,其技术指标与优化建议对设计师而言不够直观,难以直接应用。

Sec. 03Significance

研究目的与意义

探究以环境可持续理念为基础的用户界面设计原则和方法,为Web设计领域的绿色转型提供理论指导和实践工具

3.1

理论意义

Theoretical

提出数字产品绿色设计的"减量(Reduce)、复用(Reuse)、优化(Refine)"新3R原则理论体系,为数字可持续性设计领域提供新的理论视角,丰富相关领域的理论研究。

3.2

实践意义

Practical

为Web UI设计师提供一套完整、有结构、易使用的解决方案——包含Web环境可持续性分析框架、能自动量化评价的在线工具与切实可行的低碳设计策略,提供从理论认知到实践操作的方法,降低可持续设计理念的应用门槛。

3.3

行业意义

Industry

研究成果为Web UI设计师提供了一套行之有效的理论指导和实践工具,为Web设计行业的绿色转型提供了一种既有理论深度又有实践价值的解决办法。

Sec. 04Innovation

本研究的核心价值与创新点

以"理论构建—工具开发—实证验证"的完整路径,推动可持续理念在数字设计领域落地

01

Theoretical Innovation

理论创新

对数字产品非物质化、快速迭代的特性进行细致分析,提出以"优化(Refine)"取代传统"回收(Recycle)"的新3R原则——Reduce(减量)、Reuse(复用)、Refine(优化),并由此构建面向设计师的系统性Web环境可持续性分析框架及相应的评估分析矩阵。

02

Practical Innovation

实践创新

将抽象的理论框架转化为具体的、自动化的Web评估工具,实现多维度自动评价、识别"高碳"设计模式并给出优化建议。该工具弥合了理论与实践之间的差距,解决了现有工具"开发者中心"的问题。

03

Methodological Innovation

方法创新

采用"理论构建—工具开发—实证验证"的设计科学研究(Design Science Research)路径,将定性分析同定量评估结合起来,形成从问题识别、理论创建到实践检验以及知识转化的完整研究闭环,为相关交叉领域研究提供方法论参照。

Sec. 05New 3R Principles

数字产品环境可持续设计新3R原则

针对数字产品的非物质化特性,对经典可持续原则进行继承与重构

5.1 辨析 / Clarification

为什么"回收(Recycle)"不再适用?

传统"Recycle"原则的核心在于物质资源的循环再处理。然而,数字产品的本体是非物质化的代码和数据,其自身不产生需要物理回收的废弃物;其主要环境影响源于运行过程中对能源和计算资源的持续消耗。因此,数字产品环境可持续性的关键在于提升"运行效率",而非实现"物质循环"——简单套用"Recycle"概念无法精准反映其核心环境影响模式。

Principle 01

减量 Reduce

从源头精简,最大限度减少资源消耗

在产品策划与设计初期严格贯彻"少即是多"的原则,对功能、内容、设计元素予以审慎控制,从源头限制产品对环境的实际负荷。

  • 功能精简杜绝过度设计,只保留必要功能
  • 数据减量内容去冗余,减少无用数据的采集、存储及传输
  • 元素精简减少非必要的视觉元素、自定义字体及复杂动画

Principle 02

复用 Reuse

提高开发效率,避免重复劳动及资源浪费

主动、合理地再利用已有设计资产及代码,自然减少重复构建带来的资源消耗,同时有利于产品的长期可维护性。

  • 代码复用采用成熟框架及共享代码库
  • 组件复用建立和使用UI组件库与设计系统,保证一致性
  • 资产复用复用图标、模板等设计资产,避免重复消耗

Principle 03

Core Engine

优化 Refine

持续优化能效、性能及用户体验

主动的、动态的、持续改进的过程,贯穿设计决策、编码实现、系统部署到后期维护的完整生命周期,以最小资源消耗获得最大使用价值,并与敏捷开发流程无缝对接。

  • 性能优化优化图片/视频格式及尺寸,提高代码与算法效率
  • 流程优化改进任务流程效率,减少用户达成目标所需步骤及耗时
  • 体验优化以引导性设计促使用户主动选择低碳选项(如暗色模式)

5.3 协同 / Synergy

三项原则并非孤立,而是相互补充、有机结合:Reduce 与 Reuse 塑造产品的低碳根基,Refine 则贯穿产品整个生命周期,是连接设计决策与实际环境效益最直接、最重要的桥梁。三者共同构成适合数字产品特性的绿色设计新范式。

Sec. 06Research Overview

研究概况

本研究聚焦Web产品用户界面(UI)与用户体验(UX)设计,综合运用文献研究法、理论建构与框架构建法及设计科学研究法(DSRM),将定性分析框架转化为包含评分算法、指标权重与判定阈值的量化评价模型,完成"理论构建—工具实现—实证检验—理论反馈"的完整研究闭环。

分析框架构建FIG. 01

分析框架构建

面向设计师的三阶段结构

以"环境影响认知与理念建构 → 环境可持续设计要素分析 → 策略制定与实践"的逻辑递进结构,在设计决策与环境影响之间建立明确的因果关系,形成认知、分析与实践的闭环。

评估分析矩阵FIG. 02

评估分析矩阵

框架核心工具

以"4大环境影响维度(数据传输量、计算处理量、使用模式影响、持续性与维护)× 3个设计内容层面(界面元素、交互模式、信息架构)"交叉形成12个分析单元格,覆盖50余个评估点,设计师可如使用体检表般逐项检查设计中的环境问题。

Quantification / 量化评价模型

量化评估工具

基于Puppeteer的自动化数据采集与评分算法,将定性框架转化为量化评价模型,并以设计师为中心进行可视化呈现。

01

维度权重设定

数据传输30%、计算处理30%、使用模式25%、持续维护15%

02

三级阈值判定

良好 / 警告 / 严重,快速定位高碳故障点

03

高碳模式识别

智能识别典型高碳设计模式并判定严重等级

04

优化建议生成

基于新3R原则输出附理论依据的改进方案

Sec. 07Findings

实证研究发现与应用价值

选取来自不同行业、不同业务类型、不同发展阶段与地域的多个典型真实网站作为样本进行自动化评估与对比分析,验证了理论框架与评价工具的有效性——人工判断结论与工具测算结果相吻合,能够准确判定高碳行为。

7.1 诊断 / Diagnosis

现有网站的三大高碳"热点"

尽管各网站运营方式与页面风格各不相同,其高碳足迹高度集中于以下三方面

不加控制的媒体资源

未经优化的大幅图片、背景视频是能耗增高的主要来源,直接推大页面体积与数据传输量。

前端代码臃肿

臃肿的DOM结构、滥用动效、大量未优化的CSS/JS代码,持续加重终端设备的计算负担。

过度依赖第三方服务

为营销分析目的而引入的大量外部脚本,已成为现代网站性能及环境可持续性的主要瓶颈。

7.2 应用 / Application

应用价值:让可持续性成为可操作的工程问题

网站的环境可持续性并非空洞的理想化概念,而是可以量化、可以分析、可以优化的工程与设计问题。借助本研究构建的框架及工具,设计师和开发团队可以:

STEP 01

量化环境影响

把抽象的"环境成本"转化为MB、毫秒、节点数量等具体参数,使环境影响易于把握

STEP 02

精准定位问题

迅速、可靠地找出设计中造成环境负担过重的具体环节

STEP 03

获取明确优化方案

根据新3R原则直接获得具体可行的优化建议,让可持续理念融入日常设计与开发流程

实证研究同时表明:过度追求形式感是数字碳排放激增的重要原因,设计师应平衡视觉体验与环保的关系;而环保设计与用户体验并非对立——优秀案例证明,运用新3R原则可以在极低页面体积下提供良好体验,可持续设计自身也可以成为一种风格和品牌。