Apa Itu Sistem Gerak? Panduan Praktis untuk Tim UI
Sistem gerak adalah aturan, token, dan komponen bersama yang menentukan bagaimana suatu produk bergerak. Apa yang menjadi bagiannya, bagaimana mengelolanya, dan di mana ExodeUI cocok.
Pengambilan Inti
Sistem gerak adalah seperangkat aturan, token, komponen, dan kode bersama yang menentukan bagaimana suatu produk bergerak. Ini mencakup durasi, pelonggaran, pegas, koreografi, dan status interaksi sehingga tim menggunakan kembali gerakan yang disetujui alih-alih menyusunnya kembali layar demi layar. Sistem gerak adalah masalah manajemen dan juga masalah desain: ia membutuhkan pemilik, sumber kebenaran, dan jalur menuju produksi.
Apa itu sistem gerak?
Sistem gerak adalah bagian dari sistem desain yang menggambarkan gerakan. Ini menjawab pertanyaan yang tidak bisa dilakukan oleh pustaka komponen statis: seberapa cepat menu terbuka, bagaimana tombol bereaksi ketika ditekan, apa yang terjadi ketika pengguna menghentikan transisi, dan nilai pegas mana yang dimiliki permukaan mana. Outputnya bukan halaman panduan gaya. Outputnya adalah serangkaian kecil keputusan yang dapat digunakan kembali yang dapat diterapkan oleh desainer dan pengembang tanpa selalu membuat animasi baru.
Apa yang termasuk dalam sistem gerak
Sistem gerak yang berguna memiliki lima bagian. Lewati satu dan sistem menjadi folder file yang tidak digunakan siapa pun.
Principle
Aturan singkat yang menjelaskan kepribadian produk. Misalnya: gerakan mengonfirmasi masukan pada frame pertama, atau permukaan besar bergerak lebih sedikit dibandingkan permukaan kecil.
Token
Nilai yang diberi nama untuk durasi, pelonggaran, dan pegas, seperti motion.enter.fast atau motion.spring.snappy. Token membuat gerakan dapat ditinjau dan menjaga konsistensi nilai.
Pola
Perilaku yang dapat digunakan kembali untuk pekerjaan umum: masuk, keluar, perluas, susun ulang, seret, tutup, sukses, dan kesalahan.
Komponen
Blok penyusun langsung yang sudah menggunakan pola, sehingga tim dapat memasukkannya alih-alih membaca dokumen dan membangunnya kembali.
Tata Kelola
Siapa yang dapat mengubah sistem, bagaimana perubahan ditinjau, dan bagaimana mosi yang tidak berlaku lagi dihentikan.
Sistem gerak vs sistem desain vs token gerak
Sistem desain mencakup warna, jenis, jarak, komponen, dan aturan penggunaan. Sistem gerak adalah lapisan gerakan di dalamnya, dan sering kali memiliki pemiliknya sendiri karena gerakan berubah karena alasan yang berbeda dengan warna. Token gerak adalah unit terkecil dari lapisan itu: bernama nilai waktu dan fisika. Perpustakaan token diperlukan tetapi tidak cukup. Tanpa pola dan komponen aktif, token menjadi daftar angka yang ditafsirkan secara berbeda oleh desainer di setiap layar.
Mengapa sistem gerak gagal
Kebanyakan sistem gerak gagal karena alasan operasional, bukan alasan estetika. Token berada dalam dokumen yang terputus dari komponennya. Permohonan yang disetujui hanya ada dalam prototipe yang tidak dapat dijalankan oleh pengembang. Satu tim mengadopsi sistem dan tim lainnya terus mengirimkan durasi yang dikodekan secara keras. Sistem tidak memiliki pemilik, sehingga melayang. Memperbaikinya berarti menempatkan sistem di tempat di mana pekerjaan sudah dilakukan: di file desain, di pustaka komponen, dan di tinjauan kode.
Bagaimana mengelola sistem gerak
Mulailah dengan permukaan kecil yang dimiliki dan jadikan sistem sebagai jalur yang mudah.
- Pilih satu sumber kebenaran untuk token dan tautkan ke sana dari file desain dan basis kode
- Beri nama token berdasarkan niat, bukan berdasarkan nilai: motion.exit.fast lebih berguna daripada motion.200ms
- Kirimkan serangkaian kecil pola sebelum menambahkan lebih banyak token
- Tinjau perubahan gerakan seperti perubahan kode, dengan rekaman sebelum dan sesudah
- Lacak penggunaan kembali: berapa banyak komponen baru yang menggunakan pola yang disetujui, bukan waktu khusus
- Pensiunkan nilai-nilai lama sesuai jadwal sehingga sistem tidak menumpuk duplikat
Dimana ExodeUI cocok
ExodeUI menyimpan gerakan di dalam file .exode yang terbuka, bukan dalam spesifikasi terpisah. Tata letak, status, garis waktu, fisika pegas, logika dan input hidup bersama, dan paket runtime memutar file dalam React, Vue, Svelte, Angular, Solid, React Native, SwiftUI, dan Flutter. Hal ini memberikan referensi kerja pada sistem gerak: perancang dapat membuka komponen yang disetujui, pengembang dapat memeriksa file yang sama, dan alat pengkodean AI dapat mengeditnya melalui server MCP. File tersebut bukan pengganti tata kelola. Hal ini hanya memberikan hal yang konkret pada tata kelola pemerintahan.
Bagaimana memulai sistem gerak dalam satu sprint
Audit sepuluh komponen yang paling sering Anda gunakan dan buat daftar setiap durasi, kurva, dan pegas di dalamnya. Kelompokkan nilai-nilai yang melakukan pekerjaan yang sama dan beri nama kelompok tersebut. Pilih lima pola yang mencakup sebagian besar interaksi. Buat satu komponen referensi per pola, dokumentasikan kapan menggunakannya, dan tambahkan token ke pustaka desain dan kode Anda. Kemudian jalankan satu fitur melalui sistem baru dan ukur berapa banyak nilai khusus yang masih diperlukan. Angka tersebut menjadi acuan Anda untuk sprint berikutnya.
Cuplikan Implementasi Produksi
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()}
/>
);
}Kunci Principles untuk Diingat
- Sistem gerak adalah lapisan pergerakan sistem desain, bukan folder video prototipe
- Hal ini membutuhkan prinsip, token, pola, komponen hidup, dan tata kelola
- Token tanpa aturan penggunaan menjadi angka yang ditafsirkan berbeda oleh setiap tim
- Perubahan gerak harus ditinjau seperti perubahan kode
- ExodeUI menyimpan gerakan, status, dan logika dalam satu file terbuka yang dapat diputar oleh runtime