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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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