Неоморфизм (или «Новый скеоморфизм») — это дизайнерский тренд, который стремился объединить реализм с минимализмом. Он придавал элементам пользовательского интерфейса мягкий, выступающий вид, делая их одновременно объемными и плоскими. В этой статье мы исследуем происхождение этого дизайнерского тренда, его эволюцию и упадок, и обсудим, что придет после неоморфизма.
Происхождение и расцвет неоморфизма
Неоморфизм появился как тренд в дизайне пользовательского интерфейса примерно в 2019–2020 годах, в основном набирая обороты в сообществах дизайнеров Dribbble и Behance. В то время многие дизайнеры устали от полуплоского дизайна и мечтали создать новые, свежие интерфейсы. Скеоморфичный Apple iOS 6.0 уже казался устаревшим с точки зрения визуальной эстетики, но дизайнеры вдохнули новую жизнь в эту концепцию. До iOS 7 Apple iOS использовал текстуры и тени “реального мира”, чтобы элементы пользовательского интерфейса напоминали физические объекты (например, кожаные календари и глянцевые кнопки). Поскольку Apple выпустила iPhone в конце 2000-х, когда концепция сенсорного пользовательского интерфейса была довольно новой для многих людей, скеоморфизм был очень полезной техникой для обучения новых пользователей работе с интерфейсом. Люди могли полагаться на существующие знания о физическом мире при работе с цифровыми интерфейсами. Но как только пользователи привыкли к новым концепциям, не было действительно практической причины для использования скеоморфизма. Поэтому с выпуском iOS 7 Apple заменила скеоморфный интерфейс на плоскую эстетику.

Скеоморфизм в дизайне Apple iOS до iOS 7. Изображение от AppleInsider. По сей день полуплоские пользовательские интерфейсы являются самыми популярными решениями среди визуальных дизайнеров. Даже последний продукт от Apple — Vision Pro — использует эту эстетику.

Интерфейс Vision Pro. Изображение от Apple. Но несмотря на все преимущества полуплоских решений, у них есть один существенный недостаток — полуплоские интерфейсы не имеют ярко выраженных визуальных атрибутов. Это не значит, что все продукты с полуплоскими интерфейсами выглядят одинаково, но у них определенно не так много запоминающихся деталей. Неоморфизм родился как решение этой проблемы. Дизайнеры стремились создать свежие и запоминающиеся интерфейсы, которые в то же время будут очень знакомы многим людям. Современная эволюция скеоморфизма сочетала элементы реализма с более тонкой, минималистичной эстетикой. Если вы посмотрите на изображение ниже, то увидите сильный акцент на тенях, бликах и псевдо-3D глубине. Все вместе это делает элементы интерфейса ощущаться встроенными или выступающими из фона.
Fitness — неоморфизм. Изображение от Марии Токар
Как создать неоморфный интерфейс
Вот краткое руководство о том, как разработать неоморфные элементы интерфейса в Figma: Чтобы достичь неоморфного эффекта в CSS, вы можете использовать box-shadow для создания мягких бликов и теней. Вот как реализовать неоморфизм в CSS.
.neumorphic { background: #e0e0e0; border-radius: 10px; box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff; padding: 20px;}
Неоморфизм помогает балансировать между реализмом и минимализмом. Он предлагает современный, элегантный и футуристический внешний вид и хорошо сочетается с мягкими пастельными цветовыми схемами и чистыми интерфейсами. Но почему, несмотря на все эти преимущества, неоморфизм используется в основном в концептуальных дизайнах, панелях управления и экспериментальных интерфейсах?

Примеры неоморфизма. Изображение от OTAKOYI Ответ на этот вопрос прост — отсутствие практической ценности. Помимо придания интерфейсу визуальной привлекательности, нет большой пользы в создании неоморфного интерфейса. Когда дело доходит до мобильного дизайна, неоморфизм осложняет жизнь разработчикам, потому что они не могут использовать существующие компоненты и шаблоны, предоставляемые Apple и Google. Наконец, у неоморфизма есть проблемы с accessibility:
❌ Проблемы юзабилити — Кнопки и интерактивные элементы могут быть не сразу очевидны.
❌ Проблемы низкой контрастности — Трудно сделать элементы заметными, что приводит к существенным проблемам с accessibility.
❌ Не работает в Dark Mode — Эффект основывается на свете и тенях, что может быть сложно реализовать в темных темах (но не невозможно).
Что придет после неоморфизма
Глассморфизм и скеоморфизм 2.0 (также известный как гиперреализм) — это два тренда, которые последовали за неоморфизмом. Глассморфизм вдохновлен эффектами матового стекла, которые можно увидеть в macOS Big Sur и Windows 11. Он использует размытое прозрачное изображение, мягкие тени и яркие фоновые цвета. Это помогает достичь футуристического, высокотехнологичного ощущения, улучшая читаемость.
Глассморфизм в Apple MacOS. Скеоморфизм 2.0 основан на концепции, что вместо плоских или мягких дизайнов некоторые элементы интерфейса возвращаются к реализму. Он использует высокодетализированные 3D-элементы, которые являются интерактивными и осязаемыми. Эта эстетика, вероятно, станет массовой с ростом VR и приложений Metaverse.
Так же, как пользователи первых iPhone от Apple должны были изучать новые концепции и визуальные решения при знакомстве с первой iOS в 2007 году, пользователям метавселенной также предстоит освоить новое поколение интерфейсов.

Эстетика Cyberpunk 2077 — яркий пример гиперреализма.