Об особенностях UX/UI дизайна мобильных приложений
Современные дизайнеры настолько привыкли к Figma, что перестали учитывать особенности и технические ограничения платформ.
К примеру, дизайн мобильных приложений.
Как делаю я?
Да и подавляющее большинство дизайнеров интерфейсов. Рисую артборд на 360 пикселей по ширине, для текста беру размер в 14 пикселей.
Экраны-то смартфонов сейчас большие, зачем больше? Блоки раскладываю красиво по сетке, делаю состояния для интерактивных элементов.
Потом всё это закатываю в стили и компоненты и со спокойной совестью отдаю разработчикам.
Что не так?
Как говорится, есть нюанс. Во-первых, базовый экран Андроида — 160 пикселей по ширине (только представьте себе). Дальше считается плотность пикселей экрана и применяется множитель для элементов интерфейса. Плюс, андроид делает шрифты не в пикселях, а в SP. Ну и в третьих, в Figma жирность текста отображается как "Regular/Medium/Bold", а в коде эта же жирность указывается как в CSS — 400/600/800. В итоге происходит недопонимание с разработчиками и плодятся разночтения.
Что же делать?
Теоретически при ширине артборда в 360 пикселей и размере шрифта в 16 пикселей всё должно сносно работать.
И - да, можно сделать mirror в мобильном приложении Figma. Но это не всегда спасает.
Если же хотите быть полностью уверены в своих макетах, подгоните масштаб Figma примерно под размер экрана вашего смартфона. Буквально на глазок. Тогда сразу станет понятно — достаточно ли крупные шрифты вы используете ) На 2К я проверяю при 81%.