教你在设计中如何运用光影来更好的营造画面

同一部手机，工信部发布的手机照片和官网上的几乎完全不同，我们随手拍的任务照片和精修出来的也是两种效果，除了增加材质质感的因素，光影在其中起着最重要的作用，适当的光影增加了物体的立体感，好的反光增加了和环境的互动。

①真实质感

在网页设计中，我们几乎每天都会和各类产品照打交道，把产品抠出来，然后组合到设计中，在这个“换背景”的过程中，这些物体的光影自然发生了改变，光的方位、强弱不一定相似，有的甚至偏差很大。往往大多数照片是没有经过修饰的，光影变化因为拍摄环境和拍摄设备的原因复杂，不能很好地表现产品本身的质感，大多数专业修图其实就是假定单一主光源配合少许辅助光进行物体的明暗反光，变化这样的图片因为光源一致，能更好地凸显产品的立体感和本身的质感。

②简化质感

光影对质感的塑造不止体现在真实物体上，在网页设计、UI 设计中，我们往往用一些简单的光影变化来塑造物体的立体感，它们遵循的原理是一样的，只是在调子上做了减法。一个简单又经典的案例如下。

按钮中间这道凹凸线是很多网页和UI中经常出现的分割线，精致却不繁复，这条线因为旁边文字的内阴影和右下边缘高光的引导是凹进去的，虽然没有复杂的光影变化，我们也能感知光是从左边来的，如果交换线条的深浅位置，那么它就是凸出来的，由一个简单线条的“凹凸”我们就能理解光影的简化也存在于细节里。    

大多数UI、卡通、扁平化的设计或者艺术作品中，光影通过不同程度的简化或者模拟形成了很多不同“模拟真实”的质感，调子的简化或者拟真造成了物体不同的质感，它们遵循合理的光影变化，却形成了不同风格的设计。 

同一片草原，在白昼和黑夜看到的完全不一样，不同的光造成不同的空间感觉，也给人带来不同的心理感觉。在设计中，我们往往需要通过模拟不同的光打造不同的场景，展现不同的情感。

①光源位置不同

1）前光（正面光）

光源在场景和物体前上部，这是最常见的光源布置，大多数明亮的、温馨的、开阔的、表现商品的场景大多是前置光源。明亮的前置光能打亮整个场景，使物体能清晰地展现，将投影置于后方，给人正面和明确的舒适感。正面光对空间和物体造成的明暗对比较弱，所以往往选择侧面的角度，使物体在左侧或者右侧形成对比，增加空间感。

2）顶光/侧面顶光

就像舞台上的聚光灯一样，在网页设计中这类方式一般选择聚焦的光源，形成比较强烈的空间差。将多余的空间隐藏在暗部，光源投射出一个圆形的亮面，用于突出其中的人和物，并且造成强烈的明暗对比，给人以视觉冲击。     

3）背光

人们在取景框中，我们看不清他的脸，只能看到剪影。背光是最容易表现神秘、力量感的场景，用于表达或辽阔、苍茫或深沉的情感，隐约在背光中的人激发起人们想要了解全貌的欲望。

②明暗对比不同

以上说到的三种光源位置对空间的影影响并不绝对，结合光的聚像明亮与否和对比也能影响光影对空间造成的感觉。

1）亮光

亮光包括很多种，晴空万里的阳光、室内明亮的吸顶灯、舞台上耀眼的聚光灯都属于其中的范畴，明亮的空间给人安全、舒服、清新、激扬的正面积极感受，诸如从窗户洒进来的阳光，虽然使室内的物体都呈现在背光中，但却有一种温馨、浪漫的感觉。

2）暗光

相反，昏暗的空间给人不安、窒息、神秘的负面消极感受，我们在设计中用它来设计神秘感、低对比的空间。在战争类、设计类的游戏页面中大量运用暗光的设计营造空间气氛。

3）强烈对比

刺激的阳光和聚光灯等带来强烈的对比，夏天的阴影、聚光灯下清晰的影子都给人强烈的印象，用于表达强烈的、明快的、激烈的情感。

4）虚弱对比

正如乌云天气几乎看不到阴影，因为没有强烈暗面的影响，虚弱的光影对比使空间更加明显，但损失了对比度。正是如此，那些不需要强烈情感因素的正式的、温馨的、浪漫的、清新的场景都会用到不那么激烈的光影对比来表现平和的画面。当然，结合上文中亮光和暗光的不同，也会产生阴冷、恐怖、黑暗的消极空间感受。