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

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

2018/08/09 7320评论区

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

一、定位

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

腾讯公益线上平台是一个提供可信任的公益内容的运营平台。

二、目标

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

三、拆解目标

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

品牌塑造:品牌统一/社会化传播场景设计。

四、现状问题梳理

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

「腾讯团队实战案例」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/tencent-public-welfare-design-revision-summary

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里