Hareket Sistemi Nedir? Kullanıcı Arayüzü Ekipleri için Pratik Bir Kılavuz
Hareket sistemi, bir ürünün nasıl hareket edeceğine karar veren paylaşılan kurallar, jetonlar ve bileşenlerdir. Birine neyin ait olduğu, nasıl yönetileceği ve ExodeUI'in nereye sığacağı.
Ana nokta
Hareket sistemi, bir ürünün nasıl hareket edeceğine karar veren paylaşılan kurallar, jetonlar, bileşenler ve kodlar kümesidir. Süreleri, gevşemeyi, yaylanmaları, koreografiyi ve etkileşim durumlarını kapsar, böylece ekipler onaylanan hareketi ekran ekran yeniden oluşturmak yerine yeniden kullanır. Hareket sistemi bir tasarım problemi olduğu kadar bir yönetim problemidir: bir sahibine, bir hakikat kaynağına ve üretime giden bir yola ihtiyacı vardır.
Hareket sistemi nedir?
Hareket sistemi, tasarım sisteminin hareketi tanımlayan parçasıdır. Statik bileşen kütüphanesinin yapamadığı soruları yanıtlar: Bir menünün ne kadar hızlı açıldığı, bir düğmeye basıldığında nasıl tepki verdiği, kullanıcı bir geçişi kesintiye uğrattığında ne olduğu ve hangi yay değerlerinin hangi yüzeye ait olduğu. Çıktı bir stil kılavuzu sayfası değil. Çıktı, tasarımcıların ve geliştiricilerin her seferinde yeni bir animasyon icat etmeden uygulayabilecekleri küçük bir yeniden kullanılabilir kararlar kümesidir.
Hareket sistemine neler aittir?
Yararlı bir hareket sistemi beş bölümden oluşur. Birini atladığınızda sistem, kimsenin kullanmadığı bir dosya klasörü haline gelir.
Principle'ler
Ürünün kişiliğini açıklayan kısa kurallar. Örneğin: hareket, ilk karedeki girişi onaylar veya büyük yüzeyler küçük yüzeylere göre daha az hareket eder.
Jetonlar
Motion.enter.fast veya motion.spring.snappy gibi süre, hareket hızı ve yaylar için adlandırılmış değerler. Belirteçler, hareketi incelenebilir hale getirir ve değerlerin tutarlı kalmasını sağlar.
Desenler
Yaygın işler için yeniden kullanılabilir davranışlar: girme, çıkma, genişletme, yeniden sıralama, sürükleme, reddetme, başarı ve hata.
Bileşenler
Zaten kalıpları kullanan canlı yapı taşları, böylece ekip bir belgeyi okuyup yeniden oluşturmak yerine bir tane bırakabilir.
Yönetişim
Sistemi kim değiştirebilir, değişikliklerin nasıl inceleneceği ve kullanımdan kaldırılan hareketin nasıl kullanımdan kaldırılacağı.
Hareket sistemi vs tasarım sistemi vs hareket belirteçleri
Bir tasarım sistemi; rengi, türü, aralığı, bileşenleri ve kullanım kurallarını kapsar. Bir hareket sistemi, içindeki hareket katmanıdır ve hareketin renkten farklı nedenlerle değişmesi nedeniyle çoğu zaman kendi sahibi vardır. Hareket belirteçleri bu katmanın en küçük birimidir: zamanlama ve fizik için adlandırılmış değerler. Bir jeton kütüphanesi gereklidir ancak yeterli değildir. Desenler ve canlı bileşenler olmadan jetonlar, tasarımcıların her ekranda farklı yorumladığı sayıların bir listesi haline gelir.
Hareket sistemleri neden başarısız oluyor?
Çoğu hareket sistemi estetik nedenlerden değil operasyonel nedenlerden dolayı başarısız olur. Belirteçler, bileşenlerle bağlantısı kesilmiş bir belgede bulunur. Onaylanan hareket yalnızca geliştiricilerin çalıştıramayacağı bir prototipte bulunur. Bir ekip sistemi benimsiyor ve diğeri sabit kodlanmış süreleri göndermeye devam ediyor. Sistemin sahibi yok, sürükleniyor. Bunu düzeltmek, sistemi işin zaten gerçekleştiği bir yere koymak anlamına gelir: tasarım dosyasına, bileşen kitaplığına ve kod incelemesine.
Hareket sistemi nasıl yönetilir?
Küçük, sahip olunan bir yüzeyle başlayın ve sistemi kolay yol haline getirin.
- Tokenlar için bir gerçek kaynağı seçin ve tasarım dosyasından ve kod tabanından ona bağlantı verin
- Belirteçleri değere göre değil amaca göre adlandırın: motion.exit.fast motion.200ms'den daha kullanışlıdır
- Daha fazla jeton eklemeden önce küçük bir desen seti gönderin
- Kod değişiklikleri gibi hareket değişikliklerini öncesi ve sonrası kaydıyla inceleyin
- Yeniden kullanımı takip edin: kaç yeni bileşenin özel zamanlama yerine onaylanmış kalıpları kullandığı
- Sistemin kopyaları biriktirmemesi için eski değerleri bir programa göre kullanımdan kaldırın
ExodeUI'in sığdığı yer
ExodeUI, hareketi ayrı bir spesifikasyon yerine açık bir .exode dosyası içinde tutar. Düzen, durumlar, zaman çizelgeleri, bahar fiziği, mantık ve girişler birlikte canlı olarak çalışır ve çalışma zamanı paketleri, dosyayı React, Vue, Svelte, Angular, Solid, React Native, SwiftUI ve Flutter'te oynatır. Bu, hareket sistemine çalışma referansı sağlar: Bir tasarımcı onaylı bileşeni açabilir, bir geliştirici aynı dosyayı inceleyebilir ve bir yapay zeka kodlama aracı bunu MCP sunucusu aracılığıyla düzenleyebilir. Dosya yönetimin yerine geçmez. Yönetişime işaret edecek somut bir şey verir.
Bir sprintte hareket sistemi nasıl başlatılır
En çok kullandığınız on bileşeni denetleyin ve bunların içindeki her süreyi, eğriyi ve yayı listeleyin. Aynı işi yapan değerleri gruplandırın ve gruplara isim verin. Çoğu etkileşimi kapsayan beş modeli seçin. Desen başına bir referans bileşeni oluşturun, ne zaman kullanılacağını belgeleyin ve belirteçleri tasarım ve kod kitaplıklarınıza ekleyin. Daha sonra yeni sistemde tek bir özelliği çalıştırın ve hala kaç tane özel değere ihtiyaç duyduğunu ölçün. Bu sayı bir sonraki sprint için temelinizdir.
Üretim için uygulama örneği
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()}
/>
);
}Hatırlanacak temel ilkeler
- Hareket sistemi, prototip videoların bulunduğu bir klasör değil, bir tasarım sisteminin hareket katmanıdır.
- İlkelere, belirteçlere, kalıplara, canlı bileşenlere ve yönetişime ihtiyacı var
- Kullanım kuralları olmayan jetonlar, her ekibin farklı yorumladığı sayılara dönüşür
- Hareket değişiklikleri kod değişiklikleri gibi gözden geçirilmelidir
- ExodeUI hareketi, durumları ve mantığı çalışma zamanlarının oynatabileceği tek bir açık dosyada tutar