Мобильное приложение сети скалодромов в Алматы и Астане получило новый интерфейс для Android: абонементы, запись на тренировки и в детские группы, трассы зала, прокат снаряжения. Макеты нарисовал Евгений Росляков. Сайты и интерфейсы он делает с 2016 года. Работает как самозанятый, договор подписывает до начала, юрлицам выдаёт закрывающие документы. Сам он в Москве, а заказчиков из других стран ведёт удалённо.
У сети два зала. В них абонементы, тренировки с инструктором, детские группы, прокат скальной обуви. Цены в приложении указаны в тенге. Записываются в основном с телефона, по дороге или уже в зале, поэтому каждый экран должен читаться и нажиматься одной рукой.
Первую версию приложения рисовал один дизайнер в Sketch. Вторую делал подрядчик в Adobe XD, а эту программу её владелец больше не развивает. Макеты лежали в двух форматах и в трёх папках. Кнопка «Записаться» на одних экранах была зелёной, на других оранжевой, а какой файл свежий, не мог сказать никто.
Была и вторая беда. Большинство посетителей ходят с Android, а интерфейс сделали «под айфон»: вкладки сверху, собственные стрелки «назад», мелкие кнопки. С магнезией на пальцах попасть в такую кнопку трудно.
Нужно было свести всё в одно место, навести порядок и нарисовать приложение, которое выглядит и ведёт себя на Android как родное.
Сперва ревизия. Я открыл старые файлы Sketch и Adobe XD, перенёс экраны в один файл Figma и выписал каждый в таблицу: что показывает, что устарело, чего не хватает. Почти половина экранов дублировала друг друга.
Дизайн пользовательского интерфейса Android сделал по правилам Material 3. Внизу навигация из пяти разделов, «назад» работает системным жестом, кнопки и строки списков крупные, чтобы попадать не глядя. Уведомления о тренировке, конце абонемента и переносе занятия оформил так, как их ждёт Android.
Нарисовал экраны:
— абонемент и его заморозка;
— запись на тренировку и в детскую группу;
— трассы зала с категориями сложности и отметкой «пролез»;
— прокат снаряжения;
— расписание инструкторов.
В Казахстане Figma доступна вместе с Figma AI, и я ею пользовался. Figma AI быстро выдавала черновики: варианты компоновки экрана и правдоподобный тестовый текст вроде названий трасс и выдуманных расписаний. Выбирал вариант и доводил его до рабочего вида я. Сетку, цвета, размеры шрифтов и логику экранов нейросеть не решала.
Прототипирование шло в два круга. Сначала кликабельный прототип посетители пробовали прямо в зале, без съёмки. Я просил пройти запись на тренировку и смотрел, где человек зависает. После правок провёл второй круг на финальном прототипе.
Разработчикам передал файл с компонентами и состояниями: пустой список, загрузка, ошибка, нет сети.
У сети теперь один живой файл Figma вместо трёх папок. Файлы Sketch и Adobe XD ушли в архив на случай споров, работа идёт только в новом. Дизайнер или разработчик открывает один файл и видит актуальные экраны.
Интерфейс стал привычным для Android: нижняя навигация, жест «назад», крупные зоны нажатия. На тестах в зале посетители записывались на тренировку без подсказок. Сложнее всего шла заморозка абонемента, поэтому я переписал её тексты и убрал один лишний шаг.
Разработчики получили компоненты с состояниями и перестали переспрашивать, как выглядит пустой экран или ошибка. Отметку «пролез» первыми заметили постоянные клиенты, и ей пользуются охотнее всего.
Теперь о границах работы. Это дизайн и проверенный прототип, а не готовое приложение: программировал его уже не я. Для iPhone интерфейс придётся рисовать отдельно, по правилам Apple, копия экранов Android там смотрелась бы чужой. Сеть думает об этом на следующем этапе, когда соберёт отзывы по Android-версии.
Приложение, которое рисовали разные люди в разных программах, можно привести в порядок. Пришлите мне на freelance.ru старые макеты, и я скажу, что стоит сохранить, а что нарисовать заново.
