Cara Membuat Animasi Pemuatan Kustom untuk Menurunkan Rasio Pentalan

Awalnya dikenal sebagai throbber, animasi pemuatan digunakan untuk menunjukkan kemajuan pengumpulan data atau rendering antarmuka. Meskipun Anda pernah bisa menggunakan bilah kemajuan yang membosankan untuk menunjukkan ini, hari-hari itu hilang.

Hari ini, animasi yang dibuat dengan baik yang memanfaatkan CSS, jQuery, atau GIF animasi sederhana adalah peluang untuk memeriahkan antarmuka Anda dan menambahkan kepribadian ke produk Anda.

Animasi yang bijaksana dapat menghibur pengguna Anda saat mereka menunggu konten Anda dimuat. Animasi pemuatan yang baik membantu mengelola ekspektasi dan meningkatkan pengalaman pengguna dengan mempertahankan minat.

Dalam tutorial ini, kita akan menggunakan Sketch untuk membuat bentuk dasar dan Prinsip untuk membuat animasi pemuatan kustom sederhana dengan cepat. (Kedua aplikasi ini untuk Mac.) Anda akan belajar cara membuat animasi pemuatan warna-warni yang digunakan oleh Trello, Flickr, Slack, dan banyak lagi.

Mari kita lakukan.

Animasi Slack Loading

Di Sketch, lacak empat kotak bulat dengan sisi 50px, atau radius 100px masing-masing. Mereka seharusnya terlihat seperti lingkaran sempurna, tetapi kami menggunakan kotak dengan sudut membulat untuk membuat efek peregangan garis dalam animasi.

Tempatkan keempat bentuk sedemikian rupa untuk membuat persegi imajiner dengan ruang 150px di antara setiap sisinya. Terapkan empat warna berbeda (#35BA90 hijau, #69CADD biru, #EBA900 kuning, dan #E20661 pink).

Impor bentuk ke Prinsip, kelompokkan, dan klik "Buat Komponen" untuk membuat sarang grup.

Masuk ke dalam grup bersarang dan putar artboard sebanyak 15 derajat. Kemudian pilih setiap lingkaran individu dan putar kembali ke posisi semula (mundur 15 derajat). Ini menciptakan efek peregangan dalam garis lurus.

Terapkan pemicu "Otomatis" ke artboard, lalu rentangkan setiap persegi panjang bulat ke sisi berlawanan dari artboard hingga panjang 295px. Berikan opacity 75% untuk setiap bentuk di kedua artboards.

Terapkan pemicu "Otomatis" lainnya ke artboard kedua. Pada artboard baru, kurangi setiap baris ke lebar aslinya 50px, tetapi di sisi yang berlawanan dari posisi aslinya.

Tautkan artboard terakhir ke yang pertama dengan pemicu "Otomatis". Klik tombol "Kembali ke Orang Tua" untuk melihat pratinjau hasil akhirnya.

Tip: Saat Anda membuka "Kembali ke Orang Tua", Anda dapat memutar grup utama sebesar -30 derajat agar lebih terlihat seperti Slack. Selain itu, Anda dapat mengubah kecepatan animasi di dalam panel "Animate" dan menerapkan efek "Ease Both" untuk memperlancar transisi.

Trello Memuat Animasi

Menggunakan Sketch, lacak kotak biru 100px. Gambarlah persegi panjang putih dengan lebar 60px dan tinggi 140px. Sejajarkan dengan kiri atas kotak sebelumnya dengan margin atas dan kiri 30px. Gandakan persegi panjang putih itu, sejajarkan ke kanan persegi dengan margin kanan 30px, dan kurangi tingginya menjadi 70px.

Impor artboard ke dalam Prinsip dan terapkan pemicu "Otomatis" untuk membuat bingkai utama baru. Pada art-board baru, balikkan tinggi persegi panjang putih (buat persegi panjang kiri setinggi 70px dan persegi panjang kanan 140px). Terapkan efek "Kemudahan-Keduanya" di panel "Animate" untuk memperlancar transisi.

Lingkaran bergulir

Lacak lingkaran di Sketch. Terapkan batas 10px dengan nilai "Dash" dan "Gap" dan tanpa isian. Gunakan warna "Angular Gradient" untuk batas yang akan menonjolkan efek rotasi yang akan Anda buat nanti.

Buka file Prinsip baru dan gunakan tombol "Impor" untuk mentransfer lingkaran dari Sketch. Terapkan dua pemicu "Otomatis" berturut-turut.

Untuk membuat efek rotasi, pilih lingkaran di artboard tengah dan ubah nilai "Sudut" menjadi 360 derajat. Kemudian pilih lingkaran ketiga dan berikan nama yang berbeda (yaitu, "salin") di dalam panel kiri. Ini akan memalsukan rotasi tak terbatas.

Terakhir, tautkan kembali artboard ketiga ke yang awal dengan pemicu "Otomatis" lainnya. Terapkan transisi "Linear" ke garis waktu antara artboards 1 dan 2. Periksa animasi yang baru saja Anda buat di jendela pratinjau.

Flickr Memuat Animasi

Lacak lingkaran biru dan lingkaran merah muda berdampingan. Impor mereka ke dalam Prinsip dan terapkan pemicu "Otomatis" untuk membuat artboard baru.

Balikkan posisi lingkaran dan terapkan pemicu "Otomatis" baru untuk membuat artboard ketiga. Pada artboard baru itu, balikkan urutan layer lingkaran di panel kiri.

Terapkan pemicu "Otomatis" ketiga untuk membuat artboard keempat. Pada artboard terakhir itu, balikkan posisi lingkaran sekali lagi, dan terapkan pemicu "Otomatis" terakhir dari artboard terakhir kembali ke yang awal.

Memuat Jenis

Buat proyek baru di Prinsip, dan menggunakan alat Teks, tulis "LOADING." Sejajarkan teks ke kiri dan tengahkan secara vertikal di artboard.

Terapkan pemicu "Otomatis" lima kali berturut-turut. Minta pemicu kelima dari loop artboard terakhir kembali ke artboard awal.

Mulai dari artboard awal dan bergerak ke kanan, edit teks pada setiap artboard untuk menambahkan titik nol, satu, dua, tiga, dua, dan satu, masing-masing, di sebelah teks asli “LOADING”. Perkembangan artboards akan terlihat seperti ini:

Memuat memuat. Memuat.. Memuat… Memuat.. Memuat.

Sekarang Anda dapat melihat pratinjau animasi yang baru saja Anda buat.

Titik-titik berdenyut

Lacak titik 60px. Salin dan tempel satu titik lagi dan letakkan 60px di sebelah kanan. Pastikan kedua titik, termasuk celah 60px, terpusat sempurna di artboard Anda.

Terapkan pemicu "Otomatis" empat kali berturut-turut.

Pada artboard kedua, kurangi titik kedua menjadi 30px.

Pada artboard ketiga, kurangi titik kedua menjadi 0px dan titik pertama menjadi 30px.

Pada artboard keempat, skala titik kedua kembali hingga 30px dan kurangi titik pertama menjadi 0px.

Pada artboard kelima, turunkan skala titik pertama ke 30px dan tautkan artboard kembali ke papan pertama dengan pemicu "Otomatis".

Titik Bergulir

Tempatkan lima titik dalam susunan yang akan Anda temukan pada dadu bersisi enam. Impor artboard ke Prinsip dan pusatkan.

Terapkan pemicu "Otomatis" pada artboard.

Pada artboard baru, putar grup titik sebanyak 360 derajat.

Tautkan artboard kedua kembali ke yang pertama dengan pemicu "Otomatis".

Lingkaran berdenyut

Mulailah dengan lingkaran 50px rata tengah dalam lingkaran 150px yang memiliki batas 5px tetapi tidak ada isian.

Terapkan pemicu "Otomatis" tiga kali berturut-turut.

Pada artboard pertama, skala lingkaran garis ke 50px dan lingkaran dalam ke 10px.

Pada artboard ketiga, skala lingkaran garis hingga 200px dan berikan opacity 0%. Skala lingkaran dalam hingga 150px dan berikan opacity 50%.

Pada artboard terakhir, skala lingkaran dalam hingga 200px dan berikan opacity 0%. Skala lingkaran garis ke 50px dan berikan opacity 25%.

Terapkan pemicu "Otomatis" ke artboard terakhir. Turunkan lingkaran dalam menjadi 10px dengan opacity 50%.

Tautkan artboard terakhir ke yang pertama dengan pemicu "Otomatis".

titik-titik lompat

Sejajarkan tiga lingkaran sempurna dengan tinggi 50px dengan jarak 50px di antaranya.

Terapkan pemicu "Otomatis". Pada artboard kedua, pindahkan lingkaran pertama ke atas sebesar 50px.

Terapkan pemicu "Otomatis" ke papan kedua. Pada artboard ketiga, pilih dua lingkaran pertama dan pindahkan ke atas 50px. Tiga lingkaran harus terletak pada garis diagonal.

Terapkan pemicu "Otomatis" ke papan ketiga. Pada artboard keempat, pindahkan lingkaran pertama ke bawah 50px. Pilih dua lingkaran terakhir dan pindahkan ke atas 50px.

Terapkan pemicu "Otomatis" di papan keempat. Pada artboard kelima, pindahkan dua lingkaran pertama 50px ke bawah. Pilih lingkaran terakhir dan pindahkan ke atas 50px.

Terapkan pemicu "Otomatis" di papan kelima. Pada artboard keenam, pindahkan dua lingkaran terakhir ke bawah 50px.

Terakhir, kembali ke artboard pertama, pindahkan titik pertama 50px ke atas, dan tautkan artboard terakhir ke yang pertama dengan pemicu "Otomatis". Anda dapat melihat pratinjau hasil akhirnya.

Pemuat Klasik

Lacak lingkaran di Sketch, dan berikan batas abu-abu 20px tanpa isian.

Tempelkan salinan lingkaran yang sama di atasnya dan ubah isian salinan ke warna yang berbeda. Untuk contoh ini, kita akan menggunakan warna biru.

Lacak persegi yang tumpang tindih dengan seperempat lingkaran biru. Pindahkan layer persegi panjang di bawah layer lingkaran, dan terapkan "Mask" ke layer persegi panjang.

Pindah ke Prinsip dan impor karya seni Sketsa dengan tombol "Impor".

Terapkan pemicu "Otomatis" ke artboard pertama dan putar lingkaran biru 360 derajat.

Terapkan pemicu "Otomatis" kedua ke artboard kedua. Ganti nama layer lingkaran ketiga yang dihasilkan menjadi "salin" dan tautkan kembali ke artboard pertama dengan pemicu "Otomatis".

Kesimpulan

Setelah Anda berlatih membuat beberapa animasi pemuatan yang terbukti benar ini, Anda akan merasa percaya diri dengan kemampuan Anda untuk membuat animasi unik untuk aplikasi Anda sendiri menggunakan keterampilan yang dipelajari di sini.

Dengan sedikit imajinasi dan alat praktis yang ditemukan di Sketch and Principle, Anda dapat membuat animasi pemuatan unik yang sesuai dengan desain aplikasi Anda dalam hitungan menit. Pengguna Anda akan menghargai tampilan profesional dan indikator ramah bahwa aplikasi Anda bekerja keras.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib