腾讯设计师:如何从零开始完成一套3D图标设计?

2022-07-30 10:57 717 浏览

QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级,其中也包括重要的图标图形。

1. 延展思考

因此基于目前较为完整的图标图形,希望可以拓展出更多不一样的设计内容,并且可以应用在不同的位置,例如空白页、运营内容、背景等等。

2. 问题分析

基于目前的图形可以很明显的得到 2 个问题:

  1. 图标的图形整体相对简单,延展使用比较受限;
  2. 2D 图标的视觉冲击力较弱,较难满足设计氛围的表现。

3. 设计启发

3D作为 2020 的主流设计趋势之一,可以很好地表达设计氛围。因此想尝试跨次元的设计方式,从 3D 图形的角度去思考,尝试更多可能性。

下面主要是分享我在制作 3D 图标中的一些方法和流程,以及 2D 与 3D 图形设计中思考的差异性,希望可以跟大家互相学习,一起探讨这方面的设计。

整体的流程及软件

虽然是 3D 的图标,但实际上使用到的软件包括有:Cinema 4D(C4D)、Sketch、Photoshop(PS)、illustrator(AI)。

整体的大概流程:

  • Sketch:绘制 2D 图标;
  • AI:转换路径(C4D 能够识别 AI 8.0 版本的路径);
  • C4D:建模、渲染、动画;
  • PS:后期输出的调整,包括饱和度、亮度、裁切等;
  • AE:最后合成所有动画,配置音效,最后输出完整视频。

2D向3D转化的基本原则

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 路径再挤出的方式来得到我们的模型。例如下面的图形


分享:
相关内容
  • 为了追求高性价比,我们通常这样来做页面适配
    通常产品经理在立项前都要思考需求的实现方式:是原生做?还是 H5 做?问题的答案会因实际情况有所不同,如果追求极致体验,那原生效果更好,如果追求短频快,那就选用 H5,或是两者结合。
  • 从这3个方面,快速了解产品图标设计体系的炼成
    那一次因为主题的缘故,不能偏题太远,所以对图标本身的讲解我没有进行太多的剖析,更多是在讲标签栏图标的切图、对接前端落地等项目实操的手法。于是有部分读者在后台给我留言,让我再全面地讲解一次图标。
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。
相关推荐
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。
资讯中心
热门内容
  • 企业助手【OA系统】
    企业助手OA系统具有个人办公、人事管理、客户管理、财务管理、行政管理5大功能模块,各模块匹配众多实用功能,满足不同公司的不同工作需求。
  • 网站建设
    双数据库引擎:集列表筛选、栏目绑定域名、内容同时发布到多个栏目,城市分站、栏目/内容扩展、自定义模型/表单等功能。电脑网站+手机网站+微信公众号+小程序 四种需求一次搞定。系统底层内置多层安全防护、有效应对安全检查。强大的内容模型及自定义表单管理。轻松实现筛选功能、丰富的插件一键安装。
  • 为了追求高性价比,我们通常这样来做页面适配
    通常产品经理在立项前都要思考需求的实现方式:是原生做?还是 H5 做?问题的答案会因实际情况有所不同,如果追求极致体验,那原生效果更好,如果追求短频快,那就选用 H5,或是两者结合。
  • 如何设计小程序?来看这份超全面的指南!
    最近正好在做小程序相关的项目,发现现在关于小程序相关的文章还比较少,能吸收的运用到实际工作中的技巧也「比较有限」,所以我想着自己来尝试写一篇「相对全面和实战」的文章,来帮助到越来越多做小程序的设计师们。
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。
Tags标签
联系方式
  • 18037000365
  • 18037000365
  • kefu@lymoshang.com