这样设计光影轻拟物，想不脱颖而出都难！

一般现实中的光源并非如此理想，光线的复杂超出肉眼所见。所以我们在描绘的过程必须留意到，可以适度的抽象。举个实例，自然光是普照的，所以我们抽象为四个小光源平均分布，依次打到物体上：

在它们叠加的个别可以清晰的看见，1是最重的，2其次，3再次。按照这个方法就可以获取光影的层级关系，在绘制轻拟态的界面以及运营活动中非常独特。

体积塑造+颜色对光影的影响（反光/对比光）

△图片来源：09UI设计工作室-陌陌直播礼物设计

所有的光影其实都是帮助主体构建体积感，一个合格的立体图形应当具有：高光/过度色/明暗交界线和反光这四个基本属性。

之后必须一点超现实主义的技巧，把太阳光过滤下，从「赤橙红绿青蓝紫」的色彩里提取跟主体和谐的色调（一般是补色），营造出介于真实与魔幻之间的美好效果hiahia～

之后再在投影上加一点点色彩倾向，一个完美的黑八就发生啦～按照这些方式，你可以试着去尝试更多的物体/画面。（右图是笔者作品「插着红旗的地球」hiahia）

光影/颜色与产品设计中的层级关系

影响主体的不仅光影之外就是颜色了，近年来的三大巨头apple/Microsoft/Google的设计都在颜色上下足了功夫，苹果的毛玻璃，微软的不锈钢和谷歌的「纸」。

从趋势上看，材质的采用对产品中拉开层级关系上有很大意义，以往的设计只是是借助光影和焦距来拉开关系，这两个维度在少量的叠加界面中能够有效果，但到了复杂的多窗口互压互叠里就不是如此奏效了，所以铁子们要敢于利用颜色区别产品显示的优先级。

图标与插图的光影使用要点

△图片来源：EricHoffman–BigSurMacIcons

△图片来源：JIAJIE–WeSingLivegift

图标好坏除了外形之外最重要的就是质感了，通常图标也就是4种方式（如右图），类似苹果的平台图标和抖音直播间礼物的图标都是最终一种方式。

但即使仅仅是这种就太水了，既然都说了是干货预警，那将要拿出哥们看家的本领～此图是你们关注公号后才会收到的推图，主体就是一个POI的界面加上微信的对话框和代表干货的小星星营造出的氛围。

刨析下这个图，三个发光体和上面的投影，通过上文的讲解依次绘制完成～

后来就到了amazing的时刻了，打开photoshop找到「滤镜-模糊画廊-画面模糊」设置几个key-point，调试模糊值和透明度/亮度，最终完成对光影的重塑。

借助环境造就光影

空气中的气味相信你们都不陌生，这种状况多数是一束光影从大门里射入后，在光的折射下把以前看不到的灰尘统统照了个遍。

如果你是mac用户一定熟知keynote里的漫画效果「轰然坠落」，这个效果是在模拟物体震动后弹开周围灰尘，非常惊艳。在PPT的设计中你也可以相同运用光和雾来构建你想要的效果，下图是我在做工作总结的之后为了展现Q4工作采取的方法。

小结一下

光影轻拟物在产品设计中的应用面抑或很广的，比如：图标、数据可视化、插图等等。而在长期扁平设计时代适量使用会变得很出彩，当然再好的教程也比不上你们多动手试试练练，所以铁汁们行动出来咯~

原文：Nana的设计锦囊