UI设计中的渐变

很长一段时间，使用渐变是设计中最大的禁忌。设计师倾向于避免渐变，因为他们从90年代创造了强烈的设计印象。

在艺术字中创建的渐变

但现在已经不是这样了。如果你现在打开Dribbble或Behance，你很可能会看到许多使用渐变的设计。设计师使用的渐变是响亮而充满色彩的。

在本文中，我想分享一些关于如何在设计中使用渐变的技巧。

为什么我们实际上倾向于在设计中使用渐变？

为了找到这个问题的答案，我们需要回到2014年。这是平面设计变得流行的一年 - 谷歌发布了Material Design，Apple用平面UI设计更新了他们的macOS。那时平面设计是新鲜和令人兴奋的，特别是在与形态设计的比较中。

但平面设计有其自身的局限性，其中一个重要的局限是设计师可以使用的颜色和样式。很难说出超过10-15种颜色可用于平面设计。

通过使用渐变设计师：

• 获得更多创作自由。平面颜色扼杀了设计的潜力，渐变为无限可能性打开了大门。通过混合颜色，设计师可以创造引人注目且令人难忘的视觉设计。

• 
  

• 
  

• 可以为设计引入深度和尺寸。渐变解决了超平面设计的问题（设计看起来“太平 ”）

渐变是一种令人惊讶的多功能工具

使用渐变，设计师可以：

做出大胆的陈述

渐变有助于创造新的和意想不到的东西。如果对其应用渐变，即使像徽标这样的微小元素也会令人兴奋。

Instagram徽标：渐变赋予图标更多深度和尺寸。

同情某些元素

卓越的用户体验直观地引导用户完成产品。精心设计的梯度下意识地引导用户走向焦点。

通过使页面的某些部分更加强烈，您可以将更多的视觉重量放在页面上并使其更加明显。

看看Mixpanel主页。插图在此布局中起着至关重要的作用，渐变背景在视觉上优先考虑它。

当你需要引起人们对某个区域的注意时，渐变是完美的。Mixpanel使用渐变来突出显示插图

6创建令人印象深刻的渐变的技巧

1.学习渐变的基本类型

有几种类型的渐变。所有这些都涉及一个中心起点，颜色开始并逐渐融入其他颜色。对于本文，我想介绍三种常见的渐变类型：

线性

线性渐变创建了一条直线前进的颜色带。渐变从一种颜色平滑过渡到下一种颜色。

线性渐变。要创建线性渐变，您需要指定两种颜色（或一种颜色的两种颜色）。

径向

径向梯度类似于线性梯度，除了它们从中心点辐射出来。作为设计师，您可以指定中心点的位置并指定渐变的大小。

径向渐变

您在上面看到的Instagram徽标是使用径向渐变创建的。

锥

圆锥渐变类似于径向渐变 - 两者都是圆形的，并使用元素的中心作为颜色停止的源点。然而，对于径向渐变，颜色停止从圆的中心出现，而圆锥渐变在圆周围放置颜色停止。

在Adobe Illustrator中创建圆锥渐变。图片：stackexchange

2.不要随意选择颜色！

并非所有颜色都能很好地相互配合。例如，通过配对互补色，您可能会看到那种看起来很糟糕的颜色过渡。

以下示例中的红色到绿色渐变看起来很脏：

在创建渐变时尽量避免使用补色

最好使用任何类似的颜色（色轮上彼此相邻的颜色）：

或相同颜色的阴影（即蓝色阴影）

使用蓝色阴影作为渐变

3.创建平滑过渡

颜色之间的过渡应该非常顺畅。理想情况下，用户不应该注意到一种颜色流向另一种颜色的地方。

看一下下面的例子。您可以注意到一条分隔两种颜色的线条。这条线给人一种突然过渡的印象。

不要：创建一个突然的过渡

用户的眼睛在扫描页面时应该放松

要创建平滑过渡，您需要花更多时间玩色标。

执行：创建平滑过渡

4.传达情感或情绪

颜色唤起情绪反应。我们可以使用此颜色属性在更深层次上与受众联系。

想一想您希望用户在与产品互动时感受到什么。

例如，如果要创建高能量氛围，可以使用红色到橙色渐变。

明亮，大胆的色彩激起积极的感受

但是如果你想创造一个轻松的氛围，你可能想要使用深蓝色到蓝色渐变。

深沉的色调带来平静

5.不要忘记颜色对比

无论您的设计多么美观，您都不应忘记可访问性。始终检查颜色对比度。

不要：缺乏色彩对比会导致可读性差。

WCAG 2级AA要求普通文本的对比度至少为4.5：1，大文本的对比度为3：1，图形和用户界面组件的对比度至少为3：1

6.使用特殊工具

使用Adobe Illustrator创建渐变很容易。但是也有很多用于创建渐变的特殊工具：UXPRO