UI设计流行趋势介绍:在UI场景如何实现极光风设计

Post 4 of 1029

对品牌而言,掌握UI设计趋势有助于我们把控设计的方向,带给用户更好的感官体验。正如其名,极光风(Aurora UI)于2021年开始被广泛应用,凭着绚丽多彩的特点形成一种流行且独特的视觉风格。

今天,小编就和大家说说,在UI场景如何实现极光风设计的方法,有兴趣的朋友不妨往下看!

在UI场景如何实现极光风设计?

若想在UI场景中实现极光风设计,从技术的角度来说难度并不高,关键在于把控好配色远离,下面为大家总结几种实现方法:

方法①:利用不透明渐变融合

不透明渐变在UI设计中的运用比较普遍,利用的是不透明度从100%~0%之间形成渐变,让色彩逐渐消失或者淡化。

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

如图,画一个圆形,选择径向渐变,渐变两端颜色选择同一色相,然后将中间颜色不透明度设置为100%,最外周的颜色不透明度设置为0%。

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

同样方法反复绘制几个不同颜色的圆形进行组合,即可完成极光风背景设计。

方法②:利用模糊度变化融合

此方法结合了形状和模糊的设置。

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

绘制几个大小不等的圆形进行排版组合,然后将所有圆形进行模糊设置。(形状的绘制最好大小有差异,排版错落有致,这样的效果会比较富有变化)

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

颜色选择上,需要根据背景的强化程度选择,低饱和度的颜色融合性更强,适合作为弱化性质的背景使用。

方法③:利用背景模糊融合

背景模糊在实现玻璃质感和其他质感的图标上非常实用。

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

在背景层绘制图形,颜色和形状均可自由发挥,然后再绘制一个形象作为调节层,调节层用于控制模糊效果。

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

在调节层的形状上设置一个带有透明度的颜色,然后再设置背景模糊。(注意:背景模糊的强弱决定模糊程度,而不透明度的大小则决定整体的亮度)

方法④:利用图片模糊结合

除了进行配色处理,我们也可以挑选一张不错的图片来实现极光风效果。

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

挑选一张色彩符合要求的图片,然后对图片执行高斯模糊,模糊的强弱决定了模糊之后的自然度。

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

我们也可以截取图片中的一部分,同样能带来意想不到的效果。

除了上述四个方法,还有更多不一样的实现方法,大家可以根据自己的探索选择合适的方法。接下来,小编将通过一些案例说说极光风设计的应用场景。

【UI设计案例】极光风格设计可以应用在哪些场景

由于极光风在众多UI场景中被广泛运用,形成了近些年影响UI设计风格的发展。下面,我们来看看极光风具体的应用场景。

场景一 强化导航栏设计的视觉感

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

利用极光风的处理手法,能轻松地实现轻重之间的理想状态,既可强化顶部导航栏的视觉感,还可以丰富整个视觉的表现力,使整体UI设计风格更加年轻化。

场景二 点缀弹窗设计局部

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

将极光风运用到弹窗设计,作为背景局部或者插画部分等的衬托,使视觉感更加亲和自然,也不会过度干扰其他元素的呈现。

场景三 强化卡片式设计局部

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

在卡片的边缘位置利用极光风强化色彩,可以使得卡片色彩更加丰富,同时还可使部分电商产品起到与商品形成色彩呼应的作用。

场景四 图标设计中的运用

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

将极光风运用到图标设计中,可强化图标的色彩感和层次感,使得图标色彩丰富和强化光影变化。

景五 其他场景中的应用普及

UI设计流行趋势介绍:在UI场景如何实现极光风设计

UI设计流行趋势

除了上述提及到的,极光风还适用于很多UI场景,这里不一一细说。无论是作为背景强化,还是元素装饰,极光风都能给用户带来年轻化的感官体验。

此外,极光风设计还可出现在更多UI以外场景,包括 Banner 设计、海报设计、专题页设计等,是一个影响范围比较广的设计趋势之一。

This article was written by admin

MENU
網頁設計公司