赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2K 0 0

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

一、定位

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

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

二、目标

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

三、拆解目标

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

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

四、现状问题梳理

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

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

活动背景 515 周年庆是起点每年例行的大型运营活动。今年采用了游戏形式的活动玩法,通过职业角色形象、任务策划、排行榜等不...
实战复盘
@途家UED :从前期调研、需求分析、设计提案、设计定稿到设计还原最终项目上线,本次案例为你复盘途家APP 的用户中心改版设计...
实战案例
提到这个话题有两层不同的讨论方向,在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习。这次我们主要以...
App设计
本系列文章旨在由浅入深、由理论到实践地介绍 VR 设计。无论你在做哪个领域的设计,都能通过这个系列了解 VR 设计的特点。本...
VR设计
一、概览 品牌讲述产品的故事,并建立产品和用户之间的关系。设计师的部分职能是翻译、桥梁、联结者的作用,因而对于业务的梳...
丁香医生
本文分享国际化司机端首页改版完整思考过程,化繁为简提升司机使用效率,提升产品用户体验。 关于国际化司机端 随着滴滴国际...
改版设计
很多人说看过很多设计道理却依然做不好设计,还不如直接看设计案例来的简单粗暴。今天为大家找到一篇实战好文,一个人,3天时...
APP 设计
一个产品从起步到日趋成熟通常要经历多次迭代。在这个过程中,对于视觉设计师而言,如何在不断变化的产品中保持设计的延续,...
品牌升级