欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

QQ音乐母亲节主题UI设计 母亲节H5长图

程序员文章站 2022-03-18 20:53:53
5月8日是母亲节,而qq音乐也做出了有关母亲节的主题,所以下面小编就为大家分享QQ音乐母亲节主题UI设计,看看他们是什么样的... 16-05-22...
qq音乐母亲节主题ui设计 母亲节h5长图

QQ音乐母亲节主题UI设计 母亲节H5长图

这是qq音乐在母亲节推出的h5,主题为"给妈妈的音乐情书"

QQ音乐母亲节主题UI设计 母亲节H5长图

老规矩,先来个二维码体验!

QQ音乐母亲节主题UI设计 母亲节H5长图

QQ音乐母亲节主题UI设计 母亲节H5长图

QQ音乐母亲节主题UI设计 母亲节H5长图

QQ音乐母亲节主题UI设计 母亲节H5长图

这次设计,画面内容主要由原画设计师完成

以绘画的形式,来表达对母亲关爱

当然,为qq音乐设计的h5肯定少不了音乐这个元素

每一幅画面的内容,其实都来自一首有故事的歌,一段煽情的歌词

如歌如画,用画去描述一个故事,用音乐去触动用户的心

留给观者的,是那无穷的想象空间

小彩蛋

(来自原画设计师june的心得)

关于封面的构思过程

母亲节这个封面一开始我想画的是妈妈肚子里的未出生的胎儿

QQ音乐母亲节主题UI设计 母亲节H5长图

后来一想,qq音乐用户群体覆盖面广,最终上色后的效果,可能会让一部分用户觉得比较血腥,温馨的感觉也不够。

QQ音乐母亲节主题UI设计 母亲节H5长图

这是一开始的草稿

重新构思!

母亲,肯定是有孩子的妈妈,才是母亲这个角色扮演者

所以好办了,我看过很多各种歌颂母亲节的海报啊插画各种啊

大多数都会把母亲和孩子画在一起

或者说有些是女性用品巴拉巴拉

觉得画面是挺腻的

QQ音乐母亲节主题UI设计 母亲节H5长图

所以对于这个画面

我希望自己不要这么这么这么直接表达这种母爱

我觉得母亲这个角色

由一个婴儿的出生开始

想好了用婴儿来象征母亲之后

下一步再回想关于妈妈细微的爱

妈妈的爱很多很多都表达不完

但是我看过很多妈妈

在孩子还没出生前就已经为孩子准备衣物

编织帽子、鞋子、衣服等等……

这些细节,都展示了母亲对孩子到来的期待

对未来生活的憧憬

所以我觉得毛线也可以作为一种视觉元素

用来代表妈妈对孩子的关爱

于是就有了一下这个图 

QQ音乐母亲节主题UI设计 母亲节H5长图

一个婴儿,抱着一团毛球

当然要回归主题,为qq音乐设计嘛

少不了要出现qq音乐的元素

而logo就是一个品牌最好识别的元素

最终,我就画出这个婴儿抱着一个用毛线做成的音乐符号

借助这个画面,来表达母亲对孩子的关爱

再引出后面的主题"给妈妈的音乐情书"

根据产品所说的母亲节的味道"温馨"……

还有色调说要复古韵味,于是最终的上色就走这个方向

结合了qq音乐原来的颜色做的调节

QQ音乐母亲节主题UI设计 母亲节H5长图

顺利完稿

关于内页的思考

QQ音乐母亲节主题UI设计 母亲节H5长图

每一个画面,背后都有一个故事。

比如这个页面,围绕着范玮琪的《路》这首歌词来构思

你就会看到 爱的力量

一加一点点凝望

我们才看到 爱的漂亮

一加一点点紧张

我现在的职业是设计师

加班熬夜常有

再我累的时候,母亲偶尔会炖炖汤给我补补

让我感觉再累也觉得幸福的

就如歌词传递的感受一样

一点点的积累,汇聚成伟大的母爱