高手实战！腾讯公益设计改版项目总结

编者按：大的改版设计都是怎么做？今天腾讯这篇干货用个完设计流程告诉你，个优秀改版案例应该这么来！

一、定位

随着腾讯公益线上平台项目的发展，原有的设计框架问题逐渐现，已承载现有的产定位和使命。我们对产的探索过程中，定位逐渐清晰：

腾讯公益线上平台是个提供可信任公益内容运平台。

二、目标

过设计改版，提高项目转化率和品凝聚力，打造可信任公益内容运平台形象。

三、拆解目标

转化率：内容披露型设计框架/体验统。

品牌塑造：品牌统一/化传播场设计。

四、现状问题梳理

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体验设计」的微信公众号：