Гайд: Как делать «Упрощенный режим» в Своих Финансах

Мы начали делать версию нашего приложения для пенсионеров — «Упрощенный режим». Главная страница уже готова, теперь нужно перевести на этот формат остальные экраны.

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

📍 Как выглядит базовый процесс (флоу)

Мы не рисуем и не кодим всё с нуля. Действуем по такому алгоритму:

  1. Копируем страницу из стандартного приложения.

  2. Увеличиваем масштаб (скейл) до 1.3. Все элементы должны стать крупнее.

  3. Отдаем на тесты. Собираем метрики и отзывы от пользователей.

  4. Точечно дорабатываем виджеты, если после увеличения масштаба что-то сломалось или стало неудобным.

🚫 Чего быть НЕ должно

  • Сложной логики и запутанных сценариев. Оставляем только самое необходимое.

  • Горизонтальных скроллов (каруселей). Людям в возрасте тяжело свайпать вбок и замечать элементы, спрятанные за краем экрана. Все списки пускаем только сверху вниз.

👀 На что смотреть в первую очередь

Когда вы увеличили масштаб до 1.3, внимательно проверьте главные элементы страницы. Убедитесь, что:

  • Иконки категорий не «замылились» и хорошо считываются.

  • Заголовки внутри секций помещаются на экране и не наезжают друг на друга.

  • Размеры кнопок и полей ввода достаточно большие, чтобы по ним было легко попасть пальцем.

🛠 Как работать с компонентами в коде и макетах

Часто бывает так, что просто увеличить компонент в 1.3 раза не выходит — ломается верстка или визуально это выглядит плохо. В таком случае компонент нужно кастомизировать.

Сценарий 1: Компонент из дизайн-системы Astra DS Если вы используете базовые варианты компонентов из нашей дизайн-системы Basic или Custom (например Basic List), вы можете смело и безболезненно создать внутри него новую визуальную версию специально для упрощенного режима.

Сценарий 2: Локальный компонент Если нужной версии в Astra DS нет, и это ваш локальный компонент или компонент Astra Fintech:

  1. Соберите новый вариант компонента на основе токенов дизайн-системы.

  2. Добавьте дополнительный проп (свойство), чтобы переключать состояния.

Как называем пропсы: Так как проп base у нас уже занят под другие задачи, для разделения версий мы используем проп mode (режим):

  • mode="regular" — для стандартного приложения.

  • mode="lite" — для версии пенсионеров.