Расширенная форма заявки. Блок 9

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

Это элемент выбора, позволяющий выбрать только один вариант из нескольких предложенных.

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

Это поле для ввода развёрнутого текста, например комментария или сообщения.

В уроке оформляем сложную форму заявки с параметрами тары, вариантами дизайна и контактными данными. Настраиваем компоненты и Auto Layout, разбираем поведение полей при изменении ширины и дополняем блок визуальной композицией.

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

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

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

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

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

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

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

Для параметров вроде дизайна или печати на упаковке используется выбор «Да» или «Нет». Поскольку одновременно должен быть выбран только один вариант, здесь подходят радиокнопки.

Для компонента создаём два состояния: выбранное и невыбранное. Каждый круг объединяем со своим текстом, а два варианта собираем в одну горизонтальную группу.

Если пользователю разрешено выбрать сразу несколько независимых значений, вместо радиокнопок следует использовать чекбоксы.

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

В данном проекте дополнительно вводим подзаголовок «Параметры тары», хотя в текстовом прототипе его не было. Такой элемент оправдан: он помогает уравновесить структуру формы и отделить одну категорию информации от другой.

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

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

Для этого внутренним группам и полям задаём Fill container. После этого при изменении ширины всей формы элементы автоматически подстраиваются под доступное пространство.

Группы с радиокнопками при этом сохраняют собственное горизонтальное расположение. Поэтому внутри общей вертикальной структуры могут существовать дополнительные вложенные Auto Layout с другими направлениями.

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

В уроке дополнительно проверяем Wrap и ограничения минимальной ширины. Для мобильного макета ориентируемся на контейнер около 480 px и задаём внутренним группам минимальные значения, после которых они перестраиваются друг под друга.

Смысл такой настройки не в том, чтобы сразу полностью разработать адаптив, а в том, чтобы убедиться: форма способна предсказуемо перестраиваться при уменьшении пространства.

Название уже выбранного параметра и подсказка внутри пустого поля должны выглядеть по-разному.

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

Обязательные поля отмечаем звёздочкой. Дополнительное пояснение о том, что звёздочка означает обязательность заполнения, в данном случае не требуется: это привычный интерфейсный паттерн, а при попытке отправить незаполненную форму пользователь дополнительно получит системную подсказку.

Кнопку формы растягиваем на всю ширину контейнера. Она отличается по пропорциям от кнопок в предыдущих блоках, но сохраняет те же цвета, скругления и типографику.

Это допустимо: ширина элемента меняется под конкретную задачу, а базовая стилистика остаётся прежней. Создавать совершенно новый тип кнопки только для формы не нужно.

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

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

Тени делаем мягкими и достаточно светлыми, особенно на белом фоне, чтобы они добавляли объём, но не создавали грязного пятна.

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

Такие повторения помогают поддерживать общую стилистику и ритм лендинга. При этом не обязательно повторять каждый декоративный элемент в каждом блоке — достаточно периодически возвращать отдельные узнаваемые приёмы.

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

Перейти к следующему уроку