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

NO.1背景介绍

目前的APP界面中，经常图象或者视频上叠加文字和图标的状况，比如常用的Banner、查看大图、视频播放器、专题等等。

而这只是新人容易错误的地方：文字直接放到照片上，当背景色和字色更加接近时，会妨碍文字的读取阅读。

例如以下这种：

为了解决这个难题，通常的缓解方法是在照片和文字后面叠加一个前面层（蒙层），如图：

这种一来，即便背景色和字色更加接近，由于前面层的存在，也不会妨碍文字阅读。

后面层（即常说的截图蒙层）的方式一般可分为“全蒙层”和“局部蒙层”两种：

因为全覆盖的蒙层对内容质量的妨碍很大，所以设计师大多采取局部蒙层的设计方案。

此外，我们看到绝大多数的局部蒙层方案，已经都采取渐变色。如下图：

而现在这个被普遍运用的方案，其实也给产品在视觉上产生了不小的瑕疵，下面的文中我将探讨问题产生的缘由和缓解方法。

NO.2渐变的问题

先提一个难题，如果渐变蒙层的参数是白色70%不透明度~黑色0%不透明度（#000000,70%~#000000,0%），参数如右图图示：

你认为以下两张图，哪张是蒙层效果图？

我想几乎所有人就会选择上面的效果。毕竟左边的渐变过渡看上去非常自然。而后面生硬的渐变则变得不够美观。

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

由于在线性渐变终点的位置（即两端）形状过渡会时常消失。从而造成了显著的“尖锐感”。如下图：

PS：你能看见白线转折处的两条竖线吗？

类似的难题，在现今的APP中到处可见，随机找了三个APP，微信、百度、站酷：

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

还比如爱奇艺自制栏目的开场：

蒙层在黑色的背景上变得非常不协调。

那该怎么解决呢？

NO.3圆角渐变

提到颜色渐变，很容易想到iOS的圆角渐变。

2014年，Apple发布iOS7，调整了界面的倒角曲率。如图：

此前采取的普通的圆角会在两端有显著的“中断”。从iOS7开始，苹果设计的圆角则在过渡上变得非常自然。

同样的设计也应用在小米的软件设计中。比如右图右边是普通带有弧形边缘的圆形盒子，可以看见圆角的高光在斜角两侧有大幅的差异，即突然中断。

而右边苹果手机的圆角设计。我们会提到圆角过渡非常细腻。这只是Apple产品让我偏爱它们的缘由之一。

生活中，过渡曲线还应用在翻转的高速道路中。得益于迅速过渡的曲线，我们在驶向和驶出旋转高架时，才不会翻车。

上图是中国松原城外的十字路口，大家感受下。

NO.4颜色渐变的解决方法

回到颜色渐变。如果我们想让渐变色平滑融入图像，就必须改变渐变的曲率。

关于这一点，在Google的MaterialDesign中，Google的设计师建议对渐变蒙层做如下调整：

“gradientshouldbelong…withthecenterpointabout3/10towardsthedarkersideofthegradient.Thisgivesthegradientanaturalfalloffandavoidsasharpedge.”

关于这段话，我的理解是：想要平滑过渡，可以从两个方面入手：

第一，把渐变拉长；

第二，把过渡的后面色，从50%位置移动到30%的位置（必须降低一个过渡节点，节点越多越好）。

【第一：渐变拉长】

我们先拉长标准的线性渐变，看看效果，示意图如下：

这表明，单独拉长蒙层的宽度（渐变方向），可以达成平滑过渡的效果。

【第二：调整节点】

在尺寸不变的状况下，增加三个前面节点。示意图如下：

接着调整中间三个节点的位置（把50%位置的节点，移动到30%的位置)：

这种也推动了平滑过渡。（微调后的节点越多，过渡效果越平滑）。

用函数曲线可以较好的表明节点的差异：

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

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

NO.5EasingGradient

其实，手动微调渐变不仅费时费力，还容易手抖出错~过去经常渐变换形状，都要调整半天。

目前有了更快的方法——SketchPlugins，去年发现了一款可以轻松曲线渐变的插件：EasingGradient

可以一键做出平滑的渐变效果，如右图：

下载链接：

END.试试吧

·切图蒙层，设计师只需更换相应的切图就能。

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

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