Cos'è un sistema di movimento? Una guida pratica per i team dell'interfaccia utente
Un sistema di movimento è costituito da regole, token e componenti condivisi che decidono come si muove un prodotto. Cosa appartiene a uno, come gestirlo e dove si inserisce ExodeUI.
Punto chiave
Un sistema di movimento è l'insieme condiviso di regole, token, componenti e codice che decide come si muove un prodotto. Copre durate, andamenti, molle, coreografia e stati di interazione in modo che i team riutilizzino il movimento approvato invece di ricostruirlo schermata per schermata. Un sistema di movimento è un problema di gestione tanto quanto un problema di progettazione: ha bisogno di un proprietario, di una fonte di verità e di un percorso verso la produzione.
Cos'è un sistema di movimento?
Un sistema di movimento è la parte di un sistema di progettazione che descrive il movimento. Risponde a domande che una libreria di componenti statici non può: quanto velocemente si apre un menu, come reagisce un pulsante quando viene premuto, cosa succede quando un utente interrompe una transizione e quali valori della molla appartengono a quale superficie. L'output non è una pagina di guida di stile. L'output è un piccolo insieme di decisioni riutilizzabili che designer e sviluppatori possono applicare senza inventare ogni volta una nuova animazione.
Ciò che appartiene a un sistema di movimento
Un sistema di movimento utile è composto da cinque parti. Saltane uno e il sistema diventa una cartella di file che nessuno utilizza.
Principles
Brevi regole che spiegano la personalità del prodotto. Ad esempio: il movimento conferma l'input sul primo fotogramma oppure le superfici grandi si muovono meno di quelle piccole.
Gettoni
Valori con nome per durata, andamento e molle, come motion.enter.fast o motion.spring.snappy. I token rendono il movimento rivedibile e mantengono coerenti i valori.
Modelli
Comportamenti riutilizzabili per lavori comuni: entra, esci, espandi, riordina, trascina, ignora, successo ed errore.
Componenti
Gli elementi costitutivi attivi che già utilizzano i modelli, in modo che un team possa inserirne uno invece di leggere un documento e ricostruirlo.
Governo
Chi può modificare il sistema, come vengono esaminate le modifiche e come viene ritirata la mozione deprecata.
Sistema di movimento vs sistema di progettazione vs token di movimento
Un sistema di progettazione copre colore, tipo, spaziatura, componenti e regole di utilizzo. Un sistema di movimento è lo strato di movimento al suo interno e spesso ha un proprio proprietario perché il movimento cambia per ragioni diverse rispetto al colore. I token di movimento sono l'unità più piccola di quel livello: valori denominati per tempistica e fisica. Una libreria di token è necessaria ma non sufficiente. Senza schemi e componenti attivi, i token diventano un elenco di numeri che i progettisti interpretano in modo diverso su ogni schermo.
Perché i sistemi di movimento falliscono
La maggior parte dei sistemi di movimento falliscono per ragioni operative, non estetiche. I token risiedono in un documento disconnesso dai componenti. La mozione approvata esiste solo in un prototipo che gli sviluppatori non possono eseguire. Un team adotta il sistema e un altro continua a spedire durate codificate. Il sistema non ha proprietario, quindi va alla deriva. Risolvere ciò significa posizionare il sistema da qualche parte in cui il lavoro già avviene: nel file di progettazione, nella libreria dei componenti e nella revisione del codice.
Come gestire un sistema di movimento
Inizia con una piccola superficie di proprietà e rendi il sistema il percorso più semplice.
- Scegli una fonte di verità per i token e collegala ad essa dal file di progettazione e dalla base di codice
- Assegna un nome ai token in base all'intento, non al valore: motion.exit.fast è più utile di motion.200ms
- Spedisci un piccolo set di modelli prima di aggiungere altri token
- Rivedi le modifiche al movimento come le modifiche al codice, con una registrazione prima e dopo
- Tieni traccia del riutilizzo: quanti nuovi componenti utilizzano modelli approvati anziché tempistiche personalizzate
- Ritirare i vecchi valori in base a una pianificazione in modo che il sistema non accumuli duplicati
Dove si adatta ExodeUI
ExodeUI mantiene il movimento all'interno di un file .exode aperto anziché in una specifica separata. Layout, stati, sequenze temporali, fisica primaverile, logica e input convivono e i pacchetti runtime riproducono il file in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter. Ciò fornisce a un sistema di movimento un riferimento funzionante: un progettista può aprire il componente approvato, uno sviluppatore può ispezionare lo stesso file e uno strumento di codifica AI può modificarlo tramite il server MCP. Il dossier non sostituisce la governance. Fornisce semplicemente alla governance qualcosa di concreto su cui puntare.
Come avviare un sistema di movimento in uno sprint
Controlla dieci dei componenti più utilizzati ed elenca ogni durata, curva e molla in essi contenuti. Raggruppare i valori che svolgono lo stesso lavoro e denominare i gruppi. Scegli cinque modelli che coprano la maggior parte delle interazioni. Crea un componente di riferimento per modello, documenta quando utilizzarlo e aggiungi i token alle tue librerie di progettazione e codice. Quindi esegui una singola funzionalità attraverso il nuovo sistema e misura quanti valori personalizzati sono ancora necessari. Quel numero è la tua linea di base per il prossimo sprint.
Estratto di implementazione in produzione
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()}
/>
);
}Principi chiave da ricordare
- Un sistema di movimento è il livello di movimento di un sistema di progettazione, non una cartella di video prototipi
- Ha bisogno di principi, token, modelli, componenti vive e governance
- I token senza regole di utilizzo diventano numeri che ogni squadra interpreta in modo diverso
- Le modifiche al movimento dovrebbero essere riviste come le modifiche al codice
- ExodeUI mantiene movimento, stati e logica in un file aperto che i runtime possono riprodurre