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

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

可惜，右图才是和上面参数对应的效果图。因为在线性渐变终点的位置(即两端)颜色过渡会突然消失。从而导致了明显的“尖锐感”。如下图：

PS：你能看到白线转折处的两条竖线吗?

类似的问题，在当下的APP中随处可见，随机找了三个APP，微信、百度、站酷：

其中百度的渐变色“最深”，渐变的感觉也最突兀。还比如爱奇艺自制节目的开场：

蒙层在白色的背景上显得十分不协调。

那该如何解决呢?

圆角渐变提到颜色渐变，很容易想到iOS的圆角渐变。2014年，Apple发布iOS 7，调整了图标的圆角曲率。如图：

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

同样的设计也应用在苹果的硬件设计中。比如下图左侧是普通带有圆角边缘的矩形盒子，可以看到圆角的高光在圆角两侧有急剧的变化，即突然中断。