快捷搜索:  test  as

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

背景先容现在的APP界面中,常常图象或者视频上叠加翰墨和按钮的环境,比如常见的Banner、查看大年夜图、视频播放器、专题等等。

而这也是新人轻易掉足的地方:翰墨直接放在图片上,当背景致和字色过于靠近时,会影响翰墨的读取涉猎。比如下面这样:

为了办理这个问题,平日的办理法子是在图片和翰墨中心叠加一其中心层(蒙层),如图:

这样一来,即便背景致和字色过于靠近,因为中心层的存在,也不会影响翰墨涉猎。

中心层(即 常说的图片蒙层)的形式大年夜概可分为“全蒙层”和“局部蒙层”两种:

因为全覆盖的蒙层对内容品德的影响很大年夜,以是设计师大年夜多采纳局部蒙层的设计规划。别的,我们见到绝大年夜多半的局部蒙层规划,已经都采纳渐变色。如下图:

而本日这个被普遍采纳的规划,着实也给产品在视觉上造成了不小的瑕疵,下面的文中我将阐述问题形成的缘故原由和办理法子。

渐变的问题先提一个问题,假如渐变蒙层的参数是 玄色70%不透明度~玄色0%不透明度(#000000, 70% ~ #000000,0% ),参数如下图所示:

你感觉下面两张图,哪张是蒙层效果图?

我想险些所有人都邑选择左边的效果。终究左边的渐变过渡看起来加倍自然。而右边生硬的渐变则显得不敷美不雅。

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

PS:你能看到白线迁移改变处的两条竖线吗?

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

此中百度的渐变色“最深”,渐变的感到也最突兀。还比如爱奇艺克己节目的开场:

蒙层在白色的背景上显得十分不和谐。

那该若何办理呢?

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

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

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

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

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

您可能还会对下面的文章感兴趣: