Что такое система движения? Практическое руководство для команд пользовательского интерфейса
Система движения — это общие правила, токены и компоненты, которые определяют, как движется продукт. Что входит в один из них, как им управлять и где находится ExodeUI.
Главное
Система движения — это общий набор правил, токенов, компонентов и кода, который определяет, как будет перемещаться продукт. Он охватывает продолжительность, плавность, пружины, хореографию и состояния взаимодействия, поэтому команды повторно используют утвержденное движение, а не перестраивают его экран за экраном. Система движения — это не только проблема проектирования, но и проблема управления: ей нужен владелец, источник истины и путь к производству.
Что такое система движения?
Система движения — это часть системы дизайна, описывающая движение. Он отвечает на вопросы, на которые не может ответить библиотека статических компонентов: как быстро открывается меню, как кнопка реагирует на нажатие, что происходит, когда пользователь прерывает переход и какие значения пружины принадлежат какой поверхности. Результат не является страницей руководства по стилю. Результатом является небольшой набор многократно используемых решений, которые дизайнеры и разработчики могут применять, не изобретая каждый раз новую анимацию.
Что входит в систему движения
Полезная система движения состоит из пяти частей. Пропустите один, и система превратится в папку с файлами, которую никто не использует.
Principles
Краткие правила, объясняющие индивидуальность продукта. Например: движение подтверждает ввод в первом кадре или большие поверхности перемещаются меньше, чем маленькие.
Токены
Именованные значения длительности, замедления и пружин, например motion.enter.fast или motion.spring.snappy. Токены делают движение доступным для просмотра и поддерживают согласованность значений.
Узоры
Многоразовое поведение для обычных заданий: вход, выход, развертывание, изменение порядка, перетаскивание, отклонение, успех и ошибка.
Компоненты
Живые строительные блоки, в которых уже используются шаблоны, поэтому команда может добавить их вместо того, чтобы читать документ и перестраивать его.
Управление
Кто может изменить систему, как проверяются изменения и как удаляются устаревшие движения.
Система движения против системы дизайна против токенов движения
Система дизайна охватывает цвет, тип, интервалы, компоненты и правила использования. Система движения — это слой движения внутри нее, и у нее часто есть собственный владелец, поскольку движение меняется по другим причинам, чем цвет. Токены движения — это наименьшая единица этого слоя: именованные значения времени и физики. Библиотека токенов необходима, но недостаточна. Без шаблонов и живых компонентов токены превращаются в список чисел, которые дизайнеры интерпретируют по-разному на каждом экране.
Почему системы движения выходят из строя
Большинство систем движения выходят из строя по эксплуатационным, а не эстетическим причинам. Токены находятся в документе, который не связан с компонентами. Утвержденное предложение существует только в виде прототипа, который разработчики не могут запустить. Одна команда внедряет систему, а другая продолжает поставлять жестко запрограммированные сроки. У системы нет владельца, поэтому она дрейфует. Чтобы исправить это, нужно поместить систему туда, где работа уже происходит: в файле проекта, в библиотеке компонентов и в проверке кода.
Как управлять системой движения
Начните с небольшой собственной поверхности и сделайте систему легкой.
- Выберите один источник достоверной информации о токенах и создайте ссылку на него из файла дизайна и базы кода.
- Называйте токены по намерению, а не по значению: motion.exit.fast более полезен, чем motion.200ms.
- Отправьте небольшой набор выкроек, прежде чем добавлять больше жетонов.
- Просматривайте изменения движения, такие как изменения кода, с записью «до» и «после».
- Отслеживание повторного использования: сколько новых компонентов используют утвержденные шаблоны вместо настраиваемого времени.
- Удаляйте старые значения из обращения по расписанию, чтобы система не накапливала дубликаты.
Где подходит ExodeUI
ExodeUI сохраняет движение внутри открытого файла .exode, а не в отдельной спецификации. Макет, состояния, временные шкалы, физика Spring, логика и входные данные живут вместе, а пакеты времени выполнения воспроизводят файл в React, Vue, Svelte, Angular, Solid, React Native, SwiftUI и Flutter. Это дает системе движения рабочую ссылку: дизайнер может открыть одобренный компонент, разработчик может проверить тот же файл, а инструмент кодирования AI может редактировать его через сервер MCP. Файл не является заменой управления. Это просто дает управлению что-то конкретное, на что можно указать.
Как запустить систему движения за один спринт
Проанализируйте десять наиболее часто используемых вами компонентов и перечислите в них каждую продолжительность, кривую и пружину. Сгруппируйте значения, выполняющие одну и ту же работу, и назовите группы. Выберите пять шаблонов, которые охватывают большинство взаимодействий. Создайте по одному эталонному компоненту для каждого шаблона, запишите, когда его использовать, и добавьте токены в свои библиотеки дизайна и кода. Затем запустите одну функцию в новой системе и измерьте, сколько пользовательских значений ей еще нужно. Это число будет вашим базовым показателем для следующего спринта.
Пример реализации для продакшена
import { ExodeUICanvas } from 'exodeui';
// The motion system lives in the .exode file. Your app supplies inputs
// and listens for events; it does not restate spring values in code.
export function SystemButton({ pressed, onConfirm }) {
return (
<ExodeUICanvas
src="/system_button.exode"
inputs={{ pressed }}
onTrigger={(name) => name === 'confirm' && onConfirm()}
/>
);
}Ключевые принципы
- Система движения — это уровень движения в дизайн-системе, а не папка с видео-прототипами.
- Ему нужны принципы, жетоны, шаблоны, живые компоненты и управление.
- Токены без правил использования становятся числами, которые каждая команда интерпретирует по-своему.
- Изменения движения следует рассматривать как изменения кода.
- ExodeUI сохраняет движение, состояния и логику в одном открытом файле, который может воспроизводиться во время выполнения.