我们生活在三维空间里,所以所有的物品都应该有厚度H(三维世界无非是多了一个z轴方向的纵深),哪怕是一张纸。
一个面片,哪怕只有一像素的高光,和阴影,也能直接从空间中脱颖而出。
这是一个概念,并不是一个必须要遵守的规则。特别是在UI设计里,很多风格比如扁平化,等等,都是可以忽略厚度,纯拼颜色和构图的。但是为了方便大家理解绘画逻辑。所以我们今天的样例,是有空间和结构概念的。
ABCD:分辨增加了不同方向的厚度。
首先不会选择B,B增加的厚度部分,是没有机会展示钱包内部的,直接封死了增加细节的范围。
其他三个都ok,都可以继续延续设计细节。
我选择了C,别问我为什么,个人喜好而已,因为这个命题没有其他icon与UI界面的透视方向等参考,所以,选择随意。一般来说整体UI的光源,透视方向应该统一。除非特殊需求和目的,或者资源限制。
我们首先在结构上增加这个钱包的“牛皮”厚度
得到一个这样的结果。但是。。。。。。
如果任何物体都有厚度,那么它最少有两个部分,就是受光部分,和阴影部分。
所以我也要为钱包的边框,调整受光和背光,以增加它的视觉厚度。
这个时候,问题就出现了。
按照正常的光源方向,我应该在最上面的边上看到高光。理论让应该是这种打光方式。但是我没有选,我选择了打中光,因为按照正常的左上方式打光,钱包的边线会不清晰。因为icon很多都很小,所以光源越复杂,有时候就越难辨析。我这里是主观的选择了打光方式。以避免放大缩小带来的麻烦(icon制作一定要考虑尺寸大小,视觉可辨析度的问题)这是样例,所以也就不会深究了。
我们逐步的增加了这个钱包面片的厚度。
1,纯面片,一般适合扁平化与无透视的设计。
2,有一定厚度,但是没有形状复杂变形,这种结构多数都是为了打光考虑的,毕竟纯面片是没有打光机会的。
3,在稍微写实一点的设计里,钱包的厚度,不会是纯平面,是弧面的。
所以我们现在来增加它的弧面厚度。
弧面周围都是阴影部分,高光都集中在最高处。所以选好范围直接内阴影就行了。
给了两个高光,因为一个是弧面是钱包正面的高光,一个弧面是钱包侧面的高光,当你理解了钱包的形状。你就很容易确定阴影与高光位置。那么你就更容易体现结构。