5步打造APP节日主题设计:以Lofter新年图标设计为例-小专栏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

针对设计初稿,视觉内部进行设计评审:

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

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

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

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

方案一:增加烫金质感,以及细节元素的搭配;

方案二:针对细节进行了调整,调整层次感;

方案三:在原有基础上进行优化,使设计更有质感,更拟物化。

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

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

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

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

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

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

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

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

4.3运营主题活动:

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

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

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

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

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

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

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

THE END
1.UI基础界面图标规范图标绘制规范,一文看...来自阿多比设计UI基础|界面图标规范图标绘制规范,一文看懂! 好的图标设计不仅仅是美化界面的元素,也是传递信息、增强交互体验的重要工具,更是一个设计师专业力的体现。 整理了6条图标设计规范,在日常设计中灵活运用,...https://weibo.com/6500079170/P1uasklgd
2.视觉设计方法大放送——3分钟了解图标设计按照图标的绘制手法,图标可分为矢量图标和手绘图标。 矢量图标/手绘图标 图标设计 图标设计的核心思想,就是尽可能地发挥图标的优点——比文字直观、比文字漂亮;减少图标的缺点——不如文字表达准确。 图标设计遵循以下三个原则,即可用性、美观性和原创性。 https://www.gameres.com/847710.html
3.一篇文章,带你看懂功能图标设计!Halo,这里是设计夹,今天分享的是「功能图标设计」。 本文将详细介绍功能图标在现代软件和应用程序界面设计中的定义、作用、种类、设计原则、设计方法和注意事项等方面的内容。 功能图标作为界面设计的基础组成部分,其设计和使用对于提高用户的效率、体验和满意度具有重要作用。 https://www.niaogebiji.com/article-666120-1.html
4.Qt绘图指南:掌握高效美观的GUI设计之道QPainter是Qt框架中用于在绘图设备(如QWidget、QPixmap、QImage等)上进行绘图的类。它提供了丰富的绘制方法,如绘制直线、矩形、椭圆、多边形等。QPainter还提供了绘制文本、图像、路径等功能。在进行绘制操作时,QPainter会考虑当前的状态,如坐标变换、裁剪区域、画笔、画刷等。 https://developer.aliyun.com/article/1463725
5.你应该知道的65个设计术语10 个基本设计术语 什么是构图? 构图,也称为布局,是创建完整图像的设计元素的视觉排列。在一个作品中,您可以使用不同的设计原则来创建视觉上令人愉悦的作品,以提供功能性布局。 什么是设计中的平衡? 放置在页面上的任何元素都具有视觉权重,可能会受到形式、大小、颜色和纹理的影响。为了使布局平衡,某些元素可能需要...https://www.szfangwei.cn/news/6524.html
1.最新图标设计趋势与特点概述新闻摘要:最新风格的图标设计趋势与特点体现在简洁、抽象、扁平化、动态和个性化等方面。设计师们追求极简主义,以简洁的线条和形状表达图标含义,同时注重抽象表现,引发观众联想。扁平化设计成为主流,色彩鲜明、对比强烈。动态图标和...http://www.czshengmei.cn/post/11756.html
2.可爱小图标设计与应用指南简介:在图形设计领域中,图标设计对用户界面(UI)至关重要,特别是对于论坛和网站。它们通过简洁的图形传达功能或信息,增强用户体验。本主题将探讨图标的设计原则、格式选择、设计工具、版权问题以及应用场景,旨在帮助设计师创建吸引人的视觉元素。 1.图标设计的原则和重要性 ...https://blog.csdn.net/weixin_36431814/article/details/144124458
3.轻松绘制Icon图标,提升新媒体视觉效果在深入探讨如何绘制Icon之前,我想先和大家聊聊Icon的基础知识。Icon,即图标,是界面中用于表示功能、文件、程序或命令等视觉元素的图形符号。它们虽小,却承载着巨大的信息量,是用户与界面交互的重要桥梁。 1、Icon的设计原则 设计Icon时,应遵循简洁明了、易于识别、色彩搭配和谐等原则。简洁的线条和形状,能让Icon在众多...https://www.batmanit.cn/blog/k/52326.html
4.「设计方法」UI工作流程指南(一)设计时原型的类别也需要关注,每个项目启动时对原型的需求不一定都相同,交流的对象也有可能会对原型的类别产生混淆,以为线框图(Wireframe)、原型(Prototype)和视觉稿(Mockup)是一个东西,设计最好先与产品经理/甲方开始就确认要绘制什么类型的原型。 三种类别虽然产出效果不同,但在本质上都是一样的,为设计开发服务,...https://maimai.cn/article/detail?fid=1432760722&efid=WECXIWo5VTVdp8MWzUWhCA
5.制图实训报告(20篇)本实训的目的在于把握AutoCAD用于工程制图的基本操作,了解工程图纸绘制的格式和要求,工程图样绘制和阅读工程图样的原理和方法,培养形象思维能力,要求我们能够用AutoCAD绘制二维的工程图纸,理论和实践紧密结合,通过《机械制图课程设计》做了一套工程图样的操作实例。 目的与任务: 1、了解工程图纸的一般要求和格式并绘制平面工...https://www.ruiwen.com/shixunbaogao/7300946.html
6.icon的设计原则有哪些在设计图标时,有一些基本原则需要遵循。首先,图标应该简洁而明确,能够清晰地传达出所代表的概念或功能。其次,图标应该具有一定的普遍性,以便于不同文化背景和语言环境的人们都能理解和使用。此外,在设计过程中还应注意细节,并确保图标与相关文字的配合协调。在选择图标元素时,建议优先考虑自然界中已有的形状和形式。这...https://wap.zol.com.cn/ask/details_20545874_2787619_3.html
7.阿里云设计语言:打造云计算设计领域的语言体系MySecretRainbow在计算设计语言引领下,阿里云图标以极简的几何形态作为识别特性。在图标设计时应避免无序、无逻辑、不稳定的随机形态,一切形态表现均应在一个无形的几何空间内完成。 所有二维图标应绘制在相应大小的基础方形网格框架上,轮廓线的笔划宽度固定。这样可以确保图标在导出时将保留其所需的比例和周围空白区域的一致性。 http://www.mysecretrainbow.com/blog/22653.html
8.人机交互2交互设计的原则与方法SpriCoder的技术博客交互设计的原则与方法 交互设计中的问题 尽量减少用户需要记忆的部分 缺乏反馈 1. 目标Goal vs. 意图Intention 单个目标可对应多个意图 举例:删除文档中的部分内容的目标 意图1:通过编辑菜单删除 意图2:通过删除按钮删除 每个意图可包含一系列活动 2. EEC模型 ...https://blog.51cto.com/u_16038001/6159133
9.个人实训总结通用15篇在绘制图形是时,仅仅绘制好的图形还不能看什么来,也不足以传达足够的设计信息。 只有把尺寸标住标在自己的图形上面,就会让看图者一目了然,CAD提供的尺寸标注功能可以表达物体的真实大小,确定相互位置关系使看图者能方便快捷地以一定格式创建符合行业或项目标准的标注。 https://www.unjs.com/fanwenwang/gerenzongjie/20230423182512_6935637.html
10.图标设计的三个小原则还有个问题要点一下大家:就是在设计图标的过程中,我全程都是用矢量工具绘制,然后做布尔运算,再用锚点去调整。如果用钢笔去勾可以是可以,但是如果水平不够高,曲线就会不协调。 差异性 设计一套图标时,要尽量放大图标之间的差异性,减弱图标之间的相似性,这是最容易被设计师忽略的一项原则,往往为了保持视觉风格的统一...https://www.jianshu.com/p/3bfc7b221a74
11.PhotoshopUI交互设计张晨起著第2章 图标设计 352.1 了解图标设计 362.1.1 什么是图标 362.1.2 图标设计的作用 362.1.3 图标设计的意义 362.2 图标设计的绘制原则 362.3 Photoshop图层的基本操作 412.3.1 新建图层 412.3.2 选择图层 422.3.3 复制、移动图层 422.3.4 重命名图层、删除图层 442.4 画笔工具 502.4.1 预设画笔工具 52...http://product.m.dangdang.com/detail1378434003-22159-1.html?main_pid=0
12.借“助农”软件产品设计,育爱党前端开发人才——《UI设计应用》课程思政典型...课前,通过任务单让学生了解疫情中外卖小哥;课中,将抗疫精神、规则意识、工匠精神、中国优秀传统文化等融入教学,通过感人外卖小哥视频导入,强调抗疫精神,引出教学任务;讲解设计原则中,体现规则意识;讲解设计方法中传导工匠精神和文化自信;图标绘制创作中传导创新精神和精益求精的工匠精神;课后,通过助农网图标的制作进一步...http://www.gxzjy.com/ztlj/kcszjxyjsfzx/cases/202208/t20220816_112426.html