Глассморфизм — новый тренд в дизайне интерфейсов

Сейчас на рынке появился новый стиль, популярность которого растет. В то время, как неоморфизм имитировал штампованную пластиковую поверхность (но при этом выглядел как один слой), этот новый тренд более объемный. К его основным характеристикам относятся:

• Прозрачность (эффект матового стекла с использованием размытия фона)
• Многоуровневый подход с объектами, плавающими в пространстве.
• Яркие цвета, подчеркивающие размытую прозрачность
• Тонкая светлая граница на полупрозрачных объектах.

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

Мне кажется, что из-за этого стеклянного вида, лучше всего назвать этот тренд ГЛАССМОРФИЗМ (стекломорфизм).

История

Размытие фона было впервые широко представлено в 2013 году с релизом iOS 7. Это было довольно радикальное изменение, но, несмотря на все разногласия по поводу сверхлегких шрифтов и уродливых иконок, это было одно из немногих нововведений, которое не вызывало споров. Казалось, людям это нравится.

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

Усиление тренда

С тех пор Apple значительно уменьшила эффект размытого стекла в своей мобильной ОС, но недавно вернула его в Mac OS Big Sur. Просто посмотрите, как на окно Sketch на картинке выше, и как сквозь него просачивается размытая часть фотографии. Я выделил места, где размытие фона наиболее заметно.

Конечно, вы можете полностью отключить этот эффект в настройках системы.

Дизайн-система Microsoft Fluent также хорошо справляется с этим эффектом. Они называют этот конкретный элемент акрилом (The Acrylic) и демонстрируют его как неотъемлемую часть своей дизайн-системы.

Акрил – это разновидность кисти, которая создает полупрозрачную текстуру. Вы можете нанести акрил на поверхности приложения, чтобы добавить глубины и задать визуальную иерархию.

— Microsoft Fluent Design System

/

Анализ Dribbble

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

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

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

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

Сейчас они все публикуются на Dribbble с хэштегом #glass, но, думаю, что хештег #Glassmorphism будет правильнее. Glass может быть просто стаканом, из которого вы пьете, поэтому я считаю, что этот стиль заслуживает названия, по которому его легче идентифицировать.

Как добиться этого эффекта

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

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

Как установить правильную прозрачность

Однако важно помнить, что вы не делаете прозрачной всю фигуру – только ее заливку. Большинство инструментов дизайна при 100% заливке и более низкой прозрачности объекта просто отключают размытие фона.

В приведенном выше примере у нас одинаковое значение размытия фона, равное 8, но изображения выглядят совершенно иначе. Когда непрозрачность заливки равна 100%, не имеет значения, насколько мала непрозрачность объекта. У нас просто не получится желаемый размытый фон.

Как выбрать подходящий фон

Фон играет важную роль в создании этого эффекта (в буквальном смысле). Он не может быть слишком простым или унылым, иначе эффект не будет заметен. Он также не может быть слишком детализированным

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

При выборе фона убедитесь, что у него достаточно тональной разницы, чтобы эффект стекла был действительно заметен.

Заключительные детали

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

Доступность

Как и в случае с неоморфизмом, этот стиль, вероятно, не так доступен, как, скажем, Material Design. Главное правило неоморфизма применимо и здесь – если у вас есть хорошая функциональная иерархия, то экранные элементы должны работать без фона. Это гарантирует, что люди с проблемами зрения по-прежнему смогут понимать интерфейс.