Mi az a mozgásrendszer? Gyakorlati útmutató UI csapatoknak
A mozgásrendszer a közös szabályok, tokenek és összetevők, amelyek meghatározzák a termék mozgását. Mi tartozik egybe, hogyan kell kezelni, és hol illik a ExodeUI.
Core Takeaway
A mozgásrendszer a szabályok, tokenek, összetevők és kód megosztott halmaza, amely meghatározza a termék mozgását. Lefedi az időtartamokat, az enyhülést, a rugókat, a koreográfiát és az interakciós állapotokat, így a csapatok újra felhasználják a jóváhagyott mozgást ahelyett, hogy képernyőről képernyőre építenék újra. A mozgásrendszer éppúgy vezetési probléma, mint tervezési probléma: tulajdonosra, igazságforrásra és termelési útra van szüksége.
Mi az a mozgásrendszer?
A mozgásrendszer a tervezési rendszer azon része, amely leírja a mozgást. Olyan kérdésekre ad választ, amelyeket egy statikus komponenskönyvtár nem tud: milyen gyorsan nyílik meg egy menü, hogyan reagál a gomb megnyomására, mi történik, ha a felhasználó megszakítja az átmenetet, és mely rugóértékek melyik felülethez tartoznak. A kimenet nem stílus útmutató oldal. A kimenet az újrafelhasználható döntések kis halmaza, amelyeket a tervezők és a fejlesztők alkalmazhatnak anélkül, hogy minden alkalommal új animációt találnának ki.
Ami egy mozgásrendszerhez tartozik
Egy hasznos mozgásrendszer öt részből áll. Ha kihagy egyet, a rendszer olyan fájlok mappájává válik, amelyeket senki sem használ.
Principles
Rövid szabályok, amelyek elmagyarázzák a termék személyiségét. Például: a mozgás megerősíti a bevitelt az első képkockán, vagy a nagy felületek kevésbé mozognak, mint a kicsik.
Tokenek
Az időtartam, az enyhülés és a rugók nevesített értékei, például motion.enter.fast vagy motion.spring.snappy. A tokenek áttekinthetővé teszik a mozgást, és konzisztens értékeket biztosítanak.
Minták
Újrafelhasználható viselkedések gyakori munkákhoz: belépés, kilépés, kibontás, átrendezés, húzás, elvetés, siker és hiba.
Alkatrészek
Az élő építőelemek, amelyek már használják a mintákat, így a csapat bedobhat egyet ahelyett, hogy elolvasna egy dokumentumot és újraépítené azt.
Kormányzás
Ki változtathatja meg a rendszert, hogyan tekintheti át a változtatásokat, és hogyan szünteti meg az elavult mozgást.
Mozgásrendszer vs tervezési rendszer vs mozgásjelzők
A tervezési rendszer lefedi a színt, a típust, a térközt, az alkatrészeket és a használati szabályokat. A mozgásrendszer a benne lévő mozgásréteg, és gyakran megvan a maga tulajdonosa, mert a mozgás más okok miatt változik, mint a szín. A mozgásjelzők a réteg legkisebb egységei: az időzítés és a fizika elnevezett értékek. A token könyvtár szükséges, de nem elegendő. Minták és élő komponensek nélkül a tokenek olyan számlistává válnak, amelyet a tervezők minden képernyőn másként értelmeznek.
Miért hibásodnak meg a mozgásrendszerek?
A legtöbb mozgási rendszer működési, nem esztétikai okokból hibásodik meg. A tokenek az összetevőktől leválasztott dokumentumban élnek. A jóváhagyott mozgás csak olyan prototípusban létezik, amelyet a fejlesztők nem tudnak futtatni. Az egyik csapat elfogadja a rendszert, egy másik pedig továbbra is keményen kódolt időtartamokat szállít. A rendszernek nincs gazdája, ezért sodródik. Ennek kijavítása azt jelenti, hogy a rendszert olyan helyre kell helyezni, ahol a munka már megtörténik: a tervezési fájlban, a komponens könyvtárban és a kód áttekintésében.
Hogyan kell kezelni egy mozgásrendszert
Kezdje egy kis, saját felülettel, és tegye a rendszert a könnyebb útra.
- Válasszon ki egy igazságforrást a tokenekhez, és hivatkozzon rá a tervfájlból és a kódbázisból
- A tokeneket szándék szerint nevezze el, ne érték szerint: a motion.exit.fast hasznosabb, mint a motion.200ms
- Mielőtt további tokeneket adna hozzá, küldjön egy kis mintakészletet
- Tekintse át a mozgásváltozásokat, például a kódváltozásokat, előtte-utána rögzítéssel
- Újrahasználat nyomon követése: hány új komponens használ jóváhagyott mintákat egyéni időzítés helyett
- A régi értékeket ütemezetten törölje, hogy a rendszer ne halmozzon fel ismétlődéseket
Ahová a ExodeUI illik
A ExodeUI egy nyitott .exode fájlban tartja a mozgást, nem pedig külön specifikációban. Az elrendezés, az állapotok, az idővonalak, a rugófizika, a logika és a bemenetek együtt élnek, és a futásidejű csomagok a React, Vue, Svelte, Angular, Solid, React Native, SwiftUI és Flutter fájlokat játsszák le. Ez ad egy mozgásrendszert működő referenciaként: a tervező megnyithatja a jóváhagyott összetevőt, a fejlesztő megvizsgálhatja ugyanazt a fájlt, és egy AI kódoló eszköz szerkesztheti azt a MCP szerveren keresztül. A fájl nem helyettesíti az irányítást. Ez csak ad valami konkrétumot a kormányzásnak.
Hogyan indítsunk el egy mozgásrendszert egy sprintben
Vizsgálja meg tíz leggyakrabban használt alkatrészét, és sorolja fel bennük az összes időtartamot, görbét és rugót. Csoportosítsa az ugyanazt a munkát végző értékeket, és nevezze el a csoportokat. Válasszon öt mintát, amelyek a legtöbb interakciót lefedik. Készítsen egy referenciakomponenst mintánként, dokumentálja, mikor kell használni, és adja hozzá a tokeneket a tervezési és kódkönyvtáraihoz. Ezután futtasson egyetlen szolgáltatást az új rendszeren keresztül, és mérje meg, hány egyéni értékre volt még szüksége. Ez a szám a következő sprint alapértéke.
Gyártási megvalósítási részlet
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()}
/>
);
}Kulcs Principle, amit meg kell jegyezni
- A mozgásrendszer egy tervezési rendszer mozgási rétege, nem pedig prototípus videók mappája
- Elvekre, tokenekre, mintákra, élő összetevőkre és irányításra van szüksége
- A használati szabályok nélküli tokenek számokká válnak, amelyeket minden csapat másként értelmez
- A mozgásmódosításokat a kódmódosításokhoz hasonlóan felül kell vizsgálni
- A ExodeUI egyetlen nyitott fájlban tartja a mozgást, az állapotokat és a logikát, amelyet a futtatókörnyezet lejátszhat