{"id":7016,"title":"\u0423\u0433\u0430\u0434\u0430\u0439\u0442\u0435 \u0433\u043e\u0440\u043e\u0434\u0430 \u043f\u043e \u0437\u0432\u0443\u043a\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043f\u0438\u0432\u0430 \u0438 \u043f\u0435\u043d\u0438\u044e \u043a\u0438\u0442\u043e\u0432","url":"\/redirect?component=advertising&id=7016&url=https:\/\/vc.ru\/special\/sound&placeBit=1&hash=6ca24c77fedb0a01bd41595a6fbd498b5375a294c2e3b54a129aa318671b77a3","isPaidAndBannersEnabled":false}
Дизайн
Rubrain.com, IT-аутстафф

Новый тренд в 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-команде!

{ "author_name": "Rubrain.com, IT-аутстафф", "author_type": "self", "tags": [], "comments": 85, "likes": 40, "favorites": 119, "is_advertisement": false, "subsite_label": "design", "id": 295815, "is_wide": true, "is_ugc": true, "date": "Thu, 23 Sep 2021 08:26:23 +0300", "is_special": false }
0
85 комментариев
Популярные
По порядку
Написать комментарий...

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

12

Вот где топовая шкура

38

Не, ну это классика.
А та что выше — это был топ в своё время, pimp my Winamp, ткскзть)

4

Только мелкие кнопки управления окном бесят.

0

Его можно было масштабировать.

0

Так с остальными элементами управления всё вполне ок. Нет надобности в масштабировании всего сразу. Именно кнопочки в заголовке мелкие.

1

так ими никто не пользовался ;)

1

So realistic!

0

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

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

61

я особо не копал, но пришел к такому же выводу исходя из названия 

также есть подозрение, что неомодернизм тесно связан с модернизмом, а контрразведка с разведкой

49

Я к тому, что он уместен и хорошо реализуется в сочетании со скевморфизмом. Как отдельно существующее направление - работает чаще плохо, чем хорошо.  В статье все описано, о чем я говорю. 

Правильнее было бы назвать неоморфизм - скевморфизм 2.0. ред.

0

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

36
Резкий крюк

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

4

Release_Prod_100%

0

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

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

21

И сектанты всё ждут, когда в него вонючей тушей вкатится Яблоко, чтобы оправдать их прогнозы 

–5

пока что только ты об этом говоришь. ты из тех самых сектантов?

3

Конечно, видишь же, что навожу тут тень на плетень 

–1

Больше двух. 

0

Неоморфный дизайн говно и выстрел себе в колено, ноу дискасс

11

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

7
Трудный Валера

Абсолютли.

17

Это старый мем с имиджборды форчан, видимо, слишком старый для тебя. 
Шутка в том, чтобы высказать спорное мнение, а потом добавить с ошибкой, а лучше слитно - ноудискасс(nodiscuss) 

0

Анфоршуналли, это так не работает. 

2

Да нет, именно так и работает, ты просто вне культурного контекста 

0

Втф гтфо бро.

0

Не вижу ничего плохого в уместных англицизмах 

–1

Да я, как видишь, тоже 😆😆😆 .

0

Звучит, как Вискас 🙂

0

Вай нот?

0

Человек, вероятнее всего, вообще не в РФ или работает в международной компании. Когда постоянно общение на англ, как-то эти слова сами собой в речь проникают, просто потому что каждый день так общаешься

–1

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

3

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

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

9

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

Если Аппле признает заимствование, то повредит своему имиджу инновационной компании.

Все что есть в современных графических интерфейсах можно увидеть в старых видео интерфейса хероксовых компов 70х

1

Зумеры изобрели скевоморфизм. То, что плоский дизайн не продержался и 10 лет - очень хорошо показывает его ущербность.

3

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

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

16

Иди обниму. Metro UI — лучшее, что случалось с интерфейсами в XXI веке, а провальная стратегия MS по его внедрению — травма на всю жизнь.

5

До сих пор по нему скучаю. Кайфовый был)
И виджеты смотрелись не как нелепые прыщи, а были интегрированы в иконки. Но народ не понял :/

3

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

1

Он совсем не новый и стрёмный

8

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

1

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

1

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

7

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

1

О, боже

0

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

4

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

4

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

3

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

3

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

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

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

1

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

5

Ну, вы просто уникум, что увидели на лугу кусок говна. Конечно оно там будет, ведь на лугу пасутся коровы. 

1

То есть это какие-то коровы пришли и насрали на этот красивый луг с дизайном?

4

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

0

Для того, чтобы передернуть, есть туалет :)

Читаемость, очевидно, важна, но сама эргономика дизайна переходит в новые плоскости. 

1

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

1

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

1

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

1

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

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

1

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

0

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

0

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

0

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

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

0

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

2

Насколько я помню, то же, что флат, только с тенью )

0

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

0

На дрибббле

0

А можно ссылку на это приложение?)

0

Да это шутка, нет этого тюнера в жизни, просто красивая картинка на сайтике с красивыми картинками :(

0

Эх, жаль, я бы скачал).. Что-то в нём есть)

0

новый? 😁

0

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

0

Шёл 2021 год 🤷‍♀

0

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

0

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

0

Ребят, вы на год опоздали

0

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

0

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

–1
Читать все 85 комментариев
Правительство утвердило правила идентификации пользователей мессенджеров с марта 2022 года Статьи редакции

Сервисы должны будут запрашивать данные у операторов, а те — предоставлять их в течение 20 минут после регистрации пользователя.

Как Озон спустя неделю обещаний о доставке товара молча отменил мой заказ

Добрый день, мой первый пост о той ситуации, с которой наверное столкнулись многие.

Любителям автоматизации пост

Привет! Это мой первый пост на этой платформе. Я не совсем ещё знаком с местными правилами, но всё же решил написать об одном из своих Telegram ботов и поделиться им.

Как OTUS стал платформой для самореализации. История преподавателя

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

Детство на антибиотиках: как медицинский догматизм чуть меня не угробил, но, в итоге, подарил дело моей жизни

Часто, когда говорят или пишут о великих, упоминают, что еще в детстве они столкнулись с какой-то проблемой, решили спасти от нее весь мир и так стали тем, кем стали. С великими себя не сравниваю, но для меня такие биографии – свидетельство того, что если человеку нужно, он добьется всего, что захочет. У меня тоже есть подобная история за…

Cloud CDN: что это такое, как устроено и кому нужно. Разбираем на примере бургеров

Cloud CDN — это сеть быстрой доставки статического контента в формате услуги облачного провайдера. Объяснить, как работает технология, проще всего на примере — сравнить Cloud CDN с популярным продуктом, который выглядит плюс-минус одинаково вне зависимости от того, заказали вы его в Москве, Питере или Нью-Йорке. Знакомьтесь: классический бургер.…

Исследование: сотрудники хотели бы иметь комнату отдыха, бесплатный сок, а работодатели уже готовы покупать ЗОЖ-снеки

Онлайн-сервис доставки продуктов и товаров СберМаркет и исследовательское агентство Research Me спросили сотрудников, как они хотели бы питаться в офисе и что в нем видеть. В опросе приняли участие более 1500 работающих людей по всей России. Сервис также спросил работодателей – В2В-клиентов СберМаркета: что они покупают в офис, что точно никогда…

Я устал жить на автомате и сделал бота в Telegram, который напоминает сколько мне осталось жить

Теперь бот присылает каждую неделю новую таблицу жизни, где видно сколько мне осталось до 90 лет. Красный квадрат – 1 прожитая неделя.

Пример календаря жизни. @life_table_bot
М.Видео обманул меня с предзаказом Apple Watch Series 7

Печали пост. Как только 8 октября открылся предзаказ на Apple Watch Series 7, поспешил на сайты apple.com, М.Видео и еще несколько маркетплейсов.

Как не попасть в карьерную ловушку тимлида: личный опыт

Кажется, что тимлиду просто некуда расти: дальше надо либо идти в менеджмент, либо наоборот, становиться узконаправленным разработчиком. По просьбе «Лаборатории Касперского» Евгений Мацюк, который прошел в компании неординарный путь, рассказал о своих карьерных развилках во время и после тимлидства, а также поделился опытом горизонтального роста.

В Петербурге объявили локдаун с 30 октября по 7 ноября: работать будут продуктовые магазины и аптеки Статьи редакции

Кафе и рестораны смогут работать навынос и на доставку, будут открыты парикмахерские, театры и музеи.

null