目前大部分产品的设计都会在局部遮罩方案中加入渐变色，但是通过app调查对比发现很多渐变色遮罩有点突兀，那么如何改变呢？作者给我们做了详细的解释。NO.1背景介绍在目前的APP界面中，文字和按钮经常叠加在图片或视频上，比如常见的banner、查看大图、视频播放器、专题等。而这个也是新手容易出错的地方：文字直接放在图片上。荷兰电话号码列表 当背景颜色和文字颜色太接近时，会影响文字的阅读和阅读。例如以下：为了解决这个问题，通常的解决方法是在它们之间叠加一个中间层（mask）图片和文字，如图：这样即使背景颜色和文字颜色过于接近，荷兰电话号码列表 也不会因为中间层的存在而影响文字阅读。
中间的形式layer（也就是常说的图片遮罩层）大致可以分为“全遮罩层”和“部分遮罩层”两种：由于全覆盖遮罩对内容的质量影响很大，设计师大多采用局部遮罩设计方案。另外，我们看到大部分局部遮罩方案都采用了渐变色。荷兰电话号码列表 如下图： 如今，这种常用的解决方案实际上给产品造成了很多视觉缺陷。在下面的文章中，我将解释问题的原因和解决方法。荷兰电话号码列表 NO.2 渐变问题我先问一个问题，如果渐变蒙版的参数是黑色70%不透明度~黑色0%不透明度（#000000, 70% ~ #000000,0% )，
参数如下图：你觉得下面两张图哪一张是遮蔽效果图？我想几乎每个人都会选择左边的效果——左边的渐变过渡后看起来更自然全部。右边的钝化渐变不是很漂亮。可惜右图是上面参数对应的渲染图。因为颜色过渡在线性渐变的终点（即两端）突然消失了，荷兰电话号码列表 导致了明显的“锐度”。如下图： PS：你能看到白线转的那两条竖线吗？现在的APP到处都可以看到类似的问题，我随便找了三个APP——微信、百度、占库：其中百度的渐变色是“最深”的，荷兰电话号码列表 渐变的感觉也是最突兀的。再比如爱奇艺自制程序的开场：