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

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

前言

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中国专业体验设计平台

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

五步打造持续变现知识IP
知识付费时代,不少拥有自己的特长.爱好的普通人,找到合适的工具和平台,也能放大个人势能,实现知识变现. 那么,拥有知识.经验.技能干货的内容创作者,可以怎么做好私域运营,持续放大用户价值,打造超级带货 ...
UI设计中面性图标设计总结
图标在UI设计中占了一席之地,不同风格的图标会影响页面整体风格效果.主流的图标可分为线性.面性.线面结合3大类,之前跟大家分享过线性图标今天我就来跟大家聊聊面性图标设计总结. 1.图标的作用事物的价 ...
【设计经验传承】图标设计初阶要先型
UI最重要组建之一就是图标,随着扁平化设计的发展趋势,越来越注重图标的简洁与寓意表达,平面图标已占主导地位.每位设计师所处的阶段所关注的要点是不一样的,我把图标设计分为2个阶段–初阶与高阶,这样分是为 ...
轻松6步完成App开发
在门外汉来看,App制作是一件非常困难的事情,然而使用APICloud快速高效App开发平台,轻松6个步骤就可以完成App制作和开发.我想大家都想知道为什么选择APICloud,而非其他平台.下面我就 ...
keil5图标变成白色_设计师必看的图标设计指南「下」
书接前文,图标设计指南下篇. 我们了解了 icon 的基本知识,那么如何设计一个好的 icon 呢?怎样评判我们的 icon 是否合适,是否贴合整个产品呢?我们需要了解什么才是一个好的 icon . ...
制作一个状态栏中跑马灯效果_图标设计指南(3)——制作一个图标集所需全部信息（中）...
本文翻译自图标设计专家Justas Galaburda写的图标设计指南.本文主要介绍制作一个图标集所需全部信息(中).翻看同系列文章,直接到文章最底部. 制作一个图标集所需全部信息上次我们介绍了我将 ...
值得借鉴的新年海报设计|PSD分层模板，图层素材随心用
新年新气象,很多平面设计师们都在紧锣密鼓的准备新年的设计素材了.优图网带来值得借鉴的新年海报设计模板,易于编辑的psd源文件,只需使用此牛年素材制作漂亮的设计即可,可用于贺卡.横幅.海报.传单.问候卡 ...
ui设计现状与意义_UI设计的现状如何？
UI 设计的发展,一直跟整个行业密切相关.随着移动互联网的起步,UI 设计圈子整体也经历了同步的飞速提升,然后在到需求相对平稳的一个状态. 近五年,基本上已经从 UI 设计师供不应求的状态进入了一个需 ...
图标设计五条黄金法则
图标如今它们无处不在,并且在用户界面(UI设计)的中扮演着重要角色.无论您是一位有出色的用户界面设计师,还是想要提高视觉设计技能的UX设计师,图标设计过程都是至关重要的一步.今天胡老师带大家学习图标设 ...

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

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

最新文章

热门文章