騰訊公益設計改版項目總結

5 評論 18027 瀏覽 140 收藏 11 分鐘

本文作者對騰訊公益APP設計改版項目進行總結,在此與你分享,enjoy~

一. 定位

隨著騰訊公益線上平臺項目的發展,原有的設計框架問題逐漸出現,已不能承載現有的產品定位和新使命。我們對產品的探索過程中,定位逐漸清晰:騰訊公益線上平臺是一個提供可信任的公益內容的運營平臺。

二. 目標

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

拆解目標:

  • 轉化率:內容披露型設計框架/體驗統一;
  • 品牌塑造:品牌統一/社會化傳播場景設計。

三. 現狀問題梳理

(1)體驗參差不齊

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

(2)品牌性弱

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

(3)效率低

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

四. 對應設計執行策略梳理

體驗優化:

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

品牌統一、輸出:

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

效率提升:

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

1. 體驗優化

1.1 優化用戶體驗旅程

梳理出一級頁面:

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

二級頁面:

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

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

1.2 搭建項目分層級的設計框架

1.3 輕度運營

1.4 重度運營

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

2. 品牌統一

2.1 色彩體系

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

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

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

2.2 文字體系

2.3 圖形體系

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

3. 品牌輸出

3.1 傳播場景設計,提高社會傳播效率

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

4. 效率提升

4.1 歸納模塊,提高復用率

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

4.2 設計規范賦能合作伙伴

Atomic Design

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

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

4.3 減少適配工作量

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

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

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

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

五.?改版效果對比

首頁改版前后對比:

樂捐改版前后對比:

月捐改版前后對比:

六.?總結回顧

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

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

 

本文來源于人人都是產品經理合作媒體@騰訊CDC,作者@harrycrfeng

題圖來源于騰訊CDC官網

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這個功能機構圖使用什么軟件做的,看起來很舒服。

    來自河南 回復
  2. 請問改版是否有對應的數據指標呢?如何驗證設計效果?

    來自上海 回復
    1. 我也想知道這個

      回復
  3. apple store 搜索不到app啊

    來自上海 回復
    1. 搜不到app

      來自北京 回復