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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#неоморфизм #webdesign #дизайн #верстка #мобильные_приложения #reactnative