赞助商
立即赞助

如何设计节日闪屏?来看腾讯设计师的实战思路!

UI设计3年前 (2021)更新 流光
2.2K 0 0

感化设已不一新概念,唐纳德·诺曼《感化设》一书中,清晰阐述了感化设的重与作用。阶段,同类型的产品功能、服务、内日益趋同,差异越越小,让产品触及用户的内,除了功能满足需求之外,也需行感化运营。

微云在不断完善基础功能时,基于用户为,增加了许多情感化体验,比如往年今日、脸相册等。在情感化运上,微云在2018年开始了较为完节日闪屏设计,希望向用户传达节日的祝福,拉近产品与用户的距离。

什么是节日闪屏

节日闪屏指特的节日行感化设,传递品牌关怀的闪屏。优秀的节日闪屏,内不仅能够触达用户的记忆点,也能够与品牌相融合,这样既拉近了用户与产品的距离,也强化了品牌的认知记忆。

如何设计节日闪屏?来看腾讯设计师的实战思路!

确定设计目标

在开始设计之前,我们期望节日闪屏够达到两个目标:

  • 传达节祝唤用户回忆
  • 体现微牌调性

不同的节有不同的文化背和风俗习惯,节祝以结合最典型的特征,样更有唤用户回忆,文结合案例进行分析。而,品牌是贯穿所有节的,在设计之初,我们明确微云的品牌,样更有品牌的传达。

1. 品牌研究

Alan Cooper在《About face 4》中提到,在传达品牌时,以用一组形容词来描述产品及验,词以组成词云,用来指导视设计。何创建组词云呢?Allan Cooper 提供四个方法:从品牌大纲提炼关键词、分析现有产品的界面和服务、分析竞品的界面和服务、收集用户反馈。

结合微的特征,我们从现有产的界面和户反馈两个角进行分析,炼符合微调性的词。

如何设计节日闪屏?来看腾讯设计师的实战思路!

2. 分析现有产品界面

微云的平台,包括WEB端、PC端、移动端、小程序等,其中WEB端和移动端的用户最,就从两个端手,分析产品界面的品牌特征。从结构局和彩比例上,以归纳两端的共同点:结构清晰、留白、简约干净。

如何设计节日闪屏?来看腾讯设计师的实战思路!

3. 析用户反馈

云用户在职业布上,领用户占最大。结使用景析,用户反馈最多的词是:轻量、方便、下载快速。

如何设计节日闪屏?来看腾讯设计师的实战思路!

4. 提炼微云品词云

结合品界「结构晰、留白较多、简约干净」特征和「轻量、便、下载快速」用户反馈,我们提炼出适合描述微云品词云:简约、干净、留白。

如何做一个节日闪屏?

接下来以劳动节闪屏为例,从节日特征和品调性两个维度来阐述节日闪屏设计过程。

1. 节日特征

利用穷举法,筛选最典型节日特征。

如何设计节日闪屏?来看腾讯设计师的实战思路!

微云是个工具化品,旅/度假更适合旅类品,劳动/休息与微云更契合。结合品功能,定了两个,第个是「五不劳你动,微云帮你理」,与备份照片功能结合;第个是「劳动荣」,凸显节日氛。以下是些草图案:

如何设计节日闪屏?来看腾讯设计师的实战思路!

2. 品牌调性

面三方案重点于功能的表达,把用户目光吸引到场景,内丰富,但可能造用户3秒内无法明白画面主题。方案四重点于气氛的表达,关注人故事,角色辛勤的劳动,直接点题,场景只起烘托作用。结合「简约、净、留白」的品牌调性「唤起好回忆」的品牌望,我们选择了氛围方向行深入设。

主题确定后,开始进优化设计了。围绕着关键词,采用扁平化设计手法,在色搭配上,由于劳动节没有明显色倾,故以品蓝为主色调,橙色来于品图标,作为辅助色提亮体画;在页排版上,保持大积留白,简约爽。

如何设计节日闪屏?来看腾讯设计师的实战思路!

3. 小结

劳动节闪屏线后,我们行了复盘,我们希望微云的节日闪屏给用户传达的「的珍贵回忆微云帮记录」这样的小思,不「我们xx功能」之类的广告,所以以后的节日闪屏中,我们会加倾向节日故事性的表达。视觉风格则采用简约、净、留白的方式,重点突出人故事,不场景过多渲染。

4. 其他的节日闪屏设计

按照面的思,我们完善了其他的节日闪屏设。

母亲节闪屏

母亲节一方的节日,这一天,孩子给母亲送康乃馨,表达自己的意。节日故事选择了具表性的孩子给母亲送花的场景。

如何设计节日闪屏?来看腾讯设计师的实战思路!

端午节闪屏

一到端午节,就会想起粽子的「甜咸之战」,可见粽子在端午节的重要地位,端午节的节日故事就围绕粽子开展,个好友齐心协包粽子。

如何设计节日闪屏?来看腾讯设计师的实战思路!

七夕闪屏

牛郎织女,鹊桥相,是七夕节的美丽传说,一天情侣相聚,相互表达爱意。七夕故定在情侣相的瞬间,女生飞奔向男生,在银河上翩翩舞,表达久别重逢的喜悦。

如何设计节日闪屏?来看腾讯设计师的实战思路!

中秋闪屏&圣诞节闪屏

中秋节故事主题是家圆、赏月吃饼。圣诞节故事则以父二人齐心协力装饰圣诞树为主题。

如何设计节日闪屏?来看腾讯设计师的实战思路!

△ 备注:圣诞节最终效果图由另一同事绘制

所有节日闪屏集

如何设计节日闪屏?来看腾讯设计师的实战思路!

输出节日闪屏规范

节日闪屏除了故事性的表达之外,设我们也输出了一部分规范,用把控风格的统一。

1. 配色规范

色彩作用户易感知的部分,使用时与品牌相呼应,主色与辅色均源于产品图标。明显色彩属性的节日,以节日固色主,比如春节色,中秋黄色。无明显色彩属性的节日,可以以品牌蓝主,强化品牌印记。

如何设计节日闪屏?来看腾讯设计师的实战思路!

2. 角色规范

我们希望重点展示的是人物的珍贵忆,基于此,我们设计了一角色,讲述角色的故事,户产生代入感。为了保证统一性,我们制定了人物的细节规范,包括角色头身=1 : 9、款式休闲为、颜色与牌色呼应等。

如何设计节日闪屏?来看腾讯设计师的实战思路!

在设定好人物细节规范之后,我们善了角色资源库,方后期在他场景的应。

如何设计节日闪屏?来看腾讯设计师的实战思路!

3. 场规范

在场设计上,我们以简洁,明确为主,场主要烘托人物故的用,而不进行的渲染。

拓展场景的使用

做一系列闪屏之,插图和角并没有闲置,我们在下挖掘一新的使用场。素材被重新用来,变身为办室的装饰挂画,营造出一个充满品牌气氛的办境。

如何设计节日闪屏?来看腾讯设计师的实战思路!

如何设计节日闪屏?来看腾讯设计师的实战思路!

如何设计节日闪屏?来看腾讯设计师的实战思路!

总结

2018微云希望通过节日闪屏的感化运营,给用户传达节日关怀的同时也强化微云的品牌认知。后续的规划中,我们希望节日闪屏不仅仅单方面的给用户传递关怀,还能够用户互动,实深层次的感交流,比如点击节日闪屏,跳转到往今日,帮用户回忆起以往的好回忆,增加用户粘性。2019微云会继续给家传递节日的祝福,也会不断探索新的闪屏设风格,敬请家待。

欢迎关注作者微信公众号:「我是飞天兜」

如何设计节日闪屏?来看腾讯设计师的实战思路!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

万能螺丝刀也拧不开眼镜框上的螺丝。如同万能螺丝刀一样,QQ 也是一个通用的沟通工具,在针对游戏、粉丝、家校等垂类场景下,...
QQ家校群
我们在进行设计的时候,往往遇到以下的场景: 这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给...
App设计
复古是一场与时空美丽的邂逅,跨越时间依旧经典,用复古致敬经典、在经典中绽放新意,与我们一起期待未来 20 年华丽的变化。 ...
QQ头像
QQ 购物号是专门为 QQ 用户定制的购物平台,2020 年随着疫情过后,整体电商行业开始恢复阶段,QQ 购物号计划了今年双 11 大促...
QQ设计
QQ红包作为一个已上线4年的基础功能,在过去的一段时间经历了定位转变,用户数据下滑等问题。随着几个新玩法的推出,QQ红包又...
QQ设计
动态图形设计在我们日常生活中无处不在,藉由项目来告诉大家我是如何有理有据的做动态图形设计,希望我的设计方法对你有所帮...
MG动效
无疑,坐拥10亿月活的微信极其成功,有人说微信的成功在于赛道的成功,然而即便把微信和国际上其他地区的同类应用 WhatsApp、...
张小龙
编者按:专业的设计流程是怎样的?本文从腾讯微保的实战案例出发,为你展现一个真实有效的设计过程,看高手是如何用设计做好...
保险类设计