推荐

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

2021-04-19 00:00 5082 浏览

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


 

分享:
相关内容
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
  • 从这3个方面,快速了解产品图标设计体系的炼成
    那一次因为主题的缘故,不能偏题太远,所以对图标本身的讲解我没有进行太多的剖析,更多是在讲标签栏图标的切图、对接前端落地等项目实操的手法。于是有部分读者在后台给我留言,让我再全面地讲解一次图标。所以这一期我将分三个步骤来总结一下一个产品图标体系的诞生。认识:图标的分类不论是从应用场景还是视觉效果来讲,图标的种类都是非常繁多的。所以对
  • 用一篇干货,帮你完整掌握这套系统的竞品分析方法论
    引言在产品设计中,竞品分析是一项必备的基本技能。做竞品分析本身并不难,网络上到处都是可以参考的模板,但是怎么从这个过程中总结提炼出最有效的关键信息、为后续的业务决策/设计工作带来较大参考价值,而不是产出一份看上去详实全面却是花瓶报告,仍然值得我们不断去思考。今天这篇文章参考张在旺老师的《有效竞品分析》一书,从流程、工具、方法等方面介
  • 为了追求高性价比,我们通常这样来做页面适配
    为什么要适配通常产品经理在立项前都要思考需求的实现方式:是原生做?还是 H5 做?问题的答案会因实际情况有所不同,如果追求极致体验,那原生效果更好,如果追求短频快,那就选用 H5,或是两者结合。CCtalk 是个涉及 7 大端的跨平台产品:iOS、Android、PC、Mac、Web、触屏、小程序。我们在日常项目中(尤其是用户增长类的项目)越来越多选择用 H5 实现,然后以低成本适
相关推荐
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
  • 从这3个方面,快速了解产品图标设计体系的炼成
    那一次因为主题的缘故,不能偏题太远,所以对图标本身的讲解我没有进行太多的剖析,更多是在讲标签栏图标的切图、对接前端落地等项目实操的手法。于是有部分读者在后台给我留言,让我再全面地讲解一次图标。所以这一期我将分三个步骤来总结一下一个产品图标体系的诞生。认识:图标的分类不论是从应用场景还是视觉效果来讲,图标的种类都是非常繁多的。所以对
  • 用一篇干货,帮你完整掌握这套系统的竞品分析方法论
    引言在产品设计中,竞品分析是一项必备的基本技能。做竞品分析本身并不难,网络上到处都是可以参考的模板,但是怎么从这个过程中总结提炼出最有效的关键信息、为后续的业务决策/设计工作带来较大参考价值,而不是产出一份看上去详实全面却是花瓶报告,仍然值得我们不断去思考。今天这篇文章参考张在旺老师的《有效竞品分析》一书,从流程、工具、方法等方面介
  • 为了追求高性价比,我们通常这样来做页面适配
    为什么要适配通常产品经理在立项前都要思考需求的实现方式:是原生做?还是 H5 做?问题的答案会因实际情况有所不同,如果追求极致体验,那原生效果更好,如果追求短频快,那就选用 H5,或是两者结合。CCtalk 是个涉及 7 大端的跨平台产品:iOS、Android、PC、Mac、Web、触屏、小程序。我们在日常项目中(尤其是用户增长类的项目)越来越多选择用 H5 实现,然后以低成本适
热门内容
  • 想做好线下物料?收了这份平面设计师必修的基础印刷知识
    如果一个设计师对印刷流程和工艺不够了解,那么作品落地时必将大打折扣,所以了解印刷技术方面的基础知识,是每个平面设计师的必修课。平版印刷平版印刷是将油墨印至橡皮滚筒,再藉由压力滚筒印刷至纸上。这是多种印刷方式中最常见的一种,印刷质量较好,图文精细、层次丰富,图像色彩的还原性好,大部分画册、海报、杂志、书刊、包装等都是用单张纸平版胶印
  • 如何设计小程序?来看这份超全面的指南!
    前言最近正好在做小程序相关的项目,发现现在关于小程序相关的文章还比较少,能吸收的运用到实际工作中的技巧也「比较有限」,所以我想着自己来尝试写一篇「相对全面和实战」的文章,来帮助到越来越多做小程序的设计师们。小程序的发展史2017 年 1 月 9 日,张小龙在 2017 微信公开课 Pro 上发布的微信小程序正式上线。2017 年 1 月 9 日微信小程序平台正式发布,在业界
  • 用经典的设计原则,深度解析闲鱼的用户体验设计
    今天我们主要从用户体验的部分原则来看闲鱼,主要以产品视觉设计四大原则、交互设计十大可用性原则、情感化设计来看闲鱼,今天先讲两个部分:视觉和交互的用户体验。其实主要是因为用户体验分为这个几个方面:视觉的感官体验,给用户带来的是视觉表现层的体验,所以我们把产品视觉设计四大原则来对照用户的感官体验。交互的用户体验,也就是产品设计中给用户
  • 资深UI设计师搞定输入框和表单的20个秘诀
    编者按:这篇文章来自资深设计师Taras Bakusevych,长期从事金融和企业类数字产品的设计,在表单设计领域造诣精深。这篇文章梳理了他总结的 20 条表单和输入框的设计经验,实用性极强。表单是 UI 界面中最为常见的元素,它通常是用来搜集和呈现一些数据、信息和特定的字段。在现实世界中,印刷的表格存在的时间更为久远,它们身上有很多设计可以作为重要的参考,帮助
  • 设计师们,别停留在以用户为中心的时代了
    在互联网的下半场,初期的各种红利被消耗殆尽,用户变得越来越难「伺候」,获取用户的成本也越来越高。这个时候我们不再像蓝海市场(指:当今还不存在的产业)时代,只要做好产品体验就可以轻松收获大批用户,为了生存和赚更多的钱,越来越多的企业开始全面数据化,定量测评每个部门的价值,以此「开源节流」。所以如果只是停留在以用户为中心的思路进行产品
联系方式
  • 400-1234-5678
  • 13333333333
  • test#qq.com