Що таке система руху? Практичний посібник для команд UI
Система руху — це спільні правила, маркери та компоненти, які визначають, як рухається продукт. Що належить до одного, як ним керувати та де підходить 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()}
/>
);
}Ключі Principle, які слід запам’ятати
- Система руху — це рівень руху системи дизайну, а не папка прототипів відео
- Для цього потрібні принципи, маркери, шаблони, живі компоненти та управління
- Жетони без правил використання стають числами, які кожна команда інтерпретує по-різному
- Зміни руху слід переглядати, як зміни коду
- ExodeUI зберігає рух, стани та логіку в одному відкритому файлі, який може відтворювати середовище виконання