Windows'ta hareket

Hareket, arabirimin kullanıcı etkileşimine animasyon ekleme ve bu etkileşime yanıt verme şeklini açıklar. Windows'ta hareket reaktif, doğrudan ve bağlam uygun. Kullanıcı girişine geri bildirim sağlar ve yol bulmayı destekleyen uzamsal paradigmaları pekiştirir.

Tip

Bu makalede , Fluent Design dilinin Windows uygulamalarına nasıl uygulandığı açıklanmaktadır. Daha fazla bilgi için bkz . Fluent Design - Motion.

Hareket ilkeleri

Bu ilkeler Windows'ta hareket kullanımına yol gösterir.

Bağlı: Eylem öğeleri sorunsuz bir şekilde bağlanır

Konum ve boyut değiştiren öğeler, arka planda bağlı olmasalar bile bir durumdan diğerine görsel olarak bağlanmalıdır. Kullanıcılara, statik durum değişikliklerinin bilişsel yükünü düşürerek noktadan noktaya giden öğeleri izlemeleri için yol gösterilir.

Örnek: Bir pencere kayan, tutturılmış ve ekranı kaplamış arasında geçiş yaparken, her zaman aynı pencere gibi görünür.

Tip

Erişilebilirliği ve okunabilirliği geliştirmek için bu sayfa varsayılan görünümde hareketsiz görüntüler kullanır. Animasyonlu sürümü görmek için bir resme tıklayabilirsiniz.

Tutarlı: Öğeler, giriş noktalarını paylaşırken benzer şekilde davranmalıdır

Aynı kullanıcı arabirimi giriş noktasını paylaşan surface'lar etkileşimlere tutarlılık getirmek için aynı şekilde çağrılmalı ve kapatılmalıdır. Her geçiş, bir yüzeyin uyumlu hissetmesi için diğer öğelerin zamanlamasına, hareketlerine ve yönüne saygı duymalıdır.

Örnek: Tüm görev çubuğu açılır ögeleri çağrıldığında yukarı ve kapatıldığında aşağı kaydırılır.

Animasyonlu görmek için resme tıklayın.

Duyarlı: Sistem yanıt verir ve kullanıcı girişlerine ve seçeneklerine uyarlar

Net göstergeler, sistemin farklı girişlere, duruşlara ve yönlendirmelere düzgün bir şekilde tanınıp uyum sağladığını gösterir. Uygulamaların yanıt verme, canlı hissetme ve giriş yöntemlerine bağlı olarak kullanıma yardımcı olmak için işletim sistemi davranışlarını temel alması gerekir.

Örnek: Görev çubuğu simgeleri, klavyeler ayrılırken yayılır. Pencere kenarları, imleç veya dokunmatik girişe bağlı olarak farklı bir görsel çağırır.

Animasyonlu görmek için resme tıklayın.

Keyifli: Amaç ile beklenmedik sevinç anları

Hareket, basit eylemleri zevk anlarına dönüştürmek için deneyime kişilik ve enerji katar. Bu anlar her zaman kısa ve kısa sürelidir ve kullanıcı eylemlerini güçlendirmeye yardımcı olur.

Örnek: Bir pencereyi en aza indirmek, bir uygulama simgesinin geri sıçramasına neden olurken geri yükleme bir uygulama simgesini yukarı geri yükler.

Animasyonlu görmek için resme tıklayın.

Kaynak: Mümkün olduğunda tutarlılık sağlamak için mevcut denetimleri kullanır

Mümkün olduğunca özel animasyonlardan kaçının. Sayfa geçişleri, sayfa içi odak ve mikro etkileşimler için WinUI denetimleri gibi animasyon kaynaklarını kullanın. WinUI denetimlerini kullanamıyorsanız, uygulama giriş noktasının bulunduğu yere göre mevcut işletim sistemi davranışlarını taklit edin.

Örnek:Sayfa geçişleri, bağlı animasyonlar ve animasyonlu simgeler , uygulamalara keyifli ve gerekli hareket ekleyen önerilen WinUI denetimleridir.

Animasyonlu görmek için resme tıklayın.

Örnekler

WinUI 3 Galeri uygulamasını açın ve hareket örneklerinin nasıl çalıştığını görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Usage

Animasyon özellikleri

Windows hareketi hızlı, doğrudan ve bağlama uygundur. Zamanlama ve hareket eğrileri, tutarlı bir deneyim oluşturmak için animasyonun amacına göre ayarlanır.

Amaç	Definition	Kolaylaştırmak	Zamanlama	Için Kullanılır
Doğrudan Giriş	Hızlı – In	Küp bezier(0,0,0,1)	167, 250, 333	Konum, Ölçek, Döndürme
Varolan Öğeler	Noktadan Noktaya	Küp bezier(0,55,0,55,0,1)	167, 250, 333ms	Konum, Ölçek, Döndürme
Doğrudan Çıkış	Hızlı – Çıkış	Küp bezier(0,0,0,1)	167ms	Konum, Ölçek, Döndürme (ALWAYS combine with fade out)
Nazik Çıkış	Yumuşak – Çıkış	Küp bezier(1,0,1,1)	167ms	Konum, Ölçek
Minimum	Fade – In + Out	Doğrusal	83ms	Opaklık
Güçlü Giriş	Elastik Giriş (3 Ana Kare)	(Aşağıdaki 3 değer)	(Aşağıdaki 3 değer)	Konum, Ölçek
	Anahtar Çerçeve 1	Kübik Bezier(0,85, 0, 0, 1)	167ms
	Anahtar Çerçeve 2	Kübik Bezier(0,85, 0, 0,75, 1)	167ms
	Ana Kare 3	Kübik Bezier(0,85, 0, 0, 1)	333ms

Denetimler

Windows'un bu sürümü , WinUI denetimlerinde amaçlı mikro etkileşimler sağlar. Bilgileri daha iyi düzenlemenize yardımcı olmak ve uygulamanızın kullanıcılarının sayfadan sayfaya, katmandan katmana ve bir etkileşimin durumuna geçmesine yardımcı olmak için bu denetimleri uygulamanıza ekleyin.

Sayfa Geçişi: Aynı yüzey içinde sayfadan sayfaya geçişler

Sayfadan sayfaya sorunsuz geçiş yapmak için sayfa geçişlerini kullanın ve animasyon yol tariflerini bir uygulamanın akışına göre yapılandırın.

Sayfa geçişleri, kullanıcılarınızın gözlerini gelen ve giden içeriğe yönlendirerek bilişsel yükü düşürür.

Animasyonlu görmek için resme tıklayın.

Bağlı Animasyon: Aynı sayfa içindeki katmandan katmana geçişler

Bağlamı korurken bir sayfa veya yüzey içindeki belirli bilgi parçalarını vurgulamak için bağlı animasyonları kullanın.

Bağlı animasyonlar seçili öğelere odaklanma sağlar ve odaklanmış ve odaklanılmamış durumlar arasında sorunsuz bir şekilde geçiş sağlar.

Animasyonlu görmek için resme tıklayın.

Animasyonlu Simge: Zevk ekler ve mikro etkileşimler aracılığıyla bilgileri ortaya çıkar

Lottie animasyonlarını kullanarak hareketle hafif, vektör tabanlı simgeler ve çizimler uygulamak için animasyonlu simgeler kullanın.

Animasyonlu simgeler, belirli giriş noktalarına dikkat çeker, durumdan eyalete geri bildirim sağlar ve etkileşime keyif katar.

Animasyonlu görmek için resme tıklayın.