717
浏览QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级,其中也包括重要的图标图形。
1. 延展思考
因此基于目前较为完整的图标图形,希望可以拓展出更多不一样的设计内容,并且可以应用在不同的位置,例如空白页、运营内容、背景等等。
2. 问题分析
基于目前的图形可以很明显的得到 2 个问题:
3. 设计启发
3D作为 2020 的主流设计趋势之一,可以很好地表达设计氛围。因此想尝试跨次元的设计方式,从 3D 图形的角度去思考,尝试更多可能性。
下面主要是分享我在制作 3D 图标中的一些方法和流程,以及 2D 与 3D 图形设计中思考的差异性,希望可以跟大家互相学习,一起探讨这方面的设计。
虽然是 3D 的图标,但实际上使用到的软件包括有:Cinema 4D(C4D)、Sketch、Photoshop(PS)、illustrator(AI)。
整体的大概流程:
3D 与 2D 最大的差别在于多一个维度来表达图形,因此我们在 2D 向 3D 转化的过程中,需要思考一些基本的原则,并且结合这些规则,降低 3D 图标与 2D 图标违和感。在这次的 3D 图标中我总结了以下几条基本规则。
1. 圆变球
在 3D 软件中表达圆有 2 种方式:球体、圆柱体。在实际的设计中,我们需要根据实际情况判断是否变成球体或者圆柱体,这里建议单体呈现的圆形设计成球体,在这种情况下球体相比圆柱体更能表达圆形的视觉感受。
例如下面气泡的例子,球体化的表现比圆柱体化的表现更加饱满,光影效果更加丰富。
2. 方变块
与上面的规则比较接近。当我们在 2D 图标中使用矩形之类的图形,建议使用立方体来表达。优点:立方体可以增加图标上的细节表现;增加厚度更有利于光影的表达。
例如下面礼物的图标,我们在实际的 3D 场景下应该更贴合现实生活中的认知,设计成礼物盒子的效果。
3. 结合实际认知
除以上的 2 种建议之外,我们在实际建模的时候还需要结合实际认知而定。例如金币、游戏卡的设计应该是带有厚度的片形;钱包设计成折叠的效果。
4. 适当简化图形
2D 图标向 3D 图标的转换过程中,需要适当进行简化,一些不必要的内容可以适当进行删减。主要的目的是:
5. 增强空间思维
2D 的图标只有一个平面,因此大部分情况下是一种「纸片性」的思维,常规的 2D 向 3D 的转换思维是增加厚度,但实际上出来的效果并不理想。因此在转换的过程中,需要使用空间的思维去思考,在 3 维的空间中应该是怎么样的。例如下载和收件箱的图标,常规的思维可能是在 2D 的图标上增加厚度,但转换成空间思维就是让其具有立体感和空间感的形体。
6. 图标状态补充
在实际建模的中会发现,很多模型在静态下是可以进行简单处理的,但结合动态或实际认知,就需要相关细节状态补充。例如礼物和宝箱图标的开盖效果,因此把实际的盖子和盒子/箱子的模型做出来,以便于动画的实际表达。
在进入 C4D 之前,需要清楚不同图形可以使用什么方式建模,因此我们可以进行一个简单的分类,分为:常规图形和异形。两种图形在建模中的方式会有一些小差异,当然一个图标也可能包含这两种类型,因此实际操作中可以灵活处理。
1. 常规形:使用基础物体建模
部分简单的有规则的图形,可以直接使用 C4D 的基础物体(例如:立方体、球体、柱状体、锥体等),通过对基础物体的调整后得到模型,例如下面的图形。
案例展示
2. 异形:AI路径+挤出
在实际操作的过程中发现部分模型较难通过基础形调整得到,或是直接建模会比较耗时。因此我们可以导入 AI 路径再挤出的方式来得到我们的模型。例如下面的图形