Aurora UI: новый визуальный тренд на 2021 год

UI-дизайн, особенно его художественная, визуальная сторона, постоянно развивается. В то время как большинство текущих продуктов повторяют одни и те же проверенные и хорошо известные шаблоны информационной архитектуры, пользовательский интерфейс и ценностное предложение — самые большие отличия, которые может иметь продукт.

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

Все морфизмы

И неоморфизм, и глассморфизм были ответом на маятник дизайнерских тенденций, отступлением от вынужденного минимализма. Импульс здесь был таким же большим, как и тогда, когда он качнулся в обратном направлении — от скевоморфизма до функционального минимализма материального дизайна и тенденций современного дизайна.

Я бы сказал, что требуется около 7 лет, чтобы тенденции в дизайне начали меняться (плюс-минус). Деревянный фон и прошитая кожа первого iPhone (2007 г.) уступили место минималистскому дизайну iOS 7 (2013 г.), а 2020 год начал возвращать реальный мир, органическое вдохновение.

На использование эстетики матового стекла (как Microsoft, так и Apple) и скевоморфных иконок (обновление Mac OS Big Sur) люди в целом отреагировали положительно.

Мы хотели, чтобы продукты, которые мы используем, были «созданы» и обладали душой, а не были утилитарным готовым компонентом из системы дизайна (например, Material Design).

Нет ничего плохого в минимализме, даже в его крайностях, но он заставляет все сливаться воедино в массу тождества. Разнообразие дизайна сокращалось достаточно давно. Пользователи хотят перемен. Приведенные выше примеры Android выглядят скучно в самом утилитарном смысле. Некоторые возразят, что это нормально, что скучать — это хорошо. Но наша жизнь — это не просто выполнение задач из некоторого списка дел. Мы хотим восторга.

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

Привет, Aurora

Однако основная проблема с интерфейсами заключается в том, что они не могут стать слишком “забавными”, “фанковыми” иначе они перестанут быть функциональными. Так как же совместить функциональность с формой, которая выглядит красиво и «органично»?

Вы знаете, прямо как в Северном сиянии, которое, я думаю, является подходящим названием для этого типа фона.

Если сам интерфейс (кнопки, поля, метки) не может так сильно измениться, то различение зависит от фона. Это основной принцип, лежащий в основе всех «морфизмов» и этого нового стиля Aurora.

Используйте минималистичный дизайн для всего функционального и поиграйте только с орнаментом. Если все сделаете правильно, то у него также будет то преимущество, что он доступен, потому что доступен фактический интерфейс, то есть вещи, которые вы используете. Так что, если кто-то не видит тонких фоновых градиентов, все, что он упустит — только украшение.

Вот почему я считаю, что неоморфизм МОЖЕТ быть доступным, если он просто используется для карточек, и карточки имеют правильную иерархию. Просто не используйте его для текстовых полей, кнопок и т.д. И контраст не будет проблемой.

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

Сертифицированный глассморфизмом

Прежде чем мы перейдем к фонам, стоит упомянуть, что этот стиль особенно хорошо работает с глассморфизмом, и Apple знала это, создав менее размытую версию нерегулярных цветовых узоров в качестве своих основных обоев Big Sur.

Apple и Microsoft лидируют в изучении этих новых тенденций, но они уже не единственные.

Как начать?

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

Есть три основных способа создания этого эффекта.

Размытые формы

Метод размытых форм заключается в создании неправильных (предпочтительно овальных) форм, а затем их размытии и смешивании для создания нерегулярного градиента.

Множественные градиентные заливки

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

Просто размыть фото

Если у вас есть фотография, на которой уже есть несколько мягких цветовых переходов, вы можете размыть (с максимальным значением размытия) фотографию и получить этот органический эффект с минимальными усилиями.

Я также сделал два видео о том, как добиться этого эффекта в Figma и Sketch. Вот первый:

Следующие шаги

Затем просто выберите предпочитаемый стиль наложения (стекломорфизм, стандартная прозрачность или непрозрачность), и вы получите красивый пользовательский интерфейс в стиле Aurora.

Убедитесь, что все важные элементы интерфейса доступны, а ваш пользовательский интерфейс выделяется из толпы, по крайней мере, до тех пор, пока все остальные не начнут размывать свой фон и маятник снова не начнет качаться.

Впрочем, у нас должна быть еще пара лет (экспериментов), прежде чем это произойдет.

Источник