Panduan Reka Bentuk Animasi Web Lengkap

Percaya atau tidak, anda tidak mempunyai banyak masa untuk meyakinkan pelawat laman web anda untuk terus berkeliling. Tingkap anda sebenarnya jauh lebih pendek daripada yang anda sangka.

Pada hakikatnya, ia hanya memerlukan 0.05 saat setelah halaman anda dimuat untuk pengunjung membuat pendapat. Lebih khusus lagi, yang diterjemahkan menjadi 50 milisaat. Sungguh mengejutkan, bukan?

Ok, sebilangan mereka akan pergi. Tetapi orang lain mungkin memilih untuk tinggal.

Kemudian muncul tahap kesan, yang pada dasarnya hanya bertahan selama 10 saat. Sekiranya laman web anda tidak dapat menguruskan yang kukuh, anda akan kehilangan sebahagian besar lalu lintas anda bahkan sebelum mereka memulakan proses penukaran. Mereka hanya untuk menekan butang belakang atau tutup.

Dan jika anda mempunyai harapan untuk memulihkannya, inilah kebenaran yang sukar. 88% daripadanya tidak mungkin kembali ke laman web setelah mengalami pengalaman buruk.

Tetapi, tunggu sebentar. Tugas siapa untuk mengekalkan lalu lintas web setelah mereka tiba di laman web ini?

Sudah tentu, wajar jika menyalahkan pengurus kandungan laman web ini. Dan anda mungkin betul. Tetapi hanya sebahagian.

Ternyata semuanya bermula dengan pereka web. Sebenarnya, satu kajian yang secara meluas meninjau pelbagai maklum balas pengguna membuktikan bahawa 94% yang negatif berkaitan dengan reka bentuk.

Apa maknanya?

Sebagai permulaan, tidak ada jalan keluar dari ini. Tanggungjawab utama terletak pada anda. Sebagai tambahan untuk melaksanakan semua amalan terbaik reka bentuk yang telah kami bahas pada masa lalu, anda harus memakai topi PR dan mempertimbangkan elemen yang berkesan berhubung dengan lalu lintas.

Saya bercakap mengenai perkara seperti animasi web.

Dan mengapa kami mencadangkannya secara khusus?

Baiklah, itulah sesuatu yang akan saya dedahkan sebentar lagi. Panduan ini akan memandu anda melalui semua aspek kritikal dalam animasi web. Tetapi pertama, mari kita meneroka asasnya ...

Asas Animasi Web

Bayangkan watak kartun kegemaran anda berjalan-jalan di skrin. Atau mungkin logo telefon anda menari di sekitar skrin semasa anda menghidupkan semula peranti. Apa persamaan mereka?

Baiklah, kedua-duanya adalah contoh asas animasi.

Animasi pada dasarnya berlaku apabila elemen pegun "dihidupkan". Ia kemudian mula menunjukkan beberapa bentuk pergerakan.

Kami tidak tahu dengan tepat kapan latihan ini bermula. Tetapi, kita mempunyai idea bahawa filem animasi pertama dalam sejarah dibuat lebih dari satu abad yang lalu. Trend telah berkembang secara meluas sejak itu, berkat kemajuan teknologi yang progresif.

Walau bagaimanapun, satu perkara tetap berterusan - prinsip animasi. Sebenarnya, Disney's Ollie Johnston dan Frank Thomas kemudian menulis tentang mereka dalam buku mereka, “Ilusi Kehidupan: Animasi Disney". Inilah senarai lengkap:

  • Rayuan
  • Lukisan pepejal
  • Keterlaluan
  • Masa
  • Tindakan sekunder
  • Arc
  • Perlahan dan perlahankan
  • Ikuti tindakan dan pertindihan
  • Lurus ke depan tindakan dan berpose untuk berpose
  • Pemeringkatan
  • Jangkaan
  • Squash dan regangan

Dua belas masih menyediakan kerangka untuk reka bentuk animasi hari ini, termasuk yang diterbitkan di web sebagai video, WebGL, SVG, CSS, dan GIF.

Sekarang, animasi web boleh menjadi sederhana seperti sorotan yang muncul ketika anda mengarahkan kursor ke surat, ke rangkaian video skrin penuh pelbagai lapisan yang kompleks. Dengan kata lain, anda dapat mengambil pendekatan yang halus, atau memilih untuk melakukan semua dengan animasi dominan yang menjerit perhatian. Semuanya bergantung pada keadaan.

Dan itu menimbulkan persoalan - bilakah anda sepatutnya menggunakan animasi?

Bilakah Anda Perlu Menggunakan Animasi Web?

Sudah tentu, mereka comel. Dan ini pasti merupakan penambahan menarik pada susun atur laman web anda.

Tetapi, anda tahu apa? Tahap keberkesanan mereka seterusnya adalah perkara yang berbeza sama sekali. Oleh itu, semestinya animasi tidak sesuai untuk semua projek laman web. Dan yang paling penting, adalah idea yang tidak baik untuk menggunakannya secara sembarangan.

Kebetulan begitu 46% pengguna dalam talian menilai kredibiliti laman web berdasarkan daya tarikan visual dan estetika keseluruhannya. Anda tidak mampu menyusunnya dengan kerangka animasi yang kurang dirancang. Pada masa yang sama, sangat disayangkan untuk terus kehilangan peluang penukaran emas dengan gagal memanfaatkan animasi.

Oleh itu, bilakah anda harus memanfaatkannya?

Nah, inilah perkara. Animasi web pada dasarnya ideal ketika anda perlu meningkatkan kegunaan dengan mungkin menarik perhatian atau membantu pengguna dalam proses navigasi.

Bagaimana?

Secara amnya, ia memerlukan 2.6 saat agar pengunjung dapat melihat bahagian laman web yang mempengaruhi kesan pertama mereka. Namun, dengan mahir menggunakan animasi, dapat mempercepat dengan segera menarik perhatian mereka ke kawasan yang paling kritikal di laman web ini.

Animasi juga berguna ketika anda ingin mengarahkan pengguna melalui corong penukaran. Bentuk animasi yang muncul, misalnya, akan menjadi strategi yang bijaksana untuk membangun daftar surat. Kemudian ketika menyangkut proses pembelian, Anda mungkin mempertimbangkan untuk memasukkan video. Mereka terbukti dapat meyakinkan 73% daripada pembeli untuk meneruskan dan membeli produk atau perkhidmatan.

Akhirnya, anda boleh menggunakan animasi web semata-mata untuk tujuan estetik. Animasi hiasan yang halus dan lancar dapat meningkatkan daya tarikan visual secara keseluruhan, dan seterusnya mewujudkan hubungan emosi antara pengguna dan antara muka. Dan itulah cara anda meningkatkan tahap penglibatan pengguna secara progresif.

Alat Animasi Web

Bersedia untuk mula membuat animasi web? Sempurna! Tetapi, di mana anda harus bermula?

Bagaimana dengan mencari alat yang mantap untuk mengubah idea anda menjadi animasi sebenar? Syukurlah, ada pelbagai pilihan yang rapi di web, yang dioptimumkan dengan baik untuk pelbagai pengguna dan pelbagai jenis animasi. Apa yang anda pilih untuk projek anda bergantung pada kemahiran anda, objektif utama, anggaran dan jenis laman web yang anda kerjakan.

Yang demikian, berikut adalah beberapa contoh yang menonjol, masing-masing dengan kes penggunaannya yang tersendiri:

  • js
  • Animasi Garisan 3D dengan Three.js
  • js
  • Flubber
  • Animasi warna
  • jqClouds
  • Skrolissimo
  • Cel-animasi
  • js
  • js
  • Animasi CSS3
  • Transformasikan bila
  • js
  • Rellax
  • AOS
  • js
  • ScrollTrigger
  • Skrolanim
  • js
  • js
  • js
  • js
  • Pemegang Rubah
  • Animatelo
  • css
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • Stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • Ramjet
  • Wallop
  • CampurkanItUp
  • css
  • css
  • js
  • Ceaser
  • CSSynth
  • Saffron
  • CSShake
  • css
  • js
  • Roket
  • transit
  • css
  • js
  • Popmotion
  • GSAP oleh GreenSock
  • js
  • js
  • CSS Animate
  • Hari Selasa
  • Shifty
  • js
  • js
  • js
  • js
  • js
  • Tunggu! Haiwan
  • UI Pergerakan
  • js
  • Lazy Line Painter
  • js
  • js
  • js
  • AnijS
  • js
  • Animasi Magic
  • css

Merancang Animasi Web

Kesan hover

Animasi Hover tidak diragukan lagi adalah yang paling mudah di web. Mereka menghidupkan dan menonjolkan elemen terpilih ketika penunjuk bergerak di atasnya. Animasi itu sendiri boleh berlaku dalam pelbagai bentuk - seperti pergeseran ukuran atau perubahan warna.

Caranya di sini adalah dengan menggunakan kesannya dengan lebih berhati-hati. Jika tidak, anda berisiko menonjolkan terlalu banyak elemen, yang kemudiannya akan mengelirukan pengguna.

Sebaiknya simpan beberapa bentuk secara konsisten dengan metodologi di seluruh laman web. Jika butang laman utama anda berubah dari hijau menjadi merah, misalnya, gunakan kerangka yang sama untuk sorotan tambahan di laman web lain.

Latar Belakang Animasi

Menyematkan animasi latar adalah strategi berkesan untuk menambahkan kegembiraan dan semangat ke laman web anda tanpa perlu mengganggu penekanan utama. Anda boleh menggunakan apa sahaja dari video hingga gambar halus yang beralih secara berurutan.

Pendekatan terbaik di sini adalah menjaga perkara yang tersusun dan sederhana. Sekiranya anda memilih untuk mengintegrasikan video, pendekkan video dengan sewajarnya dan pertahankan gelung yang sesuai dengan laman web anda. Kemudian pastikan gerakannya cukup halus untuk menarik perhatian tanpa terlalu banyak pengguna.

Animasi Gaya GIF

GIF patut dipertimbangkan jika anda sangat berminat dengan animasi yang sangat mudah disediakan. Yang biasa mungkin seperti peralihan teks atau badut tersenyum yang tersemat dalam susun atur kandungan anda.

Yang perlu anda buat hanyalah dengan idea yang bernas, dapatkan video atau gambar yang relevan, dan kemudian ubah menjadi GIF yang sempurna dengan menggunakan perisian penyuntingan yang sesuai. Memuat naik hasil ciptaan dalam format GIF menghasilkan animasi seperti video yang memuat secepat gambar kecil.

Animasi Peralihan

Animasi peralihan digunakan untuk memperkenalkan semangat ketika pengguna berpindah dari satu bahagian laman web ke bahagian lain. Mereka serupa dengan animasi tayangan slaid yang muncul ketika anda bergerak dari satu slaid ke slaid yang lain.

Imej kredit: Shutterstock

Untuk hasil yang sempurna, pastikan animasi lancar dan konsisten di seluruh laman web. Mereka juga harus cukup pendek untuk tidak melambatkan proses peralihan yang sebenarnya.

Memuatkan Animasi

Fakta ialah- 47% pengguna dalam talian mengharapkan halaman web anda dimuat dalam masa sekurang-kurangnya 2 saat. Sekiranya anda gagal mencapainya, setiap saat tambahan akan menjadi 7% lebih sedikit penukaran.

Melangkah oleh masa pemuatan purata semasa 22 saat, cukup jelas bahawa memenuhi jangkaan 2 saat agak sukar. Tetapi, anda boleh menyelamatkan sebahagian besar lalu lintas dengan menjadikannya sibuk dengan animasi kerana elemen laman web lain terus dimuat.

Fokus untuk membuat yang sederhana yang cukup ringan untuk memuatkan lalu lintas segera diarahkan ke laman web anda. Mereka harus dirancang untuk memperkenalkan pengunjung secara sistematik kepada jenama dan keseluruhan tema laman web.

Animasi Pencetus Tatal

Kajian penjejakan mata telah membuktikan bahawa pengguna laman web menghabiskan lebih kurang 57% masa mereka berada di bahagian atas. Tetapi, ternyata banyak dari mereka bersedia menatal ke bawah - selagi anda menyediakan struktur dan mekanisme reka bentuk yang baik.

Dan tepat di situlah animasi yang dicetuskan tatal masuk. Mereka beraksi dengan segera pengguna mula menatal untuk mencipta ilusi halaman yang lancar dan tidak putus-putus. Ini adalah kaedah yang bijaksana untuk menghilangkan peralihan yang sebaliknya akan menolak pengguliran.

Navigasi dan Animasi Menu

Mari kita jujur. Pilihan menu mengambil banyak ruang skrin, terutama di laman web yang dinamik secara holistik dengan pelbagai tahap pilihan. Nasib baik, anda boleh memanfaatkan animasi untuk menyembunyikan pilihan, kemudian memaparkannya hanya apabila pengguna mengklik atau melayang di atas butang yang sesuai.

Jenis animasi ini juga melancarkan dan mempermudah proses navigasi dengan memampatkan keseluruhan struktur menjadi pilihan menu yang disambungkan secara visual. Rangka kerja harus dirancang dengan segmen submenu yang muncul secara sistematik setiap kali pengguna mengklik atau menunjukkan pilihan menu overlay.

Galeri dan Tayangan slaid

Mungkin tidak menghairankan bahawa purata perhatian manusia adalah 8 saat- sekurang-kurangnya menurut kajian terbaru yang dilakukan oleh Microsoft. Malah ikan mas mampu bertahan lama daripada individu biasa. Oleh itu, anda boleh yakin bahawa kebanyakan pelawat laman web anda tidak akan cukup gigih untuk mengklik semua item galeri anda.

Tetapi teka apa? Anda boleh memanfaatkan animasi galeri dan tayangan slaid dengan bijak untuk mempamerkan banyak gambar secara automatik, tanpa semestinya memaksa pengguna menavigasi melaluinya.

Perkara yang paling penting di sini adalah masa paparan gambar. Paparan pendek dengan peralihan cepat akan terasa terburu-buru, sementara paparan panjang dengan peralihan perlahan akan berubah menjadi membosankan dan lambat. Dengan itu, rancang susun atur keseluruhan untuk menunjukkan setiap gambar selama kira-kira 5 hingga 8 saat, sebelum beralih ke gambar berikutnya dengan pantas.

Kesimpulan

Secara keseluruhan, anda harus menganalisis animasi berdasarkan sejauh mana mereka meningkatkan pengalaman pengguna. Yang baik harus mencetuskan hubungan emosi dari pengguna atau memudahkan proses navigasi. Sebaliknya, yang sempurna harus dapat mencapai kedua-duanya dengan selesa pada masa yang sama.

Untuk mencapainya, luangkan masa anda untuk menilai secara kritis semua parameter yang relevan semasa anda merancang dan memasukkan animasi ke laman web anda. Dan ingatlah - mudah, ringan dan selaras dengan jenama anda.

gambar header milik Alfrey Davilla | vaneltia

Bogdan Rancea

Bogdan adalah ahli pengasas Inspired Mag, yang telah mengumpulkan hampir 6 tahun pengalaman dalam tempoh ini. Pada masa lapang dia suka belajar muzik klasik dan mendalami seni visual. Dia juga taksub dengan fixies juga. Dia sudah memiliki 5 orang.