Стили и макеты

1. Макеты опроса

SurveyAnalytica предлагает четыре различных типа макетов, определяющих способ отображения вопросов респондентам. Каждый макет оптимизирован под разные сценарии использования — от традиционных многостраничных форм до современных диалоговых интерфейсов. Макеты работают на всех каналах распространения (прямая ссылка, вставка в письмо, QR-код, виджет на сайте и другие).

Выбор макета

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

Сравнение макетов

2. Темы

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

Применение темы

1. 1Откройте панель «Стиль» на боковой панели конструктора опросов.
2. 2Нажмите «Темы», чтобы открыть галерею тем.
3. 3Просмотрите темы по категориям с помощью вкладок-фильтров или пролистайте всю коллекцию.
4. 4Наведите курсор на карточку темы, чтобы увидеть живой предпросмотр с цветовыми образцами, примером текста и миниатюрным макетом блока вопроса.
5. 5Нажмите на карточку темы, чтобы применить её мгновенно. Все свойства стиля (цвета, шрифты, оформление кнопок, полоса прогресса и другое) обновятся в реальном времени на холсте опроса.

Категории тем

Предпросмотр темы

Каждая карточка темы в галерее показывает живой миниатюрный предпросмотр, отображающий:

• Фон — цвет фона темы или изображение (с прозрачностью наложения)
• Пример текста — имитацию заголовка и описания опроса с использованием шрифта и цветов текста темы
• Блок вопроса — мини-карточку вопроса с примерами вариантов, показывающую оформление вариантов ответа
• Цветовые образцы — небольшие круги для основного текста, вторичного текста, фона варианта ответа и цвета кнопки/акцента
• Значок изображения — для тем с фоновым изображением в правом верхнем углу карточки предпросмотра появляется небольшой значок изображения

3. Пользовательские стили

Помимо тем, у вас есть детальный контроль над каждым визуальным элементом опроса. Панель «Стиль» в конструкторе опросов позволяет настраивать цвета, шрифты, размеры, насыщенность и отступы для каждого элемента по отдельности. Пользовательские стили можно применять поверх темы или создавать с нуля.

Настройка цвета

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

• Цвет фона — общий фон опроса с управлением прозрачностью (0-100)
• Цвет текста вопроса — основной цвет для подписей вопросов
• Цвет текста варианта — цвет для подписей вариантов ответа
• Фон кнопки — заливка кнопок «Далее», «Назад» и «Отправить»
• Цвет текста кнопки — рассчитывается автоматически или задаётся вручную
• Фон варианта — состояния по умолчанию и выбранного варианта ответа
• Цвета индикатора прогресса — фон дорожки и цвет заполнения
• Фон подвала — нижняя панель и раздел условий использования

Выбор шрифта

SurveyAnalytica интегрируется с Google Fonts, предоставляя доступ к сотням гарнитур. Выберите шрифт из выпадающего списка на панели «Стиль». Шрифт применяется ко всему тексту опроса — заголовки, вопросы, варианты, кнопки и описания используют выбранное семейство шрифтов.

Параметры выравнивания

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

Стилизация отдельных элементов

Панель «Стиль» организует элементы управления в сворачиваемые разделы для каждого типа элемента. Разверните раздел, чтобы настроить его свойства:

Параметры насыщенности шрифта

Каждый текстовый элемент поддерживает четыре уровня насыщенности шрифта:

4. Подробно о свойствах стиля

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

Наследование стилей

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

1. 1Значения по умолчанию из предустановок рассчитываются первыми на основе выбранных типографики, отступов, радиуса скругления и предустановок плотности.
2. 2Значения темы переопределяют предустановки при применении готовой темы — задавая цвета, шрифты и стили компонентов.
3. 3Явные переопределения имеют наивысший приоритет. Любое свойство, изменённое напрямую на панели «Стиль», переопределяет значения как темы, так и предустановки.

5. Предустановки стилей (Простой режим)

Для быстрой, комплексной стилизации SurveyAnalytica предоставляет шкалы предустановок, которые каскадно применяются сразу к нескольким элементам опроса. Вместо настройки отдельных размеров шрифта и значений отступов выберите уровень шкалы, и все связанные свойства обновятся вместе. Это называется Простым режимом — переключите его в верхней части панели «Стиль».

Категории предустановок

Детали шкалы типографики

Как объединяются пресеты и явные стили

Пресеты задают базовые значения. Любое явное значение, установленное в расширенном режиме (например, изменение размера шрифта вопроса на 22px), переопределяет значение пресета для этого конкретного свойства. Остальные свойства продолжают использовать шкалу пресета. Это даёт вам лучшее из обоих миров: быстрые глобальные настройки через пресеты и точечный контроль через явные переопределения.

6. Фон и брендинг

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

Элементы брендинга

Добавление брендинга в опрос

1. 1Откройте панель стилей в боковой панели конструктора опросов.
2. 2Загрузите свой логотип, нажав на область загрузки логотипа. Логотип сразу же появится в предпросмотре опроса.
3. 3Выберите положение логотипа — слева, по центру или справа — с помощью селектора выравнивания. При необходимости настройте ползунок размера.
4. 4Установите фоновое изображение, загрузив файл или указав URL. Изображение применяется как полноэкранный фон с масштабированием cover.
5. 5Настройте ползунок прозрачности фона, чтобы контролировать, насколько прозрачным выглядит наложение цвета фона поверх изображения (более низкая прозрачность делает изображение более заметным).
6. 6Просматривайте изменения в реальном времени на холсте опроса. Переключайтесь между предпросмотром для настольных и мобильных устройств, чтобы убедиться, что брендинг хорошо выглядит на всех устройствах.

Свойства фонового изображения

7. Индикатор прогресса

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

Параметры отображения

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

Настройка индикатора прогресса

Поведение индикатора прогресса в зависимости от макета

8. Управление видимостью

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

9. Эффекты перехода и анимация

SurveyAnalytica поддерживает плавные переходы между страницами и вопросами. Анимация включена по умолчанию и настраивается в параметрах темы.

Краткий справочник — значения стилей по умолчанию