Что такое Неоморфизм веб-дизайн?

Название сложено из «new» и «skeuomorphism» (скевоморфизм). Стиль всплыл в конце 2019 года на концепт-работах Dribbble - мобильные банки, панели умного дома, музыкальные плееры - и распространился как реакция на плоские, контрастные интерфейсы предыдущего десятилетия. От скевоморфизма он берёт одну идею - элементы интерфейса как физические объекты с объёмом - и отбрасывает остальное: никаких текстур, кожи или шлифованного металла, только свет и тень на одной однородной поверхности.

Механика простая и строгая. Все элементы одного цвета с фоном; светлая тень падает влево-вверх, тёмная - вправо-вниз, поэтому выпуклый элемент выглядит выдавленным из поверхности. Те же тени, развёрнутые внутрь (inset), дают эффект вдавленности - так рисуют активные кнопки, треки тумблеров, слайдеры и прогресс-бары. Границ и цветных заливок нет, поэтому иерархия строится только на том, что выпукло, а что вдавлено.

Это ещё и известный пример осторожности с трендами в UI. Мягкие тени на поверхности того же цвета дают низкий контраст между элементом и фоном, поэтому кнопки, состояния и границы многим пользователям трудно разглядеть, а на тёмном фоне пару теней нужно пересчитывать, а не просто инвертировать. Поэтому сегодня стиль редко оформляет продукт целиком и встречается в точечных местах - дайл, группа тумблеров, виджет умного дома или wellness-приложения, управление плеером или таймером, - где важно само тактильное ощущение.

Ключевые визуальные характеристики

• Каждый элемент вылеплен из того же цвета, что и фон, поэтому поверхности разделяются только тенью, а не границей или контрастной заливкой
• Парная тень - светлая сверху-слева, тёмная снизу-справа, - из-за которой выпуклые элементы выглядят выдавленными из поверхности
• Вдавленные (inset) тени для противоположного состояния: активные кнопки, треки тумблеров, слайдеры, дорожки прогресса и поля ввода
• Щедрые и единые радиусы скругления - круги для дайлов и рукояток, мягко скруглённые прямоугольники для карточек и кнопок
• Контролы, имитирующие физические объекты: круглые дайлы с делениями, рукоятки на треке, тумблеры, сегментированные группы с одним вдавленным сегментом
• Сдержанный декор - никаких текстур, иллюстраций и пёстрых градиентов, спорящих с игрой света и тени

Цветовые характеристики

• Одна нейтральная основа, обычно светлый холодный серый или почти белый, - для фона и для всех поверхностей
• Цвета теней выводятся из этой основы, а не подбираются отдельно: более светлый оттенок для блика и более тёмный для тени, поэтому пара подстраивается под любой фон
• Один акцентный цвет, который используется экономно на активном состоянии - заполненная дуга прогресса, индикатор «включено», главная кнопка, - так цвет отмечает то, что работает сейчас, а поверхность остаётся нейтральной

Типографика

• Чистый геометрический или неогротескный гротеск средней и жирной насыщенности, потому что мягким поверхностям нужен чёткий текст
• Текст тёмного, слегка холодного нейтрального оттенка вместо чистого чёрного и приглушённый вторичный тон для подписей и метаданных
• Мелкие заглавные подписи с разрядкой для кикеров разделов и шкал слайдеров - как гравированные надписи на аппаратуре

UI-паттерны

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

Выбираете стиль для проекта? Прочитайте наглядный обзор стилей веб-дизайна · руководство по Explore Styles