细节提升:用渐变巧妙提升产品质感

细节提升:用渐变巧妙提升产品质感

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

比如下面这样:

细节提升:用渐变巧妙提升产品质感

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

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

细节提升:用渐变巧妙提升产品质感

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

渐变的问题

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

细节提升:用渐变巧妙提升产品质感

我想几乎所有人都会选择左边的效果图。毕竟左边的渐变过渡看起来更加自然。而右边生硬的渐变则显得不够美观。

可惜,右图才是和上面参数对应的效果图。

因为在线性渐变终点的位置(即两端)颜色过渡会突然消失。从而导致了明显的“尖锐感”。如下图:

细节提升:用渐变巧妙提升产品质感

其中百度的渐变色“最深”,渐变的感觉也最突兀。

还比如爱奇艺自制节目的开场:

细节提升:用渐变巧妙提升产品质感

此前采用的普通的圆角会在两端有明显的“中断”。从iOS 7 开始,苹果设计的圆角则在过渡上显得更加自然。

细节提升:用渐变巧妙提升产品质感

而右侧苹果电脑的圆角设计。我们会看到圆角过渡十分柔和。这也是Apple产品让我喜欢它们的原因之一。

生活中,过渡曲线还应用在旋转的高速公路中。得益于逐渐过渡的曲线,我们在驶入和驶出旋转高架时,才不会翻车。

细节提升:用渐变巧妙提升产品质感

这说明,单独拉长蒙层的尺寸(渐变方向),可以达成平滑过渡的效果。

【第二:调整节点】

在尺寸不变的情况下,增加三个中间节点。示意图如下:

细节提升:用渐变巧妙提升产品质感

这样也实现了平滑过渡。(调整后的节点越多,过渡效果越平滑)。

用函数曲线可以很好的说明节点的变化:

细节提升:用渐变巧妙提升产品质感

Easing Gradient

当然,手动调整渐变不仅费时费力,还容易手抖出错~ 过去每次渐变换颜色,都要调整半天。

现在有了更快的办法——Sketch Plugins,去年发现了一款可以轻松曲线渐变的插件:Easing Gradient

细节提升:用渐变巧妙提升产品质感

最后

我们可以根据实际情况优化产品效果:

· 切图蒙层,设计师只需替换相应的切图即可。

· 代码蒙层,我和公司的前端开发沟通后确认,iOS、Android两端都可以用代码实现曲线渐变。

如果你想领先一步完善产品中的渐变效果,就抓紧试试文中的办法吧。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注