五步打造APP节日主题设计:以Lofter新年图标设计

图标设计 急速飞驰 浏览

小编:我们需要做有依据、有逻辑、有理念的设计,需要发散思维、 太阳城娱乐城 整合创意、严谨输出,让设计经得起推敲。 2018年春节已远去,一直想把lofter新年logo设计思路分享给大家,

  我们需要做有依据、有逻辑、有理念的设计,需要发散思维、太阳城娱乐城整合创意、严谨输出,让设计经得起推敲。

  2018年春节已远去,一直想把lofter新年logo设计思路分享给大家,直到现在才整理出来,希望这篇文章能给大家一些思路和参考。

  每当过节的时候,市场上大大小小的APP icon都进行了节日换装,作为视觉设计师,如何设计出与产品品牌相符合并能营造出节日氛围的设计是我们需要思考的。下面以lofter新年图标设计为例,分享一下当时的设计思路和方法。

  Lofter是网易产品中资历比较老的一款产品了,主打兴趣社区,鼓励原创,让有趣的用户拥有属于自己精致圈子为目标。怎样为lofter进行新年换装,主要从以下五个阶段来阐述设计过程。

  这次换装的目的是什么,换装这个行为符不符合lofter的品牌调性。经过沟通,业务方希望通过换装来渲染新年的气氛,引起用户的关注,激发用户和产品之间的互动,进而提高产品的日活跃度;

  除了烘托节日气氛之外,设计师应该设计出更加精致,更具有创意性的设计,能够更有效的传达品牌的理念,传递给用户正能量,增强用户的情感认知。

  此次换肤需要考虑到用户的接受度,能否让用户感知到产品的寓意,能否给用户带来更多的亲切感。

  明确设计需求之后,需要针对需求进行分析,设计师从:主题联想、关键词提取、视觉素材提炼三步进行设计提炼。

  针对新年主题以及传统文化进行思维发散,搜集与之相关的词汇。如图:剪纸、雪花、对联、雪人、梅花、云纹、复古窗户、灯笼、鞭炮、礼花、大红,烫金等等。

  针对提取的关键词,进行视觉元素匹配,搜集相应的视觉素材作为设计参考,下图仅为部分参考图作为展示:

  很多设计师在做设计的时候会忽略这一步骤,草图的绘制虽不需要太精美但它却是不可缺少的。设计师通过绘制草图更简单直接呈现自己的灵感、想法,并针对相关设计方案进行初步的设计评估,从而更好的把握设计的可行性和创意性。

  从草图阶段进行评估,设计的可行性都比较符合设计需求,设计的创意性需要通过设计图的绘制进一步推敲。

  设计初稿主要针对草图绘制的方案进行软件绘制,这次绘制主要是呈现大效果,细节可以后续仔细推敲。三方案如下图:

  针对以上方案,除了视觉组内部进行评估,还邀请需求运营方,产品方以及交互设计方进行多方位设计评估和建议收集。最终选择方案二作为新年主题方案。

  针对方案二进行设计细节优化,主要通过颜色、形状、质感三个方面进行进一步推敲。

  :由于lofter品牌色为沉稳的绿色系,为了突出新年气氛,颜色采用喜庆的色红色系,色彩上进行反复尝试,找到视觉上最优的方案。

  :由于lofter是线条形的 logo,为了增强对比性,突出视觉效果,背景采用了块面感的设计进行烘托。设计上主要采用视觉元素(梅花、云朵、建筑以及山川)进行块面的叠加,在保证背景整体感的同时,又不失层次感和细节。

  :图案和肌理的运用,视觉上主要采用了剪纸元素进行设计,它不同于传统剪纸在于运用了层次叠加的表现手法,使画面更加丰富,也是当时比较流行的一种视觉表现。肌理上使用纹样装饰,在丰富细节的同时彰显传统设计元素的魅力。

  在最终敲定logo主题设计方案的同时,为了给用户带来一致性的体验感受和浓厚的节日氛围,系列的延展设计是十分必要的。设计上可以通过主题启动图、皮肤装饰以及运营活动三方面进行延展。以logo主题为中心,通过不同层面的配套延展,相互烘托,使设计系列化、主题化。

  在新年logo方案上进行延展,用户在打开APP的第一时间感受到节日的氛围。根据lofter以往的品牌调性,开屏并没有采用直接明了的祝福文案和节日画面。而是通过视觉元素以及轻量级的动效从让用户去感知这一主题的寓意。启动页动画演示:

  产品设计中,为了烘托节日氛围,通过底部导航 icon换装是产品常用的设计策略。由于该产品换肤规则仍需完善以及设计时间成本考虑,很遗憾,本次主题没有涉及此模块的延展。但是作为系列延展之一,设计师针对这一模块进行设计可以从品牌调性,视觉一致性上进行分析研究。

  为了提高用户的活跃度和用户粘性,除了视觉层面的语言输出配套的运营活动进行氛围的营造是十分关键的。Lofter推出了新年记赢取福袋的活动,视觉风格与新年主题保持一致,活动涉及到各个标签领域,通过时间推进的方式逐一展开,使节日氛围保持着一定的热度。如图为活动的推广 banner,H5等相关页面:

  这一环节是设计中的最后环节,也是十分重要的环节。如何让设计稿高还原度的展现给用户需要设计师和前端工程师的一起努力。设计落地环节中主要会出现的问题:视觉还原度、页面适配以及体验流程顺畅度。

  其实还原度应有一个标准,因为工程师不可能100%还原视觉稿,所以需要设计师精细的走查,比如说还原度需要在95%以上这个标准后才开始申请上线。这是对自己设计工作的负责也是设计师需要培养的良好习惯和基本原则。

  因为市场上出现各种机型,适配工作也比较繁琐和重要,这需要设计师和前端工程师一起沟通,最后达成一致为用户提供完美体验。

  其实不管是做运营活动还是产品设计,体验流畅度至关重要。为了提高流畅度和新鲜感,设计师会针对一些界面增加转场动效和点触动效。运营活动基本上以H5实现为主,大多数情况不能像原生效果相媲美,因此动效层面的使用需要更加考究和精准,才不会本末倒置。

  通过整个设计过程可以了解到,设计并非是简单的画图工作。如果要产出优秀的设计成果,需要一整套的设计方法来支撑自己的设计方案。虽然仅仅是一个简单的新年主题logo,它并非一时的灵感突现就可以的,还要对整个业务需求,产品定位和设计理念等三方面进行深入了解和分析而产出的结果。我们需要做有依据,有逻辑,有理念的设计,需要发散思维,整合创意,严谨输出,让设计经得起推敲。

  也希望每个设计师可以养成良好的设计习惯,跳出原有的设计思维,站在更高的层面上去审视和探究自己的设计。

  在这个以数据说话的时代,其实大家肯定都想知道设计产出之后,效果怎样?数据如何?

  新年版本上线之后,加上运营活动的开展,虽然起初有部分用户对这次的改变有点不适应,但是从数据上来看,上线%,在接下来的一段时间内也保持着高增长量(由于数据比较敏感,具体数据这里就不详细列出)。通过产品策划、市场运营、交互和视觉的相互配合,此次设计方案达到业务需求,在渲染节日氛围的同时,引起用户的关注,激发用户和产品之间的互动,进而提高产品的日活以及用户粘性。

  作者:仨仨(姬广如),网易UEDC资深视觉设计师,曾从事旅游、体育、金融等领域视觉设计。希望荣国不断的努力,设计出用户喜爱的产品

当前网址:http://www.builder.org.cn/linggan/icon/431.html

 
你可能喜欢的: