{"id":13762,"url":"\/distributions\/13762\/click?bit=1&hash=1c47e3cce4734ba61fcd4d5f8daae0506426a8a30d961ef3bbaa402351f8e545","title":"\u041a\u043b\u0438\u0435\u043d\u0442\u044b \u0434\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0434\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u043e\u0432\u0430\u0440\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u0443\u0445\u043e\u0434\u044f\u0442 \u0441 \u0441\u0430\u0439\u0442\u0430","buttonText":"\u0412 \u0447\u0451\u043c \u0434\u0435\u043b\u043e?","imageUuid":"6d35fba7-a4a0-5cec-96fd-38de837d01f5","isPaidAndBannersEnabled":false}

Новый тренд в UI: обзор неоморфного дизайна

Неоморфный дизайн — это визуальная тенденция, которая получила признание UI/UX дизайнеров и стала популярным эстетическим выбором для современного программного обеспечения, веб-сайтов и мобильных приложений. Опираясь на аспекты фотореализма и трехмерного дизайна, неоморфизм привносит смоделированные физические атрибуты, такие как тени и текстуры, в цифровые интерфейсы. Чтобы полностью понять влияние неоморфного дизайна, давайте рассмотрим его происхождение.

Истоки неоморфного дизайна

Приложение для Tesla Cybertruck

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

В 1997 году Стив Джобс направил эстетику дизайна UI в сторону скевоморфизма — стиля, в котором компоненты интерфейса до мельчайших деталей отражают их реальные аналоги. В 2001 году была выпущена Mac OS X, для которой Apple разработала полноценную скевоморфную систему под названием Aqua — интерсфейс с блестящими значками, кнопками и раскрывающимся меню.

С появлением iPhone в 2007 году скевоморфизм Apple стал еще более реалистичным. К началу 2010-х годов с дизайн стал де-факто выбором для цифровых интерфейсов.

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

Поэтому в середине 2010-х годов, резко контрастируя с реалистичными градиентами и текстурами скевоморфизма, широко распространился плоский дизайн. Это то, что мы видим каждый раз, когда открываем смартфон — теперь не только на iOS, но и на Android.

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

Скевоморфизм, казалось, свое отжил. Компании почти перестали его использовать, и даже начинающие дизайнеры стали сторониться такого «излишне детального» стиля. Мы все совместно решили, что он остался в прошлом.

Но из пепла скевоморфизма на свет появился новый тренд. В конце 2019 года возник неоморфизм (сокращение от «новый скевоморфизм»). Достигая баланса между гиперреализмом и минимализмом, неоморфизм использует цвета, текстуры и тени так, чтобы они выглядели реалистично, но без лишней детализации.

Что такое неоморфизм

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

Три вида дизайна UI

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

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

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

Примеры неоморфного дизайна

Команды дизайнеров и фронтенд разработчиков в различных отраслях, таких как автомобилестроение, развлечения, здравоохранение и финансы, переосмысливают компоненты интерфейса с характерным неоморфизмом:

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

Плюсы неоморфного дизайна

Поскольку неоморфизм визуально прост, он идеально подходит для сложных IT-продуктов, которые часто состоят из десятков или сотен окон или компонентов. Визуальная простота неоморфных элементов имеет несколько преимуществ:

  • она упрощает дизайнерам создание эстетически связного опыта — независимо от того, насколько сложный интерфейс у продукта;
  • она сохраняет визуальное единообразие продуктов компании по мере их развития.

Помимо простоты, реалистичность неоморфизма может сделать компоненты UI более осязательными и помочь пользователям с ними взаимодействовать.

Минусы неоморфного дизайна

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

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

Кстати, если вы работаете в сфере дизайна, приходите в Rubrain.com! Работа в крупнейших российских компаниях и интересных зарубежных проектах. Сотни предложений для хороших дизайнеров и иллюстраторов. Часть актуальных вакансий можно найти здесь. Присоединяйтесь к нашей IT-команде!

0
85 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Eugene Vasin

Топовая шкура!

Ответить
Развернуть ветку
7 комментариев
Денис Пронин

So realistic!

Ответить
Развернуть ветку
Alexey Rusanov

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

Но, возможно, эта приблуда начнет свою эволюцию и скомбинирует бест практис из флета с новым видением и будет норм, но я не верю)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
3 комментария
Typo

Этот "новый тренд" уже длительное время как сам умер, не успев перерости во что то большее, чем несколько шотов на дрибббле.

Ответить
Развернуть ветку
Безопасный щит

Ждём NewНеоМорфизмFinal_New3

Ответить
Развернуть ветку
1 комментарий
Игорь Маркелов

Новому тренду уже больше года.

P.S. Сбивает с толку заголовок

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
2 комментария
Роман Гаркуша

Больше двух. 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Пуганный Аноним

Прочитал, что говно - поставил плюс, дошел до "ноу дискасс"... Блядь. Ноу дискасс? Ты и в жизни так разговариваешь? 

Ответить
Развернуть ветку
10 комментариев
Вадим Осадчий

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

Ответить
Развернуть ветку
Sergey Surikov

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

Чушь.
Графический интерфейс с корзиной и окнами разработал Ксерокс в 70-х. Его клонировали все производители ОС актуальных в то время, см.
https://en.wikipedia.org/wiki/History_of_the_graphical_user_interface

Ответить
Развернуть ветку
Юрий Б.

However, the Apple work extended PARC's considerably, adding manipulatable icons, and drag and drop manipulation of objects in the file system (see Macintosh Finder) for example. A list of the improvements made by Apple, beyond the PARC interface, can be read at Folklore.org.[8]

Jef Raskin warns that many of the reported facts in the history of the PARC and Macintosh development are inaccurate, distorted or even fabricated, due to the lack of usage by historians of direct primary sources.

Ответить
Развернуть ветку
1 комментарий
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Борис Б

Microsoft Zune HD, 2009 год (12 лет назад) дал миру интерфейс Metro, который потом перекочевал в Windows Phone, дав толчок к развитию флэт-дизайна с сильным контрастом и акцентом на типографику, который держится до сих пор. Сейчас у MS в тренде Fluent - все тоже самое, но с нотками объемности + моушн. 

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

Ответить
Развернуть ветку
2 комментария
Пуганный Аноним

А куда делся флэт дизайн? 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Вадим Осадчий

Приставка нео же, ну ну! Новый)

Ответить
Развернуть ветку
Владислав Рогов

та и умер уже давно, так же как и появился

Ответить
Развернуть ветку
Strawberry Domestos

Сразу вспоминаются те самые кнопочки из CheMax для Windows...

Ответить
Развернуть ветку
Яков из smmcoreagency

Вы разбудили деда

Ответить
Развернуть ветку
Misha Zakarin

О, боже

Ответить
Развернуть ветку
Misha Zakarin

Тенеблудие какое-то

Ответить
Развернуть ветку
Zeleoth Jenkins

Я за постморфизм

Ответить
Развернуть ветку
Kondukov Sergey

Классно будет выглядеть если приложение будет считывать положение телефона в пространстве и тени/блики всех кнопок двигать в зависимости от движения. 
Но по факту конечно красиво, но мало где применишь такой дизайн. Он появился несколько лет назад, но я так и не видел его ни разу ни в одном большом проекте.
Возможно если комбинировать с флэт его, и добавлять пару элементов основных таким образом, работать будет хорошо. Но все равно не думаю что он завоюет даже 5% среди массовых проектов. 

Ответить
Развернуть ветку
Ilya Miller

Чёт припозднились. Трендом он был в конце 19 начале 20.

Ответить
Развернуть ветку
Ленин-гриб

Многие пишут, что этот дизайн умер не успев начаться не понимая, что все еще впереди и этот дизайн очень крутой, т. к. работает с оживлением экранного пространства — это суть, а не тени, красивая картинка и читаемость. Это не перенос 3D во FLAT, это именно FLAT становится нечто большим, предлагаю не только визуал, но и коммуникацию.

Зайдите на сайт PayDay, увидите как этот дизайн начинают использовать и на сколько сильная получается коммуникация вашего зрения с картинкой (я про 3D анимацию справа).

Суть не в самом дизайне, а коммуникации с устройством — человеку хочется с ним взаимодействовать (дружить).

Ответить
Развернуть ветку
Пуганный Аноним

За такие иконки, в основном, хочется уебать. Но если попить смузи, то начинает казаться, что это такой 3д эффект 

Ответить
Развернуть ветку
2 комментария
Борис Б

 "это суть, а не тени, красивая картинка и читаемость"
Интересный подход к проектированию интерфейсов. Суть не в читаемости?
Ну штош)

Ответить
Развернуть ветку
1 комментарий
Сергей Никитин

Напоминает стиль сайтов из конца 90-х, начала 00-х

Ответить
Развернуть ветку
Дмитрий Шишкин

погодите плоский стиль первым как раз Гугл представила ,нет?

Ответить
Развернуть ветку
Ruslan Fatikhov

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

Ответить
Развернуть ветку
Alexander Voynov

Может это проблема не подходящей выборки примеров, но такое себе - размыленость, блеклость, расфокусировка, грязность

Хотя все навело на мысль о технологическом резонансе, когда две технологии появляются в одно время и способны дополнить друг друга. Сквеморфизм возник на экранах без тактильного фидбека, виброотклик (несмотря на простоту и отдельные реализации вообще в каменном веке) получил популярность позже, уже в эпоху флета. А ведь локальный (хотя бы зонально в области элемента) отклик мог бы заметно сквеморфизм поддержать. 
А что на сегодня? Некоторые компании играются разными технологиями тактильной обратной связи - от различных эмитаций вибро и электро, до реального 3Д экрана (пока что уровня барельефа). Учитывая, что этот неоморфизм даже визуально делает относительно огрниченный 3D, то уже в ближайшее время технологии рельефа экрана (мнимые или реальные) смогут срезонировать с этим стилем. Т.е. суть - всему свое время. Флэт - для равномерного отклика, пришли рельефные технологии - сквеморфизм получил второе дыхание. 

Ответить
Развернуть ветку
Alexander Voynov

кстати пользуясь этой отсылкой насчет отклика делюсь моим каминг аутом (если это вообще то кому то интересно): чисто на уровне физиологии на одном уровне с сексом в жизни ощущал только одну такую же достойную вешь - отклик фронтальной кнопки Айфона (до 8 включительно). Думаю те, кто тыкал так и заставал момент отключения телефона прекрасно понимают состояния девушек, которых парни "не успели" подвести до конечной. 
Прошу прощения за образы - ночь почти

Ответить
Развернуть ветку
pixelent pixel

Пока это трэш, ждем новых трендов

Ответить
Развернуть ветку
Дмитрий М

Наконец-то мой 2007 возвращается, и 3D дизайн снова в моде. Это плоское минималистичное говно невыносимо.

Ответить
Развернуть ветку
Вадим Осадчий

"Неоморфный дизайн имеет три общие характеристики: монохромные цветовые схемы, низкий контраст и едва различимые тени. "

Помнится мне - это матириал дизайн??

Ответить
Развернуть ветку
Вадим Божинов

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

Ответить
Развернуть ветку
1 комментарий
Sambur Alexandr

Где скачать такой тюнер, как на заставке?)

Ответить
Развернуть ветку
Неопознанный шакал

На дрибббле

Ответить
Развернуть ветку
4 комментария
Ekaterina Sokolova

новый? 😁

Ответить
Развернуть ветку
Ян Марков

Хуета, не считывается дизайн ваще никак

Ответить
Развернуть ветку
Markus108

Шёл 2021 год 🤷‍♀

Ответить
Развернуть ветку
Artur Kasimov

Круто!
Только тренд закончился примерно в самом начале 2020 года

Ответить
Развернуть ветку
Демид Московский
Ответить
Развернуть ветку
Vlad

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Никита Колюгин

Еще год назад везде срали этим "трендом". Вы, видимо, особо не торопились.

Ответить
Развернуть ветку
Vyacheslav Teplyakov

Я ретроград и считаю, что кнопка должна быть кнопкой. Один из эталонов дизайна, это ios 6 и тому подобное. Вся эта плоская радужная гомосятина, нужна только дизайнерам, чтобы щекотать ей друг другу очко. Что уже с ней не делали, все не приживается. И не приживётся.
Сначала было все вообще плоско, поняли, что не, говно какое-то, вернули тени и объем, подождем ещё года три, глядишь и контраст вернут. Грейт аусом инкредбл!

Ответить
Развернуть ветку
Читать все 85 комментариев
null