纯平面用户界面已不再是趋势,改善交互式元素的可用性的第一步是添加阴影,阴影是设计师日常工作中最常见的设计技法之一。阴影和模糊是两种特别常用的效果,但是,不少设计师在绘制阴影的时候,特别是卡片阴影的时候,都会有不少难度。下面分享六个UI设计中做阴影的小技巧,教你如何快速绘制一个完美的阴影。

1. 不要使用阴影的默认值

设计工具提供的所有默认阴影效果都很一般,会显得有点脏。如果要让阴影看起来干净、自然的话,必须修改它们的外观参数。


2. 绘制柔和自然的阴影

一般一些漂亮的阴影都是比较柔和的阴影。如果你想要让它变得柔和,那么可以降低一些不透明度(大概在10-30%这个范围),并调整一下更高的模糊度(16px-40px),看看这样调整是否改善了阴影的外观。

3. 考虑用带有模糊的图层来代替阴影

标准阴影样式虽然更方便实现,但是如果你想做的更好的话,可以试试使用模糊作为阴影来做为单独的图层,用这个方法可以更好地控制阴影位置以及大小。

4. 让阴影的颜色更自然一些

用纯灰色的颜色肯定看起来不会好看(纯黑白主颜色的除外)。你会发现在生活中总是有一种微妙的色彩,给阴影添加UI界面的中性色彩,这样效果会更好。


5. 把材质颜色设置为阴影

看一下生活中的一些材料,尤其是那种半透明的材料,它们的阴影继承了该物体的颜色。你可以使用这些色调来创建该类型材料的插图,这样它看起来会更有趣。

6. 从生活中寻找灵感

多观察其它物体和材料是如何与光线相互作用的,看看它们是怎么样投射阴影的——包括颜色、模糊、角度,一般一些优秀的成果都始于灵感迸发的火花。

总之,使用阴影的规则就是背景与阴影以及其它UI元素平滑并融合。使用不透明度,模糊数值以及X或者Y轴偏移量,直到获得更加平滑的阴影位置。另外,不要让阴影过分夸张,这会分散用户的注意力。本文分享的这六个简单的小技巧会使你的阴影设计更上一层楼,当你将这些简单的技巧应用到你的项目中,你会觉察到你的工作质量是如何提高的。