Внешний вид и плеер

Разделы Дизайн, Стартовый экран, Меню и Плеер управляют тем, как демо выглядит в редакторе и в опубликованном просмотре.

Дизайн

В разделе Дизайн можно настроить:

тему;
рамку вокруг демо;
фон вокруг демо;
фон внутри кадра для пустых полей вокруг медиа;
шрифт;
основной цвет элементов управления и цвет текста на них;
видимость стартового экрана.

Эти настройки применяются и в предпросмотре редактора, и по опубликованной ссылке.

Фон меняет внешнюю область вокруг плеера. Фон внутри кадра меняет только пространство внутри canvas под изображением или видео шага. Он становится виден, когда медиа вписано в кадр и не закрывает его целиком: например, у вертикального видео, квадратной картинки или загруженного изображения другого соотношения сторон.

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

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

Стартовый экран

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

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

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

В опубликованном просмотре меню открывается по кнопке рядом с нижними элементами плеера. Повторное нажатие закрывает меню.

Плеер

Настройки плеера управляют кнопками и поведением опубликованного просмотра:

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

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

Автоматический переход выключен по умолчанию. Если включить его, можно задать задержку от 1 до 30 секунд для статичных шагов. На шагах с видео или видео-кружком Smotree сначала дает ролику закончиться, а затем переходит дальше. Ручной видео-шаг, добавленный автором как обычное медиа, не переключается на следующий шаг только из-за окончания ролика: зритель может продолжить через таймлайн, стрелки или кнопку следующего шага.

Сведения о демо

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