如何使用渐变元素提升产品质感

背景介绍现在的APP界面中，经常图象或者视频上叠加文字和按钮的情况，比如常见的Banner、查看大图、视频播放器、专题等等。

而这也是新人容易出错的地方：文字直接放在图片上，当背景色和字色过于接近时，会影响文字的读取阅读。比如下面这样：

为了解决这个问题，通常的解决办法是在图片和文字中间叠加一个中间层(蒙层)，如图：

这样一来，即便背景色和字色过于接近，由于中间层的存在，也不会影响文字阅读。

中间层(即 常说的图片蒙层)的形式大概可分为“全蒙层”和“局部蒙层”两种：

由于全覆盖的蒙层对内容品质的影响很大，所以设计师大多采用局部蒙层的设计方案。另外，我们见到绝大多数的局部蒙层方案，已经都采用渐变色。如下图：

而今天这个被普遍采用的方案，其实也给产品在视觉上造成了不小的瑕疵，下面的文中我将阐述问题形成的原因和解决办法。

渐变的问题先提一个问题，如果渐变蒙层的参数是 黑色70%不透明度~黑色0%不透明度(#000000, 70% ~ #000000,0% )，参数如下图所示：

你觉得下面两张图，哪张是蒙层效果图?