设计策略 | QQ为我画年画

腾讯ISUX

isux.tencent.com

社交用户体验设计

春节作为我国最盛大的传统节日，历经长期的传承和发展，已逐步形成了各地方，各民族稳定的文化内涵。设计师需要从用户内心出发，探究用户回家过年的真实意义，将情感基因视觉化。

Step1

“家”文化的情感基因

孟子曰：“天下之本在国，国之本在家。”中国传统文化形成和发展的重要社会根基是以血缘关系为纽带的宗法制度，它在很大程度上决定了中国的社会政治结构和意识形态。虽然时代变迁，科技进步，但是“家庭之上“的观念千百年来已深入国人骨血。

“阖家团圆”是国人回家过春节的第一要义。“金窝银窝不如自己的狗窝”，家是国人最圆满的归宿，暗含着人们对家乡的归属和对家庭的热爱。在国人的记忆里，“喜庆热闹”是春节最直观的感受，营造春节快乐幸福的氛围，满足人们对未来美好生活的愿景。这种节日仪式使人们找到了本土文化归属感，形成了各地迥异的过年特色。

step2

情感基因的视觉化

神经心理学指出人的爬行脑更加喜欢视觉化的信息，而不是抽象的信息。设计师把提炼出来的用户情感视觉化，找到与之匹配的具象实物。

带有春节特色的实物很多，比如红包，灯笼，鞭炮等等，但它们都不具有差异性。在春节习俗中，什么物品既有差别，又可以承载用户内容，同时让用户愉悦呢？我们想到了年画。

年画是中国传统文化的一部分，每值岁末，多数地方都有张贴年画的习俗，以祝愿新年吉庆，驱凶迎详，寄托了国人对未来日子的美好希望；年画是地域文化的辞典，从中可找到各地域鲜明的文化个性；年画的题材又包罗万象，神仙、娃娃、美人、世俗生活......可见，年画的这些优势与我们所需的实物基因高度吻合。

我们与天天P图合作，打造“年画”形式下的用户私定照片。照片是勾起回忆的东西，也是社交的工具。现在，用户热衷于在社交产品上分享和查看彼此相片，易于活动的传播。

Step3

设计流程与执行

1.设计流程

情感化设计结合诺曼心理学分为本能、行为和反思三个层级，分别对应项目的不同诉求。

如果用户认为生成的个人年画“漂亮“，这个判断来自本能层，在此层次中，视觉、感知、声音等生理特征起主导作用，因此，美感是重要的因素。设计师追求的效果是让用户有喜悦感（过节的喜悦、年画美的喜悦）和家乡归属感，造型、颜色、版式、文字都对情感反映有影响，可见，它是整体项目的核心内容。

行为层和使用有关，讲究功能的实现。优秀的行为层次设计有四个要素，即功能、易理解性、易用性和感受。在年画项目里，UI为用户提供年画生成的步骤操作，就需要界面的信息清晰、提示动画直观、操作流程简单且顺畅和及时性的反馈。

一切尽在用户心中是反思层的本质，用户对年画活动的评价和反馈是反思层的内容。

项目设计周期较短，所以前两个层级设计同步开始，需要多个设计师配合完成。

2. 设计执行

本能层 - 年画设计

在创作年画前，设计师把视觉元素进行分类，将情感基因分为地域差异型和节日大众型两类元素；从地域差异纬度考虑，再拆分为建筑类、食物类和语言类；以此类推，把大众型元素细分为人物类与道具类。分类的整理有助于设计师梳理绘画思路，调配人员和工作内容，保证多人同时高效输出。

人物设计

年画作为新年时中国民间传统的装饰物件，寄托着人们对新的一年的祝愿与祈盼。年画内容类别丰富多彩，但无外乎表现的都是吉祥、喜庆相关的题材。自古以来，“五福临门”便是中国人民孜孜以求的人生夙愿，“福”、“禄”、“寿”、“喜”、“财”是民间关于人生幸福观的五个常见维度标准，因此在进行人物角色创作时，我们以这五个方向作为创作题材的灵感来源，将“五福”的美好寓意融合到角色设计中。

根源于古人对自然的信仰与崇拜，传统年画通常采用借物抒情、寓意于物的手法。如用怀抱鲤鱼的福娃寄托年年有余的愿望，巧借谐音将“禄”与“鹿”联系在一起，通过“仙鹤”、“喜鹊”、“貔貅”等形象寓意“长寿”、“喜庆”、“多财”。我们将传统五福的象征符号以图形的方式结合到角色设计里，同时创作出更具现代感的人物特征，基于传统，跳出框架。

出于时间限制，要在2周左右的时间内完成全部角色设计，同时考虑到人物与前景食物、背景建筑插画的风格调性相配，人物采用了传统年画的伪立体插画风格，表现手法上则更偏向二次元漫画的方式。角色年龄跨度从正太萝莉到熟男御姐，服饰以中式为主，兼具古装、唐装、舞台装等多种风格，在服装细节、手势及装饰物件中融入五福的符号元素。以便吸引不同口味的用户群体一同参与活动。

为了让人物与用户产生更多共鸣，这次我们与天天P图合作，通过天天P图成熟的“变脸”技术，让年画的人物与用户实际样貌进行融合。由于之前没有面部融合人物的相关绘制经验，初期融合图的脸部绘制更偏向2次元卡通人物，然而融合后发现诸多问题，如夸张的五官比例无法与真人脸部完美融合、面部阴影导致融合后肤色断层、发型遮挡五官影响融合效果等等。在经过多次针对五官、发型、肤色、妆容乃至面部表情的“微整容”后，真人融合用图终于达到一个相对满意的结果。

最终融合效果

前景素材 - 食物、道具

中国人对于过年吃什么是非常重视的，“年夜饭”作为春节期间中一种必不可少的文化，其中一些传统习俗一直沿袭至今。年夜饭的名堂很多，南北各地不同，有饺子、馄饨、长面、元宵等，而且各有讲究，所以在食物绘制的过程中我们考虑到各个地区的习俗差异针对不同地区做了差异化分类。

1.大区域内通用食物，例如：北方的饺子，南方的汤圆，鸡鸭鱼肉等。

2.每个省份代表性过年食物，例如：川渝的火锅，湖南的剁椒鱼头，新疆的手抓饭等。

3. 突出“年味”氛围通用类素材，例如灯笼，鞭炮，红包等。

背景建筑

千百年来，由于不同地区人们的生活环境和生活习惯的差异，在中华大地上留下了许多各具特色的建筑。中国传统建筑并没有严格的流派划分，所形成的派系也是按照原住地居民长久以来根据当地风土人情而形成不同风格的民居。所以我们在背景的设计过程中融入了不同地区的风土人情。

例如云南的背景设计中我们采用了当地居民里最具有民族特点的吊脚楼作为基础框架，再结合芭蕉叶等当地特色进行画面丰富。

祝福语

与建筑特色相比之下，语言是更能代表地域差异的一点了。中国文化博大精深，每个地区的文化风俗不同，所以各地的语言也有很大的差异，在祝福语部分，我们使用了拼音来表达当地语言的音调，想想用自己家乡的语调念祝福语，年味儿更浓。

也会有一些地区当地特色或者有意思的祝福语，比如广东地区的“恭喜发财，利是逗来”，也有东北地区的“过年可劲造”等等。与此同时，用户也可以切换比较通用的祝福语来表达祝福。

色彩

在中国民间的色彩选择上，突出颜色的明快与鲜艳。色彩明快要求饱和度高，色相对比明显，面积对比大，这样的作品才具有独特装饰性，因此衍生出了传统五色理论 —— 玄白赤青黄。五色作为基础色，从它色相上又延伸出靛青、紫等中性色，这样用色让色彩更丰富、画面更具有层次感，符合年画节日氛围。

版式

在年画版面中，用户能接受的视觉元素多少取决于它们的关系，例如：形状、位置、大小、颜色等。当所有元素在版面中排列整体，颜色、大小、方向趋向统一时，给用户带来视觉上的稳定感。具体设计时，采用图形-背景、相似和连续三种法则。

大部分人都是先看整体后关注细节，设计师使用“图形-背景关系”大体将版式划分主次层级，不用分割线，用户也可直观地看清画面。版式细节处理上，采用“相似连续”的方法。即把相同特性的元素划分到一起，在添置到一条运动轨迹上，让用户在潜意识中形成类别划分。设计师采用以上两点，将食物、道具和语言类元素排列在一起，增加版面细节。

QQ年画每省可生成72张模版，全国整体可生成2520张模版。庞大的模版系统方便用户随心搭配，即使在同一个地区也会拥有不同样的专属年画。

行为层 - UI设计

用户能轻松快速的生成个人年画，是UI设计的目标。合理的利用层次，一方面会增进产品的易用性，降低大量信息产生的视觉压力，一方面也是将产品的核心价值更加突出的传达于用户。年画界面的视觉层次，是将1秒的浏览时间，拆解成3个阶段，每个阶段只消耗0.3秒的时间，由此产生的阅读顺序减轻视觉压力及不必要的干扰。

操作除了过程流畅外，恰当地使用手势动画提高产品易用性。此外，做完正常流程后，切记要考虑到特殊情况，进入首页和换肤都会占用用户部分时间，及时的loading动画降低用户的负面情绪。

UI整体效果展示

反思层 - 用户反馈

《QQ为我画年画》上线之后，激起用户热烈反响。活动期间，共生成2.3亿张春节年画，平均每个用户生成7次，用户积极分享晒图，社交模式的渗入进一步扩大活动的传播与影响。

Step4

项目总结

这次的年画项目首次与天天P图合作，通过成熟的人脸融合技术，结合用户家乡背景特色创作出富有用户个人特色的专属年画。新技术的结合带来了一些新的困难与挑战，也让我们总结了不少经验，如人脸融合图要更贴近真人五官比例，人物表情、妆容、肤色、面部阴影都会影响最终融合效果。这次活动是传统题材与现代技术结合的优秀案例，为我们未来运营活动的个性化玩法提供了更多的可能性。

以下ISUX文章，你可能也感兴趣

▽

[穿越福城] 幕后故事 | 设计定义年味

亿级曝光品牌视频的幕后设定

设计策略 | 停不下的游园会

QQfamily新春福卡爆款的企划

ISUX Showreel 2018