我们在做UI设计的时候，往往优先考虑的一定是风格问题，设计风格对作品有着非常重要的影响和意义。然而风格不仅仅是造型上和色彩上的，其中一个重要的因素是光影。其实光影的统一具有至关重要的意义，无论是界面设计，还是手机中的图标设计。

https://mmbiz.qpic.cn/mmbiz_jpg/pt4CJpSjEwm71y39OClhHszAC0EmE5rvpPvNaGQQyO0gXticK9sfAhBu6YmIbGxaPF6UOuZiamYduQS6JN6gP97A/640?wx_fmt=jpeg

简洁的播放器设计

从图中我们可以看到，每个元素都有高光和阴影，从整体界面顶部的一条白色部分，到蓝色进度条顶部的一条亮色，还有播放、快进、快退按钮顶部的高光，都是统一的，并且按钮的投影和整个界面的投影也都是统一的90°。所谓的UI设计中的光影统一，通俗地说，就是每个设计元素的高光和阴影统一角度。

https://mmbiz.qpic.cn/mmbiz_jpg/pt4CJpSjEwm71y39OClhHszAC0EmE5rvqWMqA8aB3B998dN6bTpt4xSoBzN3THDElqwe2PBUOjomuBmE0WNP0g/640?wx_fmt=jpeg

界面的设计也会模拟现实的光影

通常来说，我们在做界面设计的时候光影都会设定在90°，因为要模拟现实，我们拿出手机，可以发现太阳的光是最强烈的，而且都是垂直照射的光，所以默认90°角的光是最自然、最舒适的，而且保持90°角可以避免在UI设计中出现问题，能保持一个绝对的统一。如下图所示为各角度的投影效果。

https://mmbiz.qpic.cn/mmbiz_jpg/pt4CJpSjEwm71y39OClhHszAC0EmE5rvXqIBh4Fx0JT5BQDWXDsE7evdqeGdm0pWM1bQoorqCMfqibKvzSZwKAw/640?wx_fmt=jpeg

125°、90°、45°、错乱的光影

从上图4个设计我们可以看到，随着光的定位不同，光影所处的位置是需要完全不同的，并且影响了整个元素，如果都放置在一起，明显能看出不是统一的风格设计。尤其是最后一个红色的图标，内部所有的光影都是错乱的，这是最错误的做法。

https://mmbiz.qpic.cn/mmbiz_jpg/pt4CJpSjEwm71y39OClhHszAC0EmE5rv1icB5OHMAgxLcHxaEn4sxsXiaZjmP3Uib5ibh0fHXHMYHzDnt8wmo8EkNg/640?wx_fmt=jpeg

我的早期作品《心随我动》

在对光影统一的效果掌握比较准确以后，可以考虑UI设计元素本身的角度，这也是非常难把握的技巧之一。我们只做一个设计的时候还好，数量多了以后，问题也就随之而来了。尤其是发现其中一个角度无法实现甚至要影响其他设计的时候，就会必不可少地进行调整甚至整体的细微调整。苹果计算机系统的应用图标一直沿用具有角度的设计，也一直是行业内的领导者。我在早期因为非常喜欢乔布斯时代的拟物图标，所以延续了角度和拟物风格，并且将色彩的对比、光影的角度、质感的环境色等都运用上了。每一个图标平均耗时8～16个小时，而全部完成后又花了很多时间对每个作品进行微调。虽然仍然有一些瑕疵，但是整个项目下来真正得到了质的飞跃，有了提升。只有不断地挑战困难，才能够战胜困难。

https://mmbiz.qpic.cn/mmbiz_jpg/pt4CJpSjEwm71y39OClhHszAC0EmE5rv0YricBDjAsXLuHLMKyU7F1XXCZRcCPIZJibJ3vic9JpYxbSzrcn31BE9A/640?wx_fmt=jpeg

我的早期作品《梦想不跟随》

其实不仅可以应用一个光源，我们也可以自己模拟两个光源，这是一种虚拟的光源，但是在不影响整体设计风格的情况下可以考虑创新，它会让UI设计更加鲜明动人。比如在前面的图片中，可以看到图标的背板都会有两种光：蓝色和紫色，这两种颜色都是相对炫丽的颜色，比较符合作品的主题思想。而这种光源是作者自己创造的，如果要结合现实生活，可以想象成有两盏绚丽的霓虹灯在两侧闪耀。

END

欢迎大家将文章分享到朋友圈

https://mmbiz.qpic.cn/mmbiz_jpg/pt4CJpSjEwm71y39OClhHszAC0EmE5rv6ib12IsjFowic9SO7UQfo3zgyNAumpRRV8E5reEnlrGbdtStdM4CdcBQ/640?wx_fmt=jpeg