Глассморфизм в веб-дизайне: определение и лучшие практики применения

Для написания статьи использован материал из Glassmorphism: Definition and Best Practices.

Глассморфизм стал задавать тренды в дизайнерских концепциях Microsoft и Apple примерно в 2020 году. Практически стразу элементы, которые напоминают матовое стекло, превратились в маст–хев для многих веб–дизайнеров. Применение этого стилистического метода – не просто дань моде: с его помощью легко выстроить визуальную иерархию, добавить эффект погружения в интерфейс и общую глубину. Однако все хорошо в меру: чрезмерное использование матового стекла способно привести к прямо противоположному результату, спровоцировав проблемы с доступностью и юзабилити.

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

Что такое эффект глассморфизма?

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

Яркий представитель глассморфизма – интерфейс iOS. Например, папки в iPad помещены на размытом фоне, чтобы подчеркнуть их «плавающий» вид, а полупрозрачные окна уведомлений на MacOS помогают сохранить связь с контекстом, но, при этом, не отвлекают от содержимого. Кроме того, глассморфизм в веб–дизайне широко применяется в виртуальной и смешанной реальности для создания ощущения погружения в интерфейс. Например, в Apple Vision Pro почти полностью прозрачные элементы накладываются на окружение, оставаясь видимыми.

Хотя большинство специалистов привыкли использовать именно термин glassmorphism, крупные компании часто придумывают этому стилю собственные названия:

• Acrylic в Microsoft Fluent Design — материал с полупрозрачностью и размытием, который применяется в меню и панелях.
• SwiftUI Materials у Apple — набор стилей для создания «стеклянных» элементов в интерфейсах MacOS, iOS и Vision Pro.

Глассморфизм на сайте: как добиться нужного впечатления

Чтобы создать эффект матового стекла в дизайне своего портала, необходимо использовать три ключевых параметра.

Прозрачность (Opacity)

Чем ниже непрозрачность элемента, тем лучше виден фон. Для текста следует использовать непрозрачность не ниже 60%, иначе буквы будут нечитаемыми.

• 90% непрозрачности – фон почти не виден.
• 30% непрозрачности – фон просвечивает, создавая эффект стекла.

Размытие фона (Background Blur)

Размытие искажает объекты в области за элементами, создавая тот самый эффект матового стекла: иконки в глассморфизме подчеркивают именно так. Чем сложнее фон (например, в качестве него использовано фото, градиенты или анимация), тем выше должно быть размытие. Технически это реализуется следующим образом:

• 25px blur – фон слегка размыт, но детали различимы.
• 100px blur – фон превращается в абстрактное пятно, что усиливает акцент на основном контенте.

Обводки и градиенты

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

3 простых правила для дизайнеров и разработчиков

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

• Соблюдайте контрастность. Полупрозрачные элементы часто ухудшают читаемость текста, а значит – увеличивают количество отказов. Чтобы не терять лидов, проверяйте контраст с помощью специальных инструментов. Например, в Figma это поможет сделать плагин Contrast by Willowtree. Постарайтесь избегать размещения текста на пестром фоне, чтобы ваш дизайн не слился в сплошное пятно.
• Не экономьте на размытии. Чем сильнее размыт фон, тем лучше. Это снижает общий визуальный шум и помогает пользователю сосредоточиться на выполнении целевого действия (например, на кнопке «Купить»). Например, контекстное меню в Windows (Acrylic) использует интенсивное размытие, чтобы выделить опции поверх любого фона.
• Дайте пользователям возможность настройки. Не все любят стекломорфизм. Добавьте опции в настройки сайта: например, дайте посетителям возможность заменить полупрозрачные элементы на сплошные оттенки или регулировать прозрачность, уменьшая ее. Так, в macOS есть функция «Уменьшить прозрачность», которая делает интерфейс более контрастным.

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

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

Создавайте эстетичные и функциональные интерфейсы, используя возможности Визуального редактора кода Taptop. Благодаря системе drag–and–drop вы не только быстро создадите прототип, но и с рекордной скоростью сверстаете готовый сайт без необходимости прибегать к другим программам. Кроме того, здесь есть классы: если вам захочется использовать трендовый эффект глассморфизма, настраивать его к каждому элементу сайта не придется. Создайте нужный класс и примените его к выбранным объектам, чтобы внести изменения автоматически. Экспериментируйте вместе с Taptop, чтобы ваши проекты не уступали работам трендовых дизайнеров.