定位
隨著騰訊公益項(xiàng)目的發(fā)展,我們對(duì)產(chǎn)品的探索過(guò)程中,定位逐漸清晰:騰訊公益線上平臺(tái)是一個(gè)提供可信任的公益內(nèi)容的運(yùn)營(yíng)平臺(tái)。
目標(biāo)
原有的設(shè)計(jì)框架問(wèn)題逐漸出現(xiàn),已不能承載現(xiàn)有的產(chǎn)品定位和新使命。我們希望通過(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)題梳理
體驗(yàn)參差不齊:操作方式、視覺(jué)表達(dá)不一,導(dǎo)致用戶操作路徑不一,體驗(yàn)舒適度參差不齊。
品牌性弱:騰訊公益線上公益平臺(tái)歷經(jīng)幾代設(shè)計(jì)師更迭,一直沒(méi)有規(guī)范性設(shè)計(jì)指導(dǎo)文件,品牌對(duì)外輸出弱。
效率低:
- 多人協(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é)作效率;
- 圖形矢量化,減少適配工作量。
| 體驗(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):
| 體驗(yàn)優(yōu)化 – 搭建項(xiàng)目分層級(jí)的設(shè)計(jì)框架
| 體驗(yàn)優(yōu)化 – 輕度運(yùn)營(yíng)
| 體驗(yàn)優(yōu)化 – 重度運(yùn)營(yíng)
品牌層與內(nèi)容體驗(yàn)層分離,為重度場(chǎng)景化定制運(yùn)營(yíng)提供了了舞臺(tái)。
| 品牌統(tǒng)一 – 色彩體系
本次設(shè)計(jì)DNA的延展,皆出于品牌VI,根據(jù)主色延伸出色彩體系:
- 輔色:用于輔助主色圖形繪制、高亮提醒等用途;
- 補(bǔ)色:用于對(duì)比主色信息時(shí)使用;
- 對(duì)比色:用以輔助補(bǔ)色使用。
相應(yīng)色彩角色產(chǎn)出后,梳理10個(gè)明度等級(jí),用于插畫(huà)、裝飾性素材的色彩參考
| 品牌統(tǒng)一 – 文字體系
| 品牌統(tǒng)一 – 圖形體系
- 簡(jiǎn)約通用的線性圖標(biāo)設(shè)定更加符合騰訊公益客觀、公正的平臺(tái)特性;主色+中性色的雙色展現(xiàn),對(duì)比突出,品牌屬性統(tǒng)一;
- 欄目入口圖標(biāo)使用雙色,系統(tǒng)操作類圖標(biāo)沿用中性色,信息層級(jí)層次分明。
| 品牌輸出 – 傳播場(chǎng)景設(shè)計(jì),提高社會(huì)傳播效率
- 圖片+二維碼便于傳播和二次傳播
- 避免金額數(shù)字等敏感信息的尷尬,弱化物質(zhì)優(yōu)越感體現(xiàn),強(qiáng)調(diào)精神優(yōu)越感和道德優(yōu)越感的體現(xiàn)
| 效率提升 – 歸納模塊,提高復(fù)用率
- 捐贈(zèng)前:項(xiàng)目瀏覽、選擇
- 捐贈(zèng)中:金額選擇
- 捐贈(zèng)后:傳播模塊
| 效率提升 – 設(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)。
| 效率提升 – 減少適配工作量
通過(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)定、更高效。
文:騰訊CDC體驗(yàn)設(shè)計(jì)(tx_cdc)
首席增長(zhǎng)官CGO薦讀產(chǎn)品運(yùn)營(yíng):
- 《給產(chǎn)品設(shè)計(jì)師的用戶增長(zhǎng)設(shè)計(jì)指南》
- 《增長(zhǎng)黑客如何基于心理賬戶、效應(yīng)及決策,運(yùn)用在股票App的產(chǎn)品設(shè)計(jì)中》
- 《7700萬(wàn)用戶0推廣,融資過(guò)億的美篇如何將價(jià)值洼地轉(zhuǎn)化為增長(zhǎng)主力?》
更多精彩,關(guān)注:增長(zhǎng)黑客(GrowthHK.cn)
增長(zhǎng)黑客(Growth Hacker)是依靠技術(shù)和數(shù)據(jù)來(lái)達(dá)成各種營(yíng)銷目標(biāo)的新型團(tuán)隊(duì)角色。從單線思維者時(shí)常忽略的角度和高度,梳理整合產(chǎn)品發(fā)展的因素,實(shí)現(xiàn)低成本甚至零成本帶來(lái)的有效增長(zhǎng)…
本文經(jīng)授權(quán)發(fā)布,不代表增長(zhǎng)黑客立場(chǎng),如若轉(zhuǎn)載,請(qǐng)注明出處:http://gptmaths.com/cgo/product/13350.html