LanguageTürkçe
Sütun 06 · Tasarım Sistemleri
Hareket Belirteçleri: Tasarım Sistemleri İçin Eksiksiz Mimari
Tüm ürün ekosisteminizde hareketi standartlaştırın. Düzinelerce geliştirici deposunda rastgele 300 ms'lik kübik bezleri sabit kodlamayı bırakın.
What is Hareket Belirteçleri: in ExodeUI?
Hareket Belirteçleri, yay sertliği, sönümleme oranı, kütle, gevşeme eğrileri ve süre gibi animasyon parametrelerini makine tarafından okunabilir bir biçimde tanımlayan standartlaştırılmış tasarım belirteçleridir. Ücretsiz Motion Token Oluşturucumuz, CSS ve JSON için dışa aktarabileceğiniz bir başlangıç seti oluşturur ve token oluşturma araçları bunları her platform için koda dönüştürür.
Temel mimari
Mühendisler ve tasarımcılar neden ExodeUI seçiyor
Design, logic and motion in one file that runs inside your app.
Bahar Fizik Jetonları
Hareketi, rastgele zamanlama sayıları yerine fiziksel belirteçlerle (sertlik, sönümleme, kütle) tanımlayın.
Otomatik Kod Oluşturma
Mevcut jeton oluşturma işlem hattınızla jetonları CSS değişkenlerine ve platform koduna dönüştürün.
Anlamsal Hiyerarşi
Hareket belirteçlerini küresel, anlamsal ve bileşen düzeylerine göre düzenleyin (ör. motion.spring.snappy, motion.feedback.success).
Tasarım Aracı Senkronizasyonu
Figma değişkenleri ve üretim Git kod tabanları arasında hareket belirteçlerini sorunsuz bir şekilde senkronize edin.
Nesnel değerlendirme
ExodeUI şununla nasıl karşılaştırılır: Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Fiziksel yay belirteçleri ve hız eğrileri için tam birinci sınıf destek
- Yerel mobil (SwiftUI/Compose) ve web formatlarına aynı anda dışa aktarır
- Görsel denetçi, tasarımcıların belirteç fiziğini gerçek zamanlı olarak hissetmelerini sağlar
- Azaltılmış hareket tercihleri için otomatik erişilebilirlik geri dönüşleri
Traditional Design Tokens (Color/Type Only)
- Çoğu simge aracı yalnızca statik renkleri, tipografiyi ve aralığı destekler
- Hareket, "300 ms'lik giriş kolaylığı" gibi kaba süre dizelerine indirgenmiştir
- Koda göndermeden önce jeton dinamiklerini test etmenin görsel bir yolu yok
- Mühendisler hareket özelliklerini manuel olarak çerçeve koduna yorumlamalıdır
Geliştirmeye devir
Kodunuzda kullanma
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
'exodeui'den { ExodeUICanvas }'ı içe aktarın;
// Yaylar, durumlar ve zamanlama .exode dosyasında yayındadır (
// editör). Kodunuz girdileri iletir ve olayları geri duyar.
dışa aktarma işlevi SnappyButton() {
dönüş (
<ExodeUICanvas
src = "/snappy_button.bexode"
onTrigger={(name) => console.log('ExodeUI olayı:', name)}
/>
);
}Tasarım Sistemleri Hareket Halinde Neden Başarısız Olur?
Modern tasarım sistemleri mükemmelleştirilmiş renk paletlerine, tipografi ölçeklerine, yükseklik gölgelerine ve aralık ızgaralarına sahiptir. Ancak hareket unutulmuş tasarım simgesi olmaya devam ediyor. Çoğu kuruluşta hareket dokümantasyonu, "animasyonlar hızlı olmalıdır" veya statik 250 ms süre değişkeni gibi belirsiz yönergelerden oluşur.
- Tutarsız Marka Duygusu: Bir mühendis çıkış kolaylığı kullanıyor, diğeri çıkış kolaylığı kullanıyor ve mobil cihaz Apple varsayılanlarını kullanıyor.
- Kırılgan Süre Eğrileri: Zamanlanmış animasyonlar küçük öğelerde yavaş, büyük alt sayfalarda ise aceleci görünür.
- Erişilebilirliğin İhmali: Ekipler, tüm bileşenlerde uyumlu azaltılmış hareket geçersiz kılmalarını uygulama konusunda başarısız olur.
3 Katmanlı Hareket Token Hiyerarşisi
ExodeUI, hareket belirteçlerini üç yapılandırılmış katmanda modeller:
1. Kademe: Küresel İlkel Tokenlar
Ham matematiksel sabitler (örneğin, sertlik-400, sönüm-25, kütle-1).
Aşama 2: Anlamsal Amaç Belirteçleri
Amaca bağlı işlevsel adlar (ör. motion.interactive.snappy, motion.modal.enter).
3. Kademe: Bileşene Özel Tokenlar
Belirli bileşenlere bağlı geçersiz kılmalar (ör., Button.toggle.switch).
Topic Cluster Network
İlgili kavramlar ve araçlar
Hareket Jetonu Oluşturma Aracı
Hareket belirteçleri oluşturma ve dışa aktarma
Hareket Geliştirme Ortamı
MDE platformunun vizyonu
ExodeUI dosyaları nasıl oluşturulur?
.exode'ten uygulamanıza
Sözlük: Hareket Jetonları
Biçimsel tanım ve standart şema
Sorunuz mu var?
Sık sorulan sorular
Gerçek hareketle yaşayan bileşenler oluşturun.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.