Windows'ta Hareket

Hareket, arabirimin kullanıcı etkileşimine animasyon ekleme ve bu etkileşime yanıt verme şeklini açıklar. Windows'taki hareketler tepkisel, doğrudan ve bağlama uygun bir şekilde tasarlanmıştır. Kullanıcı girişine geri bildirim sağlar ve yol bulmayı destekleyen uzamsal paradigmaları pekiştirir.

Tip

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

Hareket ilkeleri

Bu ilkeler Windows 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 yüzen, tutturulmuş ve maksimize edilmiş arasında geçiş yaparken, her zaman aynı pencere gibi hissedilir.

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 yüzeyler, etkileşimlere tutarlılık getirmek amacıyla aynı şekilde çağrılmalı ve kapatılmalıdır. Her geçişin, bir yüzeyin uyumlu hissettirmesi için diğer öğelerin zamanlamasına, yumuşatma etkisine ve yönüne saygı göstermesi gerekir.

Örnek: Tüm görev çubuğu açılır pencereleri, çağrıldıklarında yukarı kayar ve kapatıldıkları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 çıkarıldığında dağılır. Pencere kenarları, imleç veya dokunmatik girişe bağlı olarak farklı bir görsel çağırır.

Animasyonlu resim. Sol tarafta, bir klavye ayrıldığında görev çubuğu simgeleri yayılır. Sağ tarafta, pencere kenarları, imleç veya dokunmatik girişle değiştirildiğinde farklı görsel efektlere sahiptir.

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.

Bir uygulama simgesinin pencere simge durumuna küçültüldüğünde aşağı indiğini ve pencere geri yüklendiğinde geri geldiğini gösteren animasyonlu resim.

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

Becerikli: 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 3 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 simgesi

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Usage

Animasyon özellikleri

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

Amaç	Definition	Kolaylık	Zamanlama	Kullanım Amacı
Doğrudan Giriş	Hızlı – In	cubic-bezier(0,0,0,1)	167, 250, 333	Konum, Ölçek, Döndürme
Varolan Öğeler	Noktadan Noktaya	cubic-bezier(0.55,0.55,0,1)	167, 250, 333ms	Konum, Ölçek, Döndürme
Doğrudan Çıkış	Hızlı – Çıkış	cubic-bezier(0,0,0,1)	167ms	Konum, Ölçek, Döndürme (her zaman solma efektiyle kombinleyin)
Nazik Çıkış	Yumuşak – Çıkış	Cubic-bezier(1,0,1,1)	167ms	Konum, Ölçek
En Az Gerekli	Fade – Giriş + Çıkış	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 Kare 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

bu Windows 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ı surface içindeki 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

Bir sayfa veya yüzey içinde belirli bilgi parçalarını vurgularken bağlamı korumak için bağlantı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.

Microsoft Store uygulamasının bir sayfasında yakınlaştırma animasyonu gösteren bir resmin animasyonlu görüntüsü.

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

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

Animasyonlu simgeler kullanarak, hareketli ve hafif vektör tabanlı simgeler ve çizimleri Lottie animasyonları ile uygulayın.

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

Animasyonlu simge denetimlerinin çeşitli örneklerini içeren bir kılavuz gösteren animasyonlu resim.

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