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

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

О проекте

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


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

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


                    Как мы справились с неоморфизмом на этапе верстки мобильного приложения Incognito           1 https://dribbble.com/shots/13625219-Smart-Home-Application 
                    Как мы справились с неоморфизмом на этапе верстки мобильного приложения Incognito           2

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


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

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

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

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


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

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


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

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


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

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

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


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

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


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

Заключение

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

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

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

Источник: портал vc.ru

Добавить комментарий