Animation Principlesyazan Owl-Listener

Animation Principles Skill.

Tek bir geçişe net bir amaç ve arayüzün durum değişikliğini destekleyen bir hareket profili kazandırın.

UI Hareketi
Tasarım Rehberi

OpenDesign İndir Kullanım Kılavuzunu Görüntüle

Kaynak İncelemesi · Animation PrinciplesSKILL.md

Görev UX Çıktılar • Tek bir arayüz olayı için hareket gerekçesi • Yumuşatma eğrisi, süre ve sıralama önerileri • Kesintiye uğrama ve azaltılmış hareket davranışı Başlamadan Önce Arayüzün önceki ve sonraki durumlarını, tetikleyiciyi ve hedef cihazları belirtin. Zamanlamayı, kesintiye uğramayı ve azaltılmış hareket davranışını denetlemek için çalıştırılabilir bir önizleme kullanın.

Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Tek Bir UI Animasyonunu İyileştirin

Yumuşatma eğrisi, süre, koreografi, kesintiye uğrama ve azaltılmış hareketi kapsayan tek hareketlik bir tasarım rehberi.

Kaynağa dayalı iş akışıYürütme kıyaslaması değildir

Çalışma Yaklaşımı

Animation Principles, tek bir UI hareketine odaklanan bir hareket tasarımı rehberidir. Yumuşatma yönünü, süreyi, sahnelemeyi ve hareketin devamını kullanıcının fark etmesi gerekenlerle ilişkilendirir. Giriş, çıkış, vurgu, yükleme efekti veya geçiş animasyonlarının her birinin işlevi farklıdır.

Kaynak, zamanlama aralıkları ve kademeli (stagger) başlatma önerileri içerir; ancak bunlar her arayüz için ölçülmüş gereksinimler değil, başlangıç noktalarıdır. Ayrıca kesintiye uğrayabilen davranış, azaltılmış hareket desteği ve düşük güçlü cihazlarda kontroller ister. Ürün genelindeki hareket token'ları farklı bir göreve aittir.

Beklenen Çıktılar

Tek bir arayüz olayı için hareket gerekçesi
Yumuşatma eğrisi, süre ve sıralama önerileri
Kesintiye uğrama ve azaltılmış hareket davranışı

Örnek Brifi Gör

Brifden İncelemeye

01
Durum Değişikliğini Adlandırın
Animasyonun neyi ilettiğini ve hangi öğenin önce dikkat çekmesi gerektiğini belirleyin.
02
Hareketi Ayarlayın
Giriş, çıkış, vurgu veya geçişe uygun bir yumuşatma profili ve süre seçin.
03
Alternatifleri Kontrol Edin
Hareket sırasında iptali, azaltılmış hareket davranışını ve hedef cihazlarda algılanan tepkiselliği inceleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır

Arayüzün önceki ve sonraki durumlarını, tetikleyiciyi ve hedef cihazları belirtin. Zamanlamayı, kesintiye uğramayı ve azaltılmış hareket davranışını denetlemek için çalıştırılabilir bir önizleme kullanın.

Uygun Kullanım

Modal GirişiEkrana gelen tek bir yüzeyin duyarlı ve kasıtlı hissettirmesi için kullanın.
Dikkat Dağıtan Bir GeçişEtkileşim çalışıyor ancak hızı veya koreografisi yanlış hissettiriyorsa işe yarar.

Kontrol Edilecek Sınırlar

Tam Bir Hareket Sistemi DeğildirKaynak, bunu ürün genelindeki süre ve yumuşatma token'larından ayırır.
Aralıklar Bağlama BağlıdırÖnerilen milisaniye değerleri gerçek etkileşim testinin yerini almamalıdır.

Bu Girdileri Getirin

Tetikleyici ve DurumlarÖnceki durumu, eylemi ve ortaya çıkan durumu gösterin.
Dikkat Hedefiİzleyicinin hareketten ne anlaması gerektiğini belirtin.
Cihaz KısıtlarıAzaltılmış hareket ve performans gereksinimlerini belirtin.

03 Önemli Kararlar

Önemli Kararlar

Süsleme Değil Amaç
Hareket, ilettiği durum değişikliğine göre değerlendirilir.
Kesintiye Uğrama Önemlidir
Bir geçiş, bitmeden önce gelen başka bir kullanıcı eylemine tolerans göstermelidir.

04 Örnek Görev Tanımı

Odaklı Bir Brif Deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kurulumu İnceleyin

Bu görevin SKILL.md dosyasını designer-skills deposundan, ajanınızın desteklediği skill konumuna yükleyin. Giriş dosyası evrensel bir yükleyici komutu belirtmez.

Kaynak Dosya (Upstream)

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md

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

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif

Bu filtre paneli girişini ayarlamak için animation-principles kullan. Yumuşatma eğrisini ve süreyi açıkla, paneli ve içeriği koordine et ve yarıda kapatılırsa ne olacağını tanımla. Azaltılmış hareket alternatifi ekle ve süslemeye yönelik döngüler ekleme.

Sonucu İnceleyin

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

Animasyon belirli bir değişikliği iletir.
İkinci bir eylem onu temiz bir şekilde kesintiye uğratabilir.
Azaltılmış hareket davranışı anlaşılır kalır.

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

OpenDesign İndir Hızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak sürümünü anlatır. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi: Owl-Listener
Depo: Owl-Listener/designer-skills
Skill Dosyası: interaction-design/skills/animation-principles/SKILL.md
Lisans: MIT
İncelenen Anlık Görüntü: 2026-10-07 · 9a6930cf84a8

Editoryal Kaynak Özeti

Yumuşatma eğrisi, süre, koreografi, kesintiye uğrama ve azaltılmış hareketi kapsayan tek hareketlik bir tasarım rehberi.

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

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Tüm hareket token'larını tanımlar mı?

Hayır. Belirtilen kapsamı tek bir harekettir; ürün genelindeki token'ları hareket sistemi skill'i ele alır.

Zamanlama aralıkları evrensel mi?

Bunları, bağlam içinde test edilecek tasarım rehberliği olarak görün; garanti edilmiş en uygun değerler değildir.

Yükleme her zaman animasyonlu olmalı mı?

Kaynak yükleme kalıplarını listeler ancak hareketin bir amaca hizmet etmesini ve erişilebilirlik tercihlerine saygı göstermesini şart koşar.

OpenDesign

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

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

OpenDesign İndir Tasarım Skill'lerine Göz Atın