Kullanım kılavuzuna geç
Motion Systemyazan Owl-Listener

Motion System Skill.

Animasyon kararlarını bileşenler ve ekipler arasında yeniden kullanılabilir hale getirin.

  • Tasarım Sistemleri
  • Hareket
Kaynak İncelemesi · Motion SystemSKILL.md
Görev Tasarım Sistemleri Çıktılar • Amaçlanan kullanımlarıyla adlandırılmış süre ve yumuşatma token'ları. • Gruplar, kademeli başlatma (stagger) ve yön için koreografi kuralları. • Azaltılmış hareket geçersiz kılmaları ve dokümantasyon gereklilikleri. Başlamadan Önce Bir token uygulaması veya platform karşılığı gerekir; kaynak belirli bir animasyon çerçevesi zorunlu kılmaz.
Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Ortak Bir Hareket Sözlüğü Oluşturun

Tüm ürün için ortak hareket token'larını, koordinasyon kurallarını ve azaltılmış hareket alternatiflerini tanımlayın.

Kaynağa dayalı iş akışıYürütme performans testi değildir

Çalışma Yaklaşımı

Motion System, hareketi birbiriyle ilgisiz bileşen tercihleri dizisi olarak değil, bir design-token katmanı olarak ele alır. Küçük bir süre ölçeği, anlamsal yumuşatma rolleri ve öğelerin girişi, çıkışı veya birlikte hareketi için koordinasyon kuralları tanımlar.

Kaynak, azaltılmış hareket yönetimini de sistem düzeyine yerleştirir. Bu, yayına alınmış tek bir animasyonu sonradan ayarlamaktan anlamlı biçimde farklıdır: token geçersiz kılmaları ve yedek davranışlar ürün genelinde tutarlı uygulanabilir. Örnek süreler başlangıç sözlüğüdür; her arayüzün aynı değerleri kullanması gerektiğinin kanıtı değildir.

Beklenen Çıktılar

  • Amaçlanan kullanımlarıyla adlandırılmış süre ve yumuşatma token'ları.
  • Gruplar, kademeli başlatma ve yön için koreografi kuralları.
  • Azaltılmış hareket geçersiz kılmaları ve dokümantasyon gereklilikleri.
Örnek Brief'i Gör

Brief'ten İncelemeye

  1. 01
    Hareket Rollerini Envanterleyin

    Anlık durum değişikliklerini, girişleri, çıkışları ve daha büyük geçişleri belirleyin. Yalnızca ayrı ihtiyaçları karşılayacak kadar token oluşturun.

  2. 02
    Koordinasyonu Tanımlayın

    Anlamsal gruplar içinde ortak zamanlamayı, kademeli başlatma sınırlarını ve tutarlı hareket yönlerini belirleyin.

  3. 03
    Erişilebilir Varyantı Oluşturun

    Hangi hareketin ortadan kalktığını, yerine neyin geldiğini ve temel durum bilgisinin nasıl görünür kaldığını belgeleyin.

02 Kullanım Alanları

Ne Zaman Kullanılmalı?

Bir token uygulaması veya platform karşılığı gerekir; kaynak belirli bir animasyon çerçevesi zorunlu kılmaz.

Uygun Durumlar

  • Tutarsız Bileşen HareketiFarklı ekiplerde birbiriyle uyumsuz animasyon zamanlamaları biriktiğinde yararlıdır.
  • Token Sistemi GenişletmeRenk ve boşlukları zaten yöneten ortak hatta hareketi de ekler.

Kontrol Edilecek Sınırlar

  • Bitmiş Bir Animasyon DeğildirHer etkileşim için yine de kompozisyon ve uygulama gerekir.
  • Örnekler Test EdilmelidirKaynaktaki süreler ve eğriler ürün, cihazlar ve erişilebilirlik gereklilikleri açısından doğrulanmalıdır.

Bu Girdileri Getirin

  • Bileşen EnvanteriMevcut animasyonları ve her birinin neyi ilettiğini listeleyin.
  • Hareket İlkeleriAmaçlanan ürün karakterini ve animasyon uygulanmaması gereken etkileşimleri açıklayın.
  • Platform ve ErişilebilirlikUygulama hedeflerini ve azaltılmış hareket beklentilerini belirtin.

03 Önemli Kararlar

Önemli Kararlar

  1. Küçük Sözlük

    Daha az anlamsal seçenek, büyük bir keyfi zamanlama kataloğuna göre gereksiz bir istisnayı fark etmeyi kolaylaştırır.

  2. Genel Erişilebilirlik

    Sistem düzeyindeki geçersiz kılmalar, bir bileşenin hareket tercihini unutma olasılığını azaltır.

04 Örnek Görev Tanımı

Odaklı Bir Brief Deneyin

Aşağıdaki örnek brief test edilmemiştir. Kullanmadan önce becerinin kurulumunu kontrol edin.

Kurulumu İnceleyin

Deponun belgelenmiş kurulum yolunu kullanın ve atıfta bulunulan tüm yardımcı dosyaları saklayın. Bu kayıt, çalıştırılabilir bir uygulamayı değil, odaklı bir tasarım yöntemini tanımlar.

Kaynak Dosyası (Upstream)
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md

Bir token uygulaması veya platform karşılığı gerekir; kaynak belirli bir animasyon çerçevesi zorunlu kılmaz.

Tek Bir Çıktıyla Başlayın

Becerinin çalıştırılmasından önce bu brief'teki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brief
Tooltip'lerimizi, çekmecelerimizi (drawer), diyaloglarımızı ve sayfa geçişlerimizi birleştirmek için motion-system kullan. Küçük bir token ölçeği ile giriş/çıkış yumuşatma rolleri öner, kademeli başlatma sınırlarını tanımla ve durum bilgisini koruyan azaltılmış hareket davranışını yaz. Animasyon uygulanmaması gereken durumları ekle ve zamanlamaları cihaz testi için öneri olarak işaretle.

Sonucu İnceleyin

Gerçek çıktıyı şu gözlemlenebilir ölçütlere göre kontrol edin.

  • Her token'ın ayrı bir rolü ve somut bir değeri vardır.
  • Gruplanmış öğeler aynı belgelenmiş koreografi kurallarını izler.
  • Azaltılmış hareket davranışı sistem düzeyinde belirtilmiştir.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sunar. Bu listeleme, becerinin pakete dahil olduğu veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının sağlandığı anlamına gelmez.

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereklilikleri değişebilir.

Kaynak Sahibi
Owl-Listener
Lisans
MIT
İncelenen Anlık Görüntü
2026-10-07 · 9a6930cf84a8
Editoryal Kaynak Özeti
Tüm ürün için ortak hareket token'larını, koordinasyon kurallarını ve azaltılmış hareket alternatiflerini tanımlayın.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; beceri kullanımı veya kalite puanı değildir.

06 Başlamadan Önce Sorular

Başlamadan Önceki Sorular

Kaç süre token'ı olmalı?

Kaynak, genellikle dört ila altı arasında küçük bir set önerir ve değerlerin yalnızca gerçekten farklı durumlar için eklenmesini söyler.

Azaltılmış hareket tüm geri bildirimi kaldırır mı?

Hayır. Temel durum iletişimi korunmalı; hareket uygun yerlerde devre dışı bırakılmalı veya değiştirilmelidir.

Hangi uygulamayı hedefler?

CSS özel özelliklerini veya eşdeğer platform token'larını ve mevcut bir token dışa aktarma hattına dahil edilmeyi tanımlar.

OpenDesign

Bir Sonraki Tasarım Yinelemesine Yer Açın.

Brief'inizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce becerinin kendi kurulumunu kontrol edin.

Kaynak Dosyası (Upstream)
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md