网易实战案例：教你五步打造APP节日主题设计

我们需要做有依据、有逻辑、有理念的设计，需要散思、整合创意、严谨输出，让设计经得推敲。

2018春节已远去，一直把 lofter 新 logo 设思分享给家，直到整理出，希望这篇文章能给家一些思参考。

每当过节的候，市上大大的 APP icon 都进行了节日换装，作为视觉计，如何计出产品品牌相符合并能营造出节日氛围的设我们需思考的。下面以 lofter 新图标设例，分享一下当时的设思方法。

Lofter 是网易产品中资历比较老的一款产品了，主兴趣社，鼓励创，让有趣的用户拥有属于致圈为目标。怎为lofter进行新年换装，主要从以下五个阶段来阐述计过程。

一、设计背景

接到需求的时候，设师会从以下三方面行分析该需求的核问题：

1. 业务层面

这次换装的目的什么，换装这行符不符合 lofter 的品牌调性。过沟通，业务方希望通过换装渲染新的气氛，引起用户的关注，激发用户产品之间的互动，提高产品的日活跃度。

2. 设层面

除了烘托节日气氛之外，设师应该设出加精致，具创意性的设，能够效的传达品牌的理念，传递给用户能，增强用户的感认知。

3. 用户层面

此次换肤需考虑到用户的接受度，能否让用户感知到产品的意，能否给用户多的亲切感。

二、设计分析

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

1. 主题联想

针新年主题以及传统文化进思维发散，搜与相关词汇。如图：剪纸、雪花、联、雪、花、云纹、复窗户、灯笼、鞭炮、礼花、大红、等等。

2. 键词取

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

• 颜色：颜色用户表层的感知，根据Lofter的调性，我们把颜色比较能够体节日氛围的色系比较高贵优的烫金色系。
• 形状：可以根据剪纸、对、雪人、复古门窗等素进行提炼，进行方案计。
• 材质：可通过相的图案肌进行，使设计更精致的同时，更烘托节日的气氛。如说纹、纹等。

3. 视觉素提炼

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

针对视觉素提炼，形三设方案方向：

• 方案一：通春节对联的元素以及烫金纹理进行方案设计；
• 方案二：通过剪纸云纹的视觉素行方案延伸；
• 方案三：通过复古门窗及雪人相关素材进行计提炼。

三、设计执行

1. 草图绘制

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

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

从草图阶段进行评估，设计的行比符合设计需求，设计的创意需要通设计图的绘进一步推敲。

2. 设计稿的呈现

设计初稿主要针对草图绘的方案进行软件绘，次绘主要是呈现大效果，细节以续仔细推敲。三方案下图：

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

• 设计创意性上讲：案创意比较规矩，缺少些设计特色；案比较有想法，设计层和主题表现需要进步优化；案三有定创意性，元素鱼主题结合需要进步优化。
• 设计语言表达上讲：三个方案能够凸显节主题，氛围比浓厚，用户感也比强。
• 从设效果讲：方案一较于简洁，设特色相对弱一些；方案二层次感，比较特色；方案三一的特色，设效果细节待推敲。

针对视觉内部对设方案的建议，针对三方案行了细节的优化。

• 方案一：增加烫金质感，以及细节元素的搭；
• 方案二：针对细节行了调整，调整层次感；
• 方案三：在有基础上进行优化，使计更有质，更拟物化。

如图所示：

针对以方案，除了视觉组内部行估，还邀请需求运营方，产品方以及交互设方行多方设估建议收集。终选择方案二作新主题方案。

3. 优化设细节

针对方案二行设细节优化，主通过颜色、形状、质感三方面行一推敲。

• 颜色：由于 lofter 品色为沉稳绿色系，为了突出新年氛，颜色采用喜庆红色系，色上进反复尝试，找到视觉上最优案。
• 形状：由 lofter 是条形的 logo，为增强对比，突出视效果，背采用块面感的设计进行烘托。设计上主要采用视元素（梅花、云朵、建筑以及川）进行块面的叠加，在证背整感的同时，又不失次感和细节。
• 质感：图案肌理的运用，视觉主采用了剪纸元素行设，它不同于传统剪纸于运用了层次叠加的表手法，使画面加丰富，也当时比较流行的一种视觉表。肌理使用纹样装饰，丰富细节的同时彰显传统设元素的魅力。

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

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

四、设计延展

在最终敲定 logo 主题设计案时，为了用户带来致性体验感受和浓厚节日氛围，系列延展设计是十分必要。设计上可以过主题启动图、皮肤装饰以及运活动三进延展。以 logo 主题为心，过不层配套延展，相互烘托，使设计系列化、主题化。

1. 手机启图

在年 logo 方案上进行延展，户在打开 APP 的第一时间感受到节日的氛围。根据lofter 往的牌调性，开屏并没有采直接明了的祝福案和节日画面。而是通过视觉元素及轻量级的效从户感知这一题的寓意。启页画演示：

2. 皮肤装饰

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

3. 运营主题活动

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

五、设计落地

这一环节设中的后环节，也十分重的环节。如何让设稿高还原度的展给用户需设师端程师的一起努力。设落环节中主会出的问题：视觉还原度、页面配以及体验流程顺畅度。

1. 视还原度问题

其还原度应有一个标准，因为工程师不能100%还原视稿，所以需要设计师精细的走查，比说还原度需要在95%以上个标准才开始申请上。是对自己设计工的负责也是设计师需要培的良习惯和基原则。

2. 页面适问题

因为市场上出现各种机型，适工也比繁琐和重要，需要设计师和前端工程师一沟通，最达成一致为用户提供完美验。

3. 验流畅度

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

总结

通整个设计程以到，设计并非是简单的画图工。果要产出优的设计成果，需要一整套的设计方法来支撑自己的设计方案。虽仅仅是一个简单的新年主题 logo，它并非一时的灵感突现就以的，还要对整个业务需求，产品定位和设计理念等三方面进行深和分析而产出的结果。我们需要做有依据，有逻辑，有理念的设计，需要散思，整合创意，严谨输出，让设计经得推敲。

也希望每设师可以养良好的设习惯，跳出原的设思维，站高的层面去审视探究自己的设。

写在最后

这以数据话的时，其实家肯都知道设产出之后，效果怎样？数据如何？

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

注作者微信公众号：「仨人行设汇」