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

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

uimaker
UI设计师 / 江苏 南京

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

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

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

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

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

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

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

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

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

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

那该如何解决呢?

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

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

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

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

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

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

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