Неоморфизм в пользовательском интерфейсе

Пример, который мы примерно за час воплотили в жизнь на глазах аудитории дизайнерского ивента DoGoodS*!t.

На прошлой неделе мы говорили о потенциальных трендах в UI-дизайне, и один из них вызвал огромный интерес у пользователей как на Dribbble, так и в Instagram. Jason Kelley назвал этот «Новый скевоморфизм» невоморфизмом (откуда я убрал букву «в», и у меня получилось название Неоморфизм).

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

Ну что, скевоморфизм, пацаны?

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

Как отмечает Kamil Falana, переход от безжизненных «образов» к чему-то, стоящему на полпути к реализму, уже начался

Не так давно эти изменения начали происходить буквально повсюду, и хороший тому пример — Apple. Толчок в сторону «супер плоскости и минимализма» встретил сопротивление и вылился в чуть более ощутимый бестекстурный 3D-эффект. И, кажется, людям это понравилось.

Шаг назад, а результат лучше?

Весь хайп начался с одного шота на Dribbble, который быстро стал вирусным.

Этот шот от пользователя alexplyuto набрал на Dribbble более 3000 лайков, что дало начало развитию нового тренда. В мгновение ока он завоевал невероятную популярность в дизайн-сообществе, начали появляться подобные концепты. Мы тоже сделали парочку :-)

Этот шот способствовал появлению нового тренда и, хотя не все его элементы имеют смысл (свитчер для возврата на предыдущую страницу, серьёзно?), именно он с новой силой зажёг в нас интерес к UI. Спасибо, Алекс.

В чём разница?

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

Современные/Материальные карточки

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

Неоморфические карточки

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

Такого эффекта достаточно легко добиться за счёт игры с двумя тенями: одной с отрицательным значением, а другой — с положительным. Но для того, чтобы всё сработало как надо, фон не должен быть чисто белым или чёрным. Необходимо придать цвету хотя бы небольшой оттенок, чтобы и тёмная и «светлая» тени стали заметны. Цвет фона может быть любым, холодным или тёплым, как вам вздумается. Но светлая и тёмная тени должны визуально выделяться, хотя бы немного.

Ловите рецепт — можете менять его, как хотите.

Плюсы и минусы

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

Однако стоит упомянуть и о некоторых проблемах, которые могут возникнуть. Пока мы выделили две основные (и не перестаём искать), вот они:

• Доступность
• Способы успешно всё закодить

Контрастность — Доступность

Главная проблема при определении контрастности фона в том, что если оба объекта одного цвета, то контраста между ними попросту нет ;-)
По сути, у нас есть тень, так что мы можем зафиксировать значение цвета в HEX на границе «плитки» и у первого пикселя за ней. В примере выше, мы получили следующее отношение контрастности:

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

Разница между этими карточками незначительна, и если вы хотите, чтобы контрастность у карточек была гораздо лучше, тогда вот вам такой выход:

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

Всё это ещё нужно проверить (и я обязательно найду на это время), но пока представим себе, что оба «варианта» элемента ниже «сойдут». Даже если кто-то и не заметит мягкую тень, контрастности всё равно хватит, чтобы разглядеть иконку и ей «воспользоваться».

Доступность

И пока «кнопка» должна выглядеть как кнопка, иконка сработает и по отдельности при наличии хорошего контраста с фоном. Так что главное здесь — запомнить: если вы собираетесь придерживаться этого стиля, то постарайтесь сделать все важные элементы достаточно контрастными.

В конце концов, большинство «современных» карточек и их тени точно так же не проходит испытание на контрастность.

Только карточки?

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

Им с лёгкостью можно придать эффект «нажатости», создав внутреннюю тень, как в примере ниже:

Но так делать нинада.

Проблема здесь довольно серьёзная.

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

Вот, держите немного идей, как можно использовать контурную и залитую иконку, подчёркивание или даже цветную заливку элемента в «нажатом» состоянии.

Можете поиграть с разными вариантами, но состояние элементов должно оставаться узнаваемым.

Всегда держите это в голове, когда делаете макеты. Мы все любим, чтобы было «красивенько», но всё же не стоит забывать и об удобстве в использовании.

Написание кода

Предлагаю относится к написанию кода как к дополнительному раунду, ведь достичь эффекта «мягкого пластика» с помощью CSS, на самом деле, гораздо проще, чем нам кажется. Не знаю пока точно насчёт Swift и Kotlin, но, думаю, проблем там не будет тоже.

Конечно, можно объединить две box-shadows, поставив между ними запятую.

Прочие эффекты

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

А ещё мы создали вот такое упражнение (скоро запостим), пока изучали, чего можно добиться с помощью простых эффектов. И пусть выглядит странновато и с налётом «ретро», было очень прикольно сделать такие кнопки, которые выглядели бы как настоящие кнопки ;)

Зачем нам всё это надо?

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

Так что дерзайте! поэкспериментируйте, найдите ему своё собственное применение. Работа дизайнера — двигать по экрану прямоугольники, и каждый раз когда это выглядит как-то «по-другому» и «свежо», к нам снова возвращается то радостное ощущение. А не будь мы в постоянном поиске, все продукты очень скоро стали бы похожими друг на друга.

Поэтому веселитесь!

Но не забывайте, что у каждого нового тренда есть свои оговорки, и к дизайну надо подходить аккуратно, дабы он не утратил своей практичности.