Как неоморфизм выглядит в дизайне пользовательского интерфейса и что он может сделать для вашего продукта? У нас есть для вас полный обзор этого нового тренда!
Неоморфизм родился из скевоморфизма и создал совершенно новый стиль UX. Дизайнеры со всего мира видели броские неуморфные рисунки на Dribbble и Behance — и теперь это уже сама по себе тенденция.Создавайте плоские или неуморфные прототипы с Justinmind! Бесплатное скачивание
Но что такое неоморфизм? Как это применить к интерфейсу? Как этот стиль влияет на удобство использования интерфейса?
Что такое неоморфизм в UI дизайне
Неоморфизм — это новый взгляд на скевоморфный дизайн. Несмотря на то, что это относится к скевоморфизму, во всем стиле дизайна есть новый фокус с неоморфизмом. Этот фокус не обязательно на контрасте или сходстве между реальным и цифровым мирами, а скорее на цветовой палитре.
Да, вы правильно прочитали. Неуморфизм — это цвет всего экрана, обеспечивающий пользователям совершенно уникальный опыт.
От Филиппа Легерски .
Представьте свой классический интерфейс iOS или Android для музыкального плеера. У вас есть фон, на котором мы размещаем несколько компонентов, добавляя слои и создавая глубину. С помощью неоморфизма вы создадите мягкий интерфейс, в котором элементы пользовательского интерфейса размещаются не на заднем плане, а за ним.
Создается впечатление, что такие компоненты, как кнопки или карточки, на самом деле находятся внутри фона и видны только потому, что они выступают изнутри. Общий стиль — это сплошные цвета, низкий контраст и правильная игра затенения.
Как неоморфизм соотносится со скевоморфизмом?
Одна из самых интересных особенностей неоморфизма заключается в том, что он основан как на скевоморфизме, так и на других очень популярных стилях, таких как плоский дизайн. Да, оба они противоположны друг другу — и неоморфизм находится где-то посередине.Если вы хотите получить более подробную информацию, ознакомьтесь с нашими публикациями о скевоморфном дизайне и плоском дизайне .
Элементы калькулятора от Mojimomo и William Tapp.
Эта тенденция направлена на избавление от всех ярких аспектов интерфейса, создание мягкого визуального оформления, которое остается неизменным во всем продукте. Он не фокусируется на воссоздании реальности в цифровом мире, например, на скевоморфизме. Вместо этого он пытается создать что-то совершенно новое.
Как выглядит неоморфизм в дизайне пользовательского интерфейса
Неуморфизм — это тонкий контраст и однотонные цвета. Но как создать впечатляющий интерфейс без каких-либо ярких элементов? В неоморфизме все дело в использовании тени и света.
В общих чертах основной ингредиент — убедиться, что ваш элемент и ваш фон имеют одинаковый точный цвет. Это сделано для того, чтобы затем мы могли создать ощущение, что эти компоненты выходят изнутри фона, используя затенение для создания выступающего вида.Некоторые дизайнеры немного по-другому подошли к компонентам пользовательского интерфейса, представив их не так, как если бы они выступали наружу, а как если бы компонент ушел на задний план! Творчество поистине не знает границ.
Вы должны убедиться, что цвет вашего фона и компонентов хорошо работает в твердой форме, так как вам нужно будет применить этот же цвет по всему дизайну. Чтобы игра с тенью работала, ваш фон не может быть полностью черным или просто белым.
Вам понадобится какой-то цвет, чтобы тень показала визуальный трюк. Когда у вас есть основной цвет, вы можете искать две тени: темную и светлую тень.
Это дополнительные детали, которые вы примените ко всем компонентам, создав единый стиль.
От самого человека, Михала Малевича .Если вам нужен более интерактивный способ изучения того, как выглядит и ощущается неоморфизм, поиграйте с этим неуморфным генератором CSS . Это довольно весело.
Вот и все, что касается неоморфизма. Используя это как основу, на которой вы строите дизайн продукта, вы также можете слепить его в соответствии со своим стилем. Многие дизайнеры добавляют яркие цвета в стратегические области экрана, чтобы улучшить удобство использования, добавить бликов или просто оставаться в центре внимания.
Неоморфизм: карты и кнопки
Неуморфные карты отличаются от других знакомых нам стилей дизайна, таких как, например, карты в материальном дизайне, потому что они не выглядят так, как будто они летают. Нет тени для создания этого плавающего эффекта, даже когда пользователь наводит курсор на эту карту.
Это потому, что они выступают из фона, создавая приподнятый вид.
Чтобы добиться этого, нужно взять светлые и темные тени, которые вы установили, которые будут сопровождать фон, и использовать их на противоположных сторонах карточек. Вы можете поиграть с расположением этих двух теней, чтобы казалось, что карты видны пользователю под определенными углами.
Взлеты и падения неоморфизма в UX-дизайне
Это правда, что, как и все модные стили дизайна, неоморфизм имеет как хорошие, так и плохие стороны. С другой стороны, у нас есть все волнение и свежесть чего-то нового и уникального. Это привлекательный визуальный стиль, об этом можно сказать объективно. Но если неоморфизм велик, почему мы не видим его в реальных продуктах?
Несмотря на все великолепные визуальные эффекты, неуморфизм имеет огромное слабое место: удобство использования.
Проблема в том, что существует очень маленький запас цветов и контраста, в котором работает неоморфизм. Малейшее отклонение в насыщенности может привести к тому, что весь эффект, на котором построен неоморфизм, просто не проявится. Подобно эффекту домино, это имеет множество сомнительных последствий для неоморфизма.
Проблема с кнопкой
Неуморфизм — это тонкие изменения в контрасте и незаметные компоненты пользовательского интерфейса. Но независимо от того, насколько большое значение вы придаете визуальной стороне своего прототипа или общему дизайну, все дизайнеры знают, что удобство использования стоит выше простой эстетики. И нигде эта проблема не ощущается сильнее, чем в неуморфных кнопках.
Кнопки — ключевой компонент пользовательского интерфейса в любом интерфейсе. Они должны быть очень заметными и должны изменять состояние кнопок, когда пользователи взаимодействуют с ними. Пользователи должны иметь возможность не просто замечать кнопки менее чем за долю секунды, но им нужно менять цвета — в некотором смысле, они общаются с пользователями.
Однако эта простая характеристика кнопок при неоморфизме становится проблематичной. Михал Малевич, один из создателей неоморфизма, сразу увидел проблему. У вас есть очень определенный стиль, основанный на небольшом поле теневых эффектов. Это узкое окно в неоморфизм, и может быть трудно вписать состояния кнопок в это крошечное окно.Вы можете увидеть все причины, по которым Малевич считает, что неуморфизм не станет основным трендом в своем посте.
Тогда есть проблема с призывом к действию
Неуморфизм должен быть мягким для глаз. Это требует минимального цветового контраста и очень небольшого количества всплесков цвета. Логично, что дизайнеры могут применять неоморфизм в любой степени, которую они сочтут нужной, без необходимости реализовывать стиль полностью. Многие предпочитают применять к своим картам неоморфизм, но сохраняют классические кнопки.
Однако, если бы мы создали экран, состоящий исключительно из неуморфного дизайна, как бы выглядел призыв к действию?
Этот стиль требует цветов, которые почти не смешиваются друг с другом, что противоречит тому, что мы все знаем о CTA: они должны быть яркими. Самое последнее, чего вы хотите после того, как вложили столько времени и усилий в продукт, — это увидеть, как он плохо работает из-за чего-то глупого, например, пользователей, которым не удается найти CTA.
И, наконец, проблема доступности.
И перейдем к другой потенциально серьезной проблеме для неуморфных дизайнов. Этот стиль выглядит великолепно, но как он будет выглядеть для пользователей с ослабленным зрением? Скорее всего, это будет настоящая проблема, когда важные вещи исчезнут на заднем плане и станут непригодными для использования.
И пользователи, которым нужен большой контраст, чтобы четко видеть интерфейс, не единственные, кто может пострадать. Неуморфизм — это мягкий интерфейс… возможно, слишком мягкий. Различия в оттенках, которые разделяют элементы и компоненты, очень тонкие. Вполне возможно, что пользователи с некачественными экранами упустят эти мелкие детали, составляющие дизайн.
От Антонио Христовски .
Если вы хотите получить более реалистичное представление о том, можно ли применить неоморфизм к своему продукту и по-прежнему отмечать правильные поля доступности, попробуйте прочитать наше руководство по тестированию доступности . Попробуйте представить, пройдет ли неуморфный интерфейс описанные тесты и стандарты!
Бесплатные комплекты пользовательского интерфейса для неоморфизма
Все это бесплатные группы компонентов пользовательского интерфейса, которые следуют неуморфному стилю. Мы нашли их в глубине Интернета, но настоящие герои — это дизайнеры, которые разместили их в первую очередь! Давайте их проверим.
1. Приложение «Почта России»
Этот бесплатный подарок представляет собой мобильное приложение, созданное Sans Famillie. Вам предлагается как светлая, так и темная версии дизайна, полностью следуя неуморфным линиям.
В приложении «Почта России» есть 3 экрана приложения: панель управления, форма входа и экран получателя, где мы можем видеть финансовую информацию. Элементы пользовательского интерфейса переходят от карточек к графикам.
2. Неуморфные элементы
Этот набор пользовательского интерфейса содержит одни из лучших компонентов пользовательского интерфейса в неуморфном стиле, к которым мы все привыкли. К ним относятся переключатели, обычные кнопки, вкладки, панель поиска, полоса громкости, а также некоторые другие.
Самое замечательное в неуморфных элементах то, что их нет в файлах PSD или Sketch. Весь комплект доступен в формате HTML прямо на месте.
3. Комплект Neumorph UI
Еще один отличный UI-комплект, который упрощает жизнь, предлагая компоненты прямо в коде. В наборе пользовательского интерфейса Neumorph компоненты уже имеют базовое взаимодействие, такое как раскрывающееся меню.
Нам нравится, что общий дизайн кажется простым, что приводит к классическому неуморфному дизайну. Компоненты пользовательского интерфейса включают в себя такие вещи, как радио и кнопки переключения, а также поля и кнопки ввода. Все основы пройдены!
4. Неуморфные элементы пользовательского интерфейса.
Неуморфные элементы пользовательского интерфейса просты, но иногда простые работают лучше всего. Весь комплект пользовательского интерфейса охватывает концепцию музыкального плеера, включая такие компоненты, как кнопки воспроизведения и быстрой перемотки вперед, а также полосы прогресса, переключатели и флажки.
Нам нравится, что цветовая схема фокусируется на светлом сером цвете с красными вспышками. Он отражает идею о том, что неоморфизм также может дать место яркому цвету среди всего этого сплошного цвета фона!
5. Элементы UI / UX
Элементы UI / UX — это еще один комплект пользовательского интерфейса с отличной цветовой палитрой. Все дело в светлом фоне, используя синий, чтобы выделить и направить взгляд. Нам нравится, что в комплект входят как скевоморфные (как настоящий компас!), Так и нейморфные элементы.
Среди элементов пользовательского интерфейса вы найдете кнопки, переключатели, панели поиска, поля ввода, кнопки переключения, раскрывающиеся списки и многое другое.
Заключение о неоморфизме
Это действительно интересные времена, и неуморфизм прекрасно отражает этот факт. Он был рожден на основе скевоморфизма и минимализма, но призван дать пользователям такой опыт, которого никогда не было.
Увидим ли мы больше этого стиля в будущих продуктах? Это новый материальный дизайн? На самом деле неоморфизм имеет ряд недостатков, которые представляют собой настоящую проблему. В настоящее время проблемы с удобством использования слишком велики, чтобы любой продукт мог ими рисковать.
Но вот что замечательно в UX-дизайне: неоморфизм, как и многие другие стили, — всего лишь простой строительный блок будущего. Здесь, в Justinmind, мы рады видеть, куда ведет дорога неоморфизма и какие изменения вносятся в этот конкретный стиль на этом пути.
