互聯網可能并沒有你想象中那么環(huán)保：每次傳輸都需電力支持，每個點擊都要消耗能量。數字世界看似無形無影，實則需付出真實代價。作為設計師，我們堅信，每一個像素、每一條代碼，都應該承載對地球資源的尊重和對人類福祉的關懷。這篇文章，我們將從環(huán)境可持續(xù)、社會可持續(xù)、經濟可持續(xù)等 3 個方面，與大家一起探討，如何做可持續(xù)的 UI 設計。

合理利用互聯網技術，可提升生產力并改善生活水平。然而，當前的互聯網產品卻存在大量的浪費：

① 毫無意義的數據

龐大的數據洪流在互聯網中肆意游動。Active Archive Alliance 于 2018 年發(fā)布的報告顯示，80% 以上的數據在被存儲后不會被訪問或利用。此外，IBM 的研究顯示，物聯網設備收集的傳感器數據有 90% 不曾被使用。存儲僅僅是數據成本的一部分而已。當用戶試圖尋找真實、重要的信息時，一輩子都不想回顧的「存貨」既會耗費精力，又會分散注意力。

② 零 UV 的網頁

萬維網（World Wide Web）已成為垃圾基地。Ahrefs 研究發(fā)現，在他們分析過的所有頁面中，有 91% 從 Google 獲得的流量為零。用戶往往僅在搜索結果的首頁徘徊，幾乎不會深入探索到第 10 頁以后的內容。

③ 無人問津的 App

許多大費周章創(chuàng)造出來的應用正無人問津。Quettra 的研究顯示，安裝 app 后的 3 天內，用戶流失率高達 77%，90 天為 90%，90 天后為 95%。

④ 無盡的網癮

許多用戶已對互聯網產品（特別是游戲和短視頻）成癮，如同每日三餐必食。對新聞和海量信息的無盡欲望，讓他們生怕錯過任何事情，或對外更新自己的生活動態(tài)，也消耗了大量帶寬。

⑤ 對始終待命的執(zhí)著

待機狀態(tài)的電視、睡眠狀態(tài)的電腦、永不關閉的機頂盒，以及 Apple 力推的 Always-On（常量顯示），都在悄無聲息地消耗能量。NRDC 于 2015 年發(fā)布的研究指出，處于待機狀態(tài)的設備能耗花費高達每年 190 億美元，相當于大約 50 座大型（500 兆瓦）發(fā)電廠所產生的電量。而這般兩非一直在悄無聲息地進行。

數字化讓我們逐漸失去了對價值的理解。問題的核心在于，當前的互聯網產業(yè)使數字化產品的生產、發(fā)表和存儲都變得過于廉價。作為設計師，我們必須清醒地意識到互聯網帶來的環(huán)境污染問題，并將可持續(xù)設計引入我們的日常設計工作中來。

可持續(xù)設計不僅僅關注碳排放，更注重環(huán)境、社會和經濟三個方面的平衡。因此，為實現 UI 設計的可持續(xù)，我們需關注以下 3 個方面：

1. 環(huán)境可持續(xù)
2. 社會可持續(xù)
3. 經濟可持續(xù)

一、環(huán)境可持續(xù)

環(huán)境可持續(xù)主要關注設計對環(huán)境的影響，以及如何通過設計減少資源消耗、降低環(huán)境污染、保護生態(tài)系統(tǒng)和生物多樣性。在 UI 設計領域，可通過以下設計方法達到環(huán)境可持續(xù)的目的。

1. 精準定位需求

通過分析和研究用戶需求，有助于避免不必要的功能和設計元素，從而減少資源的浪費，提高設計的環(huán)保性能。我們可以通過市場調研、用戶畫像分析、原型測試等方法來準確洞察用戶需求，實施針對性的設計。

2. 減少視覺干擾

設計簡潔、清晰的界面布局和視覺元素，避免用戶因信息過載而產生心理壓力，縮短其在界面上的停留時長，進而降低能源消耗。此外，復雜的視覺元素往往伴隨著更大的文件體積，簡化的界面設計（特別是動畫）還可以減少對計算資源的需求。

① 簡化界面布局

優(yōu)化界面布局，舍棄非必要的元素，聚焦核心功能和信息，使界面更加簡潔明快。

② 選擇易于閱讀的字體

選用易于閱讀的字體，避免復雜的字體樣式，提升文字的可讀性。

③ 合理使用顏色和圖形

避免過多的顏色和圖形，選用簡潔、低對比度的顏色組合，降低視覺干擾。

④ 保持設計風格一致性

在整個產品或服務中保持一致的設計語言，減輕用戶的認知負擔。

⑤ 允許用戶控制

支持用戶根據自身需求和偏好定制界面，減少不相關內容的視覺干擾。

3. 妥善處理顏色

為應用程序或網站提供深色模式，或使用冷色調主題，以降低屏幕顯示亮度，從而節(jié)約能耗（特別是在 OLED 屏幕上）。

① 優(yōu)先考慮深色調、冷色調的色彩方案

② 允許用戶控制

為用戶提供多種色彩模式，如淺色模式、深色模式、高對比度模式等，讓用戶根據環(huán)境和個人需求選擇合適的色彩方案。

4. 妥善處理字體

自現代化網絡誕生以來，webfont（網絡字體）為我們提供了更具個性化的體驗。但是，webfont 其實并不具備性能優(yōu)勢，反而會增加碳排放。

① 優(yōu)先使用系統(tǒng)字體

盡可能地使用操作系統(tǒng)預裝的字體，避免額外下載字體文件，從而減少網絡帶寬消耗和設備存儲空間占用。不過，當用戶計算機僅包含少數優(yōu)質字體時，webfont 仍有用武之地。

② 選擇高效的字體格式

現代字體格式（如 WOFF 和 WOFF2）具有更高的壓縮率和更快的加載速度，有助于減少數據傳輸和能源消耗。

③ 字體子集化

僅加載用戶所需的字符集，而非整個字體文件，這樣可以顯著減少文件大小和加載時間。

5. 妥善處理圖像、視頻

誠然，圖像之于信息傳達的作用無可替代。然而，如今互聯網上充斥著大量毫無價值的圖片與視頻信息。這些內容不僅拖慢了頁面加載速度，還擠占了本應展示有價值內容的空間。在眾多的數據類型中，視頻因其數量和實用性通常占據最龐大的傳輸量。每秒視頻所產生的環(huán)境壓力堪比五萬個字的文本。這足以編撰一本頗具分量的書籍。因此，我們有必要深入研究并優(yōu)化圖像、視頻對可持續(xù)性帶來的顯著影響。

① 按需添加

若無必要，勿增圖像、視頻。

② 按需加載

圖片、視頻資源僅在需要時才加載。避免使用自動播放、自動連續(xù)播放等設計模式。引導用戶按需請求數據，而不是鼓勵過度消費，從而鼓勵健康可持續(xù)的瀏覽習慣，減少碳排放。

③ 優(yōu)化文件大小

對圖像、視頻進行壓縮和優(yōu)化，節(jié)約網絡帶寬消耗，縮減加載時間，從而降低能源消耗。例如：

1. 優(yōu)先采用矢量圖形替代位圖。因為，矢量圖形具有較小的文件大小、優(yōu)秀的可縮放性及卓越的渲染效果，有助于降低能源消耗。
2. 若仍需使用位圖，可選用 WebP、JPEG XR、HEIC 等現代高效格式替代傳統(tǒng)的 JPEG 和 PNG，它們能在保證視覺效果的同時大幅減少文件體積。
3. 對于視頻，建議選用高效編碼格式如 H.265（HEVC）。

④ 提供預覽

以文本、較低分辨率的靜態(tài)圖、重要內容片段等形式提供圖像、視頻的預覽，確保用戶在資源加載前了解其必要性，避免帶寬浪費。

⑤ 利用緩存機制

對于重復訪問的圖像、視頻，通過緩存來減少重復下載。

⑥ 采用響應式策略

根據用戶設備的屏幕尺寸和分辨率加載合適大小的圖像和視頻。此外，輕量化的圖像、視頻對于網絡不佳或設備較為陳舊的情況下，表現更為出色。

⑦ 允許用戶控制

為用戶提供圖像、視頻質量選擇（如 4K、高清、標清等），讓用戶根據自身需求和網絡狀況選擇合適的質量，從而降低能源消耗。

6. 妥善處理動畫

動畫雖然具有視覺沖擊力，但過度運用可能導致 CPU 與 GPU 資源緊張，從而增加能耗。此外，某些用戶可能還會因動畫內容產生分心或惡心的不適感。

① 按需添加

若無必要，勿增動畫。僅在增添用戶體驗價值時才使用，避免僅用于裝飾目的。對于包含大量動態(tài)內容的設計，如廣告和通知，也應謹慎使用，確保不會過度打擾用戶。

② 簡化動畫效果

減少過于復雜和繁瑣的動畫效果，選擇簡單、流暢的動畫，降低設備處理器的負擔，從而減少能源消耗。

③ 優(yōu)化動畫性能

1. 使用 Lottie 或 SVG 動畫替代高分辨率的視頻動畫。
2. 盡量復用動畫組件和代碼，減少重復計算和冗余資源加載。
3. 實現智能動畫控制，比如當元素離開可視區(qū)域或者用戶無操作時自動暫停動畫，減少后臺運算。

④ 使用響應式策略

根據網絡狀況和設備性能動態(tài)調整動畫效果的質量和復雜度。

⑤ 允許用戶控制

允許用戶根據自己的需求和設備性能選擇是否啟用動畫。

7. 提供媒體資源替代格式

增強用戶體驗品質的過程中，媒體資源起著關鍵作用。然而，并非所有用戶都偏好視頻、聆聽音頻或欣賞圖片。降低網站媒體豐富度并不總是意味著體驗下降，反而可能幫助訪客更快地訪問他們需要的內容。例如，視頻不一定比文本更受歡迎。我們會發(fā)現，許多技術人員鮮少在處理問題時偏向于使用視頻。實際上，他們更愿意查看以文本形式呈現的技術文檔。因為，文字給予他們更多的控制權，并能提高效率。在閱讀上，他們能夠更加便捷地搜索和滾動，找到特定信息的速度也更快。

此外，并非每位訪客都處于能觀看視頻或聽取音頻的環(huán)境中。因此，提供文本替代版本是必要的。更重要的是，對于有特殊需求的用戶，提供替代格式是一項基本要求?！福ㄈ鐬橐曊嫌脩籼峁﹫D像的文本描述）?！挂虼?，提供媒體資源的替代格式是提升覆蓋人群和降低能耗的重要舉措。

① 圖像

為圖像提供有意義的 alternative text。這能在圖像無法加載時提供幫助，還能提升屏幕閱讀器用戶的可訪問性。

② 音頻

為音頻提供轉文字版本或文本摘要，以代替直接播放媒體文件。

③ 視頻

建議應提供 WebVTT 格式的字幕（subtitle）。如有可能，為視頻提供「僅聽音頻」的模式。

整體而言，應優(yōu)先使用文本、音頻等更節(jié)能的信息傳輸通道。

8. 優(yōu)化文檔的下載與打印體驗

盡管下載、打印文件可減少重復訪問網站的概率，但它同時也可能導致油墨和紙張的浪費。

① 嵌入必要的元信息

清晰展示文檔名、作者、關鍵詞、摘要、大小及格式信息，以便用戶根據自身需求選擇合適的文件格式和語言，也便于用戶在下載后對文檔進行管理和檢索。

② 優(yōu)化文檔布局

在設計文檔時，考慮到打印的需求，優(yōu)化文檔布局，如避免浪費空間的大空白區(qū)域，采用合適的頁邊距和行距，確保文檔在打印時具有良好的可讀性。

③ 優(yōu)化文檔樣式

選擇打印友好的顏色和樣式。例如，減少不必要的裝飾性元素，使用淺色背景。

④ 優(yōu)化交付方式

對于可能重復使用的文檔，僅在服務器端生成一次。另外，避免將文檔嵌入網頁內部，而是提供鏈接進行查看或下載。

⑤ 允許用戶控制

提供打印選項，如選擇打印范圍、雙面打印等，讓用戶根據自己的需求進行打印，從而節(jié)約紙張和墨水。此外，還需提供預覽功能，讓用戶可以看到打印效果并調整設置，以避免不必要的打印錯誤和浪費。

9. 優(yōu)化廣告投放

天下沒有免費的午餐。鑒于在線廣告自身文件和跟蹤軟件巨大的數據下載需求，以及所需的更大的處理器負荷，在線廣告模式對地球生態(tài)的影響不容忽視。

過度浪費的網絡廣告，即使看似免費，實則由地球買單。Science Direct 在 2015 年針對 58 個在線廣告活動的研究中發(fā)現，其中超過 50% 的廣告樣本未能實現每百萬次廣告曝光帶來超過一次購買行為。Google 規(guī)定的橫幅廣告文件上限是 150 KB。雖然看似微不足道，但是以平均值 100 KB 計算，若需實現百萬次展示才能達成的購買意愿，就需要消耗 100 GB 的流量。

數據已然成為新的財富源泉。然而，并非每個人都知曉如何合理利用它們。許多企業(yè)在網站和應用中配置了跟蹤功能，實際上很少研究收集的數據，并對其含義作出調整。此外，尚有許多公司仍在嘗試盲目投放轉化率低下的廣告（想象一下像蝗蟲一般漫天飛舞的紙質傳單）。此類數字化活動無形提升了能源消耗。

① 僅跟蹤和收集關鍵數據，減少廣告跟蹤腳本

僅收集關鍵數據有助于減少數據存儲、處理和傳輸所需的資源，從而降低能源消耗和設備負擔。此外，這還有助于保護用戶隱私，避免過度收集用戶信息，提高用戶對產品的信任度。

② 精準投放，質量重于數量

通過用戶行為分析、興趣愛好等信息，精準定位用戶需求，投放更符合用戶需求的廣告；提高廣告素材的質量，如設計引人入勝的廣告圖像和文案，提高廣告的點擊率和轉化率。

10. 助推環(huán)保行為

盡可能通過數字界面取代實體產品和服務，減少對紙張和其他物理媒介的依賴，如電子發(fā)票、在線文檔。此外，還可以在設計中融入可持續(xù)發(fā)展信息和功能，例如添加碳足跡計算器、節(jié)能提示、環(huán)保成就系統(tǒng)，激勵用戶推行更環(huán)保的行為。

二、社會可持續(xù)

社會可持續(xù)主要關注設計對社會的影響，以及如何通過設計促進人與人之間的和諧共生，確保社會的長期穩(wěn)定和發(fā)展。一個穩(wěn)健的自然環(huán)境是社會可持續(xù)發(fā)展的基石，而社會的和諧穩(wěn)定又有助于環(huán)境的保護和恢復。因此，二者密不可分。

在 UI 設計領域，可通過以下設計手法，以達到社會可持續(xù)的目的。

1. 提升可訪問性

確保用戶界面對所有人，包括有特殊需求的用戶，如老年人、兒童、視障人士等，都是易于訪問和使用的，進而讓他們能夠更好地使用和參與數字產品和服務。這包括使用清晰的字體及顏色方案、支持鍵盤導航及無障礙讀屏等。

2. 促進文化包容

考慮到不同文化背景的用戶可能有不同的需求和偏好。設計應尊重多樣性，并適應不同語言、習俗和行為習慣，增強用戶對多元文化的認同和尊重。

3. 確保數據安全

在 UI 設計中充分保護用戶的個人信息和隱私，確保數據的安全性和透明度。

1. 遵循相關法律法規(guī)，如歐盟的 GDPR（General Data Protection Regulation）等。
2. 在設計中嚴格遵守隱私法規(guī)，明確告知用戶數據收集和使用情況，提供易于理解和控制隱私設置的界面，保護用戶個人信息安全。

三、經濟可持續(xù)

經濟可持續(xù)主要關注如何通過設計實現長期的經濟效益和發(fā)展。環(huán)境可持續(xù)的推進離不開經濟發(fā)展的資金和技術支持。因此，經濟可持續(xù)是環(huán)境可持續(xù)的堅實基礎。在 UI 設計領域，可通過以下設計手法，以達到經濟可持續(xù)的目的。

1. 關注可持續(xù)商業(yè)模式

注重長期效益，而非短期收益?？沙掷m(xù)的商業(yè)模式（如循環(huán)經濟、共享經濟、訂閱模式等）往往更關注于環(huán)保、社會責任和公平貿易等問題。這有利于提高企業(yè)的品牌形象，吸引更多的用戶與投資者。

2. 提升設計工作效率

① 構建 Design System

通過使用基于 design token 構建的 design system（設計系統(tǒng)）來提高設計效率，減少不必要的迭代和修改，降低設計成本。

② 簡化設計流程

例如，使用自動化工具完成繁瑣而重復的工作，如切圖、標注、整理組件等。

3. 選用持久的設計風格

選用持久風格，摒棄短期時尚。

曾盛極一時的 2.5D、Alegria、Glassmorphism、Neumorphism，均已隨著時間推移逐漸成為過時的風格。流行的短期設計趨勢往往伴隨著頻繁的界面改版和產品迭代，這不僅消耗大量資源，還可能迫使用戶頻繁購買新產品或更新設備以跟上潮流。選擇持久的設計風格可以降低這種周期性更新的需求，從而減少資源浪費和環(huán)境污染，并幫助建立強烈的品牌識別。在設計過程中，設計師在設計時需具備長遠視野，著眼未來幾年乃至十年內的設計趨勢，創(chuàng)造出既符合當下審美又能適應未來發(fā)展的設計。這無疑是一項頗具挑戰(zhàn)性卻又充滿樂趣的工作。

4. 提升設計方案兼容性

兼容多種設備和平臺的設計方案，可以減少為每個新平臺或設備單獨設計的需求，從而減少了時間和資源的浪費。

① 響應式設計

采用響應式設計思路，使界面能夠根據設備的屏幕尺寸和分辨率自適應調整布局和元素大小。這要求設計師在設計稿制作中合理使用 constraints 及 auto layout 等技術。

② 跨平臺設計

創(chuàng)建能夠在多種操作系統(tǒng)和瀏覽器上保持一致視覺效果和體驗的設計，減少為每個平臺單獨設計的需求。在開發(fā)層面，使用諸如 React Native、Flutter 等跨平臺開發(fā)框架，這些框架允許開發(fā)者創(chuàng)建一次代碼，在多個平臺上運行。

5. 擁抱 Open Format

采用 open format（開放格式），可以保證輸出的模塊化設計具有可重復利用價值，提升設計方案的可復用性和可維護性。此外，采用 open format 還能促使更多人積極參與到項目的建設中。

① 設計方案

在輸出設計方案時，選擇開放格式，如 SVG（矢量圖形）、PNG（位圖圖像）、PDF（文檔）等。雖然 Figma、Sketch 的原生文件格式是專有的，但他們都支持將設計導出為 open format。此外，Sketch 的文件格式是基于 JSON 的，這意味著開發(fā)者可以使用任何支持 JSON 的工具來讀取和修改 Sketch 文件；Figma 則支持通過 API 訪問和操作設計數據。

② 文檔和指南

編寫設計文檔和指南時，使用開放格式，如 Markdown（輕量級標記語言）、Html（網頁標記語言）等，便于在不同平臺和設備上查看和編輯。

四、結語

可持續(xù)設計不僅僅是一種流行趨勢，而是一種對未來負責的設計哲學，它要求我們在創(chuàng)造美觀、實用和創(chuàng)新的設計時，同時考慮其對環(huán)境、社會和經濟的長期影響。

在我們探索和實踐可持續(xù)設計的旅程中，每一個小步驟都會產生重大的影響。作為 UI 設計師，我們有責任和機會通過我們的設計決策，推動更加可持續(xù)的未來。

在未來，我們期待看到更多的設計師和團隊擁抱可持續(xù)設計的原則，將其融入到工作流程和設計決策中。我們也期待看到更多的工具和資源出現，以幫助我們更好地實現可持續(xù)設計。

作者：騰訊設計族