騰訊公益設(shè)計(jì)改版項(xiàng)目總結(jié)！高手實(shí)戰(zhàn)案例分析

編者按：大廠的改版設(shè)計(jì)都是怎么做的？今天騰訊這篇干貨用騰訊公益完整的設(shè)計(jì)流程告訴你，一個(gè)優(yōu)秀的改版案例應(yīng)該這么來(lái)！

一、定位

隨著騰訊公益線上平臺(tái)項(xiàng)目的發(fā)展，原有的設(shè)計(jì)框架問(wèn)題逐漸出現(xiàn)，已不能承載現(xiàn)有的產(chǎn)品定位和新使命。我們對(duì)產(chǎn)品的探索過(guò)程中，定位逐漸清晰：

騰訊公益線上平臺(tái)是一個(gè)提供可信任的公益內(nèi)容的運(yùn)營(yíng)平臺(tái)。

二、目標(biāo)

通過(guò)設(shè)計(jì)改版，提高項(xiàng)目轉(zhuǎn)化率和品牌凝聚力，打造可信任的公益內(nèi)容運(yùn)營(yíng)平臺(tái)形象。

三、拆解目標(biāo)

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

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

四、現(xiàn)狀問(wèn)題梳理

1. 體驗(yàn)參差不齊

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

2. 品牌性弱

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

3. 效率低

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

五、對(duì)應(yīng)設(shè)計(jì)執(zhí)行策略梳理

體驗(yàn)優(yōu)化：

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

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

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

效率提升：

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

1. 體驗(yàn)優(yōu)化 – 優(yōu)化用戶體驗(yàn)旅程

梳理出一級(jí)頁(yè)面：

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

二級(jí)頁(yè)面：

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

梳理典型用戶體驗(yàn)地圖，尋找對(duì)應(yīng)優(yōu)化機(jī)會(huì)點(diǎn)：

2. 體驗(yàn)優(yōu)化 – 搭建項(xiàng)目分層級(jí)的設(shè)計(jì)框架

3. 體驗(yàn)優(yōu)化 – 輕度運(yùn)營(yíng)

4. 體驗(yàn)優(yōu)化 – 重度運(yùn)營(yíng)

品牌層與內(nèi)容體驗(yàn)層分離，為重度場(chǎng)景化定制運(yùn)營(yíng)提供了舞臺(tái)。

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

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

• 輔色：用于輔助主色圖形繪制、高亮提醒等用途；
• 補(bǔ)色：用于對(duì)比主色信息時(shí)使用；
• 對(duì)比色：用以輔助補(bǔ)色使用。

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

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

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

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

8. 品牌輸出 – 傳播場(chǎng)景設(shè)計(jì)，提高社會(huì)傳播效率

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

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

• 捐贈(zèng)前：項(xiàng)目瀏覽、選擇
• 捐贈(zèng)中：金額選擇
• 捐贈(zèng)后：傳播模塊

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

Atomic Design

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

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

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

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

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

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

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

六、改版效果對(duì)比

首頁(yè)改版前后對(duì)比：

樂(lè)捐改版前后對(duì)比：

月捐改版前后對(duì)比：

總結(jié)回顧

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

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

歡迎關(guān)注作者「騰訊CDC體驗(yàn)設(shè)計(jì)」的微信公眾號(hào)：

「騰訊團(tuán)隊(duì)實(shí)戰(zhàn)案例」

• 《騰訊實(shí)戰(zhàn)案例：如何用設(shè)計(jì)讓更多人參與公益活動(dòng)？》
• 《上億人使用的泛娛樂(lè)微信店，是如何做改版設(shè)計(jì)的？》
• 《微云使用效率大幅提高的背后，騰訊設(shè)計(jì)師這樣做改版！》