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

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

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

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

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

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

上图是日本松原城外的十字路口,大家感受下。

颜色渐变的解决办法回到颜色渐变。如果我们想让渐变色平滑融入图像,就需要改变渐变的曲率。关于这一点,在Google的Material Design中,Google的设计师建议对渐变蒙层做如下调整:“gradient should be long… with the center point about 3/10 towards the darker side of the gradient. This gives the gradient a natural falloff and avoids a sharp edge.”

关于这段话,我的理解是:想要平滑过渡,可以从量个方面入手:第一,把渐变拉长;第二,把过渡的中间色,从50%位置移动到30%的位置(需要增加一个过渡节点,节点越多越好)。

【第一:渐变拉长】我们先拉长标准的线性渐变,看看效果,示意图如下:

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

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

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

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

接着调整中间三个节点的位置(把50%位置的节点,移动到30%的位置):

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

这样也实现了平滑过渡。(调整后的节点越多,过渡效果越平滑)。用函数曲线可以很好的说明节点的变化:

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

图中直线是标准的线性渐变,而曲线则是调整后的渐变频率。

下面以爱奇艺视频播放器为例,对比下调整前后的效果:

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

Easing Gradient当然,手动调整渐变不仅费时费力,还容易手抖出错~ 过去每次渐变换颜色,都要调整半天。现在有了更快的办法——Sketch Plugins,去年发现了一款可以轻松曲线渐变的插件:Easing Gradient (文末有附件,可下载尝试)

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

可以一键做出平滑的渐变效果,如下图:

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

最后我们可以根据实际情况优化产品效果:· 切图蒙层,设计师只需替换相应的切图即可。· 代码蒙层,我和公司的前端开发沟通后确认,iOS、Android两端都可以用代码实现曲线渐变。

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

 收藏
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!