迅速掌握3D设计,提升产品视觉体验的利器

近年来,3D设计在UI设计领域迅速流行,广泛应用于B端和C端的设计中。3D设计不仅能够提升用户界面的视觉效果,还能提高产品的整体调性。虽然市面上有很多关于3D软件的教程,但针对UI工作流的专门3D教程却寥寥无几。本文将不涉及具体的软件操作,而是从工作流的各个环节入手,逐步拆解每个步骤中的关键注意事项。文章将分为七个部分,涵盖软件选择、准备工作、摄像机设置、模型制作、灯光布局、材质处理以及渲染输出。

01、软件选择

工欲善其事,必先利其器。想要制作出优质的3D图形,选择一款顺手的3D软件至关重要。目前市面上有许多3D软件,主流的包括Maya、3D Max、Houdini、C4D和Blender等。Maya、3D Max和Houdini在各自专业领域中是佼佼者,广泛应用于影视、游戏、特效和建筑等行业。然而,由于这些软件价格昂贵、上手难度较高以及操作复杂,通常不适合UI设计。

相比之下,C4D和Blender在UI设计领域的应用相对较广,二者各有优缺点。C4D最早被应用于视觉包装和广告领域,因其操作简单、易于出效果以及价格相对合理,早期受到UI设计师的青睐,教程也相对丰富。然而,C4D的缺点也很明显,尽管价格亲民,但一年使用C4D+OC渲染器的费用接近万元,同时对硬件的要求较高,需要高配置的独立显卡才能正常运行。

Blender则是完全免费的软件,并且可以用于商业项目,其输出效果与C4D不相上下。此外,Blender对硬件的要求几乎为零,基本的CPU和集成显卡就能流畅运行。因此,我建议初次接触3D设计的朋友可以选择Blender。

迅速掌握3D设计,提升产品视觉体验的利器

02、准备工作

由于3D设计在UI中的应用不仅仅是生成简单的3D静态图片或视频,因此3D图与设计稿的融合显得尤为重要。需要在动手使用软件之前,就对3D图的呈现效果进行规划。

  1. 设计风格准备:首先,收集竞争产品的3D设计图,寻找与自己设计风格相符的作品。将这些3D设计图与自己的设计稿进行初步合成,这样可以在最短时间内找到适合自己设计的风格。确保在设计开始前,所要输出的3D设计图能够与设计稿达到最大的匹配度。
  2. 确定3D设计在设计稿中的位置:由于3D元素需要与设计稿结合,通常设计稿中会有许多2D元素,比如登录框和文字内容。因此,提前明确3D元素的具体位置至关重要,并在设计稿中做好相应的规划。

迅速掌握3D设计,提升产品视觉体验的利器

03、摄像机设置‍‍

1.摄像机焦距,在目前3D设计中,比较流行的是正交摄像机(无透视)视角,体现一种无透视的均匀秩序美,但是纯正的正交视角下,有些元素的会有外翻,所以这里选择200mm的摄像机焦距,最接近正交视角,即没有明显的透视效果,又没有正交视角下的外翻效果。迅速掌握3D设计,提升产品视觉体验的利器

2.摄像机尺寸:摄像机的尺寸应设置为与设计稿一致,这样可以确保在设计3D元素时与设计稿实现100%的匹配,从而减少后期的修改和调整时间。

迅速掌握3D设计,提升产品视觉体验的利器

04、模型

在Blender中,模型主要可以分为两类:第一类是直接建模,适用于制作一些规则的模型;第二类是通过曲线转换而成的模型,通常用于制作非规则的形状。迅速掌握3D设计,提升产品视觉体验的利器

在模型阶段需要关注三个关键问题:

  1. 在建模过程中,应定期渲染并导出到设计稿中查看效果,以确保始终朝着正确的方向进行,从而避免最后出现大规模的返工和修改。
  2. 进行资源优化,合理使用平滑显示,减少模型面数,以提高渲染速度。

迅速掌握3D设计,提升产品视觉体验的利器

3.保留原始模型信息:在模型改动时,尽量使用修改器(类似于在PS中的图层操作),而不是直接在模型上进行修改,这样可以方便后期的调整和修改。

5.灯光布局

通常采用经典的三点布光方法:主光源用来照亮场景并确定阴影位置,辅助光源用于补充暗面的光线,而背光则用于突出物体的轮廓。此外,也可以使用全局光HDR贴图进行照明,但由于UI中的3D图通常追求干净和透明感,为避免各种反射和折射影响画面效果,选择HDR贴图时应尽量选用干净的版本。

迅速掌握3D设计,提升产品视觉体验的利器

06、材质

一般常用材质分为三类,金属类材质,非金属类材质,玻璃类材质。

金属材质和非金属材质通常使用原理化BSDF材质节点来实现。它们主要的参数区别在于金属度的调节,能够控制物体的金属特性与非金属特性。

迅速掌握3D设计,提升产品视觉体验的利器

玻璃材质相对较为复杂,因为它既能反射又能折射环境光,因此单一的玻璃材质往往会出现黑边,显得阴沉且不透亮。为了解决这个问题,一般需要将玻璃材质节点与透明材质节点混合,然后通过光程节点控制反射和折射的次数,以实现更加透亮的效果。

迅速掌握3D设计,提升产品视觉体验的利器

07、渲染输出

在完成设计后,最后一步是渲染输出,需要注意以下两点:

  1. 渲染图的尺寸应比原图大1.5到2倍,以适应不同设备的尺寸,确保图像的清晰度。
  2. 使用Cycles渲染器进行渲染,如果配备了独立显卡,建议选择GPU计算,这将显著提高渲染速度。同时,渲染采样越高,输出图片的清晰度也越好,因此应根据需求进行选择。

结语:掌握以上关键要点后,再结合一些基础的Blender教程,基本上可以满足大部分3D设计的需求。