騰訊公益設(shè)計改版項目總結(jié)丨騰訊CDC體驗設(shè)計

定位

隨著騰訊公益項目的發(fā)展，我們對產(chǎn)品的探索過程中，定位逐漸清晰：騰訊公益線上平臺是一個提供可信任的公益內(nèi)容的運營平臺。

目標(biāo)

原有的設(shè)計框架問題逐漸出現(xiàn)，已不能承載現(xiàn)有的產(chǎn)品定位和新使命。我們希望通過設(shè)計改版，提高項目轉(zhuǎn)化率和品牌凝聚力，打造可信任的公益內(nèi)容運營平臺形象。

拆解目標(biāo)

轉(zhuǎn)化率：內(nèi)容披露型設(shè)計框架/體驗統(tǒng)一

品牌塑造：品牌統(tǒng)一/社會化傳播場景設(shè)計

現(xiàn)狀問題梳理

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

品牌性弱：騰訊公益線上公益平臺歷經(jīng)幾代設(shè)計師更迭，一直沒有規(guī)范性設(shè)計指導(dǎo)文件，品牌對外輸出弱。

效率低：

• 多人協(xié)作設(shè)計過程中容易產(chǎn)生誤差導(dǎo)致不一致和細節(jié)錯誤；
• 新人設(shè)計師介入成本較高；
• 交互、設(shè)計、重構(gòu)協(xié)作溝通成本較大；
• 業(yè)務(wù)復(fù)雜、模塊交叉設(shè)計數(shù)量多，資源復(fù)用率低，設(shè)計、研發(fā)資源投入產(chǎn)出比較低。

對應(yīng)設(shè)計執(zhí)行策略梳理

體驗優(yōu)化：

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

品牌統(tǒng)一、輸出：

• 形象統(tǒng)一，規(guī)范色彩、圖形的使用，提高品牌識別和統(tǒng)一；
• 品牌傳播，設(shè)計品牌的傳播場景，提高精神優(yōu)越感和道德優(yōu)越感。

效率提升：

• 歸納整理用戶行為地圖，歸納模塊，提高復(fù)用率；
• 輸出設(shè)計規(guī)范和樣式指導(dǎo)，賦能合作伙伴，提高協(xié)作效率；
• 圖形矢量化，減少適配工作量。

| 體驗優(yōu)化 – 優(yōu)化用戶體驗旅程

梳理出一級頁面：

• 樂捐首頁：項目推薦、功能入口等
• 發(fā)現(xiàn)頁 ：公益咨詢、家鄉(xiāng)公益等
• 個人中心：用戶數(shù)據(jù)、記錄、成就等個人信息

二級頁面：

• 捐步、月捐、一對一、疾病救助、一件好事等二級業(yè)務(wù)頁面

• 梳理典型用戶體驗地圖，尋找對應(yīng)優(yōu)化機會點：

| 體驗優(yōu)化 – 搭建項目分層級的設(shè)計框架

| 體驗優(yōu)化 – 輕度運營

| 體驗優(yōu)化 – 重度運營

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

| 品牌統(tǒng)一 – 色彩體系

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

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

相應(yīng)色彩角色產(chǎn)出后，梳理10個明度等級，用于插畫、裝飾性素材的色彩參考

| 品牌統(tǒng)一 – 文字體系

| 品牌統(tǒng)一 – 圖形體系

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

| 品牌輸出 – 傳播場景設(shè)計，提高社會傳播效率

• 圖片+二維碼便于傳播和二次傳播
• 避免金額數(shù)字等敏感信息的尷尬，弱化物質(zhì)優(yōu)越感體現(xiàn)，強調(diào)精神優(yōu)越感和道德優(yōu)越感的體現(xiàn)

| 效率提升 – 歸納模塊，提高復(fù)用率

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

| 效率提升 – 設(shè)計規(guī)范賦能合作伙伴

Atomic Design

原子設(shè)計是創(chuàng)建設(shè)計系統(tǒng)的理論方法，基于設(shè)計系統(tǒng)思維方式的規(guī)范性原則，用來建立產(chǎn)品設(shè)計元素互動的關(guān)系，將它們整合到一個整體的系統(tǒng)中。

設(shè)計規(guī)范的運用提高部門間協(xié)作效率和基礎(chǔ)標(biāo)準(zhǔn)。

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

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

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

SVG矢量圖形無損伸縮，引用目標(biāo)顏色，效率更高，實現(xiàn)效果更優(yōu)秀。

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

改版效果對比：

首頁改版前后對比：

樂捐改版前后對比：

月捐改版前后對比：

總結(jié)回顧：

我們通過優(yōu)化體驗、統(tǒng)一品牌和輸出、提升效率來解構(gòu)改版了騰訊公益線上平臺，但現(xiàn)階段，只是剛剛開始，還處在淺層，深層的用戶體驗還需要持續(xù)地優(yōu)化。

在這個項目進行過程中，我們梳理出了瀏覽模塊、捐贈模塊、傳播模塊；產(chǎn)出騰訊公益設(shè)計規(guī)范；相信這些一邊探索一邊總結(jié)的東西會幫助我們?nèi)蘸笞叩酶€(wěn)定、更高效。

文：騰訊CDC體驗設(shè)計（tx_cdc）

首席增長官CGO薦讀產(chǎn)品運營：

• 《給產(chǎn)品設(shè)計師的用戶增長設(shè)計指南》
• 《增長黑客如何基于心理賬戶、效應(yīng)及決策，運用在股票App的產(chǎn)品設(shè)計中》
• 《7700萬用戶0推廣，融資過億的美篇如何將價值洼地轉(zhuǎn)化為增長主力？》

更多精彩，關(guān)注：增長黑客（GrowthHK.cn）

增長黑客（Growth Hacker）是依靠技術(shù)和數(shù)據(jù)來達成各種營銷目標(biāo)的新型團隊角色。從單線思維者時常忽略的角度和高度，梳理整合產(chǎn)品發(fā)展的因素，實現(xiàn)低成本甚至零成本帶來的有效增長…