手机闪屏设计之道

产品经理就业特训营,专门为大学生和准备转型做产品的人量身定制,60天线下培训,包就业!了解详情

0Z2593294-0
  每逢节日到来,当你打开QQ浏览器,发现有什么不同吗?QQ浏览器已经悄悄的送出了节日的关怀,呈现在你眼前的是朴实而又温情的画面——节日闪屏。她是浏览器和用户情感交流的窗口,也是传递节日祝福的桥梁。在不同的节日传达不同的人文关怀,变换不同的表现形式,无论是为你带来一秒静静的感动,或是纯净的莞尔一笑,我们都希望闪屏的氛围能给用户带来一个美好的心情,一段温暖的时光。

0Z2595F6-1
  节日闪屏的构成要素

品牌logo+口号Slogan+闪屏图案Graph

0Z25a2C-2
  在这里,节日闪屏有两种构成方式:

1、以手机屏幕的最小边为边长的正方形非全屏的闪屏,其余部分靠色彩来填充,节省空间,突出代表性事物,表达简单明了;

0Z25942L-3
  第二种:以屏幕的最长边为边长的正方形全屏的闪屏,全屏让视觉效果更鲜明,色彩和氛围更具感染力。

0Z2591100-4
  了解节日文化背景,重视情感共鸣

节日文化是一种历史沉淀,是一个国家或民族在漫长的历史过程中形成的民族文化、风俗和习惯。我们不仅要关注节日文化,更应该关注的是用户对节日文化的理解。相同的成长经历,相同的背景,对节日的看法和理解相同,站在用户的视角,说用户想说的话,创造用户的故事,让用户受到感染,达到和用户的情感共鸣。

0Z259B14-5
  了解用户群

不同年龄层对文化的理解不同,感受也不同,那我们浏览器的用户是哪些人群呢?

0Z25a443-6
  上图所示,浏览器的用户群是一个非常年轻的群体,关键词总结如下:

0Z2593C4-7
  故事情节和节日氛围

故事情节是支撑画面的灵魂,趣味性固然能引起注意,但是我们还是要根据节日氛围来打造合理的故事情节:愚人节可以是诙谐的生动有趣的;情人节自然是浪漫的爱意弥漫的;清明节应该是肃穆的充满怀念的。浓郁的节日氛围将会拉近和用户的距离,此时需注意节日的季节和画面的时节相对应,这样更容易产生共鸣。

清明节的印象大概已经定格在“清明时节雨纷纷,路上行人欲断魂”,看看网上的图片,清明节都是千篇一律的水墨来表现“牧童遥指杏花村”,对于我们年轻的用户群,究竟什么样的氛围和情节能打动用户呢?

0Z2592440-8
  正值这个清明时节,刚好是草长莺飞,春寒料峭,春雨纷飞,这样一个诗一样的季节,我们打造的氛围也偏向了这样一个文艺的路线,于是想到的关键词是春雨、怀念、伤感。

雨的氛围确定了,故事情节我们还是确定为“雨中的思念”,远远的雨巷中,陈旧的石板路被雨冲洗着,两旁的年代久远的院墙诉说着古老,屋檐上滴滴答答的雨声似乎传递着遥远的思念。

0Z25913Q-9
  首先汇出我们绘制想象中的场景,还是先用简化素描的形式勾勒出场景的大体轮廓;

0Z2593E0-10
  然后晕染出淡淡的丁香色,此时再填上画面的主角:丁香一样的少女、淅淅沥沥的春雨……

0Z25945M-11
  最终效果如下:

0Z2594402-12
  盛夏炙热的阳光下,画面定格在高考倒计时紧张的氛围中。阳光、黑板、课本、空无一人的教室,把你拉回到那段回忆中。

0Z25a295-13
  还记得圣诞时期待收到礼物的心情吗?大雪纷飞,冰天雪地,但心里却暖暖的。

0Z2593K3-14
  由代表性事物入手,从主题中提炼色彩

如果想要主题鲜明,最好的方法莫过于直接列举关键要素,由关键要素提炼色彩:

0Z2596361-15
0Z2592238-16
0Z2594095-17
0Z2595R0-18
  表现设计闪屏的视觉风格的技巧

1. 首先用简化素描来表达

用简化素描来表达基本的故事情节,设计思想简单明了,更能提高效率;在设定视觉风格之前,都使用简化素描将故事情节描绘数张,以备挑选。简化素描可在纸上进行,也可直接临摹照片形象,只要略勾勒出轮廓、神态即可。

0Z2591034-19
0Z2593448-20
  2. 用简单的方法模拟不同流派的视觉风格

从美术巨匠的作品得到灵感,模拟不同流派的视觉风格,这样不仅能提升艺术品质,更让我们追随历史的足迹感受艺术的熏陶,让工作也变得更加有乐趣;

下图是超现实主义代表胡安.米罗的《哈里昆的狂欢》:单纯朴素被简化的形体、轻松明亮的色彩,童心、古怪、具有幽默感,经过简化而得出抽象的形体。

0Z25aW0-21
  值得学习的还有历史上的很多名家巨匠:

比如立体主义的创始人毕加索,将对象的分割与重组,表达真实感受;追随感觉的浪漫主义画家约翰.康斯特布尔;简化事物,强调个性化色彩的马蒂斯,模仿这些名家的作品,更会一步步接近经典的秘密。

0Z2591a9-22
  现在,让我们来模拟野兽派画家马蒂斯的《红色中的和谐》,注意模拟风格的特点是简化对象并强调个性化色彩,原作如下:

0Z2593M3-23
  具体步骤如下:

0Z2594L5-24
  节日闪屏的发展方向

闪屏不应该仅仅只作为单方面传递信息给用户,还需要得到用户的反馈,和用户互动,才能实现与用户更深层次的交流,增加用户对产品的情感依赖。

来源:腾讯WSD

评论
有话不说憋着难受
  1. 好文!学到了

    回复
  2. 人家这个是画的吧

    回复
  3. 什么时候,俺才能做这么漂漂的图片啊 !! (撇嘴)

    回复
    1. 你又不是WUI,汗。。。。

      回复