Что в видео-уроке:
В уроке оформляем блок вопросов и ответов без лишнего визуального усложнения. Собираем вопросы через Auto Layout, добавляем открытые и закрытые состояния, настраиваем разделители, иконки и расстояния и продолжаем общую стилистику лендинга.
Для блока вопросов и ответов достаточно простой композиции
Блок вопросов и ответов относится к стандартным интерфейсным секциям, поэтому здесь необязательно придумывать сложный визуал. Главная задача — сделать вопросы понятными, удобными для просмотра и сохранить стилистику страницы.
Блок оставляем светлым и отказываемся от отдельных плашек из прототипа. Вместо них используем тонкие горизонтальные линии, которые уже встречались в предыдущих секциях.
Собираем вопрос через Auto Layout
Повторяющиеся элементы особенно удобно строить через Auto Layout. В одну группу объединяем текст вопроса и управляющую иконку, а затем добавляем ответ и разделитель.
Такая структура позволяет быстро менять вопросы местами, дублировать их и показывать разные состояния без ручной перестройки всего блока.
От заголовка секции до списка сохраняем системное расстояние около 60 px.
Показываем открытое и закрытое состояния
Для закрытого вопроса используем знак «+», а для открытого — поворачиваем его на 45° и получаем «×». Так пользователь визуально понимает, какой пункт можно раскрыть и какой уже открыт.
Иконка остаётся небольшим терракотовым акцентом. Она не должна конкурировать с самим вопросом, поэтому её располагаем по центру относительно строки текста.
В макете достаточно показать несколько состояний: например, часть вопросов раскрыть, а остальные оставить закрытыми, чтобы было понятно, как должен работать интерфейс.
Разделители оставляем нейтральными
Сначала линии можно проверить в терракотовом цвете, но при большом количестве вопросов они создают слишком много цветовых акцентов.
Серые разделители работают спокойнее: они структурируют список, но не перетягивают внимание с вопросов и иконок.
У последнего элемента нижнюю линию можно не добавлять, особенно если сразу после блока начинается секция другого цвета. В таком случае граница следующего блока уже выполняет функцию визуального завершения.
Внутри ответа можно использовать обычный список
Если ответ содержит несколько пунктов, его необязательно оформлять вручную отдельными графическими маркерами. Здесь можно использовать стандартный текстовый список, если он хорошо соответствует содержанию.
При этом сохраняем уже настроенные стили основного текста и следим, чтобы расстояния между вопросом и ответом были меньше, чем между соседними смысловыми блоками.
Не перегружаем стандартный интерфейс
В подобных секциях ценность создаёт не декоративность, а ясность. Достаточно аккуратной типографики, правильных расстояний, разделителей и небольшого цветового акцента на состоянии вопроса.
Если блок уже понятно работает и поддерживает визуальную систему сайта, добавлять изображения, сложные формы или дополнительный декор только ради разнообразия не нужно.
