Gerakan di Windows
Gerakan menjelaskan cara antarmuka menganimasikan dan merespons interaksi pengguna. Gerakan di Windows reaktif, langsung, dan sesuai konteks. Ini memberikan umpan balik untuk input pengguna dan memperkuat paradigma spasial yang mendukung temuan cara.
Tip
Artikel ini menjelaskan bagaimana bahasa Desain Fasih diterapkan ke aplikasi Windows. Untuk informasi selengkapnya, lihat Desain Fasih - Gerakan.
Prinsip gerakan
Prinsip-prinsip ini memandu penggunaan gerakan di 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.
Tip
Untuk meningkatkan aksesibilitas dan keterbacaan, halaman ini menggunakan gambar diam dalam tampilan default. Anda dapat mengeklik gambar untuk melihat versi animasi.
Konsisten: Elemen harus berulah dengan cara yang sama saat berbagi titik masuk
Permukaan yang memiliki titik masuk UI yang sama harus memanggil dan mengabaikan cara yang sama untuk membawa konsistensi ke interaksi. Setiap transisi harus menghormati waktu, pelingan, dan arah elemen lain sehingga permukaan terasa kohesif.
Contoh: Semua flyout taskbar meluncur ke atas saat dipanggil, dan meluncur ke bawah saat ditutup.
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 dengan tujuan
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 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.
Klik gambar untuk melihatnya dianimasikan.
Contoh
Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub
Penggunaan
Properti animasi
Gerakan Windows cepat, langsung, dan sesuai konteks. Kurva waktu dan pelingan disesuaikan berdasarkan tujuan animasi untuk menciptakan pengalaman yang koheren.
| 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 | Arahkan 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 Kosong | Pudar – Masuk + Keluar | Linier | 83ms | Opacity |
| Pintu Masuk Yang Kuat | Elastis Dalam (3 Keyframe) | (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 |
Kontrol
Rilis Windows ini memperkenalkan interaksi mikro yang sengaja 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.
Klik gambar untuk melihatnya dianimasikan.
Animasi Tersambung: Transisi lapisan-ke-lapisan dalam halaman yang sama
Gunakan animasi yang tersambung 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.
Windows developer