Co to jest system ruchu? Praktyczny przewodnik dla zespołów UI
System ruchu to wspólne zasady, tokeny i komponenty, które decydują o sposobie przemieszczania się produktu. Co należy do jednego, jak nim zarządzać i gdzie pasuje ExodeUI.
Rdzeń na wynos
System ruchu to wspólny zestaw reguł, tokenów, komponentów i kodu, który decyduje o sposobie przemieszczania się produktu. Obejmuje czas trwania, rozluźnienie, sprężyny, choreografię i stany interakcji, dzięki czemu zespoły ponownie wykorzystują zatwierdzony ruch zamiast go odbudowywać ekran po ekranie. System ruchu jest w równym stopniu problemem zarządzania, jak i projektem: potrzebuje właściciela, źródła prawdy i ścieżki do produkcji.
Co to jest system ruchu?
System ruchu jest częścią systemu projektowego opisującą ruch. Odpowiada na pytania, których nie potrafi rozwiązać biblioteka komponentów statycznych: jak szybko otwiera się menu, jak przycisk reaguje na naciśnięcie, co się dzieje, gdy użytkownik przerwie przejście i które wartości sprężyn należą do której powierzchni. Wynik nie jest stroną przewodnika po stylu. Wynikiem jest niewielki zestaw decyzji do ponownego wykorzystania, które projektanci i programiści mogą zastosować bez konieczności wymyślania za każdym razem nowej animacji.
Co należy do układu ruchu
Przydatny system ruchu składa się z pięciu części. Pomiń jeden, a system stanie się folderem plików, z których nikt nie korzysta.
Principle
Krótkie zasady wyjaśniające osobowość produktu. Na przykład: ruch potwierdza wejście na pierwszą klatkę lub duże powierzchnie poruszają się mniej niż małe.
Żetony
Nazwane wartości czasu trwania, złagodzenia i sprężyn, takie jak motion.enter.fast lub motion.spring.snappy. Tokeny umożliwiają przeglądanie ruchu i zapewniają spójność wartości.
Wzory
Zachowania wielokrotnego użytku dla typowych zadań: wejście, wyjście, rozwinięcie, zmiana kolejności, przeciąganie, odrzucanie, sukces i błąd.
Komponenty
Aktywne bloki konstrukcyjne, które już korzystają ze wzorców, więc zespół może je wrzucić zamiast czytać dokument i go odbudowywać.
Zarządzanie
Kto może zmienić system, w jaki sposób zmiany są przeglądane i w jaki sposób wycofywane są przestarzałe wnioski.
System ruchu vs system projektowania vs tokeny ruchu
System projektowania obejmuje kolor, rodzaj, odstępy, komponenty i zasady użytkowania. System ruchu to wewnętrzna warstwa ruchu, która często ma swojego właściciela, ponieważ ruch zmienia się z innych powodów niż kolor. Żetony ruchu to najmniejsza jednostka tej warstwy: nazwane wartości czasu i fizyki. Biblioteka tokenów jest konieczna, ale niewystarczająca. Bez wzorów i aktywnych komponentów tokeny stają się listą liczb, które projektanci interpretują inaczej na każdym ekranie.
Dlaczego systemy ruchu zawodzą
Większość systemów ruchu zawodzi ze względów operacyjnych, a nie estetycznych. Tokeny znajdują się w dokumencie odłączonym od komponentów. Zatwierdzony wniosek istnieje jedynie w prototypie, którego programiści nie mogą uruchomić. Jeden zespół wdraża system, a drugi utrzymuje ustalone na stałe czasy trwania. System nie ma właściciela, więc dryfuje. Naprawienie tego oznacza umieszczenie systemu w miejscu, w którym praca już została wykonana: w pliku projektu, w bibliotece komponentów i podczas przeglądu kodu.
Jak zarządzać systemem ruchu
Zacznij od małej, posiadanej powierzchni i uczyń system łatwą ścieżką.
- Wybierz jedno źródło prawdy dla tokenów i połącz się z nim z pliku projektu i bazy kodu
- Nazwij tokeny według zamiaru, a nie wartości: motion.exit.fast jest bardziej przydatny niż motion.200ms
- Wyślij mały zestaw wzorów przed dodaniem kolejnych żetonów
- Przeglądaj zmiany ruchu, takie jak zmiany kodu, z nagraniem przed i po
- Śledź ponowne użycie: ile nowych komponentów korzysta z zatwierdzonych wzorców zamiast niestandardowego harmonogramu
- Wycofaj stare wartości zgodnie z harmonogramem, aby w systemie nie gromadziły się duplikaty
Gdzie pasuje ExodeUI
ExodeUI utrzymuje ruch w otwartym pliku .exode, a nie w osobnej specyfikacji. Układ, stany, osie czasu, fizyka sprężyn, logika i dane wejściowe działają razem, a pakiety wykonawcze odtwarzają plik w formatach React, Vue, Svelte, Angular, Solid, React Native, SwiftUI i Flutter. Daje to systemowi ruchu działające odniesienie: projektant może otworzyć zatwierdzony komponent, programista może sprawdzić ten sam plik, a narzędzie do kodowania AI może go edytować za pośrednictwem serwera MCP. Plik nie zastępuje zarządzania. Daje to po prostu zarządzaniu coś konkretnego, na co można wskazać.
Jak uruchomić system ruchu w jednym sprincie
Przejrzyj dziesięć najczęściej używanych komponentów i wypisz wszystkie zawarte w nich czasy trwania, krzywizny i sprężyny. Pogrupuj wartości, które wykonują to samo zadanie i nazwij grupy. Wybierz pięć wzorców, które obejmują większość interakcji. Zbuduj po jednym komponencie referencyjnym na każdy wzorzec, udokumentuj, kiedy go używać, i dodaj tokeny do swoich bibliotek projektu i kodu. Następnie uruchom pojedynczą funkcję w nowym systemie i zmierz, ile wartości niestandardowych nadal potrzebuje. Ta liczba jest punktem odniesienia dla następnego sprintu.
Fragment wdrożenia produkcyjnego
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()}
/>
);
}Klucz Principles do zapamiętania
- System ruchu to warstwa ruchu systemu projektowego, a nie folder z prototypowymi filmami
- Potrzebuje zasad, tokenów, wzorców, aktywnych komponentów i zarządzania
- Tokeny bez zasad użytkowania stają się liczbami, które każdy zespół interpretuje inaczej
- Zmiany w ruchu należy przeglądać tak samo, jak zmiany w kodzie
- ExodeUI przechowuje ruch, stany i logikę w jednym otwartym pliku, który może odtwarzać środowisko wykonawcze