在产品设计中,图标是一个非常重要的部分。有设计感的图标会增加用户对产品的喜爱度,本文从六个角度介绍一种突破次元的图标设计——3D图标设计。

突破次元的设计思考——3D图标设计

突破次元的设计思考——3D图标设计

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

突破次元的设计思考——3D图标设计

基于目前的图形可以很明显的得到2个问题:图标的图形整体相对简单,延展使用比较受限;2D图标的视觉冲击力较弱,较难满足设计氛围的表现。

突破次元的设计思考——3D图标设计

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

突破次元的设计思考——3D图标设计

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

突破次元的设计思考——3D图标设计

突破次元的设计思考——3D图标设计

例如下面气泡的例子,球体化的表现比圆柱体化的表现更加饱满,光影效果更加丰富。

突破次元的设计思考——3D图标设计

2. 方变块

与上面的规则比较接近。当我们在2D图标中使用矩形之类的图形,建议使用立方体来表达。优点:立方体可以增加图标上的细节表现;增加厚度更有利于光影的表达。

突破次元的设计思考——3D图标设计

例如下面礼物的图标,我们在实际的3D场景下应该更贴合现实生活中的认知,设计成礼物盒子的效果。

突破次元的设计思考——3D图标设计

3. 结合实际认知

除以上的2种建议之外,我们在实际建模的时候还需要结合实际认知而定。例如金币、游戏卡的设计应该是带有厚度的片形;钱包设计成折叠的效果。

突破次元的设计思考——3D图标设计

4. 适当简化图形

2D图标向3D图标的转换过程中,需要适当进行简化,一些不必要的内容可以适当进行删减。

主要的目的是:降低模型的复杂程度,“过度细致”的模型在实际渲染中可能出现反效果;减少面和减少光的互相反射作用,提升视觉的简洁性。

突破次元的设计思考——3D图标设计

5. 增强空间思维

2D的图标只有一个平面,因此大部分情况下是一种“纸片性”的思维,常规的2D向3D的转换思维是增加厚度,但实际上出来的效果并不理想,因此在转换的过程中,需要使用空间的思维去思考,在3维的空间中应该是怎么样的。

例如下载和收件箱的图标,常规的思维可能是在2D的图标上增加厚度,但转换成空间思维就是让其具有立体感和空间感的形体。

突破次元的设计思考——3D图标设计

6. 图标状态补充

在实际建模的中会发现,很多模型在静态下是可以进行简单处理的,但结合动态或实际认知,就需要相关细节状态补充。

例如礼物和宝箱图标的开盖效果,因此把实际的盖子和盒子/箱子的模型做出来,以便于动画的实际表达。

突破次元的设计思考——3D图标设计

突破次元的设计思考——3D图标设计

案例展示:

突破次元的设计思考——3D图标设计

2. 异形:AI路径+挤出

在实际操作的过程中发现部分模型较难通过基础形调整得到,或是直接建模会比较耗时。因此我们可以导入AI路径再挤出的方式来得到我们的模型。例如下面的图形:突破次元的设计思考——3D图标设计

案例展示:

突破次元的设计思考——3D图标设计

突破次元的设计思考——3D图标设计

2. 结合图像

在C4D视图本身具有多视图,可以结合不同视图导入不同视角的平面结构进行制作,常见情况下的建模可以导入三视图(例如角色、人物之类的)。而图标相对来说是很简单的,所以这里只应用正面视图即可,其他的视角可以自行脑补后制作。结合图像的好处:

更加直观的看到图标造型,提升建模效率;对于模型尺寸的把握更加明确,我们可以依据实际设计的大小,在C4D进行同样的设定;方便后续路径对齐的使用(若导入路径未对齐到中心点,可以通过手动调整)

突破次元的设计思考——3D图标设计

操作流程:正视图下快捷键shift+V调出视图背景——选择背景——添加图像。或在视图选项中调出,然后配置即可。

3. 结合路径

如上图标类型中的描述,部分异形的图标如果直接在C4D中绘制会相对耗时,因此我们可以结合路径的方式,再使用挤出的命令来实现我们想要的模型,这样可以大大提升异形物体建模的效率。C4D中对AI的图层只会读取颜色的边缘,然后生成路径。因此在AI中编辑的路径,依据实际的情况选择填充或者描边,然后再拖拽进C4D。

如下产生的效果对比,左边为填充图形,右边为描边图形。

突破次元的设计思考——3D图标设计

操作流程:使用AI导出8.0版本的路径——拖拽进C4D——添加挤出命令——设置挤出高度及封顶样式。

4. 使用变形器

一些简单的形变可以通过变形器的应用,得到我们想要的造型。例如下面的案例,外星人脸是在圆形的基础上使用FFD进行调整,而宝箱则在方形的基础上使用锥化来达到圆弧的效果。

突破次元的设计思考——3D图标设计

突破次元的设计思考——3D图标设计

添加天空增加天空作为基础光照补充操作流程:地面快捷入口——选择天空——添加材质球——勾选发光——添加HDR贴图。

突破次元的设计思考——3D图标设计

下面通过一些案例对比来看看全局光照及天空的对比效果全局光照-开和关的差异从下面的案例我们可以明显看到差别,全局光照关闭后的图标相对暗淡一些,整体图标的光反射也相对减弱了许多。

突破次元的设计思考——3D图标设计

有无天空的差异天空有助于增强图标的光感,添加天空后整体图标的细节和质感也相对更加丰富。相对,无天空整体图标质感则有所下降。突破次元的设计思考——3D图标设计

天空是否增加HDR贴图的差异添加HDR贴图可以增强场景内物体的环境反射,让物体材质更加丰富增强细节质感。在一些强反射的场景下非常依赖HDR贴图的使用。从以下案例对比,可以明显看到差异性。

突破次元的设计思考——3D图标设计

2. 灯光分布

整体添加三盏灯光来营造整体的场景氛围。主要分为:主光(最强)、补光(增强阴影面的亮度)、背光(补充背面环境的光源,增强环境光氛围,勾勒轮廓)。在实际的场景中可以根据实际的反射效果和氛围,调整灯光的位置、与物体的间距、明暗度。

突破次元的设计思考——3D图标设计

灯光对于物体的作用会随着颜色的差异,产生的光亮度也会有所差异,因此在实际的使用过程中,对于灯光的位置、反射的细节都可以进行微调来达到最优的效果。色相的对比:不同色相在同样的灯光作用下产生的效果具有稍微较小。

突破次元的设计思考——3D图标设计

明暗的对比:深色和浅色在同样的灯光作用下产生的效果差别较大。

突破次元的设计思考——3D图标设计

实际案例对比:从下面的实际案例对比可以明显看出同样灯光下不同色相的明显差别,绿色的两部产生过度曝光。因此可以通过调整灯光的距离或者亮度来解决这一问题(如上面灯光分布建议)。

突破次元的设计思考——3D图标设计

3. 物体材质

3D图标由于相对简单,材质上主要使用颜色和反射的配合就可以得到不错的质感。当然如果希望在质感表现上更加丰富,亦可考虑增加其他的内容项来进行补充

1)颜色的设定

图标的颜色基本上与原图标的颜色保持一致,但部分颜色但实际渲染效果会存在些许差异,因此我们在材质上也可以根据视觉效果进行微调,视觉上保持统一的颜色感受。例如礼物的图标,如果按原来的颜色,亮部会过渡曝光,因此适当提高了亮部颜色的饱和度。

突破次元的设计思考——3D图标设计

2)颜色偏差

在3D的场景内是通过各种光与颜色的反射而成的,因此即便同样的颜色,在实际渲染出来的3D图标和2D图标也会存在一定颜色偏差。

突破次元的设计思考——3D图标设计

4. 反射的设定

反射是本次3D图标中材质非常重要的一环,基本的效果都是来源于对反射的设定。整体主要设定了反射的类型、粗糙度、反射强度、高光强度、层遮罩的颜色。由于图标的颜色并不完全一致,因此在粗糙度、反射强度、高光强度是一组动态的参数。

1)参数变化的对比

如下面的案例,针对不同颜色的图标在粗糙度、反射强度、高光强度上都有差异性,因此不是说设定好一组参数之后就那个完全适用所有的颜色,因此这里会根据实际情况调整,但整体的视觉效果保持一致。

突破次元的设计思考——3D图标设计

2)层遮罩的设定差异

除了基础的反射类型及参数,还需要在层遮罩中添加菲涅耳来增强反射的丰富度。默认的菲涅尔是一组黑白的颜色材质,我们我们可以通过调整暗部的颜色来增强图标的颜色饱和度和丰富度,如下案例对比。

突破次元的设计思考——3D图标设计

突破次元的设计思考——3D图标设计

2)组合型

图标通过两组或两组以上的图形内容组合而成,图标由主形(图标实际的外轮廓造型)和点缀图形(用于图标表意或者提升图形内涵)组合而成的图标,图标可进行拆分或者重组后形成动效。

突破次元的设计思考——3D图标设计

3)拼装形

图标本身可能在现实中不存在的事物或物体,通过创意思考而得到的图形,图标的动效更具有可发散性和可重塑性。

突破次元的设计思考——3D图标设计

2. 动效的表现方式

结合上面的类型差,在设计动效的时候也会稍稍不同。重点在于表达不同的图标具有的特性,因此我们可以根据这些特性去设计图标的动画方式。

1)自体运动

对应单体图形,图标动效通过自身的位移、旋转、形变而产生,这类图标的动效比较靠近现实生活中接触的感知或图形动效本身具有普适性认知。例如火箭升空、UFO飞碟、放礼炮、开宝箱等。

突破次元的设计思考——3D图标设计

2)组合运动

对应组合图形和拼装图形,多图形运动组合而成,图标的多个部件可从不同轴向开始进行不同的轨迹运动,最终进行完整的图标融合。各个部件本身可能也存在位移、旋转、形变等动效,可以更大程度丰富图标的动效表现。

突破次元的设计思考——3D图标设计

3)部件运动

整体动效相比前面两种类型较为简单,通过某个图标上的部件运动来表达动效的内容,因此这个部件需要是图标上较为明显的图标特征,这样更能让人具有记忆点。

突破次元的设计思考——3D图标设计

突破次元的设计思考——3D图标设计

2. 组合音效

部分图标的动画效果很难通过一条音效进行表达,因此需要叠加2组或者2组以上的音效来丰富整体的感受。例如手柄人图标叠加了三组不同的音效来表达,游戏卡叠加2种不同的音效。

突破次元的设计思考——3D图标设计

突破次元的设计思考——3D图标设计

1)3D ICON X Tab bar

当我们设计Tabbar的时候,首先想到的表现方式往往是有趣的图标图形设计、结合动效之类的方式。但我们或许也可以考虑使用3D的图标+动画的方式来表达我们的设计。

突破次元的设计思考——3D图标设计

2)3D ICON X 运营内容

一些相对简单的运营内容,我们可以考虑将元素进行3D化设计,这样可以一定程度增强整体运营的视觉表现力。

突破次元的设计思考——3D图标设计

4)3D ICON X 空白页插图

3D插图是2020的设计趋势之一,结合3D的插图让整体的设计更加具有氛围感。

突破次元的设计思考——3D图标设计

5)3D ICON X COVER

将背景中的某些元素结合3D图形进行设计,让整体的氛围更加具有空间感和立体感。

突破次元的设计思考——3D图标设计

十一、总结

本次结合实际项目中的内容进行不同维度的设计尝试,并且希望,可以从中去寻找到更多设计的可能性和突破点。当然这只是系统化设计思考中的一步,但可以启发后续更加深入的3D设计探索。

本文由 @IDfor 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议




阻力设计在产品中的应用

阻力设计在产品中的应用

阻力是指物体在流体中相对运动所产生与运动方向相反的力,不仅在自然间中常见,在互联网中也广泛存在。本文作者从五个角度,深入分析阻力设计在产品中的应用,希望对你...

2020-06-18
如何成为一个合格的数据架构师?

如何成为一个合格的数据架构师?

数据架构师在互联网行业中是个很重要的职位,是企业数据资产最重要的“奠基者”。那么,如何成为一个合格的数据架构师呢?本文作者基于自身经历,从三个方面展开介绍,推...

2020-06-18
倒推“抖音短视频”APP产品需求文档

倒推“抖音短视频”APP产品需求文档

文章是倒推“抖音短视频”APP产品需求文档,但由于作者是第一次写需求文档,所以仅对核心需求进行了需求分析与说明。一起来看看~ 目录: 一、文档综述 1.1文档属性 1.2产...

2020-06-18
微信“拍一拍”,真的是一个没什么用的功能吗?

微信“拍一拍”,真的是一个没什么用的功能吗?

昨天微信上线了“拍一拍”功能,用户点击2次头像,会产生头像抖动,震动反馈,且在聊天框中显示“XX拍了拍XX”。 这个功能推出后,很多微信群都在疯狂拍一拍,引起了一波拍...

2020-06-18
数据大屏设计师,我不信你没有这些困惑(上)

数据大屏设计师,我不信你没有这些困惑(上)

从事互联网行业的人,每天都在接收新知识,时常也会有迷惑的时候,尤其是数据大屏这样比较少有人踏足的领域。本文作者以自身经历出发,对数据大屏设计提出了自己的一点...

2020-06-18
客户关系管理的15个模型总结(下)

客户关系管理的15个模型总结(下)

对于ToB产品,仅仅基于用户需求来设计产品架构是远远不够的。B端产品服务的是有着几年,甚至几十年管理积淀的企业,必须依靠一定的理论知识来支撑系统的设计规划。本文...

2020-06-18
B端产品设计:价值主张与需求对应的价值

B端产品设计:价值主张与需求对应的价值

B端产品的需求来源于场景,产品经理通过满足客户需求从而产生价值。因此,SaaS产品经理面对扑面而来的需求时,应当更清晰理解并评判需求的价值。 01 2008年,著名商业...

2020-06-18
以知乎为例,探讨未来产品设计的几大变化

以知乎为例,探讨未来产品设计的几大变化

知乎作为一个典型的问答社区,它本身反映了内容社区产品的很多典型问题。本文以知乎为例,探讨社区类产品未来发展的一些变化,对内容社区感兴趣的童鞋不要错过。 前段...

2020-06-18
如何用产品思维打造线上课程?

如何用产品思维打造线上课程?

如何用产品思维来给自己打造一个线上课程呢?本文从市场调研、课程开发、运营推广、成交这几个方面分享如何打造自己的课程,希望对大家有所帮助~ “地摊经济”重出江湖,...

2020-06-18
「武侠连载」营销中心设计——优惠券

「武侠连载」营销中心设计——优惠券

优惠券是常见的一种营销推广的方式,但是你真的了解它吗?本文作者以武侠故事的形式,对优惠券展开了生动的分析,对优惠券感兴趣的童鞋不要错过哦。 (武侠情节接上文“...

2020-06-18
金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

本文作者从实际工作实践出发,结合案例等分享了电商金融支付财务融合中的基本概念和相关原理解析,包括:订单、账单、交易流水和账知识解构,供大家一同参考和学习。 ...

2020-06-18
关于卡片设计的分析与思考

关于卡片设计的分析与思考

卡片是APP常见的设计形式,它既有好处也有弊端,因此需要根据场景和内容确定展现形式。本文从四个方面对卡片设计展开分析,推荐给对卡片设计感兴趣的童鞋阅读。 卡片是...

2020-06-17
内容型产品中,付费会员功能如何设计?

内容型产品中,付费会员功能如何设计?

付费会员制度让用户预付会员费,将钱留在平台,那么未来一定会有消费行为,那么会员制度要如何设计,才能激励用户付费呢? 01 为什么要做付费会员? 讨论这个问题之前...

2020-06-16
文字社区是否可以拥有弹幕?

文字社区是否可以拥有弹幕?

从社区产品的角度来思考,弹幕功能对于内容生产方,内容消费方以及平台方而言各自有什么意义?图文内容社区是否有机会拥有弹幕呢?如果可以发弹幕,用怎样的形式呢?本...

2020-06-16
FMS财务系统收支结算总结

FMS财务系统收支结算总结

本文按照FMS收支结算划分,结算流程分类及各系统交互,财务系统内部结算基础能力,收支结算整体结构的顺序来依次介绍,总结财务系统收支结算的结构,和一些作者的个人思...

2020-06-16
如何迅速提升用户好评?试试这三种方法

如何迅速提升用户好评?试试这三种方法

小编推荐:如何提高一个产品的用户评分,改变大家对这个产品的印象呢?本文作者给大家介绍了三个概念:用户体验地图、峰终定律和服务蓝图,并详细解释了该如何使用这三...

2020-06-16
对工具型产品易学习与易使用的思考

对工具型产品易学习与易使用的思考

小编推荐:易学习是指怎么让新用户的学习成本降低,能够很快地掌握产品的使用,它的前提是足够简单和容易理解。而易使用是指,如何让用户快速、高效地完成一项任务,达...

2020-06-16
比对象还懂你!推荐算法为啥这么准?

比对象还懂你!推荐算法为啥这么准?

信息过度和广告过多的社会中,推荐算法的使用也就显得理所当然,但是它是如何做到了解用户的呢?本文从用户画像的定义和设计出发,结合实际案例,深入浅出地阐述了基于...

2020-06-15
B端平台产品需要培养的4种意识

B端平台产品需要培养的4种意识

对于许多刚入行不久的产品经理来说,B端平台产品是比较有难度的一项工作。本文作者基于自己的工作经历,提出了四点关于B端平台产品需要培养的4种意识,希望对你有帮助。...

2020-06-15
广告系列:保留价

广告系列:保留价

在一次拍卖中如果所有买家的报价均小于卖家的估价时,则拍卖品不出售由卖家保留,此时卖家的估价就是保留价,也叫底价,全称市场保留价。对于卖家来说,保留价的设置保...

2020-06-15