Panduan Langkah demi Langkah untuk Animasi UI dengan Prinsip dan Sketsa

Merancang antarmuka UI dengan mempertimbangkan animasi dan transisi adalah cara yang bagus untuk merencanakan pengalaman pengguna (UX) yang lebih baik untuk aplikasi Anda berikutnya. Interaksi mikro animasi adalah cara sempurna untuk merangsang keterlibatan pengguna, di dunia dengan rentang perhatian yang pendek. Inilah sebabnya mengapa Airbnb baru-baru ini memperkenalkan Lottie – “alat open-source baru yang membuat penambahan animasi ke aplikasi asli menjadi mudah.”

Proyek seperti Lottie menunjukkan semakin pentingnya menambahkan gerakan sebagai elemen baru untuk membuat UX yang ditingkatkan untuk aplikasi dan situs web.

Dalam tutorial ini, Anda akan mempelajari teknik animasi UI yang efektif menggunakan Prinsip untuk Mac. Setelah Anda membaca panduan ini, 'akan dapat mengubah maket yang membosankan dan statis menjadi prototipe interaktif untuk memamerkan karya Anda dengan lebih baik. Anda dapat menerapkan apa yang akan Anda pelajari di sini untuk meningkatkan pitch UI dan bidikan Dribbble Anda berikutnya.

Mari kita mulai.

Unduh Sumber Daya Gratis Ini Untuk Mengikuti.

Anda hanya perlu aplikasi Prinsip dan Sketsa untuk mengikuti. Jika Anda belum memilikinya, Anda dapat mengunduh uji coba gratis menggunakan tautan di bawah ini.

• Unduh percobaan Prinsip gratis di sini.

• Unduh uji coba Sketch gratis di sini.

• Unduh file sumber tutorial gratis di sini.

Gambaran Umum Antarmuka Prinsip

Jika Anda terbiasa dengan Mac OS, maka antarmuka Prinsip akan terlihat sangat akrab. Ini memiliki tiga bagian utama: bilah sisi, area desain yang menunjukkan papan seni, dan jendela pratinjau yang dapat Anda ubah ukurannya dan pindahkan.

Memahami Konsep Dasar Animasi Secara Prinsip

Hal ini relatif sederhana untuk menghidupkan dengan Prinsip. Anda tidak perlu memiliki latar belakang animasi untuk memulai. Faktanya, sebagian besar angkat berat diotomatisasi oleh Prinsip, dan Anda hanya perlu fokus pada apa yang memulai animasi (yaitu tombol, tautan, acara gulir), bagaimana animasi dimulai, dan bagaimana itu berakhir.

Untuk membantu Anda mengikuti dengan lebih baik, berikut adalah leksikon singkat istilah yang akan Anda lihat di seluruh panduan.

• Komponen: Komponen adalah sejenis pengelompokan yang membantu memuat elemen dan bahkan animasi. Ini setara dengan "objek pintar" di Photoshop atau "simbol" di Illustrator.
• Pemicu: Cara memulai animasi - yaitu dengan mengetuk, menggulir, mengarahkan, dll. Pada Prinsipnya, pemicu dapat ditentukan dengan memilih elemen apa pun di dalam Prinsip dan mengklik ikon yang muncul di sisi kanannya dengan ikon petir.
• Transisi: Perubahan keadaan dari satu artboard ke artboard lainnya, yaitu menggeser ke kiri atau ke kanan.
• Easing effect: Tingkat kelancaran transisi berdasarkan bagaimana animasi dimulai dan diakhiri.

A. Pemicu Dan Transisi

Langkah pertama untuk menghidupkan dengan Prinsip adalah menyiapkan pemicu (perilaku atau tindakan yang memulai animasi) pada elemen (yaitu tombol, atau tautan), dan untuk mengubah status awal dan/atau akhir (yaitu posisi atau skalanya dari awal sampai akhir animasi).

1. Tentukan status awal: bagaimana elemen UI Anda terlihat di awal sebelum animasi berlangsung.
2. Tentukan pemicu: dengan memilih elemen interaksi dan tindakan mana yang mengaktifkan animasi.
3. Tentukan status akhir: bagaimana elemen ditampilkan di akhir animasi.

Setelah Anda memiliki set animasi, Anda dapat mempratinjaunya di jendela pratinjau.

B. Panjang Animasi Dan Efek Easing

Secara default, Prinsip membuat animasi setengah detik. Terkadang itu tidak cukup untuk melihat efek transisi secara detail. Anda dapat mengubah durasi dan efek “easing” dari panel animasi dengan mengikuti tiga langkah berikut.

1. Buka Panel Animasi: Pilih panah hitam di antara dua papan seni, dan klik tombol "Animate" yang terletak di bilah atas.
2. Memperpanjang panjang animasi: Pindahkan titik akhir garis biru.
3. Terapkan Easing: Pilih semua titik berbentuk berlian, dan pilih "Ease Both" dari dropdown untuk memperlancar transisi.

Apa yang akan Anda Dapatkan?

Video ini menunjukkan kepada Anda apa yang dapat Anda buat setelah Anda melalui tutorial ini. Aplikasi demo menampilkan palet warna Desain Material Google dan memberi Anda lebih banyak detail setelah Anda memilih warna. Anda akan membuat animasi pemuatan, beberapa transisi halaman dengan efek paralaks yang halus, dan penggeser menu.

Pastikan Anda mengunduh file sumber tutorial gratis di sini.

Mari kita mulai.

Beralih Dari File Sketsa Menjadi Prinsip

1. Pindahkan artboard untuk mempersiapkan transisi alami di antara mereka: Misalnya, layar yang digeser dari kanan harus menyentuh tepi kanan layar yang diganti di atas animasi.
2. Setelah file Sketsa Anda siap, masuk ke Prinsip, buat dokumen kosong yang cocok dengan rasio 360x640, dan klik tombol "Impor".

Menghapus Header Layar Untuk Pengguliran yang Mulus

Untuk membuat transisi yang mulus antar halaman, Anda dapat menghapus setiap header kecuali yang pertama. Header awalnya ditambahkan hanya untuk menampilkan tampilan dan nuansa aplikasi. Anda hanya akan menyimpan tajuk di layar "Selamat Datang", dan itu akan berfungsi sebagai bilah tempel dengan menu dan judul aplikasi.

Membuat Animasi Pemuatan - Bentuk

1. Pilih grup bentuk pemuatan, dan klik "Buat Komponen" yang berisi bentuk dan teks pemuatan. Buat Komponen untuk teks di dalam simbol pertama; kami akan menganimasikan teks secara terpisah setelahnya.
2. Pilih bentuk yang dikelompokkan. Pilih pemicu "Ketuk", dan seret dan lepas di atas artboard yang sama untuk membuat duplikat.
3. Artboard kedua mewakili keadaan akhir animasi, dan Anda dapat memutar grup menggunakan properti sudut. Berikan nilai sudut yang berbeda pada “fill” dan “outline” untuk menciptakan efek yang lebih menarik.
4. Untuk menyelesaikan, pilih panah di antara artboard, klik "Animate" untuk membuka "panel animasi", dan ubah durasinya dengan menggeser titik akhir menjadi sekitar 1,00 detik.

Membuat Animasi Pemuatan - Teks

1. Pertama, buat animasi slide-up. Pilih bentuk tombol, dan terapkan peristiwa pemicu "Ketuk". Di artboard baru, pindahkan semua layar ke atas sebesar 640px (sama dengan tinggi artboard saat ini).
2. Sekarang, mari kita buat paralaksnya. Buka artboard sebelumnya, di layar selamat datang, pindahkan bentuk geometris dan teks ke bawah pada nilai Y yang berbeda.
3. Terakhir, di dalam panel animasi, perpanjang timeline, katakan ke 1s. Terapkan efek "Ease Both" ke timeline (pastikan Anda telah memilih semua titik berbentuk berlian, dan klik pada garis biru untuk menerapkan efek ke semua).
4. Pratinjau animasi Anda dan pindahkan bentuknya sampai efek paralaks terlihat bagus untuk Anda.

Membuat Efek Paralaks - Halaman Selamat Datang

1. Pilih komponen pemuatan dan terapkan pemicu "Ketuk" dengan menyeret panah darinya ke mana saja di artboard.
2. Pilih semua layar (dari grup master), dan pindahkan ke atas sebesar 640px. Langkah ini menampilkan layar Selamat Datang pada tampilan.
3. Kembali ke artboard sebelumnya, dan pindahkan bentuk pada layar "Selamat Datang" ke bawah. Ini menciptakan efek geser asinkron yang disebut paralaks.
4. Menyesuaikan animasi dengan menambahkan waktu ke transisi di dalam panel animasi: Pilih panah di antara artboard, lalu seret titik akhir pada garis biru ke sekitar 1 detik.

Membuat Efek Paralaks - Tentang Halaman

1. Pilih tombol panah bawah (pastikan Anda memilih seluruh grup), dan terapkan pemicu "Ketuk" dengan menyeret panah dari mana saja di artboard.
2. Pilih semua layar (dari grup master), dan pindahkan semuanya ke atas sebesar 640px. Langkah ini menampilkan layar Tentang pada tampilan.
3. Kembali ke artboard sebelumnya, dan pindahkan bentuk pada layar "Tentang" ke bawah. Ini menciptakan efek geser asinkron yang disebut paralaks.

Membuat Efek Paralaks - Halaman Warna

1. Terapkan pemicu "Ketuk" ke tombol panah bawah (pastikan Anda memilih seluruh grup), dan itu akan membuat artboard baru.
2. Pada artboard baru, pilih semua layar dan pindahkan ke atas sebesar 640px.
3. Pada artboard sebelumnya, pindahkan warna dan teks ke bawah. Perhatikan bahwa semakin rendah Anda memindahkan objek, semakin lama waktu yang dibutuhkan untuk meluncur kembali, jadi pastikan untuk menggunakan penempatan yang berbeda untuk menciptakan efek yang lebih dinamis.
4. Terakhir, dengan memperpanjang animasi, dan menerapkan "kemudahan keduanya" pada semua garis waktu biru di dalam panel animasi.

Menggeser Halaman Dari Samping - Halaman Pemilihan Warna

1. Terapkan pemicu "Ketuk" ke tombol "Muat Lainnya" pada layar "Warna".
2. Di artboard baru, pindahkan konten "Colors" dan "Selection" ke kiri sebesar 360px (lebar artboard)
3. Kembali ke artboard sebelumnya dan pindahkan konten layar ke arah yang berlawanan - kanan.
4. Perhatikan bahwa Anda juga dapat menganimasikan opasitas layar yang meluncur dari nol persen hingga 100 persen.
5. Mainkan dengan durasi animasi dan efek easing untuk mengubah efek transisi.

Menganimasikan Ikon Menu

1. Perhatikan bahwa setiap lapisan dan bentuk yang memiliki efek (seperti bayangan) dari file asli Sketch diimpor ke Prinsip sebagai gambar. Jika Anda perlu mengedit bentuk di dalam Prinsip, cobalah untuk tidak menambahkan efek khusus apa pun sampai setelah pengimporan.
2. Karena itu, dengan menggunakan ikon yang ada sebagai panduan, gambar tiga persegi panjang tipis, dan kelompokkan untuk membuat ikon menu hamburger. Sekarang, Anda dapat menghapus, atau menyembunyikan ikon menu sebelumnya.
3. Pilih ikon yang baru dibuat, dan terapkan pemicu "ketuk" untuk itu.
4. Di artboard baru, putar persegi panjang atas dan bawah pada ikon menu, pastikan mereka rata tengah, dan berikan opacity nol persen ke tengah.
5. Untuk melihat animasi yang baru saja Anda buat, tautkan kembali ikon menu yang diubah ke artboard pratinjau dengan pemicu "Ketuk", dan ujilah.

Membuat Efek Menu Slider

1. Pada artboard keadaan akhir, pindahkan layar ke kanan hingga tautan menu sejajar di sebelah kiri ikon menu penutup.
2. Pilih semua yang ada di dalam folder "Warna" kecuali konten menu dan latar belakang abu-abu muda, dan kurangi opacity menjadi 25 persen. Animasi akan memudarkan konten halaman untuk fokus pada menu.
3. Perpanjang durasi animasi, dan pergi ke artboard sebelumnya untuk sedikit memindahkan konten menu untuk menciptakan efek yang halus.

Pindah ke Layar Kontak

1. Pada menu yang terbuka, terapkan pemicu "Ketuk" pada tombol "Hubungi Kami".
2. Pada artboard yang baru dibuat, pindahkan semua layar ke atas sebesar 640 px.
3. Kemudian kembali ke artboard pratinjau, dan pindahkan elemen dari halaman "Formulir" ke bawah.
4. Pindahkan elemen pada nilai Y yang berbeda untuk menciptakan efek paralaks.
5. Terakhir, pilih panah di antara artboard, perpanjang panjang animasi dan terapkan "Ease Both" ke garis waktu biru.

Diakhiri dengan halaman Terima Kasih

1. Terapkan pemicu "Ketuk" pada tombol "kirim pesan".
2. Pada artboard baru, pindahkan semua layar ke atas sebesar 640 px.
3. Kemudian kembali ke artboard pratinjau dan pindahkan elemen dari halaman "Konfirmasi" ke bawah.
4. Mainkan dengan skala dan rotasi untuk ikon berwarna untuk menciptakan efek yang lebih dinamis.
5. Pastikan Anda menambahkan panjang animasi untuk lebih memahami efek transisi.

Kesederhanaan Menambahkan Animasi Dengan Prinsip.

Prinsip adalah alat yang fantastis untuk membuat ide interaksi UI Anda menjadi nyata.

Antarmukanya ramah-Mac dan dibuat untuk bekerja dengan mulus dengan file Sketch.

Prinsip mengotomatiskan sebagian besar efek animasi dan transisi untuk Anda. Yang perlu Anda lakukan adalah menerapkan pemicu ke bentuk pada satu artboard, dan mengubah properti apa pun untuk elemen yang ingin Anda animasikan pada artboard terakhir.

Silakan tinggalkan pertanyaan di komentar di bawah. Saya senang untuk menjawab mereka.