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

UI设计教程   /  UI教程     

uimaker
UI设计师 / 江苏 南京

来源:UI中国   作者:海边来的设计师

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 收藏