Новый тренд в UI: обзор неоморфного дизайна
Неоморфный дизайн — это визуальная тенденция, которая получила признание UI/UX дизайнеров и стала популярным эстетическим выбором для современного программного обеспечения, веб-сайтов и мобильных приложений. Опираясь на аспекты фотореализма и трехмерного дизайна, неоморфизм привносит смоделированные физические атрибуты, такие как тени и текстуры, в цифровые интерфейсы. Чтобы полностью понять влияние неоморфного дизайна, давайте рассмотрим его происхождение.
Истоки неоморфного дизайна
Когда Apple выпустила Macintosh в 1984 году, это был первый ПК с графическим пользовательским интерфейсом. В то время Стив Джобс считал, что знакомые значки и символы, такие как корзина и папка, помогут новичкам лучше понять, как ориентироваться в интерфейсе.
В 1997 году Стив Джобс направил эстетику дизайна UI в сторону скевоморфизма — стиля, в котором компоненты интерфейса до мельчайших деталей отражают их реальные аналоги. В 2001 году была выпущена Mac OS X, для которой Apple разработала полноценную скевоморфную систему под названием Aqua — интерсфейс с блестящими значками, кнопками и раскрывающимся меню.
С появлением iPhone в 2007 году скевоморфизм Apple стал еще более реалистичным. К началу 2010-х годов с дизайн стал де-факто выбором для цифровых интерфейсов.
Но по мере того, как мир стал больше полагаться на мобильные устройства, такой стиль становился невыгодным. Создание скевоморфных компонентов в IT-разработке требует много времени и затрат на труд специалистов. И хотя это отлично смотрится на настольных компьютерах, более мелкие детали имеют тенденцию исчезать при масштабировании до небольших размеров экрана.
Поэтому в середине 2010-х годов, резко контрастируя с реалистичными градиентами и текстурами скевоморфизма, широко распространился плоский дизайн. Это то, что мы видим каждый раз, когда открываем смартфон — теперь не только на iOS, но и на Android.
Flat дизайн лишил компоненты интерфейса всего, кроме их самых важных элементов — линий, формы и цвета. Для крупных компаний плоский стиль подошел гораздо лучше: делать его было проще, и он хорошо воспринимался пользователями.
Скевоморфизм, казалось, свое отжил. Компании почти перестали его использовать, и даже начинающие дизайнеры стали сторониться такого «излишне детального» стиля. Мы все совместно решили, что он остался в прошлом.
Но из пепла скевоморфизма на свет появился новый тренд. В конце 2019 года возник неоморфизм (сокращение от «новый скевоморфизм»). Достигая баланса между гиперреализмом и минимализмом, неоморфизм использует цвета, текстуры и тени так, чтобы они выглядели реалистично, но без лишней детализации.
Что такое неоморфизм
Неоморфный дизайн имеет три общие характеристики: монохромные цветовые схемы, низкий контраст и едва различимые тени. Команды веб-разработчиков пользовательского интерфейса могут применять эти черты к широкому спектру компонентов дизайна, которые демонстрируют мягкую эстетику неоморфизма. Можно посмотреть на эволюцию приложения-калькулятора, чтобы увидеть, как работает неоморфный дизайн:
В скевоморфном дизайне калькулятор визуализируется с использованием градиентов и бликов, а его цветовая палитра помогает отделить передний план от фона. Он должен выглядеть и работать как калькулятор, которым вы пользуетесь в реальной жизни.
Версия того же калькулятора с Flat дизайном отказывается от методов визуализации скевморфизма и полагается на формы и блоки цвета, чтобы различать его различные части.
Неоморфный дизайн основан на скевморфизме и плоском дизайне. Он сочетает монохроматическую цветовую палитру с тонкими тенями, которые делают кнопки калькулятора тактильными. Пониженный контраст между передним планом и фоном придает калькулятору мягкую отделку, а общий эффект — упрощенный реализм.
Примеры неоморфного дизайна
Команды дизайнеров и фронтенд разработчиков в различных отраслях, таких как автомобилестроение, развлечения, здравоохранение и финансы, переосмысливают компоненты интерфейса с характерным неоморфизмом:
У всех тенденций дизайна UI, конечно, есть свои преимущества и недостатки. Давайте рассмотрим плюсы и минусы неоморфного дизайна, чтобы лучше понять, когда его можно использовать.
Плюсы неоморфного дизайна
Поскольку неоморфизм визуально прост, он идеально подходит для сложных IT-продуктов, которые часто состоят из десятков или сотен окон или компонентов. Визуальная простота неоморфных элементов имеет несколько преимуществ:
- она упрощает дизайнерам создание эстетически связного опыта — независимо от того, насколько сложный интерфейс у продукта;
- она сохраняет визуальное единообразие продуктов компании по мере их развития.
Помимо простоты, реалистичность неоморфизма может сделать компоненты UI более осязательными и помочь пользователям с ними взаимодействовать.
Минусы неоморфного дизайна
Хотя неоморфизм теперь является популярным направлением, с ними связаны некоторые проблемы доступности. Так, зависимость неоморфизма от низкого контраста для достижения мягкого внешнего вида может затруднить читаемость символов и идентификацию кнопок, значков или форм. Например, не всегда может быть ясно, нажата ли кнопка — за счет меньшей контрастности. Или пользователи могут не понимать, какая именно из форм сейчас выделена.
К тому же, если дизайнеры решат использовать строго монохроматические неоморфные элементы, это может создать проблемы для людей с дальтонизмом. В целом людям со слабым зрением намного проще работать с flat-дизайном. Подробнее об этом с примерами можно посмотреть тут (на английском).
Кстати, если вы работаете в сфере дизайна, приходите в Rubrain.com! Работа в крупнейших российских компаниях и интересных зарубежных проектах. Сотни предложений для хороших дизайнеров и иллюстраторов. Часть актуальных вакансий можно найти здесь. Присоединяйтесь к нашей IT-команде!
Комментарий недоступен
Топовая шкура!
So realistic!
Неоморфизм очень хорошо смотрится в дрибле, вместе с этими бесконечными флюид анимациями. В реальных проектах он проиграет почти любой парадигме дизайна из-за своей нулевой считываемости. Нужно очень сильно хотеть в трендовость, чтоб так рискнуть, тот же пример с аппой теслы - тому пример, как не надо делать)
Но, возможно, эта приблуда начнет свою эволюцию и скомбинирует бест практис из флета с новым видением и будет норм, но я не верю)
Комментарий недоступен
Этот "новый тренд" уже длительное время как сам умер, не успев перерости во что то большее, чем несколько шотов на дрибббле.
Ждём NewНеоМорфизмFinal_New3
Новому тренду уже больше года.
P.S. Сбивает с толку заголовок
Комментарий недоступен
Больше двух.
Комментарий недоступен
Прочитал, что говно - поставил плюс, дошел до "ноу дискасс"... Блядь. Ноу дискасс? Ты и в жизни так разговариваешь?
Мне иногда кажется, что люди, что придумывают эти термины, лучше бы шли писать стихи...
Когда 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.
Комментарий недоступен
Microsoft Zune HD, 2009 год (12 лет назад) дал миру интерфейс Metro, который потом перекочевал в Windows Phone, дав толчок к развитию флэт-дизайна с сильным контрастом и акцентом на типографику, который держится до сих пор. Сейчас у MS в тренде Fluent - все тоже самое, но с нотками объемности + моушн.
Флэт - лучшее, что случалось с интерфейсами: простой для понимания, легко читаемый в любых условиях и на любых экранах, легко масштабируемый и не требующий неадекватных денег на разработку.
А куда делся флэт дизайн?
Комментарий недоступен
Приставка нео же, ну ну! Новый)
та и умер уже давно, так же как и появился
Сразу вспоминаются те самые кнопочки из CheMax для Windows...
Вы разбудили деда
О, боже
Тенеблудие какое-то
Я за постморфизм
Классно будет выглядеть если приложение будет считывать положение телефона в пространстве и тени/блики всех кнопок двигать в зависимости от движения.
Но по факту конечно красиво, но мало где применишь такой дизайн. Он появился несколько лет назад, но я так и не видел его ни разу ни в одном большом проекте.
Возможно если комбинировать с флэт его, и добавлять пару элементов основных таким образом, работать будет хорошо. Но все равно не думаю что он завоюет даже 5% среди массовых проектов.
Чёт припозднились. Трендом он был в конце 19 начале 20.
Многие пишут, что этот дизайн умер не успев начаться не понимая, что все еще впереди и этот дизайн очень крутой, т. к. работает с оживлением экранного пространства — это суть, а не тени, красивая картинка и читаемость. Это не перенос 3D во FLAT, это именно FLAT становится нечто большим, предлагаю не только визуал, но и коммуникацию.
Зайдите на сайт PayDay, увидите как этот дизайн начинают использовать и на сколько сильная получается коммуникация вашего зрения с картинкой (я про 3D анимацию справа).
Суть не в самом дизайне, а коммуникации с устройством — человеку хочется с ним взаимодействовать (дружить).
За такие иконки, в основном, хочется уебать. Но если попить смузи, то начинает казаться, что это такой 3д эффект
"это суть, а не тени, красивая картинка и читаемость"
Интересный подход к проектированию интерфейсов. Суть не в читаемости?
Ну штош)
Напоминает стиль сайтов из конца 90-х, начала 00-х
погодите плоский стиль первым как раз Гугл представила ,нет?
Тренд сейчас не на неоморфизм, а на доступность интерфейсов для всех людей. Для людей с проблемами со зрением. Все эти тени, и блики не будут иметь значения, если пользователь не сможет воспользоваться продуктом.
Может это проблема не подходящей выборки примеров, но такое себе - размыленость, блеклость, расфокусировка, грязность
Хотя все навело на мысль о технологическом резонансе, когда две технологии появляются в одно время и способны дополнить друг друга. Сквеморфизм возник на экранах без тактильного фидбека, виброотклик (несмотря на простоту и отдельные реализации вообще в каменном веке) получил популярность позже, уже в эпоху флета. А ведь локальный (хотя бы зонально в области элемента) отклик мог бы заметно сквеморфизм поддержать.
А что на сегодня? Некоторые компании играются разными технологиями тактильной обратной связи - от различных эмитаций вибро и электро, до реального 3Д экрана (пока что уровня барельефа). Учитывая, что этот неоморфизм даже визуально делает относительно огрниченный 3D, то уже в ближайшее время технологии рельефа экрана (мнимые или реальные) смогут срезонировать с этим стилем. Т.е. суть - всему свое время. Флэт - для равномерного отклика, пришли рельефные технологии - сквеморфизм получил второе дыхание.
кстати пользуясь этой отсылкой насчет отклика делюсь моим каминг аутом (если это вообще то кому то интересно): чисто на уровне физиологии на одном уровне с сексом в жизни ощущал только одну такую же достойную вешь - отклик фронтальной кнопки Айфона (до 8 включительно). Думаю те, кто тыкал так и заставал момент отключения телефона прекрасно понимают состояния девушек, которых парни "не успели" подвести до конечной.
Прошу прощения за образы - ночь почти
Пока это трэш, ждем новых трендов
Наконец-то мой 2007 возвращается, и 3D дизайн снова в моде. Это плоское минималистичное говно невыносимо.
"Неоморфный дизайн имеет три общие характеристики: монохромные цветовые схемы, низкий контраст и едва различимые тени. "
Помнится мне - это матириал дизайн??
Material чуть про другое. Он не про "монохром" и уж точно не про "низкий контраст". Он про цветовые акценты, палитры, адаптивность, быструю читаемость контента.
Где скачать такой тюнер, как на заставке?)
На дрибббле
новый? 😁
Хуета, не считывается дизайн ваще никак
Шёл 2021 год 🤷♀
Круто!
Только тренд закончился примерно в самом начале 2020 года
Проблема одна на всех: надо продавать и увеличивать продажи. Мы подошли к барьеру, когда способ выдачи информации один и не будет меняться пока эволюция не придумает "человекам" новый "глаз на заднице". Все - электроника растет только в мощности и емкости а не способе и трансформации вывода.доставки информации, да мы, люди просто не имеем других органов.
Отсюда все эти бесполезные тренды в дизайне. Конечный вывод информации на экран претерпевает изменение а не сам способ.
Не создавая ажиотаж - не заработаешь денег просто.
Комментарий недоступен
Еще год назад везде срали этим "трендом". Вы, видимо, особо не торопились.
Я ретроград и считаю, что кнопка должна быть кнопкой. Один из эталонов дизайна, это ios 6 и тому подобное. Вся эта плоская радужная гомосятина, нужна только дизайнерам, чтобы щекотать ей друг другу очко. Что уже с ней не делали, все не приживается. И не приживётся.
Сначала было все вообще плоско, поняли, что не, говно какое-то, вернули тени и объем, подождем ещё года три, глядишь и контраст вернут. Грейт аусом инкредбл!