Gerakan untuk aplikasi Windows

Gerakan fasih melayani tujuan di aplikasi Anda. Ini memberikan umpan balik cerdas berdasarkan perilaku pengguna, menjaga UI tetap hidup, dan memandu navigasi pengguna melalui aplikasi Anda. Gerakan fasih memunculkan koneksi emosional antara pengguna dan pengalaman digital mereka. Kami membangun fondasi gerakan alami yang sudah dipahami pengguna dari dunia fisik, dan kami memperluas sistem kami dari sana.

Contoh

WinUI Gallery

Jika Anda memiliki aplikasi Galeri WinUI 2 yang terinstal , klik di sini untuk membuka aplikasi dan lihat Gerakan sedang beraksi.

Prinsip gerakan fasih

Fisik

Objek bergerak menunjukkan perilaku objek di dunia nyata. Cairan, gerakan responsif membuat pengalaman terasa alami, menciptakan koneksi emosional dan menambah kepribadian.

UI example of physical motion

Ketika Anda berinteraksi dengan UI melalui sentuhan, pergerakan UI terkait langsung dengan kecepatan interaksi. Dan karena sentuhan adalah manipulasi langsung, objek yang berinteraksi dengan Anda memengaruhi objek di sekitarnya.

Fungsional

Gerak melayani tujuan dan memiliki keyakinan. Ini memandu pengguna melalui kompleksitas dan membantu membangun hierarki. Gerakan memberikan kesan performa yang ditingkatkan dan mengoptimalkan pengalaman pengguna dengan menyembunyikan latensi yang dirasakan.

UI example of functional motion

Transisi halaman dibuat khusus. Mereka memberikan petunjuk tentang bagaimana halaman terkait satu sama lain. Mereka bergerak dengan cara yang dirasakan secepat bahkan ketika performa tidak optimal.

Berkelanjutan

Gerakan cairan dari titik ke titik secara alami menarik mata dan memandu pengguna. Ini secara elegan menjahit tugas pengguna, membuatnya terasa lebih mudah dikonsumsi dan ramah.

UI example of continuous motion

Objek dapat melakukan perjalanan dari adegan ke adegan atau morf dalam adegan untuk memberikan kelangsungan dan membantu pengguna mempertahankan konteks.

Kontekstual

Gerakan cerdas memberikan umpan balik kepada pengguna dengan cara yang selaras dengan cara mereka memanipulasi UI. Interaksi berpusat di sekitar pengguna. Gerakan ini terasa sesuai dengan faktor bentuk dan dirancang di sekitar skenario. Ini harus nyaman untuk setiap pengguna.

UI example of contextual motion

Animasi harus mengikat kembali ke interaksi pengguna. Menu konteks disebarkan dari titik di mana pengguna mengaktifkannya.

Artikel gerakan

Waktu dan kemudahan

Waktu dan kemudahan adalah elemen penting yang membuat gerakan terasa alami untuk objek yang masuk, keluar, atau bergerak dalam UI.

Arah dan gravitasi

Sinyal arah membantu memberikan model mental yang solid dari perjalanan yang diambil pengguna di seluruh pengalaman. Gerakan arah tunduk pada kekuatan seperti gravitasi, yang memperkuat nuansa alami gerakan.

Transisi halaman

Transisi halaman menavigasi pengguna antar halaman dalam aplikasi, memberikan umpan balik tentang hubungan antar halaman. Mereka membantu pengguna memahami di mana mereka berada dalam hierarki navigasi.

animasi Koneksi

animasi yang Koneksi memungkinkan Anda membuat pengalaman navigasi yang dinamis dan menarik dengan menganimasikan transisi elemen di antara dua tampilan yang berbeda.