UI-дизайн, особенно его художественная, визуальная сторона постоянно развивается. В то время как большинство современных продуктов повторяют одни и те же, проверенные и хорошо известные шаблоны информационной архитектуры, UI и ценностное предложение выступают наиболее масштабными отличительными факторами, которые могут быть у продукта.
Никто не собирается переделывать процесс регистрации, который хорошо работает в большинстве других приложений — мы обязательно его подправим и, надеюсь, проведем анализ, но в итоге это будет просто копия того, что пользователи уже знают.
Все морфизмы
Такие направления, как неоморфизм и глассморфизм, выступают против вынужденного минимализма. Здесь был такой же импульс, как и ранее, когда он качнулся в обратном направлении — от скевоморфизма до функционального минимализма материального дизайна и современных дизайнерских тенденций.
Автор считает, что потребуется около 7 лет для полного преобразования дизайнерской тенденции (плюс-минус). Деревянные фоны и прошитая кожа первого iPhone (2007) уступили место минималистичному дизайну iOS 7 (2013), а в 2020 году вернулся тренд на естественность.
Как правило, пользователи положительно реагировали на такие изменения, как матовое стекло (как Microsoft, так и Apple) и скевоморфные иконки (обновление Mac OS Big Sur).
Мы хотели, чтобы используемые продукты были должным образом разработаны и обладали душой, а не являлись готовым утилитарным продуктом из системы дизайна.
Нет ничего плохого в минимализме, даже в его крайностях, но он смешивает все в массу тождества. Разнообразие дизайна сокращалось на протяжении долгого времени. Сегодня пользователи хотят изменений. Приведенные выше примеры Android выглядят скучно в самом утилитарном смысле. Некоторые утверждают, что это нормально, что скучно — это хорошо. Но наша жизнь — это не просто выполнение задач по каким-то спискам, мы все хотим быть удовлетворены.
Новый, скевоморфный импульс всех этих новых тенденций также исходит от возрождения ремесленной культуры. Вместо очередного минималистичного скучного стола из IKEA, нам нравится неровная древесина, которая обладает фактурой и придаст жизнь нашему дому. То же самое касается кошельков, рюкзаков, одежды и многого другого. Мы хотим, чтобы вещи, которые мы используем, были «ручной работы», а не массового производства.
Привет, Aurora
Однако основная проблема с интерфейсами заключается в том, что они нельзя быть слишком броскими, иначе они перестанут быть функциональными. Так как же мы сможем совместить функциональность с формой, которая выглядит красиво и органично?
Северное сияние является подходящим названием для данного типа фона.
Если сам интерфейс (кнопки, поля, метки) не сильно меняется, то различение будет зависеть от фона. Это главный принцип, лежащий в основе всех морфизмов и этого нового стиля Aurora.
Используйте минималистичный дизайн для всего функционального и поэкспериментируете только с орнаментом. Если все сделано правильно, вы достигните минимализма, поскольку доступен фактический интерфейс, то есть вещи, которые вы используете. Поэтому, если кто-то не сможет увидеть тонких фоновых градиентов, единственное, что он упустит — только украшения.
Именно поэтому автор придерживается того, что неоморфизм может быть доступен, если он просто используется для карт, а эти карты в свою очередь имеют правильную иерархию. Просто не используйте его для текстовых полей, кнопок и т.д. В таком случае, контраст не будет проблемой.
Смешение «креативных» фонов с минималистичными UI-элементами является лучшим компромиссом между функциональностью и доступностью, но, как и все доступное, это должно быть сделано правильно.
Сертифицированный глассморфизм
Перед тем, как мы перейдем к фонам, стоит упомянуть, что данный стиль хорошо работает с глассморфизмом. Компания Apple знала об этом, когда создавала размытую версию цветовых узоров в качестве своих основных обоев Big Sur.
Apple и Microsoft лидируют в изучении этих новых тенденций, но они больше не являются единственными.
С чего начать?
Вы можете использовать существующие элементы интерфейса с этим стилем, если они имеют достаточно хорошие контрасты, размеры и сенсорные цели.
Существует три основных способа создания данного эффекта.
Размытые фигуры
Метод размытых фигур — это создание неравномерных (предпочтительно овальных) фигур, а затем их размытие и смешивание для создания неоднородного градиента.
Различные градиентные заливки
Данный метод представляет собой смесь градиентных заливок (лучше всего работают радиальные) с уменьшением непрозрачности по направлению к внешнему краю заливки. Просто перетащите ручки вокруг, чтобы добиться наилучшего смешивания. Чем больше прозрачные внешние края перекрываются, тем больше цветов будет смешиваться. Вы также можете объединить этот метод с первым.
Просто размыть фотографию
Если у вас уже имеется фотография, которая обладает парой мягких цветовых переходов, вы можете размыть ее, используя максимальное значение размытия, и получить этот естественный эффект с минимальными усилиями.
Также вы можете посмотреть видео о том, как достичь этого эффекта в Figma и Sketch:
Следующие шаги
Затем выберете желаемый стиль наложения (глассморфизм, стандартная прозрачность или матовость) и у вас появится красивый пользовательский интерфейс в стиле Aurora.
Убедитесь, что важные элементы интерфейса доступны, а ваш пользовательский интерфейс выделяется из толпы. По крайней мере, до тех пор, пока все остальные не начнут размывать свой фон, и маятник снова не начнет качаться назад. Однако на это уйдет несколько лет.
Читайте также:
- 7 факторов, которые помогут улучшить UX-дизайн
- ТОП-5 законов для каждого UX-дизайнера
- Применение пустого пространства в UI-дизайне
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи: Michal Malewicz Aurora UI — new visual trend for 2021
