Mos.ru

Mos.ru

Учитывая задачу проекта, логично предположить, что форма будет использоваться на сайте Правительства Москвы, в состав которого входят департаменты. Поэтому первым делом я отправился изучать этот сайт и получать опыт заполнения уже существующих форм.

Интернет-серфинг

Во время изучения mos.ru мне не удалось посмотреть, как в формах работают поля для ввода личных данных, потому что они заполнялись автоматически. Поэтому я дополнительно изучил, как с такими задачами справляются другие сервисы и дизайнеры.

Шрифт

Использовал Golos Text (SemiBold, Medium, Regular). Для удобства сохранил все вариации в стили и разделил их на 3 группы: Mobile, Desktop и MultyPlatform.

Цвета

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

Базовые значения цветов сохранил в Primitives.

В Tokens уже использовал семантические названия и ссылался на Primitives.

Компоненты

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

• Primitives включают базовые элементы интерфейса, которые не зависят от контекста использования.
• Components собираются из примитивов и представляют собой законченные интерфейсные элементы с логикой и состояниями.
• Templates — это готовые пользовательские сценарии.

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

Структура и порядок полей

Поле выбора департаментов вынесено в начало формы.

Это позволяет пользователю сразу понять контекст подписки и осознанно продолжить заполнение, а не вводить персональные данные до понимания цели.

Далее идут контактные данные:

• электронная почта для получения новостей
• ФИО для идентификации пользователя
• телефон для дополнительной идентификации

Чекбокс согласия размещен перед кнопкой отправки — это привычный и ожидаемый паттерн для форм с персональными данными.

Также добавил важный шаг — подтверждение подписки. Это снижает неопределенность и дает уверенность, что действие выполнено успешно.

Работа с состояниями и ошибками

Форма спроектирована с учетом всех ключевых состояний:

• пустая
• с ошибками
• корректно заполненная

Ошибки показываются локально над конкретным полем, адаптируясь под контекст, и обозначаются сразу, для упрощения безошибочного заполнения.

Поле Департаменты

Реализовано через выпадающий список с чекбоксами и строкой поиска. Есть чекбокс для быстрого выделения и снятия выбора со всех пунктов. По умолчанию выбран вариант «Все департаменты», так как это исключает возможность ошибки (незаполненного поля) и снижает количество действий для части пользователей, при этом не ограничивая возможность точной настройки.

Поля Электронная почта и ФИО

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

Поле Телефон

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