平安银行 2021 年度账单设计复盘-技术圈

点击 ▲ 三分设关注，和 6 万设计师一起学习进步

知识库 2022 · 第 156 篇

前言

2022 焕新开启，相信大伙儿已火热投入到搞钱模式中了，不知大家去年末有没有上口袋银行 APP 查看年度账单，体验一把元宇宙之旅？

这次的年度账单有些不一样，下面通过背景、目标、策略、执行、总结反思几个方面，跟大家分享下本次年度账单活动的历程～

背景

年度账单是什么？

对企业来说，年度账单能够加深平台与用户的情感联系，促进用户的活跃度，通过分享裂变，提高品牌传播度。对用户来说，年度账单承载着自己一整年的回顾和总结。

那我们的用户是怎样的呢？

结合平台的大数据用户画像，我们比较了平安银行口袋钱包不同年龄段用户的月平均活跃度，其中 20～40 岁活跃用户占比最多，因此我们将这一年龄段用户作为本次年度账单的核心受众。

这两种客群也有很多共性：希望对自己消费结构有更深刻的认知；通过内容的分享，满足自我表达的欲望，彰显个人标签、消费主张、生活水平、在社交媒体中获得价值感、成就感。

设计师对年度账单的认知

基于项目背景梳理和用户分析，我们从设计角度思考了下面三个问题：

1、我们想用年度账单解决用户什么问题？

帮助用户回忆过去一年平安口袋银行 App 消费足迹，通过大数据给用户还原立体的消费形象，让用户更加了解自己，同时通过分享，满足小小的虚荣心、成就感。

2、我们希望用户产生什么样的行动？

我们希望用户观看年度账单，并产生分享行为。

3、我们想在用户面前展现什么样的年度账单？

我们脑暴了许多可能对用户产生触动的内容，这些意象和事件能给人们带来很多情绪——鼓励、欣慰、也有热血。从中，我们提炼出了一些意象，并最终筛选出了3个核心作为设计关键词：穿越-陪伴-仪式感

通过以上三个问题的思考，我们希望观看前让用户带着对自身账单数据的期待而来，通过创意创新的内容、新颖的视觉效果和流畅的浏览体验让他在观看中有惊喜感；并在观看账单后愿意分享，进而实现提升平安口袋银行品牌传播和年终活跃度，实现突破千万 UV 的业务目标。

由此我们确立了设计目标：通过“用户自身数据”构成“打动用户的生动故事”，为了达成目标，我们分析出了以下 4 点设计策略。

设计策略

策略1

对筛选数据二次包装，满足需求，提升趣味性

从数据层面去发现有趣的卖点来提升趣味性，筛选精准数据，引起用户共鸣，主要包括以下 3 维度。

基础数据：总收入、总支出、理财、获利数据，满足用户核心诉求

趣味数据：主线业务消费数据，加入榜单排名，调侃话术增加趣味性

品牌内容数据：用户参与 App 活动数据，提高品牌影响力

策略2

通过构建故事化场景，提升用户的浏览兴趣

我们以2021年度对中青年最有影响力的热点话题作为创意切入点，分别定义出2大故事场景：民族自豪- 盛世长安；未来憧憬-元宇宙畅想。

为用户打造多元化的认知感受，既能看到古代金融服务融入生活的方式，也能看到我们对未来世界，未来科技带来的新金融服务的畅想。

古风线以小姐姐初入元宇宙眺望平安长街的夕阳环境为始，到中间参加花灯游园会为高潮，最后偶遇财神祝福，放天灯许愿结束，场景画面的光线色调是依据时间天色和用户参与活动的情绪波动而变化的，经历了开始-升温-高潮-平静-小高潮的过程。

未来世界故事线以到达-奇遇-送别为故事链，首页用户扮成宇航员到达未来PAB之城开始，逐个探索各个有趣的元宇宙场景，比如巨型金币娃娃机，分子美食工厂，薅羊毛传送带，全息购物城等等，最后以智能机器人大白送别。

宇航员代表着未来和穿越属性，宇航服可以避免对人物性别的表达，有很好的通用性。造型上采用圆润的体型，通过宇航服的管线，仪器，背包，耳机等元素体现未来朋克的感觉。

策略3

以创新的表现形式提升浏览体验

我们发现视频流作为一种现在用户喜欢的媒介，且用户对于视频浏览内容的习惯已被养成，观看的过程不需要操作，就可以流畅的获得信息。

表现形式上我们也力求创新，不再用 H 5 左右滑动播放的传统轮播，而是尝试用视频流自动播放的形式呈现给用户，为了呈现一种真实的视频操作感观体验。

我们把每一个场景都做成一个独立的 lottie 动画，然后以点的方式串联起来，加上进度条和播放控件，这样就能从视觉感观上和视频播放操作完全一致。用户还可通过拖拽进度条的方式来达到反复观看的效果。

策略4

个性化动态海报，激发用户分享欲望

传播的前提是认同，2021年疫情继续、经济仍需提振，对大部分国人来说仍然是困难的一年，所以我们决定今年分享内容换为新年祝福为主，让用户分享对明年的寄语。

此外我们希望让用户有更多的自主定义分享内容的权利，让用户根据自己选择的故事线生成响应的分享内容。

从最终的活动数据来看，此次账单活动累计分享次数八十万次，人均分享1次以上，可见用户的分享意愿还是比较高的。

设计执行

虽然设计策略已经确定，但在接下来的合作中我们遇到了不少的问题：项目涉及多方，怎么统一各方意见确认主题？随着上线时间邻近，如何在时间紧张的情况下高质量完成项目？

4-1「盛世长安」视觉推导

在盛世长安故事线中，我们通过形、色、质、构几个维度推导设计确认主题。

1、形

虽然我们的故事是架空的，但落地到画面上就需要赋予它具体的时代背景，介于汉服文化的盛行和汉唐主题晚会的火爆出圈，且考虑到账单上线时间接近跨年，我们想要为用户营造出热闹繁华的喜悦氛围，因此古风版借鉴大唐盛世长安的时代设定，以长安街市作为场景原型进行再设计。

2、色

参考长安时期的经典配色，检索了一批灯会、长安、盛唐等相关主题的图片，筛选出现频率最高的色彩制成色卡，同时将饱和度在原色调基础上调20%，适当增加鲜艳度强调灯会的兴盛。

3、质

整体视觉质感上采用了国潮插画风，考虑到平台主流客群以中青年用户为主，年龄跨度较大，插画风是各年龄接受度都比较高的风格，也能更好烘托国潮的写意氛围。

在不同的场景通过「平安钱庄」「锦鲤」「金币」「财神」等元素置入品牌基因统一调性，也是为用户送上美好寓意和祝福。

4、构

在页面布局上，信息分为三大块，其中文案作为核心内容高度占比控制在版面50%左右，为数据预留足够空间确保信息的阅读性。

画面构图统一为两种视角：透过汉服小姐姐的角色视角体验平安长街上元灯会或以第三视角与角色共游。

4-2「未来世界」主要困难及解决

随着上线时间邻近，未来世界故事线在执行过程中面临时间紧张的问题，未来世界场景分为 13 个场景，需3周完成，项目执行时我们通过合理的人员安排和技术创新实现了提效。

首先我们通过合理的人员配置，解决风格不统一的问题：

风格上的风险源于不同设计师间的个人设计风格不统一，通过对制作流程的分析，我们发现 3 d 设计主要环节中，颜色、材质和灯光可以通过模版和规范进行统一，草图和合成环节则很难通过规范统一。

所以，我们安排草图和合成环节由专人负责，其它环节则拆分给不同的设计师，依照模版和规范完成。在此过程中再由专人对设计过程进行把控。这样就很好的解决了风格统一问题。

其次我们通过技术创新实现不同职责的人员间实现高效协调：

从模型到渲染的环境和合成环节需要的时间有很大不同，通常模型到渲染需要很长的时间，合成很快就可以完成，如此就会出现合成人员长时间空闲等待合成素材的情况。如果这时候安排合成人员其它任务，难免会造成他时间的碎片化，不利于风格统一的目标。

所以我们将不同的灯光单独渲染成灯光层，这样就可以在合成阶段快捷的完成调光的工作。

具体来说，我们把灯光层分为：HDR 层，主光层，辅光层，轮廓光层，自发光5组图层独立输出。如此，我们将每个场景的制作时间由6天缩短为4天。

总结与思考

在这次项目中我们遇到了不少的问题，但最后都在大家的共同努力下化险为夷，看看我们是怎么解决的吧。

1、项目涉及多方，怎么统一各方意见确认主题？项目规划阶段参与部门众多，需要大家合力完成。除了会议前制定明确的会议目标和议程，还需要每个参与部门拍板人在场，争取在会上作出决策达成会议目标，避免会后意见影响项目进程。

2、随着上线时间邻近，如何在时间紧张的情况下高质量完成项目？多部门共建项目应以产品经理为中心，协调各部门资源，决策关键问题，做好风险管控，提前规划、评估、协调。

以上是这次年度账单设计复盘的全部内容啦，感谢大家耐心观看～

热门文章推荐

译客专栏 2022 · 第 9 篇

OOUX一个面向对象的体验设计思维
2022 年 UXUI 设计趋势
欺骗、迷惑、拖延...五宗罪：用户体验的阴暗模式
设计师们应该多玩电子游戏，游戏化设计背后的极致体验
为数字项目制定用户体验策略的 6 个实用工具！
符号学分析导论，图标构建的 3 大要素
在校的学弟学妹们，想要进大厂实习，请务必提前准备！
Google 最新的设计语言 MATERIAL YOU 来了，7 年以来最大更新
解密设计系统的 11 大优点，终于可以说服你的管理层

精选体验设计知识

收录 100+UED 团队干货文章

共创成长训练营

三分设·星火会员

我们一起聊设计

三分设·微信读者群/城市群

欢迎添加 ⭐️ 星标，获取每日好文推荐，每天早上 8 点，准时充电。加入设计微信交流群 三分设读者 5 群，期待与更多优秀用户体验设计师一起成长，添加益达微信号【 Lil_Bug 】or【 Red-boy2020】，备注【 三分设读者 】加入读者群！

分享设计心得，定期直播，零距离连麦，答疑解惑

↓↓↓点开『阅读原文』，欢迎你的加入星球

平安银行 2021 年度账单设计复盘

点击 ▲ 三分设 关注，和 6 万设计师一起学习进步

知识库 2022 · 第 156 篇

年度账单是什么？

那我们的用户是怎样的呢？

1、形

2、色

3、质

4、构

点击 ▲ 三分设关注，和 6 万设计师一起学习进步