支付宝集福卡背后的设计故事

支付宝集福卡背后的设计故事


从旧年俗到新年俗


随着物质和精神生活的巨大变化,人民对春节民俗越来越感到不满足,常常能听到“年味越来越淡“的抱怨。事实上,春节现在确实没有想象中的那么有意思了。在我们小时候特别期待着新年的到来,春节带给了我们无尽的欢乐:“二十三,糖瓜粘;二十四,扫房子;二十五,磨豆腐;二十六,炖羊肉;二十七,杀公鸡;二十八,打糍粑;二十九,灌烧酒;三十晚上坐一坐,初一早上扭一扭。”


再反观现在的春节,无非是吃吃喝喝,逛街购物。传统的春节民俗活动都已经极度简化,趣味性与情感交流的机会也减少了,甚至有些民俗都被遗忘或者禁止(如,放鞭炮)。正是这些带有仪式感的活动的减弱,导致了人们觉得年味越来越淡。


所以,我们打算从交互、视觉、动效三个层面来加强五福活动的仪式感,希望可以帮大家拿回一点点遗失的“年味“。把五福打造成新的年俗是我们的设计目标。



1.回归元点


“2018年2月23日(春运第二十三天)全国铁路、道路、水路、民航共发送旅客9408.4万人次。”    “2018年春运于3月12日结束。春运40天,全国旅客发送量约29.7亿人次。”


春节是中华民族的时空坐标,除夕是中国文化在自然时间上标记的元点,家庭是中国人空间认知的元点。在时间元点回归空间元点,是人类复归生命起点的一种本能。所以,“回家“是春节里整个民族最强烈的渴望。


家,就是有人开着灯在等你

——三毛


每天下班回家,当我走进小区时,第一眼就能看到我家透过窗户的灯光。我知道已经很晚了(半夜10点以后),但是TA还没有睡。可能每个人对于家的定义都不相同,但是我们对于家的情感和感受基本一致。当你看见透过窗户的灯光,一眼就认出了自己的家。随着你回家的步伐,渐渐的你看清了窗户里张望的面孔……


支付宝集福卡背后的设计故事


所以,我们选择了“窗户“作为整个五福活动的关键,透过“窗户“去感受家的温暖和春节的气氛。透过“窗户“,用户可以看到里面团聚的一家正在吃团年饭。我们希望通过典型场景的渲染,引起用户的情感共鸣。为了加强这种效果,我们甚至利用了手机的旋转传感器——陀螺仪。用户可以通过转动手机屏幕,模拟出看到窗里更多场景的效果。


支付宝集福卡背后的设计故事



2.五福的品牌化和IP化


从一个运营活动到一个年俗活动,基于打造新年俗的目标,从今年开始,我们计划对五福活动进行品牌化设计并把五个福字作为IP进行打造。其中我们对五个福字进行了升级并最终固定下来,全新设计了支付宝集五福的活动LOGO,提出了“福到年到”的slogan,并输出相应设计规范,从线上到线下进行统一整合。


支付宝集福卡背后的设计故事



3.有仪式感的体验流程


“二十三,糖瓜粘;二十四,扫房子;二十五,磨豆腐;二十六,炖羊肉;二十七,杀公鸡;二十八,打糍粑;二十九,灌烧酒;三十晚上坐一坐,初一早上扭一扭。”


我们小时候的春节之所以那么有年味,就是因为春节是一个漫长而有趣的过程。人们通过各种各样的仪式为春节那一天做着准备,我们感受到的年味来自于这个过程中的各种仪式。所以,五福的活动过程应该充满了仪式感。


“集福-合成-开奖-开启新年“,整个活动流程分为了4个大的环节,每一个环节的节点都通过视效和动效强化操作的仪式感。


支付宝集福卡背后的设计故事



4.在旧年俗中寻找新年俗


“传统是围绕人类的不同活动领域而形成的代代相传的行事方式,是一种对社会行为具有规范作用和道德感召力的文化力量,同时也是人类在历史长河中的创造性想象的沉淀。”


传统在漫长的历史过程中形成,具有一定的仪式感,使生活具有了连续性、秩序和意义。所以,我们在中华民族众多的民俗传统中寻找年的味道,并将之提炼和视效化。将传统的运用到活动的视觉设计层面,以此增加年的味道。


最后,从大众的接受度,以及视觉表现层面的可行性出发,我们选择了写福字、写对联、剪纸、年画,作为传统年味的视觉符号”


支付宝集福卡背后的设计故事


4.1书法

福文化是中国最古老的传统文化,几千年以来,“福”字都寄托了人们对幸福生活的向往,书法是中国文化最精髓的表现。我们选用书法字是对中华文化的致敬,对中华传统的传承。作为五福活动的核心元素的“福”字,我们从书法的字法、笔法、构法三个方面来定义和设计。


字法:中国传统书法主要是:篆  隶  楷  行  草,其中行书最具识别性的。福字作为logo在字法上的定位:有识别性的/饱满的/生动的。

笔法:“圆笔你如圆笔逆入,落笔藏锋”。这样的笔法圆润饱满,流畅的笔触寓意圆满,祥和。

构法:字体美学讲究节奏感:先紧后松,上紧下松,左紧右松,内紧外松。收放自如会让整个设计看起来张弛有度,富有节奏和律动。同时字体的结构比例符合黄金分割的比例。  


我们中国做人总要讲究一个好彩头,所以“福“的每一个笔画都饱含了美好的寓意。多子、多才、多田、多寿,形意结合。


支付宝集福卡背后的设计故事


另外,产品中的主要标题,口号等都用到 了书法字体。通过书法这种传统文化的形式,烘托和增强了产品的年味。


支付宝集福卡背后的设计故事


4.2剪纸

剪纸在我们有1500多年的历史。最开始人们通过在窗户上贴剪纸,来标记自家的范围,防止邪祟入侵。后来慢慢演变成人们在春节期间的装饰,对美好生活的向往。


支付宝集福卡背后的设计故事


4.3年画

年画是人们既是对家的环境装饰,也是对美好生活愿望的体现。但是,随着时代的发展,旧有的年画风格已经不能满足现代人的审美。所以,我们重新定义来年画的风格,打造来新的“小确幸“。希望通过穿越、幽默的手法,博得用户会心一笑。


支付宝集福卡背后的设计故事


5.动效让年味更有口感

现实世界是动态发展的 ,我们要让设计动起来,才能让用户感受到生动和真切的年味。所以,我们设计的关键节点和关键场景中,都加入来不同程度的动效,让整个设计动起来。

与以往不同的是,今年我们引入了Lottie动效库,使得整个项目对动效的支持非常好。细腻丰富且高清的持续性动画,在以往的项目中是无法实现的。今年的红包动效技术实现上可以说是向前迈出了一大步。我们先用ae来设计动画,再将这些动画通过一个叫Bodymovin的After Effects插件,以JSON文件的形式进行输出。Lottie通过JSON格式下载动画数据,通过iOS,Android还有React Native原生APP的文件库实时提供给开发者,将动画绘制在屏幕上。通过Lottie实现的动效,不仅提升了的动效的效果,还减少了开发的工作,减少了安装包大小。

支付宝集福卡背后的设计故事


支付宝集福卡背后的设计故事

支付宝集福卡背后的设计故事



6.情景互动

中国的年,是团聚的时刻,大家欢聚在一起,拜年、串门,把祝福相互传递。


在今年支付宝春节红包的集五福活动中,我们也想让这种祝福随着支付宝的五福在用户之间传递下去。在AR场景的互动中,我们不同于以往仅仅引导用户去扫福字来收集福气,更增加了五福手势的彩蛋。用户通过AR扫描框,扫描朋友比出的“五福到”手势,就能够看到朋友送出的祝福,同时也和扫福字一样有机会获得福卡。但是这就不仅仅是用户自己的发现和收集,更多的是在亲人和朋友之间的互动,是人与人之间祝福、五福的传递。


支付宝集福卡背后的设计故事


这是我们对于新年俗的一次小小的尝试,希望科技在高速发展,刷开陈旧的同时,也能保有甚至为传统的祝福带来更多的惊喜和方式。



社会影响


在国内,通过我们对网络舆情的分析发现在活动期间,福卡交换成为了微博互动的主要动力。在搜狐等网络媒体上,“支付宝开始集五福说明真的要过年了”等声音开始出现,表明在用户心中集五福开始成为春节的符号之一。


支付宝集福卡背后的设计故事


在国外,著名设计和科技界风向研究的报告——Design in tech,将支付宝集五福列为了关于中国的四大科技趋势之一。支付宝用AR科技与“福”的结合,影响到了全球的设计和科技界。


支付宝集福卡背后的设计故事



支付宝集福卡背后的设计故事


本篇文章来源于微信公众号: 蚂蚁集团设计

UI/UX

邀你参与丨2018中国用户体验行业调研

2018-4-18 12:00:00

UI/UX

如何让用户参与我的设计

2018-4-23 8:42:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索