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

Posted 2020-11-09 Leo雷

我们需要做有依据，有逻辑，有理念的设计，需要发散思维，整合创意，严谨输出，让设计经得起推敲

 

前言

 

?

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

 

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

 

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

 

 

 

 

1、设计背景

 

 

接到需求的时候，设计师会从以下三个方面进行进行分析该需求的核心问题：

 

 

1.1 业务层面：

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

 

 

1.2 设计层面：

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

 

 

1.3 用户层面：

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

 

 

 

 

 

2.设计分析

 

 

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

 

 

 

2.1 主题联想：

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

 

 

 

 

2.2 关键词提取：

根据思维发散词汇进行色、形、质进行分类归纳：

 

 

 

 

颜色：颜色是用户最表层的感知，根据lofter的调性，我们把颜色定位在比较能够体现节日氛围的红色系和比较高贵优雅的烫金色系上

 

形状：可以根据剪纸、对联、雪人、复古门窗等元素进行提炼，进行方案设计。

 

材质：可以通过相关的图案肌理进行装饰，使设计更加精致的同时，更能烘托节日的气氛。比如说云纹、回纹等。

 

 

2.3视觉素材提炼：

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

 

 

针对视觉素材提炼，形成三个设计方案方向：

 

方案一：通过春节对联的元素以及烫金纹理进行方案设计；

 

方案二：通过剪纸和云纹的视觉素材进行方案延伸；

 

方案三：通过复古门窗及雪人相关素材进行设计提炼。

 

 

 

 

 

 

 

3.1 草图绘制：

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

针对设计分析所得出三个方案如下图：

 

 

 

 

 

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

 

 

3.2 设计稿的呈现：

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

 

 

针对设计初稿，视觉内部进行设计评审：

 

 

设计创意性上讲：方案一创意比较中规中矩，缺少一些设计特色；方案二比较有想法，设计层次和主题表现需要进一步优化；方案三有一定创意性，元素鱼主题的结合需要进一步的优化。

 

 

设计语言表达上讲：三个方案都能够凸显节日主题，氛围都比较浓厚，用户感知也比较强。

 

从设计效果来讲：方案一较于简洁，设计特色相对弱一些；方案二有层次感，比较有特色；方案三有一定的特色，设计效果细节有待推敲。

 

 

 

针对视觉内部对设计方案的建议，针对三个方案进行了细节上的优化。

 

方案一：增加烫金质感，以及细节元素的搭配；方案二：针对细节进行了调整，调整层次感；方案三：在原有基础上进行优化，使设计更有质感，更拟物化。如图所示：

 

 

 

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

 

 

 

3.3 优化设计细节：

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

 

 

 

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

 

 

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

 

 

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

 

以下为通过不同纬度进行细节推敲方案稿：

 

 

 

针对各方面的优化和推敲最终形成了我们的设计方案如图：

 

 

 

 

 

 

 

4.设计延展

 

 

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

 

 

 

 

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

 

 

 

 

 

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

 

 

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

 

 

 

 

 

 

5.设计落地

 

 

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

 

 

 

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

 

 

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

 

 

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

 

 

总结

 

 

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

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

 

 

写在最后：

 

 

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

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

 

编辑：千锋UI设计

来源：UI中国专业体验设计平台