Принцип работы
Create Canvas создаёт среду для изучения нескольких живых дизайн-альтернатив через диалог. Каждое превью получает стабильный ID и понятное имя в реестре, заданном исходным кодом. Пользователь может скопировать имя для ссылки на конкретную версию, перемещать превью специальными ручками и перемещаться по холсту с помощью панорамирования и масштабирования.
Содержимое остаётся в исходных файлах, а браузерное хранилище запоминает размещение. Это делает последующие запросы конкретными: новая версия получает собственные идентификатор и состояние, а изменение существующей версии сохраняет её место. Эксперименты остаются локальными, пока не поступит запрос перенести их в продакшен.
Ожидаемые результаты
- Определённый в исходном коде реестр именованных живых превью.
- Холст с ручками перемещения, управлением камерой и выбором поддерживаемой общей темы.
- Сохранённые позиции камеры и элементов и отчёт о проверенных и непроверенных взаимодействиях.
От задания до проверки
- 01Подготовьте безопасное живое превью
Прежде чем создавать новый холст, изучите существующий. На фреймворке проекта подключите одно превью с синтетическими данными, отдельной подписью и ручкой перемещения.
- 02Добавьте отдельные альтернативы
Каждой новой вариации назначьте стабильный ID, уникальное имя и независимое состояние. При добавлении содержимого сохраняйте предыдущие альтернативы и измеренные позиции.
- 03Сохраняйте ввод при навигации
Отделите жесты холста от набора текста, выделения и вложенной прокрутки. Сохраните штатные порталы и проверьте, что копирование, перемещение и масштабирование не монтируют превью заново.
- 04Сохраните размещение и проверьте поведение
Сохраняйте значения камеры в допустимых пределах, поддерживаемую тему и позиции по ID реестра. Проверьте перезагрузку, некорректные данные хранилища и нужные жесты устройств, прежде чем сообщать, что они работают.