Mikä on liikejärjestelmä? Käytännön opas käyttöliittymätiimeille
Liikejärjestelmä on yhteisiä sääntöjä, tunnuksia ja komponentteja, jotka päättävät, miten tuote liikkuu. Mikä kuuluu yhteen, miten sitä hallinnoidaan ja mihin ExodeUI sopii.
Core Takeaway
Liikejärjestelmä on jaettu joukko sääntöjä, tunnuksia, komponentteja ja koodia, joka päättää, miten tuote liikkuu. Se kattaa kestot, kevennykset, jouset, koreografian ja vuorovaikutustilat, joten tiimit käyttävät hyväksyttyä liikettä uudelleen sen sijaan, että ne rakentaisivat sen uudelleen näyttö kerrallaan. Liikejärjestelmä on yhtä lailla johtamisongelma kuin suunnitteluongelma: se tarvitsee omistajan, totuuden lähteen ja polun tuotantoon.
Mikä on liikejärjestelmä?
Liikejärjestelmä on suunnittelujärjestelmän osa, joka kuvaa liikettä. Se vastaa kysymyksiin, joihin staattinen komponenttikirjasto ei pysty: kuinka nopeasti valikko avautuu, kuinka painike reagoi painettaessa, mitä tapahtuu, kun käyttäjä keskeyttää siirtymän ja mitkä jousiarvot kuuluvat mille pinnalle. Tulos ei ole tyyliopassivu. Tulos on pieni joukko uudelleenkäytettäviä päätöksiä, joita suunnittelijat ja kehittäjät voivat soveltaa keksimättä joka kerta uutta animaatiota.
Mikä kuuluu liikejärjestelmään
Hyödyllinen liikejärjestelmä koostuu viidestä osasta. Ohita yksi, ja järjestelmästä tulee tiedostokansio, jota kukaan ei käytä.
Principles
Lyhyet säännöt, jotka selittävät tuotteen persoonallisuuden. Esimerkiksi: liike vahvistaa syötteen ensimmäisessä ruudussa tai suuret pinnat liikkuvat vähemmän kuin pienet.
Tokenit
Nimetyt arvot kestolle, helpotukselle ja jousille, kuten motion.enter.fast tai motion.spring.snappy. Tokenit tekevät liikkeestä tarkistettavan ja pitävät arvot johdonmukaisina.
kuvioita
Uudelleen käytettävät tavat yleisissä töissä: syöttäminen, poistuminen, laajentaminen, järjestys uudelleen, vetäminen, hylkääminen, onnistuminen ja virhe.
Komponentit
Elävät rakennuspalikat, jotka jo käyttävät kuvioita, joten tiimi voi pudottaa sellaisen sen sijaan, että lukisi asiakirjan ja rakentaisi sen uudelleen.
Hallinto
Kuka voi muuttaa järjestelmää, miten muutokset tarkistetaan ja kuinka vanhentunut liike poistetaan.
Liikejärjestelmä vs. suunnittelujärjestelmä vs. liiketokenit
Suunnittelujärjestelmä kattaa värin, tyypin, välit, komponentit ja käyttösäännöt. Liikejärjestelmä on sen sisällä oleva liikekerros, ja sillä on usein oma omistajansa, koska liike muuttuu eri syistä kuin väri. Liiketunnisteet ovat tämän kerroksen pienin yksikkö: nimetyt arvot ajoitusta ja fysiikkaa varten. Token-kirjasto on välttämätön, mutta ei riittävä. Ilman kuvioita ja reaaliaikaisia komponentteja rahakkeista tulee luettelo numeroista, joita suunnittelijat tulkitsevat eri tavalla jokaisella näytöllä.
Miksi liikejärjestelmät epäonnistuvat
Useimmat liikejärjestelmät epäonnistuvat toiminnallisista syistä, eivät esteettisistä syistä. Tokenit ovat dokumentissa, joka on irrotettu komponenteista. Hyväksytty liike on vain prototyypissä, jota kehittäjät eivät voi suorittaa. Yksi tiimi ottaa järjestelmän käyttöön ja toinen jatkaa kovakoodattujen toimitusaikojen toimitusta. Järjestelmällä ei ole omistajaa, joten se ajautuu. Tämän korjaaminen tarkoittaa järjestelmän sijoittamista jonnekin, jossa työ jo tapahtuu: suunnittelutiedostoon, komponenttikirjastoon ja koodin tarkistukseen.
Kuinka hallita liikejärjestelmää
Aloita pienestä omistamasta pinnasta ja tee järjestelmästä helppo tie.
- Valitse tokeneille yksi totuuden lähde ja linkitä siihen suunnittelutiedostosta ja koodikannasta
- Nimeä tunnukset tarkoituksen, ei arvon mukaan: motion.exit.fast on hyödyllisempi kuin motion.200ms
- Lähetä pieni joukko kuvioita, ennen kuin lisäät tokeneja
- Tarkastele liikkeen muutoksia, kuten koodimuutoksia, tallentamalla ennen ja jälkeen
- Seuraa uudelleenkäyttöä: kuinka moni uusi komponentti käyttää hyväksyttyjä malleja mukautetun ajoituksen sijaan
- Poista vanhat arvot aikataulussa, jotta järjestelmä ei kerää päällekkäisyyksiä
Mihin ExodeUI sopii
ExodeUI pitää liikkeen avoimen .exode-tiedoston sisällä erillisen spesifikaation sijaan. Asettelu, tilat, aikajanat, jousifysiikka, logiikka ja tulot toimivat yhdessä, ja ajonaikaiset paketit toistavat tiedoston muodossa React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ja ZQX4QZ. Tämä antaa liikejärjestelmälle toimivan referenssin: suunnittelija voi avata hyväksytyn osan, kehittäjä voi tarkastaa saman tiedoston ja AI-koodaustyökalu voi muokata sitä MCP-palvelimen kautta. Tiedosto ei korvaa hallintoa. Se vain antaa hallitukselle jotain konkreettista osoitettavaa.
Kuinka käynnistää liikejärjestelmä yhdellä sprintillä
Tarkastele kymmenen eniten käytettyä komponenttiasi ja luettele niiden jokainen kesto, käyrä ja jousi. Ryhmittele arvot, jotka tekevät samaa työtä, ja nimeä ryhmät. Valitse viisi mallia, jotka kattavat suurimman osan vuorovaikutuksista. Rakenna yksi viitekomponentti kuviota kohden, dokumentoi, milloin sitä tulee käyttää, ja lisää tunnukset suunnittelu- ja koodikirjastoosi. Suorita sitten yksi ominaisuus uudessa järjestelmässä ja mittaa, kuinka monta mukautettua arvoa se vielä tarvitsi. Tämä numero on seuraavan sprintin lähtötaso.
Tuotannon toteutuskatkelma
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()}
/>
);
}Avain Principles muistettavat
- Liikejärjestelmä on suunnittelujärjestelmän liikekerros, ei prototyyppivideoiden kansio
- Se tarvitsee periaatteita, tunnuksia, malleja, live-komponentteja ja hallintoa
- Tokeneista ilman käyttösääntöjä tulee numeroita, joita jokainen joukkue tulkitsee eri tavalla
- Liikemuutokset tulee tarkistaa kuten koodimuutokset
- ExodeUI pitää liikkeen, tilat ja logiikan yhdessä avoimessa tiedostossa, jonka suoritusajat voivat toistaa