Čo je pohybový systém? Praktická príručka pre tímy používateľského rozhrania
Pohybový systém sú zdieľané pravidlá, tokeny a komponenty, ktoré rozhodujú o tom, ako sa produkt pohybuje. Čo patrí do jedného, ako to spravovať a kam sa zmestí ExodeUI.
Core Takeaway
Pohybový systém je zdieľaný súbor pravidiel, tokenov, komponentov a kódu, ktorý rozhoduje o tom, ako sa produkt pohybuje. Zahŕňa trvanie, uvoľnenie, pružiny, choreografie a stavy interakcie, takže tímy opätovne používajú schválený pohyb namiesto toho, aby ho prestavovali obrazovku po obrazovke. Pohybový systém je problémom manažmentu rovnako ako problémom dizajnu: potrebuje vlastníka, zdroj pravdy a cestu k výrobe.
Čo je to pohybový systém?
Pohybový systém je súčasťou konštrukčného systému, ktorý popisuje pohyb. Odpovedá na otázky, ktoré knižnica statických komponentov nedokáže: ako rýchlo sa otvorí ponuka, ako tlačidlo reaguje na stlačenie, čo sa stane, keď používateľ preruší prechod, a ktoré hodnoty pružiny patria ku ktorej ploche. Výstupom nie je stránka so štýlom. Výstupom je malý súbor opakovane použiteľných rozhodnutí, ktoré môžu dizajnéri a vývojári aplikovať bez toho, aby zakaždým vymýšľali novú animáciu.
Čo patrí do pohybového systému
Užitočný pohybový systém má päť častí. Preskočte jeden a systém sa stane priečinkom súborov, ktoré nikto nepoužíva.
Principles
Krátke pravidlá, ktoré vysvetľujú osobnosť produktu. Napríklad: pohyb potvrdzuje vstup na prvej snímke alebo veľké plochy sa pohybujú menej ako malé.
Tokeny
Pomenované hodnoty pre trvanie, uvoľnenie a pružiny, ako napríklad motion.enter.fast alebo motion.spring.snappy. Tokeny umožňujú kontrolu pohybu a udržiavajú konzistentné hodnoty.
Vzory
Opätovne použiteľné správanie pre bežné úlohy: vstup, výstup, rozbalenie, zmena poradia, ťahanie, odmietnutie, úspech a chyba.
Komponenty
Živé stavebné bloky, ktoré už používajú vzory, takže tím môže jeden vložiť namiesto čítania dokumentu a jeho prestavby.
riadenie
Kto môže zmeniť systém, ako sa zmeny kontrolujú a ako sa vyraďuje zastaraný pohyb.
Pohybový systém verzus návrhový systém verzus pohybové žetóny
Dizajnový systém zahŕňa farbu, typ, rozmiestnenie, komponenty a pravidlá používania. Pohybový systém je vrstva pohybu vo vnútri a často má svojho vlastníka, pretože pohyb sa mení z iných dôvodov ako farba. Tokeny pohybu sú najmenšou jednotkou tejto vrstvy: pomenované hodnoty pre časovanie a fyziku. Knižnica tokenov je potrebná, ale nestačí. Bez vzorov a živých komponentov sa tokeny stanú zoznamom čísel, ktoré dizajnéri interpretujú na každej obrazovke inak.
Prečo pohybové systémy zlyhávajú
Väčšina pohybových systémov zlyhá z prevádzkových dôvodov, nie z estetických. Tokeny sú uložené v dokumente, ktorý je odpojený od komponentov. Schválený návrh existuje iba v prototype, ktorý vývojári nemôžu spustiť. Jeden tím si osvojí systém a druhý si nechá doručiť pevne zakódované trvanie. Systém nemá vlastníka, takže sa unáša. Napraviť to znamená umiestniť systém niekde, kde už práca prebieha: v súbore návrhu, v knižnici komponentov a pri kontrole kódu.
Ako riadiť pohybový systém
Začnite s malým vlastným povrchom a urobte zo systému jednoduchú cestu.
- Vyberte jeden zdroj pravdy pre tokeny a prepojte ho zo súboru dizajnu a kódovej základne
- Pomenujte tokeny podľa zámeru, nie podľa hodnoty: motion.exit.fast je užitočnejší ako pohyb.200 ms
- Pred pridaním ďalších žetónov odošlite malú sadu vzorov
- Skontrolujte zmeny pohybu, ako sú zmeny kódu, pomocou záznamu pred a po
- Sledovať opätovné použitie: koľko nových komponentov používa schválené vzory namiesto vlastného načasovania
- Staré hodnoty vyraďte podľa plánu, aby systém nehromadil duplikáty
Kde sa zmestí ExodeUI
ExodeUI zachováva pohyb v otvorenom súbore .exode a nie v samostatnej špecifikácii. Rozloženie, stavy, časové osy, fyzika pružiny, logika a vstupy žijú spolu a balíčky runtime prehrávajú súbor v React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a Flutter. To dáva pohybovému systému funkčnú referenciu: dizajnér môže otvoriť schválený komponent, vývojár môže skontrolovať rovnaký súbor a nástroj na kódovanie AI ho môže upraviť prostredníctvom servera MCP. Súbor nie je náhradou za riadenie. Len to dáva vládnutiu niečo konkrétne, na čo treba poukázať.
Ako naštartovať pohybový systém v jednom šprinte
Skontrolujte desať svojich najpoužívanejších komponentov a uveďte v nich každé trvanie, krivku a pružinu. Zoskupte hodnoty, ktoré vykonávajú rovnakú prácu, a pomenujte skupiny. Vyberte päť vzorov, ktoré pokrývajú väčšinu interakcií. Zostavte jeden referenčný komponent na vzor, zdokumentujte, kedy ho použiť, a pridajte tokeny do svojich knižníc návrhov a kódov. Potom spustite jedinú funkciu cez nový systém a zmerajte, koľko vlastných hodnôt ešte potrebuje. Toto číslo je vaša základná čiara pre ďalší šprint.
Snippet implementácie 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()}
/>
);
}Kľúč Principle na zapamätanie
- Pohybový systém je pohybová vrstva dizajnového systému, nie priečinok prototypových videí
- Potrebuje princípy, tokeny, vzory, živé komponenty a riadenie
- Tokeny bez pravidiel používania sa stávajú číslami, ktoré každý tím interpretuje inak
- Zmeny pohybu by sa mali kontrolovať ako zmeny kódu
- ExodeUI uchováva pohyb, stavy a logiku v jednom otvorenom súbore, ktorý môžu runtime prehrať