腾讯公益设计改版项目总结！高手实战案例分析
扫一扫 
扫一扫 
扫一扫 
扫一扫
编者按：大厂的改版设计都是怎么做的？今天腾讯这篇干货用腾讯公益完整的设计流程告诉你，一个优秀的改版案例应该这么来！ 一、定位随着腾讯公益线上平台项目的发展，原有的设计框架问题逐渐出现，已不能承载现有的产品定位和新使命。我们对产品的探索过程中，定位逐渐清晰： 腾讯公益线上平台是一个提供可信任的公益内容的运营平台。 二、目标通过设计改版，提高项目转化率和品牌凝聚力，打造可信任的公益内容运营平台形象。 三、拆解目标转化率：内容披露型设计框架/体验统一。 品牌塑造：品牌统一/社会化传播场景设计。 四、现状问题梳理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体验设计」的微信公众号：
「腾讯团队实战案例」
手机扫一扫，阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点，与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样，并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络，仅用作展示，如有侵权请联系站长！QQ: 13671295。
最新评论
