pustaka JavaScript lawatan produk untuk apl bahagian hadapan

Ditulis oleh Abiola Farounbi✏️

Aplikasi web moden biasanya padat dengan banyak ciri dan kes penggunaan. Walau bagaimanapun, cara anda mempersembahkan ciri ini, terutamanya untuk pengguna kali pertama dan ciri baharu atau dikemas kini, boleh memberi kesan yang ketara kepada pengalaman pengguna.

Pengguna mungkin berasa terharu atau mendapati navigasi tidak jelas jika proses onboarding tidak dilakukan dengan betul. Satu kaedah yang berkesan untuk mencapai proses onboarding yang lancar dan meningkatkan kepuasan pengguna adalah melalui penggunaan lawatan produk.

Nasib baik, terdapat banyak perpustakaan pelancongan produk yang tersedia untuk membantu anda membina lawatan berpandu yang bermaklumat dan menarik untuk permohonan anda. Dalam artikel ini, kami akan meneroka beberapa perpustakaan pelancongan terbaik yang tersedia, membincangkan ciri, kebaikan, keburukan dan kes penggunaannya untuk membantu memaklumkan pilihan anda.

Mengapa menggunakan perpustakaan pelancongan produk?

Lawatan produk adalah cara berstruktur dan interaktif untuk membiasakan pengguna anda dengan ciri dan fungsi utama aplikasi. Menggunakan satu siri elemen pada skrin, modal atau petua alat, anda boleh membimbing pengguna melalui ciri produk dengan lancar. Ini membantu meningkatkan UX keseluruhan dan meningkatkan penglibatan pengguna.

Terdapat banyak perpustakaan percuma dan sumber terbuka tersedia untuk membantu anda melaksanakan lawatan produk. Walaupun mungkin menggoda untuk membina lawatan tersuai dari awal, realitinya ialah berbuat demikian boleh menjadi sangat mahal dari segi masa dan sumber untuk diselenggara dan diulang dari semasa ke semasa.

Ciri penting perpustakaan pelancongan anda harus ada

Apakah yang menjadikan perpustakaan pelancongan "baik"? Sudah tentu, jawapannya mungkin bergantung pada keperluan anda. Walau bagaimanapun, secara amnya, ciri berikut adalah penting untuk dimiliki oleh perpustakaan pelancongan yang baik:

• Pilihan yang fleksibel dan boleh disesuaikan untuk mengawal penampilan dan tingkah laku lawatan mengikut pilihan anda
• Dokumentasi dan rujukan API yang jelas dan luas
• Serasi merentas rangka kerja UI yang berbeza dan menyediakan sokongan untuk penyepaduan mudah
• Sama ada mempunyai analitis terbina dalam atau menyokong penyepaduan dengan alat analitis luaran yang lain
• Sumber terbuka dengan komuniti pengguna dan penyumbang aktif
• Sentiasa diselenggara dan dikemas kini untuk mengikuti trend dan perubahan teknologi

Dengan mengambil kira ciri-ciri penting ini, saya menyemak pelbagai pustaka onboarding pengguna dan memilih tujuh teratas untuk dibincangkan dalam artikel ini:

• Intro.js
• Di atas kapal
• Lawatan Bootstrap
• Driver.js
• TourGuide.js
• Mengalir
• Gembala

Sekarang, mari lihat huraian terperinci setiap perpustakaan bersama-sama dengan contoh praktikal yang mempamerkan ciri mereka dan membantu anda memilih yang paling sesuai dengan keperluan projek anda.

Intro.js

Intro.js ialah perpustakaan JavaScript sumber terbuka yang menyediakan cara mudah untuk membuat lawatan produk yang ringkas dan berkesan. Ia mempunyai anggaran saiz fail 12.5 KB, jadi ia adalah perpustakaan ringan yang memudahkan pembinaan panduan ringkas: Salah satu ciri utama Intro.js ialah kebolehubahsuaiannya. Ia membolehkan anda menyesuaikan lawatan anda agar sejajar dengan penjenamaan aplikasi anda dengan menawarkan pelbagai tema dan elemen boleh disesuaikan, seperti warna, fon dan kedudukan.

Selepas menyepadukan Intro.js ke dalam projek anda, anda boleh menetapkan elemen tertentu pada halaman web anda sebagai langkah lawatan. Semasa lawatan, Intro.js menyerlahkan elemen ini dan menyediakan tindanan teks bermaklumat atau petua alat untuk membimbing pengguna anda melalui aplikasi. Pengguna boleh menavigasi lawatan mengikut kadar mereka sendiri menggunakan butang intuitif untuk bergerak ke hadapan, ke belakang atau keluar dari lawatan.

Intro.js menyediakan pembungkus rangka kerja bahagian hadapan siap sedia yang memudahkan penggunaannya dalam projek yang dibina di atas rangka kerja React, Angular atau Vue.js yang popular. Ia juga mempunyai rujukan dokumentasi yang baik dan contoh yang boleh digunakan semula.

Walaupun Intro.js mungkin kekurangan beberapa ciri lanjutan, kesederhanaan dan kemudahan penggunaannya menjadikannya pilihan terbaik untuk projek yang memerlukan penyelesaian onboarding yang cepat dan cekap. Perlu diingat bahawa peringkat percuma Intro.js mengehadkan penggunaan komersial, manakala lesen berbayar untuk projek komersial bermula pada $9.99.

Onborda

Onborda ialah perpustakaan JavaScript yang ringan untuk membuat lawatan produk interaktif dalam aplikasi Next.js. Ia menggunakan alat bahagian hadapan yang popular seperti Framer Motion untuk animasi lancar dan CSS Tailwind untuk penggayaan: Onborda menggunakan komponen penyedia untuk mengurus keseluruhan pengalaman lawatan. Anda mentakrifkan satu siri "langkah" dalam aplikasi Next.js anda, dengan menyatakan elemen yang anda ingin serlahkan dan kandungan yang anda ingin sampaikan kepada pengguna. Onborda kemudiannya menguruskan persembahan lawatan dengan animasi dan petua alatnya, membimbing pengguna melalui fungsi utama aplikasi anda.

Walau bagaimanapun, adalah penting untuk mempertimbangkan bahawa Onborda direka terutamanya untuk Next.js. Mengintegrasikannya dengan rangka kerja lain mungkin memerlukan usaha tambahan.

Selain itu, sebagai perpustakaan yang lebih baharu, Onborda mungkin mempunyai komuniti yang lebih kecil dan kurang dokumentasi berbanding pilihan yang lebih mantap. Memutuskan sama ada Onborda sesuai untuk projek anda bergantung pada keperluan khusus dan keutamaan rangka kerja anda.

Lawatan Bootstrap

Bootstrap Tour ialah perpustakaan JavaScript sumber terbuka percuma yang dibina khusus untuk membuat lawatan produk dengan popover Bootstrap. Ia merupakan pilihan yang popular untuk pembangun, terutamanya jika anda sedang mengusahakan projek menggunakan komponen dan penggayaan Bootstrap:

Membuat popover Bootstrap semudah memasukkan fail JavaScript dan CSS dalam projek anda. Bootstrap Tour juga disertakan dengan dokumentasi terperinci, yang akan membantu membimbing anda melalui penyediaannya.

Bootstrap Tour membolehkan anda menentukan elemen tertentu pada halaman web anda sebagai langkah lawatan. Semasa lawatan, Bootstrap Tour menggunakan komponen popover Bootstrap untuk memaparkan kandungan bermaklumat bersama elemen yang diserlahkan. Pengguna boleh berinteraksi dengan lawatan menggunakan papan kekunci untuk menavigasi langkah.

Walaupun Bootstrap Tour menawarkan ciri mesra pengguna, salah satu kelemahannya ialah dokumentasinya yang lemah — yang, pada masa ini, tidak dikemas kini secara aktif. Bilangan tinggi isu yang tidak dapat diselesaikan pada GitHub merupakan petunjuk jelas tentang sokongan komuniti yang minimum.

Driver.js

Driver.js ialah perpustakaan JavaScript berkuasa yang dibina dengan TypeScript untuk kebolehselenggaraan yang lebih baik. Ia ringan mengikut reka bentuk, tanpa pergantungan pada perpustakaan luar, jadi mudah untuk disepadukan ke dalam projek sedia ada dan berfungsi dengan impak minimum pada prestasi: Driver.js melangkaui penyerlahan mudah — ia menawarkan tahap penyesuaian yang tinggi agar sesuai dengan spesifik anda kes guna. Anda boleh menentukan dengan tepat cara elemen diserlahkan, dengan keupayaan untuk memanipulasinya semasa peralihan fokus menggunakan cangkuk yang disediakan.

Selain itu, Driver.js disertakan dengan beberapa contoh yang disediakan yang memberi anda pilihan berbeza untuk digunakan dalam menyesuaikan lawatan produk anda. Ia juga menyokong navigasi papan kekunci mesra pengguna dan sumber terbuka, dengan lesen MIT yang permisif untuk kegunaan percuma dalam kedua-dua projek peribadi dan komersial.

Saya harus ambil perhatian di sini bahawa Driver.js adalah rangka kerja-agnostik, yang menjadikannya agak fleksibel dan mampu berfungsi dengan baik dengan rangka kerja yang berbeza. Walau bagaimanapun, walaupun ia disepadukan sepenuhnya dengan rangka kerja bahagian hadapan yang berbeza, ia tidak mempunyai komponen pelancongan khusus rangka kerja terbina di dalamnya.

Ini mungkin memerlukan masa pembangunan tambahan untuk sesiapa sahaja yang mencari prosedur persediaan yang lebih mudah. Sebagai perbandingan, perpustakaan yang menyediakan fungsi drag-and-drop atau komponen pelancongan khusus rangka kerja mungkin membolehkan anda disediakan dengan lebih cepat.

Untuk panduan yang lebih mendalam tentang Driver.js, lihat tutorial Driver.js kami.

TourGuide.js

TourGuide telah dibangunkan sebagai perpustakaan eksperimen untuk membina lawatan pengguna yang boleh disesuaikan dan perjalanan onboarding dalam aplikasi satu halaman. Ia melaksanakan banyak kaedah didorong janji dengan panggil balik, yang membantu menjamin sokongan untuk operasi tak segerak dan membolehkan kawalan yang lebih terperinci ke atas aliran lawatan: Satu ciri unik tentang perpustakaan ini ialah ia bergantung pada perpustakaan UI Terapung. UI Terapung menyediakan pelbagai ciri penentududukan yang boleh anda gunakan untuk melabuhkan elemen antara satu sama lain — contohnya, meletakkan elemen terapung secara mutlak di sebelah elemen rujukan.

Pustaka TourGuide menawarkan pelbagai pilihan penyesuaian, membolehkan anda mentakrifkan segala-galanya daripada skema warna dan fon kepada kedudukan elemen. Anda juga boleh memasukkan kandungan HTML tersuai dalam langkah lawatan anda, memastikan pengalaman onboarding yang disesuaikan sepenuhnya yang disepadukan dengan lancar dengan reka bentuk aplikasi anda.

Tambahan pula, TourGuide.js merangkumi pembangunan sumber terbuka, memupuk komuniti kolaboratif dan penambahbaikan berterusan. Ini juga memberi anda kebebasan untuk menggunakan perpustakaan dalam kedua-dua projek komersial dan peribadi tanpa sebarang sekatan.

Walaupun TourGuide.js beroperasi untuk pengeluaran, ia masih dalam pembangunan, yang berpotensi mengakibatkan dokumentasi yang kurang komprehensif berbanding dengan beberapa perpustakaan alternatif.

mengalir

Flows ialah alat tersendiri yang direka untuk mencipta lawatan produk dan pengalaman onboarding pengguna dalam aplikasi web. Ia menyediakan editor WYSIWYG untuk membina aliran secara visual dan menawarkan pilihan untuk mentakrifkannya secara langsung dalam pangkalan kod anda menggunakan SDK, memenuhi keperluan pembangun dengan pilihan yang berbeza: Editor Flows memudahkan proses mencipta aliran dengan panduan visual dan hidup dalam- pratonton apl. Pustaka ini menekankan onboarding dipacu pengguna dengan mempraktikkan kelajuan, fleksibiliti, kebolehpercayaan dan reka bentuk. Dengan kata lain, anda boleh membuat dan menggunakan aliran onboarding dalam sekelip mata, dan pengguna anda tidak perlu menunggu.

Lebih daripada sekadar petua alat dan modal asas, Flows menawarkan beberapa jenis langkah, termasuk langkah "tunggu" yang menjeda untuk tindakan pengguna dan langkah "bercabang" untuk laluan bersyarat. Ia juga termasuk jenis langkah lanjutan lanjut untuk meningkatkan kefungsian, seperti percabangan bersyarat, panggilan fungsi dan keputusan dikuasakan AI.

Aliran juga termasuk analitis terbina dalam untuk metrik prestasi, seperti paparan, penyiapan dan drop-off, dengan cara yang sangat asli. Anda boleh melanjutkannya lagi untuk disepadukan dengan alatan pihak ketiga untuk paparan yang lebih holistik tentang perjalanan pengguna atau menyesuaikan aliran onboarding anda dengan CSS dan JavaScript untuk memastikan pengalaman jenama yang lancar untuk pembangun.

Walaupun terdapat peringkat percuma yang menyediakan 1000 aliran sebulan, Flows sebaliknya menggunakan harga berasaskan penggunaan. Pengguna volum tinggi akan menghadapi kos yang lebih tinggi, jadi jika anda menjangkakan penggunaan yang berat, anda mungkin mahu melihat pilihan yang lebih menjimatkan kos.

Shepherd.js

Shepherd.js ialah perpustakaan JavaScript ringkas yang bertujuan untuk memudahkan proses membuat lawatan pengguna dalam aplikasi web. Ia mempunyai antara muka yang jelas dan intuitif di mana anda menerangkan langkah demi langkah lawatan anda, yang membantu meningkatkan UX pelancongan dan meningkatkan pemahaman pengguna: Shepherd.js menawarkan pilihan penyesuaian yang meluas dan penyepaduan yang lancar dengan aplikasi anda. Ia mengutamakan kebolehaksesan dengan navigasi papan kekunci penuh. Seperti TourGuide, Shepherd.js juga menggunakan UI Terapung untuk memaparkan dialog bagi setiap langkah lawatan.

Selain itu, Shepherd.js menawarkan kefungsian rangka kerja-agnostik yang memudahkan untuk disepadukan ke dalam rangka kerja hadapan yang berbeza. Walaupun ia mampu berfungsi secara bebas untuk sebarang rangka kerja, ia juga menawarkan pembungkus khusus rangka kerja yang disertakan dengan lebih banyak fungsi khusus rangka kerja.

Sudah tentu, Shepherd.js — seperti mana-mana perpustakaan — mempunyai beberapa had. Contohnya, ia tidak mempunyai analitik penglibatan pengguna terbina dalam dan mempunyai keluk pembelajaran yang lebih curam berbanding perpustakaan yang lebih ringkas.

Jadual perbandingan perpustakaan lawatan

Apabila memilih perpustakaan pelancongan untuk aplikasi bahagian hadapan anda, pastikan anda membandingkan ciri utama setiap pilihan sebelum membuat keputusan. Di bawah ialah jadual perbandingan yang meringkaskan ciri utama, kebaikan dan keburukan perpustakaan yang kami bincangkan:

Feature/Library	Intro.js	Shepherd	Onborda	Flows	Driver.js	TourGuide.js	Bootstrap Tour
Open source	✅	✅	✅	✅	✅	✅	✅
Community support	Large	Large	Small	Growing	Moderate	Small	Large
Free tier	✅	✅	✅	Up to 1000 flows per month	✅	✅	✅
Ease of use	Very easy	Easy	Moderate	Moderate	Moderate	Moderate	Very easy
Built-in analytics	❌	❌	❌	✅	❌	❌	❌
Framework support	Framework agnostic	Framework agnostic	Designed for Next.js, supports others	Framework agnostic	Framework agnostic	Framework agnostic	Bootstrap-based
Documentation	⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐	⭐
Pros	Simple, lightweight	Highly customizable, flexible	Easy integration, customizable	Intuitive, highly flexible, built-in analytics	Lightweight, flexible	Customizable, framework agnostic	Easy to use with Bootstrap projects
Cons	Limited advanced features	Steeper learning curve for complex customizations	Smaller community, designed for Next.js	Potential costs for high usage	Doesn't have pre-built components for specific frameworks	Limited advanced features, early development	Limited advanced features, requires Bootstrap
Best use cases	Simple onboarding, quick tours	Customizable onboarding for SPAs	Next.js apps, customizable tours	High-customization onboarding	Lightweight, flexible tours	Detailed and complex tours	Bootstrap-based projects

Ikhtisar ini seharusnya membantu anda mengenal pasti pustaka mana yang sesuai dengan keperluan anda dengan cepat.

Kesimpulan

Pengalaman onboard pengguna tapak web atau apl anda adalah penting dalam membentuk tanggapan pertama dan meningkatkan pengekalan pengguna. Memilih perpustakaan pelancongan yang betul untuk aplikasi bahagian hadapan anda memperkasakan anda untuk menghasilkan lawatan yang menarik dan bermaklumat yang membimbing pengguna melalui fungsi produk.

Setiap perpustakaan menawarkan ciri dan faedah unik, memenuhi keutamaan pembangunan dan keperluan projek yang berbeza. Artikel ini memberikan gambaran keseluruhan perbandingan perpustakaan pelancongan terbaik untuk membantu memaklumkan keputusan anda. Pertimbangkan faktor ini dengan berhati-hati untuk memilih pustaka sedia ada pengguna yang memberi kuasa kepada anda untuk mencipta pengalaman pengguna yang lancar dan menarik dari interaksi pertama.

Akhirnya, perpustakaan terbaik bergantung pada keseimbangan antara ciri, kemudahan penggunaan dan belanjawan. Anda juga mungkin ingin mempertimbangkan perpustakaan lawatan produk yang disusun mengikut rangka kerja atau perpustakaan yang anda gunakan dalam projek anda, seperti perpustakaan lawatan produk React atau perpustakaan lawatan produk Vue.

Jika anda mempunyai sebarang pertanyaan, sila hubungi saya di Twitter atau tinggalkan ulasan di bawah. Selamat mengekod!

---

Adakah anda menambah perpustakaan JS baharu untuk membina ciri baharu atau meningkatkan prestasi? Bagaimana jika mereka melakukan sebaliknya?

Tidak syak lagi bahawa bahagian hadapan semakin kompleks. Semasa anda menambahkan perpustakaan JavaScript baharu dan kebergantungan lain pada apl anda, anda memerlukan lebih keterlihatan untuk memastikan pengguna anda tidak menghadapi isu yang tidak diketahui.

LogRocket ialah penyelesaian pemantauan aplikasi bahagian hadapan yang membolehkan anda memainkan semula ralat JavaScript seolah-olah ia berlaku dalam penyemak imbas anda sendiri supaya anda boleh bertindak balas terhadap pepijat dengan lebih berkesan.

LogRocket berfungsi dengan sempurna dengan mana-mana apl, tanpa mengira rangka kerja dan mempunyai pemalam untuk log konteks tambahan daripada Redux, Vuex dan @ngrx/store. Daripada meneka mengapa masalah berlaku, anda boleh mengagregat dan melaporkan tentang keadaan permohonan anda semasa isu berlaku. LogRocket juga memantau prestasi apl anda, melaporkan metrik seperti beban CPU pelanggan, penggunaan memori pelanggan dan banyak lagi.

Bina dengan yakin — mulakan pemantauan secara percuma.

Atas ialah kandungan terperinci pustaka JavaScript lawatan produk untuk apl bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!