Какво е система за движение? Практическо ръководство за UI екипи
Системата за движение е споделените правила, токени и компоненти, които решават как се движи даден продукт. Какво принадлежи към едно, как да го управлявате и къде се вписва ExodeUI.
Ядро за вкъщи
Системата за движение е споделен набор от правила, токени, компоненти и код, който решава как се движи даден продукт. Той обхваща времетраене, облекчаване, пружини, хореография и състояния на взаимодействие, така че екипите да използват повторно одобреното движение, вместо да го възстановяват екран по екран. Системата за движение е проблем на управлението толкова, колкото проблем на дизайна: тя се нуждае от собственик, източник на истина и път към производството.
Какво е система за движение?
Системата за движение е част от система за проектиране, която описва движението. Той отговаря на въпроси, които библиотеката със статични компоненти не може: колко бързо се отваря меню, как реагира бутон при натискане, какво се случва, когато потребителят прекъсне преход и кои пружинни стойности принадлежат на коя повърхност. Резултатът не е страница с ръководство за стил. Резултатът е малък набор от решения за многократна употреба, които дизайнерите и разработчиците могат да прилагат, без да измислят нова анимация всеки път.
Какво принадлежи към една система за движение
Полезната система за движение има пет части. Пропуснете един и системата се превръща в папка с файлове, които никой не използва.
Principles
Кратки правила, които обясняват индивидуалността на продукта. Например: движението потвърждава въвеждането на първия кадър или големите повърхности се движат по-малко от малките.
Токени
Именувани стойности за продължителност, облекчаване и пружини, като motion.enter.fast или motion.spring.snappy. Токените правят движението прегледно и поддържат стойностите последователни.
Шарки
Поведения за многократна употреба за обичайни задачи: влизане, излизане, разширяване, пренареждане, плъзгане, отхвърляне, успех и грешка.
Компоненти
Живите градивни елементи, които вече използват шаблоните, така че екипът може да пусне един, вместо да чете документ и да го изгражда отново.
управление
Кой може да промени системата, как се преглеждат промените и как се оттегля отхвърленото движение.
Система за движение срещу система за дизайн срещу жетони за движение
Системата за проектиране обхваща цвят, тип, разстояние, компоненти и правила за използване. Системата за движение е слоят за движение вътре в нея и често има свой собственик, защото движението се променя по различни причини, отколкото цвета. Жетоните за движение са най-малката единица на този слой: именувани стойности за времето и физиката. Библиотека с токени е необходима, но не е достатъчна. Без шаблони и живи компоненти, токените се превръщат в списък от числа, които дизайнерите интерпретират по различен начин на всеки екран.
Защо системите за движение се провалят
Повечето системи за движение се провалят по оперативни причини, а не по естетически. Токените живеят в документ, който е изключен от компонентите. Одобреното движение съществува само в прототип, който разработчиците не могат да стартират. Един екип приема системата, а друг продължава да изпраща твърдо кодирани продължителности. Системата няма собственик, затова се носи. Коригирането на това означава да поставите системата някъде, където работата вече се извършва: във файла на дизайна, в библиотеката на компонентите и в прегледа на кода.
Как да управлявате система за движение
Започнете с малка, притежавана повърхност и направете системата лесен път.
- Изберете един източник на истина за токени и се свържете към него от файла на дизайна и кодовата база
- Наименувайте токените по намерение, а не по стойност: motion.exit.fast е по-полезен от motion.200ms
- Изпратете малък набор от модели, преди да добавите още жетони
- Прегледайте промените в движението като промени в кода със запис преди и след
- Проследяване на повторно използване: колко нови компоненти използват одобрени шаблони вместо персонализирано време
- Изтеглете старите стойности по график, така че системата да не натрупва дубликати
Където ExodeUI пасва
ExodeUI запазва движението вътре в отворен файл .exode, а не в отделна спецификация. Оформление, състояния, времеви линии, пролетна физика, логика и входове живеят заедно, а пакетите за изпълнение възпроизвеждат файла в React, Vue, Svelte, Angular, Solid, React Native, SwiftUI и Flutter. Това дава на системата за движение работеща справка: дизайнер може да отвори одобрения компонент, разработчик може да инспектира същия файл, а инструмент за кодиране с изкуствен интелект може да го редактира през 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 поддържа движение, състояния и логика в един отворен файл, който може да се възпроизвежда от времената за изпълнение