Как мы справились с неоморфизмом на этапе верстки мобильного приложения Incognito

Всем привет, меня зовут Роза, я из веб-студии Pyrobyte. Мы решили поделиться личным опытом разработки мобильного приложения Incognito, в дизайне которого использовали неоморфизм и столкнулись с проблемами на этапе вёрстки на React Native. Возможно, именно наше решение будет полезно вашему проекту.

О проекте

Incognito — анонимная социальная сеть для тех, кто хочет получить правдивую обратную связь о себе и поработать над ошибками, а также обсудить свои проблемы или актуальные вопросы в анонимных чатах. Приложение позволяет выставлять и получать анонимные оценки внешних данных человека, а также черт характера.

Как мы справились с неоморфизмом на этапе верстки мобильного приложения Incognito

Во время выбора концепции дизайна мы столкнулись с первыми сложностями. Клиент пришел уже с готовой концепцией (которая позже неоднократно менялась), и нужно было сделать прототип, а потом и приступить к дизайну. Первый концепт был в классическом flat стиле, все аккуратно, дизайн не мешает контенту и информации. Но клиент захотел сделать дизайн в красивом стиле — неоморфизм. Да, это именно те выпукло/вогнутые кнопочки и попытка сделать из картинки объемный интерфейс.

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

Neumorphic button animation Vadim Demenko

В тот период Dribbble и Behance пестрили подобными кейсами, но позже тренд стремительно утих. И не просто так. Во время подготовки мудборда мы стали изучать что предлагает нам Google Play и App Store, и кое-что обнаружили. А точнее, почти ничего не нашли. Этот дизайн считается достаточно сложным и трудоемким, не каждая команда готова за него взяться.

https://dribbble.com/shots/13625219-Smart-Home-Application
https://dribbble.com/shots/13625219-Smart-Home-Application

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

Антон Лисицкий, Арт-директор веб-студии Pyrobyte

Неоморфизм на этапе дизайна

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

Как мы справились с неоморфизмом на этапе верстки мобильного приложения Incognito

Свой дизайн мы показываем через демонстрационный режим в Figma, это удобно — просто скинул ссылку, и макет откроется в нужном масштабе. Интерактивные переходы между экранами создают ощущение, что приложение уже реально работает. Функция Smart Animate усиливает этот эффект, и перестроения между состояниями элементов происходят плавно. Второй нюанс неоморфизма тесно связан с первым. Анимации перестроения теней, которых тут немало, сильно нагружают процессор. Все начинает подтормаживать. И с этим же эффектом мы столкнулись на этапе верстки. Расскажем, какое решение мы нашли.

Как мы справились с неоморфизмом на этапе верстки мобильного приложения Incognito

Решение проблемы на этапе вёрстки

Основная проблема, которая возникла на этапе верстки, — тени, а весь дизайн у нас был завязан именно на них. Мы нашли следующее решение:

Вёрстка внешних теней происходила за счёт отрисовки элементов SVG, которые реализованы в React Native не с лучшей производительностью, но проще решений найти не удалось. Использовали заготовку сторонних разработчиков, которая выглядит таких образом:

Как мы справились с неоморфизмом на этапе верстки мобильного приложения Incognito

Далее используя эту обёртку составляли конфигурации так:

Как мы справились с неоморфизмом на этапе верстки мобильного приложения Incognito

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

Тень сверху
Тень сверху
Тень сверху и снизу
Тень сверху и снизу

Недостатком такого метода является то, что необходимо знать размер элемента, что проблематично с динамическими элементами такими как аккордеон. Графический элемент аккордеон представляет собой вертикально сложенный список элементов, таких как текстовые метки или эскизы. Каждый элемент может быть «развёрнут» или «раскрыт», чтобы показать содержание, связанное с этим элементом. Для этого приходилось при монтировании компонента получать его размер, и в соответствии с этим отдавать значения компоненту тени, при открытии/закрытии аккордеона расчёт приходилось проводить повторно. Минусом такого подхода является то, что в момент вычислений происходили небольшие прыжки компонентов.

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

Вдавленная тень
Вдавленная тень

В этом случае алгоритм действий был немного иной. Мы использовали здесь линейные градиенты, которые были реализованы в нативной части (Java — Android, Objective-С — iOS). Аналогично внешним теням мы должны знать размер элемента. Для реализации пришлось уже использовать 4 обертки, чтобы сделать тень на 4 стороны элемента. В коде это выглядит так:

Как мы справились с неоморфизмом на этапе верстки мобильного приложения Incognito
Дизайн
Дизайн
Верстка
Верстка

Заключение

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

Работали с таким стилем? Пишите в комментариях, как решали проблемы, и какая реакция была у заказчика и пользователей?

99
4 комментария

Комментарий недоступен

7
Ответить

Я цветные кастомные тени вообще делал как png полупрозрачный, именно из-за тормозов SVG. Вспомнил времена верстки под IE6 )

И конечно думал про Flutter, где вообще этой проблемы нет.

1
Ответить

В чем была проблема сделать тени и анимацию на CSS?

Ответить

Это React Native, поэтому он дает доступ только к тому, что есть на платформе. И если на iOS есть полный контроль над тенью, подобный тому что есть в CSS, на Android только есть "elevation" - как бы высота поверхности, и тень от этой "высоты" по разному рендерится в разных местах экрана. Поэтому нейроморфизм без геммороя на нативном Android не сделать.

Flutter лишен этих недостатков потому что все контролы рисует сам и ему пофиг на ограничения платформы.

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

2
Ответить