Неоморфизм — вызов UX/UI-дизайнерам


30.01.2020 Время чтения - 3 минуты 3789

«Неоморфизм» — это новый жаргонный термин в кругах дизайнеров, созданный Michal Malewicz, который по существу скрещивает слова «новый» и «скевоморфизм».

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

Лично мне нравится этот внешний вид. Он бросает новые вызовы UX/UI-дизайнерам и разработчикам интерфейсов во всем мире.

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

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

Однако, если мы посмотрим на неоморфные кнопки, то увидим некую проблему.

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

Неоморфические кнопки без каких-либо границ, они естественно вписываются в фон

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

Концепт магазина часов Dawid Tomczyk на Dribble

Эти проблемы могут иметь довольно элегантные решения.

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

Кнопки с небольшой рамкой теперь имеют более четкие края.

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

Небольшое изменение границ при наведении / фокусировке позволяет пользователю узнать, какая кнопка выбрана

Цвет этой границы на фоне обеспечивает прохождение WCAG AA для графических объектов и компонентов пользовательского интерфейса.

Далее мы имеем нажатое состояние кнопки. Здесь мы можем сделать очень хороший контраст при изменении состояния.

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

Кнопка воспроизведения (выдавленная) рядом с кнопкой перемешивания (с отступом)

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

Здесь вы можете увидеть пример кода, который я создал с помощью HTML, CSS и JavaScript.

Заключение

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

Оригинал статьи.

Читайте также: Сетка и интервалы в Figma

Сетка и интервалы в Figma