龙空技术网

【UI设计】大厂的闪屏插画是怎么诞生的

衍果视觉 106

前言:

现在小伙伴们对“ui设计闪屏页”大致比较讲究,姐妹们都需要剖析一些“ui设计闪屏页”的相关资讯。那么小编在网络上收集了一些关于“ui设计闪屏页””的相关内容,希望姐妹们能喜欢,朋友们快快来了解一下吧!

还记得小时候每逢节假日,总会和最亲近的家人一起,享受美好的团聚时光;曾几何时,在外拼搏的你,在冬至连一碗汤圆都吃不上,在情人节一个人挤着地铁下班,在跨年夜只能看着电视里的烟花,甚至除夕前还在赶着总裁汇报…

这些在大城市里的孤单和快节奏生活里的无奈,我们听见了。过去人们对四季更迭的敬畏与重视,曾经那些特殊节日里的美好记忆,如今淘宝依然想要以自己的方式-闪屏小插画,传递给你。

01.

不打扰 是我的温柔

偷偷告诉你淘宝闪屏插画的几个小秘密:

这么看来,闪屏插画和大家接触的时间真的弥足珍贵。如此大费周章的绘制,目的是什么?真的有人会看吗?

闪屏根据传递的内容差异,衍生出几种类型:品牌传达、活动运营、节日和热点传播等。它的主要功能是为了帮助用户在进入APP时做一个较平滑的过渡,所以在时长上必须克制,在视觉呈现上则要降低整体结构和启动页的差异,营造出“好像只经过了一个页面”的错觉,让用户对这个过程获得最轻量的感知,并能快速到达自己想去的页面。

▲ 淘宝闪屏插画类型

淘宝的闪屏插画是在日常启动页的基础上做延伸,随着随节气变换的主题内容彷佛从淘字样的盒子里蹦出或飞跃出来,在时长的设定上考虑弱网情况本身加载时长,定义了最短2秒展示,让用户在等待开启APP的过程中有小惊喜,却又不至于受到干扰。

02.

一个合格的闪屏插画

是怎么诞生的

闪屏里面基本需要包含的元素有品牌LOGO、品牌标语和主体内容。一般预计上线的节日节气都会事先排定好,依据每期的主题收集素材、提取关键元素、构思创意,然后开始进行草图绘制和视觉呈现。

▲ 概念草图

设计闪屏的过程其实并不复杂,难点在于每年的主要节气千篇一律,如何在既定的印象中注入巧思、给用户带来新意?这里我们分享几个插画的诞生过程,从创意的发想到呈现形式的突破,希望透过设计传递新的节日情怀,让成果不落于俗套。

1. 七夕-品牌形象与故事的结合

七夕是中国最具浪漫色彩的传统节日,也是传说中牛郎与织女一年一度在银河鹊桥相会的日子。设计师想将这个美丽爱情传说融入闪屏的插画里,但又不希望太过直接的呈现人物具体形象,因此想到可以将牛郎织女的造型和淘公仔做结合。

▲ 牛郎织女鹊桥相会

首先提取了牛郎织女的古装发型为关键元素,放到淘公仔身上后发现头发会使淘公仔显得有点赤裸,于是只保留织女的发型,并改用剪影轮廓来弱化具体细节,搭配喜鹊和层叠的云朵等点缀元素,营造在一轮皎洁明月下,手牵手踏上鹊桥的画面感。

▲淘公仔形象与民间故事结合

2. 重阳节-传统寓意的赋予

重阳节在古时有佩戴茱萸、喝菊花酒等习俗;九与久谐音,也有长久之意,人们会宴饮和登高来祈求长寿。

▲重阳节代表元素

在构想阶段设计师先尝试了比较常规的菊花酒和远山景色,此时突然想到诗人王维曾在重阳节创作的那首著名的《九月九日忆山东兄弟》,感怀对故乡与亲友的思念之情,其中“每逢佳节倍思亲”更是传唱千古。把这样的古诗词结合进插画中,让淘公仔穿上诗人的服装登高望远,整体画面就被赋予了不一样的意境。

▲2021与2022的重阳节插画

3. 中秋节-多层次景深的尝试

中秋时节秋高气爽,空气里飘荡着桂花清甜的幽香。设计师提取了代表性的元素包括月饼、月亮、桂花和玉兔等,希望用这些元素形成更有意思的画面。

▲月饼、玉兔和满月

有别于以往只有插画主体和淘盒子产生关联的构图,这次除了月饼从盒子里出现之外,尝试以桂花树枝桠做前景,呼应远方皎洁的那轮明月,营造出前/中/后具层次感的景深,让插画的可发挥空间延展开来,却又不违背一系列构图的基础原则。

▲前景的桂花树与远景的明月

4. 秋分-精益求精到每一处细节

在构图多方尝试的过程中也会遇到瓶颈,绘制秋分方案时,设计师想要在盒子后面放上花窗,并透过窗框展现出远方的秋日美景。构想是美好的,但到了最终视觉呈现时,花窗的形态、虚实、远处的山景等等都会对画面好坏产生影响,我们修改了N次方案,总算看到心目中理想的秋分景色。

▲花窗与远景的修改过程

持续带给你闪现的美好

如今淘宝的闪屏插画已经陪伴大家走过一年半的时光。也许就只有那么几秒钟的机会能被注意到,我们依然会坚持绘制下去。在每个特殊的日子里,分享一段小小的故事给你,陪你在忙碌高压的生活中,忆起一些美好的片刻,获得一些惊喜与温暖。

新年初始,淘宝会继续用更多的小惊喜,陪你走过每一个四季。

标签: #ui设计闪屏页