UI设计 光影的运用

　　关注现实生活中光影的相互作用能给我们带来一些灵感，让我们的设计看起来更逼真。除非你的地下室里有一台3D打印机，否则我们大多数人都只能在二维空间里进行设计。但我们都习惯了在三维空间中看到事物，有时会在日常生活中看到的东西和在纸上或屏幕上看到的东西之间产生视觉上的脱节。在你的设计中加入光和阴影元素，可以帮助浏览者缩小视觉上的差距，让你的2D设计更加逼真，看起来几乎是3D的样子。

　　但是你在互联网上肯定会注意到，光和阴影效果很容易做过头。正如一名设计师在他的博客中所承认的那样，在我们的现代世界里，很容易添加一个又一个的效果，而不考虑它们对你的设计项目是否有必要或有益。 话虽如此，让我们来看一些正反两方面的观点：光和阴影可以增加你的设计的深度、尺寸、透视、现实主义和视觉感兴趣。这可以同时吸引浏览者关注你的设计，使它看起来像是从页面或屏幕弹出。但是过度的效果会让一个好的设计看起来很业余和俗气。

　　总而言之，聪明地使用光影的秘诀包括记住两件事：目的和微妙。首先确保你使用的任何效果具有特定的实用目的，并且对你的项目有意义，那么采取“少即是多”的方法将其应用于你的设计。如果使用的是设计程序附带的效果，则默认设置总是比实际更具戏剧性(特别是对于阴影); 不要依赖它们，你需要运用它们，使你的设计作品更柔软、更轻、更微妙。

　　这是一个非常基本的概述，它将给你一个正确使用光和阴影的起点。现在，让我们开始谈正事;关于你一直在等待的设计提示：

　　01.使用颜色创建深度

　　色彩本身可以成为创造轻盈或黑暗幻觉的方式——无需诉诸预先包装的效果。特别是将不同颜色的相同颜色分层，可以创建深度或距离的外观。这是因为在我们的眼中，光亮渐渐褪色，暗色渐渐增强。

　　下面的插图地展示了这个想法。注意山脉是如何从靠近前景的地方开始变暗的，但随后变亮并且看起来像是在背景中迷雾般的距离。

　　这里还有很多其他的灯光和颜色。设计师为每个面板选择的色温，对于增强对光线和黑暗的印象有很大作用。天空中细微的渐变也会产生不同时间和光线类型的印象(例如：日出的

　　光与凉爽的白色月光)。谈到渐变，下一个提示来谈......

　　02.为背景图添加渐变效果

　　在你的房子打开一盏灯，看看zui近的墙壁…...这不是所有都是平坦的颜色，是吧?zui靠近灯的部分可能看起来更亮或更暖，而你离灯越远，它看起来就越黑。你可能会认为你在看一面墙，但仔细看，你可能会看到灰色、绿色、蓝色或紫色的阴影。重点是很少有光线使物体或表面看起来像一个均匀的、不变的颜色。

　　创建这种动态颜色变化的一种方法，是在你的设计中添加一个渐变到背景或其他大区域。现在，渐变可能会让你想起上世纪90年代的网站上一个可怕的多色背景，这使得文本不可能被阅读——但这是一个糟糕的渐变案例。如果做得好，渐变可以添加一些微妙的颜色变化(如前面所提到的)，帮助柔化/淡出阴影，或者在你的设计的某一特定区域(特别是径向、圆形、渐变)中创建光线的外观。

　　下面，一个网站的着陆页面上的径向渐变为多个目的服务。梯度的较轻部分使它看起来像一盏灯从上面照耀，并且也使有阴影的手机更可见。结合起来，这些效果使这里的场景看起来逼真——看起来你可以伸手去摸那部手机，它有形状和尺寸。同时也要注意右上角的高亮显示，以及阴影，使手机有了3D外观。

　　03. 使用高亮显示来吸引注意力

　　闪闪发光的东西总是吸引你的目光，不是吗?在设计中，亮点可以像一个微妙的聚光灯， 使某些元素变得更加明显——除了帮助设计项目看起来更真实，正如前面提到的。如果你想在你的设计中强调多个东西，一定要记得考虑你想象中的光源，让你的亮点保持一致。查看以下产品包装上的“801”标志的简单高亮显示。它只是线条的颜色略轻于

　　主要颜色的数字，但它给设计的焦点提供了更多的可见性和视觉兴趣。

　　04.阴影大师：阴影

　　阴影是物体上阴影的另一个术语，如我们在文章顶部定义的核心阴影。阴影可以赋予平面设计元素或文字的形状和尺寸。

　　在这里，一个平面的白色印刷标志的纹理阴影使它看起来有分层和复杂的效果。

　　05.主阴影：投下阴影

　　记得文章前面的苹果图吗?投影是苹果本身遮挡光线而产生的阴影，从而在侧面产生影子。阴影只是一种特定类型的投影，其中光源或多或少直接在头顶上投射，这会在对象后面或下方投射阴影。这使得物体看起来像浮在表面之上。

　　从设计的角度来看，阴影可以帮助物品或信息“上升”到布局的顶部，使它们脱颖而出。它们对于提高浅色设计元素(尤其是文本)的可见性也很有用。例如：在这个网页设计中，阴影有助于使特色内容更加突出。

　　阴影在各种设计项目中非常普遍，但也经常被滥用。典型的投影错误是把它们做得太大，太暗或太尖锐。在设计中使用阴影通常不应该让浏览者思考：“哦，看，有一个影子!”相反，他们应该与设计的其余部分无缝融合。

　　06.调整不透明度

　　在现实生活中，阴影不是不透明的，光线不是白色或黄色的平面，它们是透明的，在你的设计中它应该是一样的。对于微妙而逼真的外观，不透明度和透明度设置是应用效果时zui好的朋友。从一个真正低调的应用程序开始，然后根据需要稍微构建它是一个很好的做法;这会使你不太可能过度使用它。

　　07.在字体设计中结合光与影，达成令人瞠目的字体排版效果

　　印刷字体可以通过添加光和阴影效果，使字体突显或者不突显。尤其是在文字排版设计中，这确实能让这些文字以醒目的方式活跃起来。

　　以这个字体的标志为例：它使用了高亮和阴影的字母用渐变来创建一个轮廓分明的3D外观。下面还有一个漂亮的投影(注意一个假想光源从左上角开始的一致使用：主要的亮点落在字母的顶部和左边，而投影点向下和向右，远离光线，就像它应该的那样)。一些微妙的纹理把一切都拉到一起。

　　08.更多版式阴影选项：尝试凸起和嵌入式样式

　　字体是一个你可以在阴影样式中真正发挥创造力的地方。它们在很大程度上是很容易应用的(有些字体甚至带有阴影样式)，并且可以给你的字体设计一个定制的外观。让我们再看两个选项：

　　1)凸版：凸版是一种印刷工艺技术，它能在纸上(或其他材料的)表面上增加一种设计特征(通常是文字)。这通常是用某种金属印版来完成的。你可以用一些很好的阴影(在字母形状的边界之外)和高亮(在字母本身)上复制这种效果。