我们生活在三维空间里,所以所有的物品都应该有厚度H(三维世界无非是多了一个z轴方向的纵深),哪怕是一张纸。

UI知识,UI需要什么样的美术能力:应用篇

一个面片,哪怕只有一像素的高光,和阴影,也能直接从空间中脱颖而出。

这是一个概念,并不是一个必须要遵守的规则。特别是在UI设计里,很多风格比如扁平化,等等,都是可以忽略厚度,纯拼颜色和构图的。但是为了方便大家理解绘画逻辑。所以我们今天的样例,是有空间和结构概念的。

UI知识,UI需要什么样的美术能力:应用篇

ABCD:分辨增加了不同方向的厚度。

首先不会选择B,B增加的厚度部分,是没有机会展示钱包内部的,直接封死了增加细节的范围。

其他三个都ok,都可以继续延续设计细节。

我选择了C,别问我为什么,个人喜好而已,因为这个命题没有其他icon与UI界面的透视方向等参考,所以,选择随意。一般来说整体UI的光源,透视方向应该统一。除非特殊需求和目的,或者资源限制。

UI知识,UI需要什么样的美术能力:应用篇

我们首先在结构上增加这个钱包的“牛皮”厚度

UI知识,UI需要什么样的美术能力:应用篇

得到一个这样的结果。但是。。。。。。

UI知识,UI需要什么样的美术能力:应用篇

如果任何物体都有厚度,那么它最少有两个部分,就是受光部分,和阴影部分。

所以我也要为钱包的边框,调整受光和背光,以增加它的视觉厚度。

UI知识,UI需要什么样的美术能力:应用篇

这个时候,问题就出现了。

UI知识,UI需要什么样的美术能力:应用篇

按照正常的光源方向,我应该在最上面的边上看到高光。理论让应该是这种打光方式。但是我没有选,我选择了打中光,因为按照正常的左上方式打光,钱包的边线会不清晰。因为icon很多都很小,所以光源越复杂,有时候就越难辨析。我这里是主观的选择了打光方式。以避免放大缩小带来的麻烦(icon制作一定要考虑尺寸大小,视觉可辨析度的问题)这是样例,所以也就不会深究了。

UI知识,UI需要什么样的美术能力:应用篇

我们逐步的增加了这个钱包面片的厚度。

1,纯面片,一般适合扁平化与无透视的设计。

2,有一定厚度,但是没有形状复杂变形,这种结构多数都是为了打光考虑的,毕竟纯面片是没有打光机会的。

3,在稍微写实一点的设计里,钱包的厚度,不会是纯平面,是弧面的。

所以我们现在来增加它的弧面厚度。

UI知识,UI需要什么样的美术能力:应用篇

弧面周围都是阴影部分,高光都集中在最高处。所以选好范围直接内阴影就行了。

UI知识,UI需要什么样的美术能力:应用篇

给了两个高光,因为一个是弧面是钱包正面的高光,一个弧面是钱包侧面的高光,当你理解了钱包的形状。你就很容易确定阴影与高光位置。那么你就更容易体现结构。

UI知识,UI需要什么样的美术能力:应用篇