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

而右侧苹果电脑的圆角设计。我们会看到圆角过渡十分柔和。这也是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两端都可以用代码实现曲线渐变。

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