Co je pohybový systém? Praktický průvodce pro týmy uživatelského rozhraní
Pohybový systém jsou sdílená pravidla, tokeny a komponenty, které rozhodují o tom, jak se produkt pohybuje. Co patří do jednoho, jak to spravovat a kam se ExodeUI hodí.
Core Takeaway
Pohybový systém je sdílená sada pravidel, tokenů, komponent a kódu, která rozhoduje o tom, jak se produkt pohybuje. Zahrnuje dobu trvání, zpomalení, pružiny, choreografii a stavy interakce, takže týmy znovu použijí schválený pohyb místo toho, aby jej přestavovaly obrazovku po obrazovce. Pohybový systém je problém managementu stejně jako problém designu: potřebuje vlastníka, zdroj pravdy a cestu k výrobě.
Co je to pohybový systém?
Pohybový systém je součástí konstrukčního systému, který popisuje pohyb. Odpovídá na otázky, které knihovna statických komponent nedokáže: jak rychle se otevře nabídka, jak tlačítko reaguje při stisknutí, co se stane, když uživatel přeruší přechod, a které hodnoty pružin patří ke kterému povrchu. Výstupem není stránka průvodce stylem. Výstupem je malá sada opakovaně použitelných rozhodnutí, která mohou designéři a vývojáři použít, aniž by pokaždé vymýšleli novou animaci.
Co patří do pohybového systému
Užitečný pohybový systém má pět částí. Přeskočte jeden a systém se stane složkou souborů, které nikdo nepoužívá.
Principles
Krátká pravidla, která vysvětlují osobnost produktu. Například: pohyb potvrzuje vstup na prvním snímku nebo se velké plochy pohybují méně než malé.
Tokeny
Pojmenované hodnoty pro trvání, náběh a pružiny, jako je motion.enter.fast nebo motion.spring.snappy. Tokeny umožňují kontrolu pohybu a udržují konzistentní hodnoty.
Vzory
Opakovaně použitelné chování pro běžné úlohy: vstup, ukončení, rozbalení, změna pořadí, přetažení, zrušení, úspěch a chyba.
Komponenty
Živé stavební bloky, které již používají vzory, takže tým může jeden vložit místo čtení dokumentu a jeho přestavby.
Vládnutí
Kdo může změnit systém, jak jsou změny revidovány a jak je zastaralý pohyb vyřazen.
Pohybový systém versus návrhový systém versus pohybové žetony
Návrhový systém zahrnuje barvu, typ, mezery, komponenty a pravidla použití. Pohybový systém je pohybovou vrstvou uvnitř něj a často má svého vlastníka, protože pohyb se mění z jiných důvodů než barva. Pohybové žetony jsou nejmenší jednotkou této vrstvy: pojmenované hodnoty pro časování a fyziku. Knihovna tokenů je nezbytná, ale nestačí. Bez vzorů a živých komponent se tokeny stávají seznamem čísel, které návrháři interpretují na každé obrazovce jinak.
Proč pohybové systémy selhávají
Většina pohybových systémů selhává z provozních důvodů, nikoli z estetických. Tokeny jsou uloženy v dokumentu, který je odpojen od komponent. Schválený návrh existuje pouze v prototypu, který vývojáři nemohou spustit. Jeden tým systém převezme a druhý ponechává expedici pevně zakódované doby trvání. Systém nemá vlastníka, takže se unáší. Napravit to znamená umístit systém někam, kde se práce již odehrává: v souboru návrhu, v knihovně komponent a při kontrole kódu.
Jak řídit pohybový systém
Začněte s malým vlastním povrchem a udělejte ze systému snadnou cestu.
- Vyberte jeden zdroj pravdy pro tokeny a odkazujte na něj ze souboru návrhu a kódové základny
- Pojmenujte tokeny podle záměru, nikoli podle hodnoty: motion.exit.fast je užitečnější než motion.200 ms
- Před přidáním dalších žetonů odešlete malou sadu vzorů
- Prohlédněte si změny pohybu, jako jsou změny kódu, pomocí záznamu před a po
- Sledování opětovného použití: kolik nových komponent používá schválené vzory namísto vlastního načasování
- Vyřaďte staré hodnoty podle plánu, aby systém nehromadil duplikáty
Kam se hodí ExodeUI
ExodeUI zachovává pohyb uvnitř otevřeného souboru .exode spíše než v samostatné specifikaci. Rozložení, stavy, časové osy, jarní fyzika, logika a vstupy žijí společně a runtime balíčky přehrávají soubor v React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter. To dává pohybovému systému funkční referenci: návrhář může otevřít schválenou komponentu, vývojář může zkontrolovat stejný soubor a nástroj pro kódování AI jej může upravit prostřednictvím serveru MCP. Soubor není náhradou za řízení. Jen to dává vládnutí něco konkrétního, na co lze poukázat.
Jak nastartovat pohybový systém v jednom sprintu
Auditujte deset svých nejpoužívanějších součástí a uveďte v nich každou dobu trvání, křivku a pružinu. Seskupte hodnoty, které vykonávají stejnou práci, a pojmenujte skupiny. Vyberte pět vzorů, které pokrývají většinu interakcí. Vytvořte jednu referenční komponentu pro každý vzor, zdokumentujte, kdy ji použít, a přidejte tokeny do svých knihoven návrhů a kódů. Poté spusťte jedinou funkci novým systémem a změřte, kolik vlastních hodnot ještě potřebuje. Toto číslo je vaší základní linií pro další sprint.
Fragment implementace výroby
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()}
/>
);
}Klíč Principle k zapamatování
- Pohybový systém je pohybová vrstva návrhového systému, nikoli složka prototypových videí
- Potřebuje principy, tokeny, vzory, živé komponenty a vládnutí
- Tokeny bez pravidel použití se stávají čísly, která si každý tým vykládá jinak
- Změny pohybu by měly být přezkoumány jako změny kódu
- ExodeUI uchovává pohyb, stavy a logiku v jednom otevřeném souboru, který mohou běhové moduly přehrávat