ще один тренд UI дизайна становится все более популярным. Вы о нем еще не знаете?
В прошлом году я непреднамеренно начал повальное увлечение неоморфизмом, но, как я тогда и предсказывал, он не захватил сферу дизайна. Тогда я упомянул все потенциальные проблемы доступности, которыми обладает этот стиль.
Конечно, попадались приложения и продукты, выполненные в этом стиле, но наиболее заметным стало его использование в рекламе Samsung и во вступлении роликов MKBHD. Но это были отдельные элементы, а не продукты выполненные в этом стиле целиком. Это подтверждает мой тезис о том, что этот стиль работает, если его редко использовать, и, если объекты на этом фоне все еще сохраняют структуру и читабельность.
Привет, Глассморфизм
Сейчас на рынке появился новый стиль, популярность которого растет. В то время, как неоморфизм имитировал штампованную пластиковую поверхность (но при этом выглядел как один слой), этот новый тренд более объемный. К его основным характеристикам относятся:
- Прозрачность (эффект матового стекла с использованием размытия фона)
- Многоуровневый подход с объектами, плавающими в пространстве.
- Яркие цвета, подчеркивающие размытую прозрачность
- Тонкая светлая граница на полупрозрачных объектах.
Эта вертикальность и тот факт, что вы видите сквозь нее, означает, что пользователи могут воспринимать иерархию и глубину интерфейса. Они просто видят, какой слой над каким расположен.
Мне кажется, что из-за этого стеклянного вида, лучше всего назвать этот тренд ГЛАССМОРФИЗМ (стекломорфизм).
История
Размытие фона было впервые широко представлено в 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 с определенной прозрачностью. Она имитирует край стекла и может больше выделять фигуру на фоне. Экспериментируйте! Хотя элементы этого стиля, такие как размытый фон, существуют уже много лет, его популярность только начинает расти. Поэтому есть еще много интересных креативных эффектов, которые стоит изучить.
Вы также можете посмотреть мой небольшой урок о том, как создать это в Sketch и Figma.
Доступность
Как и в случае с неоморфизмом, этот стиль, вероятно, не так доступен, как, скажем, Material Design. Главное правило неоморфизма применимо и здесь – если у вас есть хорошая функциональная иерархия, то экранные элементы должны работать без фона. Это гарантирует, что люди с проблемами зрения по-прежнему смогут понимать интерфейс.
Это происходит только тогда, когда эти эффекты прозрачности являются чисто декоративными, а не неотъемлемой частью опыта. Следует избегать использования их для кнопок или переключателей (эти важные объекты всегда должны быть более контрастными), но вы можете использовать их для фона карточек.
Просто убедитесь, что внутренняя часть карточки имеет достаточный контраст и правильный интервал, чтобы можно было определить иерархию и визуально «сгруппировать» все связанные объекты.
Глассморфизм 2021?
Apple внедрила этот стиль в Big Sur – это верный признак, что ему будут подражать и его будут имитировать в ближайшие месяцы. Вероятно, он не проникнет во все интерфейсы (и это хорошо), но он станет немного популярнее, чем сейчас.
Людям легко наскучивают тренды, и каждые несколько лет маятник колеблется в другую сторону. Некоторое время мы использовали супер-минималистичные, почти плоские интерфейсы, но затем они стали более красочными, более вертикальными и более «бросающимися в глаза».
Дизайнеры должны исследовать все потенциальные креативные способы создания продукта. В некоторых случаях ограниченное использование «стекла» действительно может улучшить внешний вид продукта и сделать его более привлекательным для пользователей.
И хотя мне нравятся черно-белые интерфейсы без украшений и со сверхвысокой контрастностью, я с удовольствием еще немного поэкспериментирую с этим стилем и посмотрю, к чему он меня приведет.
Потому что, в конце концов, дизайн должен приносить удовольствие, поскольку это единственный способ исследовать новые пути, получать удовольствие от того, что мы делаем, и создавать по-настоящему уникальные вещи.
Увидимся по ту сторону стекла! =)