Дизайн
Egor Komarov

Как связан скевморфизм с неоморфизмом и что это такое

Многие знают о тренде неоморфизма в дизайне, но, как мне показалось, не многие понимают о его истинном происхождении и где его уместно использовать. Предлагаю изучить этот вопрос подробнее.

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

Перед тем как понять, что такое неоморфизм, давайте разберемся с тем, что такое скевоморфизм. Два этих понятия тесно связаны друг с другом.

Что такое скевоморфизм?

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

Skeumorphism

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

Skeumorphism

Однако широко обсуждается вопрос о том, настолько ли пользователи привыкли взаимодействовать с графическими пользовательскими интерфейсами, что в скевоморфизме больше нет необходимости. Противники скевоморфизма утверждают, что естественно выглядящие объекты могут сделать интерфейс загроможденным и что некоторые объекты, имитирующие скевоморфизм, устарели и бессмысленны для пользователей (например, дискета для действия «Сохранить»).

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

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

Расцвет плоского дизайна

В 2007 году журнал Forbes объявил о смерти скевоморфизма. Apple (а вскоре за ней и Google) остановилась на новой форме дизайна - плоском дизайне.

Плоский дизайн требовал, чтобы графические пользовательские интерфейсы (GUI) были освобождены от беспорядка. Не было необходимости в скошенных краях, градиентах, отражениях и скевоморфизме. Цифровой интерфейс следует использовать в своих интересах.

Визуальная четкость была поставлена во главу угла дизайна. Если вы, например, используете Windows 8, вы обнаружите, что кнопка «Пуск» открывает вам яркий пример плоского дизайна. Все эти значки исчезли, и они были заменены плитками, которые предоставляют вам фактические данные как в письменном, так и в графическом формате - они могут справиться с более сложными уровнями в интерфейсе без ущерба для пользовательского опыта.

Windows 8

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

iOS 7 стала прыжком Apple в мир плоского дизайна и, с точки зрения потребителей, более успешной, чем Microsoft. Это может иметь какое-то отношение к модной дизайнерской аудитории Apple по сравнению с более устойчивой и старой аудиторией Microsoft. Однако минималистский подход iOS 7 был провозглашен гением. Скевоморфизм был объявлен мертвым на месте - новый метафорический, богатый плоский дизайн был шагом вперед.

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

Neumorphism

Неоморфизм родился из скевоморфизма и создал совершенно новый стиль UX.

Неоморфизм + скевоморфизм

Что такое неоморфизм в UI дизайне

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

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

У вас есть фон, на котором мы размещаем несколько компонентов, добавляя слои и создавая глубину за счет теней. Используя неоморфизм, вы создадите мягкий интерфейс с "вдавленными" или "выдавленными" объектами.

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

Как неоморфизм соотносится со скевоморфизмом?

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

https://www.interaction-design.org/literature/topics/skeuomorphism

Неоморфизм является хорошей эволюцией скевморфизма, избавляя его от лишних деталей и при этом сохраняя его объем.

Cтилизация UI или просто добавь теней.

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

Все же помнят в редакторах любимые тени, градиенты и обводки?

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

Хороший пример неоморфизма

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

Имитация настоящего пульта — это скевморфизм.

Плоские иконки в интерфейсе и общий стиль — флет.

Тени и объем — неоморфизм.

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

Надеюсь, это статья помогла пролить свет на скевморфизм и неоморфизм.

Как вы считаете? Стоит ли делать модные эффекты в стандартном наборе UI kit? Или лучше оставить его для скевморфизма?

⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Instagram / Facebook / Medium / Linkedin и мой сайт www.komarov.design Там ты найдешь больше интересных материалов о дизайне.

{ "author_name": "Egor Komarov", "author_type": "self", "tags": [], "comments": 46, "likes": 91, "favorites": 183, "is_advertisement": false, "subsite_label": "design", "id": 198933, "is_wide": false, "is_ugc": true, "date": "Wed, 20 Jan 2021 23:35:10 +0300", "is_special": false }
0
46 комментариев
Популярные
По порядку
Написать комментарий...
54

Тренд который так и остался на шотах в дрибле.
Пусть там и остается.

Ответить
11

Кстати согласен. В реальных аппах не видел удачного применения

Ответить
–6

Комментарий удален по просьбе пользователя

Ответить
7

И где тут неоформизм?

Ответить
–4

иконки

Ответить
2

Перечитай пост чтоль

Ответить
0

А что лупа, микрофон к неоформизму не относятся ?
Наверное может я и что-то не правильно понял

Ответить
1

За лупой и за микрофоном стоит скевморфизм, неоморфизм это стилистика) 

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
1

Какие-то отдельные, лучше не интерфейсные элементы можно хорошо сделать в этом стиле и будет свежо смотреться

Ответить
25

Егор! Читаю твои статьи, и чаще всего замечаю для себя кучу полезного, но здесь есть ощущение, что статья прервана посередине. Почему ничего не сказал о том, что: 
1. Когнитивная нагрузка в неоморфизме гораздо выше по сравнению с флэтом
2. Всё выглядит одинаково, и невозможно предсказать поведение объектов: что нажимается, а что переключается. Что сейчас выделено, а что нет
3. Контрасты - попробуй открыть скриншот неоморфизма в яркий солнечный день
4. Инклюзивность - без комментариев
5. Анимации / микровзаимодействия в неоморфизме отсутствуют как класс
6. Визуальный шум, заставляющий помещать на экраны лишь 50% информации, которая влезет при флэтовом стиле

Ответить
2

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

Ответить
1

И пример с пультом — это скевоморфизм и есть. Привычный и знакомый предмет в реальной жизни перенесли в диджитал. На реальном пульте тоже флетовые иконки испокон веков))

Кому интересно, вот пример, где совершенно неуместно пытались применить неоморфизм)
https://donstroy.com

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

Ответить
1

ничего, через два месяца переделают 😂

Ответить
20

Статью отлично бы дополнила картинка с каким-то популярным интерфейсом, например, история оплат в банковском приложении в разных стилях (флет, скево, нео)

По своему опыту могу сказать, что для плотного расположения какого-либо контента неоморфизм не подходит по причине того, что требуется много "воздуха" между элементами. Наверное только пульты и калькуляторы и делать на нем :)

Флет проще в восприятии, разработке, поддержке, проще располагать очень плотный контент и самое главное - смотрится чисто и свежо.

Несколько раз пробовал неоморфизм в реальных проектах и при сравнении с флетом получается грязновато.

Ответить
0

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

Ответить
8

Такую статью впору писать не о неоморфизме, а о том, что энное количество лет назад сделал Google со своим Material Design.

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

Потом на мой взгляд совершенно гениальные люди придумали и написали буквально манифест Material Design — он убрал из сквевоморфизма привязку к внешнему виду, но оставил привязку к реальному миру как таковому: 2D листы информации в (псевдо) 3D мире. Привычное уже не внешнее, а устройство "вещей" стало помогать с визуальной организацией интерфейсов.

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

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

Ответить
7

Я, кстати, MD с первого выхода как ненавидел, так и до сих пор ненавижу. Уродство. Единственное, что это дало большой толчок к развитию дизайн систем. 

Ответить
0

Они не смогли покорить тени

Ответить
6

😩

Ответить
0

Можно 3 тезиса ненависти к МД?

Ответить
4

Ну во-первых, это хуйня, во-вторых гавно, ну и в третьих, конечно же, это ебанина.

😄

Если без шуток, то практически все продукты Google максимально неудобные, некрасивые, с идиотским UX и как бы они не старались сделать дизайн-систему - все выглядит разношерстно все равно в итоге. 

Ответить
0

Они старались не для себя, для людей)
"Бегите, глупцы", вот это все

Ответить
5

Да пусть будет. Вполне применим для некоторых случаев.
Что за манера - усираться и хейтить по любому поводу? Не нравится - не используй. Нравится - используй.
Как бабки на скамейке.

Ответить
4

Вижу старания. Мне понравилась статья. Я не дизайнер, но захотелось открыть sketch

Ответить

Театральный диод

3

Комментарий удален по просьбе пользователя

Ответить
1

Это перевод что ли? Швы торчат по всему тексту.

Ответить
3

Это не швы. Это тени и объем — неоморфизм.

Ответить
0

Имитация настоящего пульта — это скевморфизм.

Неа. Пульт, это пульт. А скевморфизмом будет именно текстурка пульта.

Ответить
2

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

Ответить

Театральный диод

KINCH
1

Комментарий удален по просьбе пользователя

Ответить
0

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

Ответить
0

Но ваш комментарий имеет право на жизнь в том смысле, что имитация дерева на пластике - это тоже скевоморфизм

Ответить
1

Дизайнеров так забавно слушать всегда)

Ответить
1

Забавно, но чаще всего такие шоты на дриббле в связке с плеерами, калькуляторами, реже можно встретить в dashboard в навигационных элементах. Бизнесу эти красивые картиночки не интересны, гораздо важнее использовать пространство по назначению с максимальной пользой для клиента. Я бы игрался данным трендом в маркетинговых целях, обложки для AppStore и Google Play, например...

Ответить
1

От него у меня появляется ощущение что меня хотят обмануть - пульт выглядит как настоящий, но он цифровой и ощущения не как от настоящего - не будет физического отклика. У скево такого нет, может потому что глянцевые элементы управления встречаются не так уж и часто. Вообще глянец был как по мне просто моден в то время. Красив, но приелся. Уж пусть лучше будет старый добрый флэт чем нео. Ну и да, во флэте элементы как-то лучше визуально разделены.
Недавно, кстати, настраивал старый плоский телик от самсунга, года 2010 с глянцевым дизайном и просто бесился от его сенсорного управления - очень не хватало простых физических кнопок ибо не понятно нажал ты или нет + тормозной отклик от самого телика. Хотя первый раз когда настраивал один из первых плоских (ЭЛТ) мониторов от того же сосунга году в 2003 - был вау эффект от сенсорного управления.

Ответить
1

Дизайнеры хуже масонов. Постоянно меняют свои дизайны по кругу, а мы страдаем.

Ответить
0

черт, нас спалили, расходимся 😂

Ответить
0

Годный материал. Спасибо

Ответить
0

Переход на "Плоский дизайн" имеет на мой взгляд более простое объяснение. Просто появился емкостной экран с первым айфоном, а и надо было переходить с "минеров" на шлепанье пальцами.

Ответить
0

Завтра, какая-нибудь из крупных корпораций типа Apple и Microsoft решит использовать неоморфизм, и это точно войдет в моду и все будут делать так. 

Ответить
0

майкрасофт флет так и не смогли нормально сделать 😄

Ответить
0

Проще некуда...

Ответить
0

Хорошая статья, спасибо!

Ответить
0

Когда берете чужие работы все таки указывайте автора, ато как-то не хорошо получается.
https://dribbble.com/shots/9393020-Mi-Remote-Control-Mobile-app
https://dribbble.com/shots/9179889-Neuomorph-Ui-Kit

Ответить
0

А мне эта мусорка (которая удалить) всегда больше кастрюлю напоминает, особенно на андроидах

Ответить

Комментарии

null