編者按：大廠的改版設計都是怎么做的？今天騰訊這篇干貨用騰訊公益完整的設計流程告訴你，一個優秀的改版案例應該這么來！

一、定位

隨著騰訊公益線上平臺項目的發展，原有的設計框架問題逐漸出現，已不能承載現有的產品定位和新使命。我們對產品的探索過程中，定位逐漸清晰：

騰訊公益線上平臺是一個提供可信任的公益內容的運營平臺。

二、目標

通過設計改版，提高項目轉化率和品牌凝聚力，打造可信任的公益內容運營平臺形象。

三、拆解目標

轉化率：內容披露型設計框架/體驗統一。

品牌塑造：品牌統一/社會化傳播場景設計。

四、現狀問題梳理

1. 體驗參差不齊

操作方式、視覺表達不一，導致用戶操作路徑不一，體驗舒適度參差不齊。

2. 品牌性弱

騰訊公益線上公益平臺歷經幾代設計師更迭，一直沒有規范性設計指導文件，品牌對外輸出弱。

3. 效率低

• 多人協作設計過程中容易產生誤差導致不一致和細節錯誤；
• 新人設計師介入成本較高；
• 交互、設計、重構協作溝通成本較大；
• 業務復雜、模塊交叉設計數量多，資源復用率低，設計、研發資源投入產出比較低。

五、對應設計執行策略梳理

體驗優化：

• 優化用戶體驗旅程，統一操作路徑，提高體驗一致性和友好性；
• 搭建項目分層級的設計框架，貼合運營平臺的定位，設計輕度運營和重度運營場景。

品牌統一、輸出：

• 形象統一，規范色彩、圖形的使用，提高品牌識別和統一；
• 品牌傳播，設計品牌的傳播場景，提高精神優越感和道德優越感。

效率提升：

• 歸納整理用戶行為地圖，歸納模塊，提高復用率；
• 輸出設計規范和樣式指導，賦能合作伙伴，提高協作效率；
• 圖形矢量化，減少適配工作量。

1. 體驗優化 – 優化用戶體驗旅程

梳理出一級頁面：

• 樂捐首頁：項目推薦、功能入口等
• 發現頁 ：公益咨詢、家鄉公益等
• 個人中心：用戶數據、記錄、成就等個人信息

二級頁面：

捐步、月捐、一對一、疾病救助、一件好事等二級業務頁面

梳理典型用戶體驗地圖，尋找對應優化機會點：

2. 體驗優化 – 搭建項目分層級的設計框架

3. 體驗優化 – 輕度運營

4. 體驗優化 – 重度運營

品牌層與內容體驗層分離，為重度場景化定制運營提供了舞臺。

5. 品牌統一 – 色彩體系

本次設計 DNA 的延展，皆出于品牌 VI，根據主色延伸出色彩體系：

• 輔色：用于輔助主色圖形繪制、高亮提醒等用途；
• 補色：用于對比主色信息時使用；
• 對比色：用以輔助補色使用。

相應色彩角色產出后，梳理10個明度等級，用于插畫、裝飾性素材的色彩參考。

6. 品牌統一 – 文字體系

7. 品牌統一 – 圖形體系

• 簡約通用的線性圖標設定更加符合騰訊公益客觀、公正的平臺特性；主色+中性色的雙色展現，對比突出，品牌屬性統一；
• 欄目入口圖標使用雙色，系統操作類圖標沿用中性色，信息層級層次分明。

8. 品牌輸出 – 傳播場景設計，提高社會傳播效率

• 圖片+二維碼便于傳播和二次傳播
• 避免金額數字等敏感信息的尷尬，弱化物質優越感體現，強調精神優越感和道德優越感的體現

9. 效率提升 – 歸納模塊，提高復用率

• 捐贈前：項目瀏覽、選擇
• 捐贈中：金額選擇
• 捐贈后：傳播模塊

10. 效率提升 – 設計規范賦能合作伙伴

Atomic Design

原子設計是創建設計系統的理論方法，基于設計系統思維方式的規范性原則，用來建立產品設計元素互動的關系，將它們整合到一個整體的系統中。

設計規范的運用提高部門間協作效率和基礎標準。

11. 效率提升 – 減少適配工作量

通過圖形的矢量化，來減少適配的工作量，提高適配的質量。

PNG 需要適配 mdpi hdpi xhdpi xxhdpi 4種屏幕等級尺寸，同一 icon 如果有變色，還需要輸出相應顏色的切圖，人力成本、協作成本較大，麻煩至此，適配的落地實現效果也并不是最優。

SVG 矢量圖形無損伸縮，引用目標顏色，效率更高，實現效果更優秀。

示例：png 圖片控制 VS svg 代碼控制

六、改版效果對比

首頁改版前后對比：

樂捐改版前后對比：

月捐改版前后對比：

總結回顧

我們通過優化體驗、統一品牌和輸出、提升效率來解構改版了騰訊公益線上平臺，但現階段，只是剛剛開始，還處在淺層，深層的用戶體驗還需要持續地優化。

在這個項目進行過程中，我們梳理出了瀏覽模塊、捐贈模塊、傳播模塊；產出騰訊公益設計規范；相信這些一邊探索一邊總結的東西會幫助我們日后走得更穩定、更高效。

歡迎關注作者「騰訊CDC體驗設計」的微信公眾號：

「騰訊團隊實戰案例」

• 《騰訊實戰案例：如何用設計讓更多人參與公益活動？》
• 《上億人使用的泛娛樂微信店，是如何做改版設計的？》
• 《微云使用效率大幅提高的背后，騰訊設計師這樣做改版！》