Градиенты и как их правильно использовать в UI-дизайне


09.11.2021 Время чтения - 4 минуты 695

Уже довольно давно градиенты плотно обосновались в UI-дизайне. Но что они такое и как они выглядят? В чем разница между линейными, радиальными и угловыми градиентами? И как правильно использовать градиенты в вашем UI?

Градиент – это постепенный переход от одного цвета к другому или нескольким цветам. В современном UI-дизайне градиенты очень популярны (сейчас 2021 год, я не знаю, когда вы прочитаете этот пост, но меня держит в заложниках чешское пиво. ПОМОГИТЕ МНЕ!). Сегодня я объясню, зачем использовать градиенты, покажу, как их создавать, как выбирать для них цвета, и в конце поцелую вас в лобик ❤️

Поехали, ребята

Gif with teacher

Если вы посмотрите вокруг прямо сейчас, то заметите, что практически все является градиентом и почти ничто не имеет сплошного цвета. Так работает свет.

Что такое градиент с научной точки зрения?

Градиент в математике – это дифференциальный оператор, применяемый к трехмерной вектор-функции для получения вектора, три компонента которого являются частными производными функции относительно трех ее переменных. Символ градиента — ∇. [1]

Гифка с мальчиком показывает палец вверх

Что такое градиент на человеческом языке?

Это цветовые переходы, которые представляют собой постепенное смещение от одного цвета к другому (или, если вы в красочном настроении, от одного цвета к другому цвету и еще к другому цвету – градиенты не ограничиваются двумя оттенками). [2]

Funny image with woman saying “You said memes would work!” and cat on the other image “I said good memes would work”

Итак, почему это важно? Применение градиентов может приблизить наши проекты к реальности. Другими словами, сделать их более реалистичными. Они (вместе с тенями) – отличный способ придать UI-дизайну больше измерений и, возможно, сделать интерфейс более интуитивно понятным. Пожалуйста, не используйте градиенты постоянно. Они хороши только как инструмент для достижения целей, но не забывайте о логике дизайна.

image with two types of buttons with different gradient

Не забывайте о цели вашего дизайна и общей концепции. Сказать, что кнопка с градиентом лучше, было бы ложью, потому что правильный ответ – «зависит от ситуации!». Но поскольку у нас тут статья о градиентах, скажем, что кнопка с градиентом лучше, и идем дальше.

Еще одна причина использовать градиенты

Помимо очевидного объяснения «они хорошо выглядят», градиенты дают дизайнерам свободу творчества. Количество градиентов, которые вы можете создать, практически безгранично. Сочетая два цвета, можно получить красивый и неповторимый эффект. А еще элементы с градиентом выделяются на фоне остального дизайна, что может помочь в развитии иерархии.

Прямоугольники с разными градиентами
Анимация с движущимся градиентом от белого к розовому
градиент сетки

Сплошные цвета выделяются и бросаются в глаза, но также и с градиентами. В мире существует уже очень много компаний, и многие цвета уже прикарманили. Поэтому градиент может просто помочь бренду выделиться.

Instagram и градиент Firafox

Типы градиентов

Для создания уникального эффекта можно перемещать маркеры за пределы формы. Так получатся более деликатные переходы. Или «перетаскивать» каждый цвет вдоль градиента, чтобы изменять его расположение. Но также для этого существует множество типов градиентов.

Линейный градиент

Это прямое линейное изменение цвета между двумя или более оттенками.

Линейный градиент

Радиальный градиент

Эллипс образует радиальный градиент, один цвет которого находится в центре, а другой – по краям. Обычно его используют, чтобы создать впечатление глубины на плоских предметах. При использовании на овале в правильном месте можно получить интересные результаты.

Радиальный градиент

Угловой градиент

Из-за своей геометрии угловой градиент (также известный как конический градиент) похож на радиальный. «Остановки» цвета в нем размещаются по кругу. Это довольно необычный выбор в UI-дизайне. Он может показаться как оригинальным, так и странным.

Angular/conic gradient

Сетчатые градиенты

Сетчатые градиенты – это абстрактные многоцветные комбинации. Их сложно сделать самостоятельно, но можно бесплатно создать в паре генераторов в интернете. Они по-прежнему не так часто встречаются, поэтому поэкспериментируйте с ними, но будьте осторожны, чтобы не злоупотреблять.

Mesh gradients

Выбор цветов для градиентов

Вы можете создать градиент с любой цветовой комбинацией, но при выборе оттенков стоит соблюдать некоторые рекомендации.

Для плавности градиентов выбирайте цвета похожих оттенков

Всегда стремитесь к плавному градиенту. Не делайте переход между оттенками слишком резким, как показано слева.

Плавный градиент

Избегайте сероватых цветов в центре

Уродливые серые области посередине – еще одна причина избегать «резких» переходов. Вот что нужно учесть:

Серые цвета в центре - не лучший способ использовать градиент

Градиенты с резким переходом между цветами сразу становятся непривлекательными. Лучший способ создать градиент – начать с двух одинаковых цветов, а затем увеличить значение оттенка одного из них на 20 или 25.

Родственные цвета

Попробуйте выбрать цвета, близкие друг к другу на цветовом круге. Или используйте логические цветовые узоры (мы обсудим их позже, в следующем посте).

Цветовой круг

Изображение-тизер

Слишком много градиентов = когнитивная перегрузка.

изображение, показывающее разные логотипы с градиентом

Эти приложения имеют такие иконки по разным причинам, одна из которых – привлечь внимание пользователя. Градиенты выделяют предметы из толпы. Но по приведенным выше примерам видно, что если выделяется все, то не выделяется ничто. Цвета просто одинаковые. И хотя беспорядочная смесь ярких градиентов может показаться красивой, но в реальности это чрезвычайно напрягающее глаз зрелище.

Ссылки

[1] https://www.britannica.com/science/gradient-mat Mathematics

[2] https://99designs.com/blog/trends/gradient-design-trend/

На сегодня все, хорошего дня.

gif «Это все, ребята»