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

合理利用互聯(lián)網(wǎng)技術(shù)，可提升生產(chǎn)力并改善生活水平。然而，當(dāng)前的互聯(lián)網(wǎng)產(chǎn)品卻存在大量的浪費：

① 毫無意義的數(shù)據(jù)

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

② 零 UV 的網(wǎng)頁

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

③ 無人問津的 App

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

④ 無盡的網(wǎng)癮

許多用戶已對互聯(lián)網(wǎng)產(chǎn)品（特別是游戲和短視頻）成癮，如同每日三餐必食。對新聞和海量信息的無盡欲望，讓他們生怕錯過任何事情，或?qū)ν飧伦约旱纳顒討B(tài)，也消耗了大量帶寬。

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

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

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

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

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

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

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

1. 精準定位需求

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

2. 減少視覺干擾

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

① 簡化界面布局

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

② 選擇易于閱讀的字體

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

③ 合理使用顏色和圖形

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

④ 保持設(shè)計風(fēng)格一致性

在整個產(chǎn)品或服務(wù)中保持一致的設(shè)計語言，減輕用戶的認知負擔(dān)。

⑤ 允許用戶控制

支持用戶根據(jù)自身需求和偏好定制界面，減少不相關(guān)內(nèi)容的視覺干擾。

3. 妥善處理顏色

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

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

② 允許用戶控制

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

4. 妥善處理字體

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

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

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

② 選擇高效的字體格式

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

③ 字體子集化

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

5. 妥善處理圖像、視頻

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

① 按需添加

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

② 按需加載

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

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

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

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

④ 提供預(yù)覽

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

⑤ 利用緩存機制

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

⑥ 采用響應(yīng)式策略

根據(jù)用戶設(shè)備的屏幕尺寸和分辨率加載合適大小的圖像和視頻。此外，輕量化的圖像、視頻對于網(wǎng)絡(luò)不佳或設(shè)備較為陳舊的情況下，表現(xiàn)更為出色。

⑦ 允許用戶控制

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

6. 妥善處理動畫

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

① 按需添加

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

② 簡化動畫效果

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

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

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

④ 使用響應(yīng)式策略

根據(jù)網(wǎng)絡(luò)狀況和設(shè)備性能動態(tài)調(diào)整動畫效果的質(zhì)量和復(fù)雜度。

⑤ 允許用戶控制

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

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

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

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

① 圖像

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

② 音頻

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

③ 視頻

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

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

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

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

① 嵌入必要的元信息

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

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

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

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

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

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

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

⑤ 允許用戶控制

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

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

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

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

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

① 僅跟蹤和收集關(guān)鍵數(shù)據(jù)，減少廣告跟蹤腳本

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

② 精準投放，質(zhì)量重于數(shù)量

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

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

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

二、社會可持續(xù)

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

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

1. 提升可訪問性

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

2. 促進文化包容

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

3. 確保數(shù)據(jù)安全

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

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

三、經(jīng)濟可持續(xù)

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

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

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

2. 提升設(shè)計工作效率

① 構(gòu)建 Design System

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

② 簡化設(shè)計流程

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

3. 選用持久的設(shè)計風(fēng)格

選用持久風(fēng)格，摒棄短期時尚。

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

4. 提升設(shè)計方案兼容性

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

① 響應(yīng)式設(shè)計

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

② 跨平臺設(shè)計

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

5. 擁抱 Open Format

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

① 設(shè)計方案

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

② 文檔和指南

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

四、結(jié)語

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

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

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

作者：騰訊設(shè)計族