Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Gerakan menjelaskan cara antarmuka menganimasikan dan merespons interaksi pengguna. Gerakan di Windows bersifat reaktif, langsung, dan sesuai dengan konteks. Ini memberikan umpan balik untuk input pengguna dan memperkuat paradigma spasial yang mendukung temuan cara.
gambar animasi yang menunjukkan beberapa contoh gerakan dalam antarmuka Windows.
Petunjuk
Artikel ini menjelaskan bagaimana bahasa Fluent Design diterapkan ke aplikasi Windows. Untuk informasi selengkapnya, lihat Desain Fasih - Gerakan.
Prinsip gerakan
Prinsip-prinsip ini memandu penggunaan gerakan dalam Windows.
Tersambung: Elemen tindakan terhubung dengan mulus
Elemen yang mengubah posisi dan ukuran harus terhubung secara visual dari satu status ke status lain, bahkan jika mereka tidak terhubung di bawah tenda. Pengguna dipandu untuk mengikuti elemen dari titik ke titik, menurunkan beban kognitif perubahan status statis.
Contoh: Ketika jendela bertransisi antara mengambang, diciutkan, dan dimaksimalkan, jendela selalu terasa seperti jendela yang sama.
gambar animasi 
Petunjuk
Untuk meningkatkan aksesibilitas dan keterbacaan, halaman ini menggunakan gambar diam dalam tampilan default. Anda dapat mengeklik gambar untuk melihat versi animasi.
Konsisten: Elemen harus berfungsi dengan cara yang sama saat berbagi entry point
Permukaan yang memiliki titik masuk UI yang sama harus memanggil dan menutup dengan cara yang sama untuk memastikan konsistensi dalam interaksi. Setiap transisi harus menghormati waktu, memudahkan, dan arah elemen lain sehingga permukaan terasa kohesif.
Contoh: Semua flyout taskbar meluncur ke atas saat dipanggil, dan meluncur ke bawah saat ditutup.
gambar animasi yang memperlihatkan beberapa permukaan UI Windows berturut-turut, seperti menu Mulai dan panel pencarian. Setiap permukaan meluncur ke atas dari taskbar saat dipanggil, dan meluncur ke bawah saat ditutup, dengan cara yang konsisten.
Klik gambar untuk melihatnya dianimasikan.
Responsif: Sistem merespons dan beradaptasi dengan input dan pilihan pengguna
Indikator yang jelas menunjukkan sistem mengenali dan beradaptasi dengan baik terhadap input, postur, dan orientasi yang berbeda. Aplikasi harus dibangun berdasarkan perilaku OS agar terasa responsif, hidup, dan membantu penggunaan tergantung pada metode input.
Contoh: Ikon taskbar tersebar saat keyboard dilepas. Tepi jendela memanggil visual yang berbeda tergantung pada kursor atau input sentuhan.
Klik gambar untuk melihatnya dianimasikan.
Menyenangkan: Momen sukacita yang tidak terduga yang bermakna
Gerakan menambah kepribadian dan energi pada pengalaman untuk mengubah tindakan sederhana menjadi saat-saat menyenangkan. Momen-momen ini selalu singkat dan sekilas, dan membantu memperkuat tindakan pengguna.
Contoh: Meminimalkan jendela menyebabkan ikon aplikasi memantul ke bawah, sambil memulihkan memantulkan ikon aplikasi ke atas.
Klik gambar untuk melihatnya dianimasikan.
Resourceful: Menggunakan kontrol yang ada untuk menghadirkan konsistensi jika memungkinkan
Hindari animasi kustom jika memungkinkan. Gunakan sumber daya animasi seperti kontrol WinUI 3 untuk transisi halaman, fokus dalam halaman, dan interaksi mikro. Jika Anda tidak dapat menggunakan kontrol WinUI, mimik perilaku OS yang ada berdasarkan tempat titik masuk aplikasi berada.
Contoh:Transisi halaman, animasi yang terhubung, dan ikon animasi adalah kontrol WinUI yang direkomendasikan yang menambahkan gerakan yang menyenangkan dan diperlukan ke aplikasi.
Gambar animasi yang memperlihatkan contoh transisi halaman, animasi terhubung, dan ikon animasi di antarmuka pengguna Windows.
Klik gambar untuk melihatnya dianimasikan.
Contoh
Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.
Penggunaan
Properti animasi
Pergerakan jendela di Windows cepat, langsung, dan sesuai dengan konteks. Kurva timing dan penghalusan disesuaikan berdasarkan tujuan animasi untuk menciptakan pengalaman yang terpadu.
| Tujuan | Definisi | Kemudahan | Waktu | Digunakan Untuk |
|---|---|---|---|---|
| Pintu Masuk Langsung | Cepat – Masuk | Cubic-bezier(0,0,0,1) | 167, 250, 333 | Posisi, Skala, Rotasi |
| Elemen yang Ada | Titik ke Titik | Kubik-bezier(0,55,0,55,0,1) | 167, 250, 333ms | Posisi, Skala, Rotasi |
| Keluar Langsung | Cepat – Keluar | Cubic-bezier(0,0,0,1) | 167ms | Posisi, Skala, Rotasi (SELALU gabungkan dengan pudar keluar) |
| Keluar dengan Lembut | Lembut – Keluar | Cubic-bezier(1,0,1,1) | 167ms | Posisi, Skala |
| Minimum Dasar | Memudar – Muncul + Menghilang | Linier | 83ms | Opasitas |
| Pintu Masuk Yang Kuat | Elastis Masuk (3 Keyframes) | (3 nilai di bawah) | (3 nilai di bawah) | Posisi, Skala |
| Keyframe 1 | Kubik-Bezier(0.85, 0, 0, 1) | 167ms | ||
| Keyframe 2 | Kubik-Bezier(0.85, 0, 0.75, 1) | 167ms | ||
| Keyframe 3 | Kubik-Bezier(0.85, 0, 0, 1) | 333ms |
Pengendalian
Rilis Windows ini memperkenalkan interaksi mikro yang bertujuan dalam kontrol WinUI. Tambahkan kontrol ini ke aplikasi Anda untuk membantu mengatur informasi dengan lebih baik, dan membantu pengguna aplikasi Anda bertransisi dari halaman ke halaman, lapisan ke lapisan, dan status ke status interaksi.
Transisi Halaman: Transisi halaman-ke-halaman dalam permukaan yang sama
Gunakan transisi halaman untuk transisi dengan lancar dari halaman ke halaman, dan konfigurasikan arah animasi untuk menghormati alur aplikasi.
Transisi halaman memandu mata pengguna Anda ke konten masuk dan keluar, menurunkan beban kognitif.
gambar animasi 
Klik gambar untuk melihatnya dianimasikan.
Animasi Tersambung: Transisi lapisan-ke-lapisan dalam halaman yang sama
Gunakan animasi terhubung untuk menyoroti bagian informasi tertentu dalam halaman atau permukaan, sambil mempertahankan konteks.
Animasi yang tersambung memberikan fokus ke elemen yang dipilih, dan transisi yang mulus antara status yang berfokus dan tidak terfokus.
Klik gambar untuk melihatnya dianimasikan.
Ikon Animasi: Menambahkan kelegaan dan mengungkapkan informasi melalui interaksi mikro
Gunakan ikon animasi untuk mengimplementasikan ikon dan ilustrasi berbasis vektor ringan dengan gerakan menggunakan animasi Lottie .
Ikon animasi menarik perhatian ke titik masuk tertentu, memberikan umpan balik dari status ke status, dan menambahkan keseruan ke interaksi.
Klik gambar untuk melihatnya dianimasikan.
Berkolaborasi dengan kami di GitHub
Sumber untuk konten ini dapat ditemukan di GitHub, yang juga dapat Anda gunakan untuk membuat dan meninjau masalah dan menarik permintaan. Untuk informasi selengkapnya, lihat panduan kontributor kami.
Windows developer