Artikel Pengenalan Wulin.com (www.vevb.com): Ada lebih sedikit artikel yang menggunakan teknologi front-end untuk mendorong pengalaman pengguna. Saya harap artikel ini akan memberi Anda perspektif dan pemikiran baru. Tujuan utamanya adalah berharap bahwa pengguna dapat memiliki pengalaman yang lebih baik.
HUA: Baru -baru ini, saya telah membuat beberapa optimasi ke situs web Carousel. Meskipun tampaknya sederhana, pemikiran dari perspektif pengguna dapat memberi Anda pengalaman yang menarik.
Gambar korsel sangat penting untuk banyak situs web. Mereka menampilkan lebih banyak konten dalam ruang terbatas dan dapat menggunakan efek switching yang mempesona untuk menarik pengguna. Berikut adalah tangkapan layar dari beberapa situs web terkenal:
Tidak sulit untuk menggunakan JavaScript teknologi front-end untuk membuat gambar korsel. Pertama, kita perlu menerapkan 3 fungsi dasar:
1. Gambar dimainkan secara siklis pada interval waktu tertentu;
2. Loop navigasi digital dengan gambar;
3. Tampilan gambar kontrol navigasi digital;
Apakah Anda merasa tidak bahagia setelah pengalaman? Misalnya, ketika mouse bergerak ke dalam gambar dan hanya ingin melihat detailnya dengan jelas, Anda melompat ke gambar berikutnya. Ya, ini sangat berbahaya bagi perasaan pengguna. Cara menyelesaikannya, prinsipnya sangat sederhana. Pindahkan tikus ke dalam gambar dan jeda korsel, dan mouse keluar dari tikus untuk melanjutkan korsel.
Meskipun banyak situs web telah menerapkan fungsi ini, ada masalah tanpa kecuali - ketika mouse keluar dari gambar, masih perlu menunggu selama beberapa detik sebelum melompat ke gambar berikutnya. Apakah pengalaman ini masuk akal? Dari perspektif pengguna, ketika pengguna selesai melihat, mouse memindahkan gambar, dan logika yang masuk akal adalah untuk segera melompat ke gambar berikutnya; Dari perspektif produk atau operasional, mereka juga berharap bahwa pengguna dapat melihat lebih banyak gambar iklan.
Ukuran gambar korsel dari beberapa situs web seringkali relatif besar, terutama situs web e-commerce. Untuk menarik perhatian pengguna dan menciptakan suasana yang bahagia, ini masuk akal. Namun, gambar korsel menjadi lebih besar dan ruang yang ditempati oleh layar pertama akan menjadi lebih besar. Ketika pengguna beroperasi di halaman, ia mungkin secara tidak sengaja meluncur di atas gambar dan kemudian meluncur keluar gambar. Proses ini sangat singkat. Jika metode yang sesuai segera menanggapi metode yang sesuai menyebabkan halaman terjadi atau tidak berubah, itu akan menyebabkan kebingungan atau bahkan ketidaknyamanan bagi pengguna. Misalnya, jika pengguna secara tidak sengaja meluncur masuk dan keluar dari gambar korsel berkali -kali selama periode waktu tertentu, respons gambar korsel dijeda dan tetap pada gambar tetap, yang akan membuat pengguna merasa bahwa korsel tidak valid.
Oleh karena itu, mekanisme toleransi kesalahan diperlukan untuk situasi ini, yaitu respons yang tertunda. Jika Anda menemukan bahwa pengguna hanya bergerak secara instan, itu tidak akan merespons, sama seperti mouse tidak pernah melewati gambar; Ketika mouse tetap dalam gambar untuk jangka waktu tertentu, diyakini bahwa pengguna benar -benar perlu melihat gambar, dan metode yang sesuai akan merespons. Waktu tunda ini umumnya dianggap tidak kurang dari 200 ms.
Singkatnya, ada dua poin untuk mengimplementasikan fungsi pengalaman yang ditingkatkan:
4. Pindahkan gambar ke atas dan jeda. Setelah memindahkan gambar, lompat ke gambar berikutnya segera dan terus ke Carousel;
5. Tikus merespons setelah penundaan;
Setelah banyak mengeluh, mari kita lihat kode. Siswa non-akhir mungkin berpikir bahwa menerapkan dua fungsi di atas membutuhkan banyak kode, tetapi sebenarnya mereka hanya beberapa baris:
Meskipun tidak ada banyak kode, masih ada beberapa teknik dasar, seperti kontrol boolean di kotak merah adalah kunci untuk fungsi penundaan.
Setelah menulis ini, pengalaman pengguna tampaknya cukup bagus, jadi apakah masih ada ruang untuk optimasi? Lai
Kecepatan internet China berada di peringkat kedua di dunia, dan bahkan di banyak tempat kecepatan internet sekitar 1m, jadi penting juga untuk meningkatkan pengalaman pengguna kecepatan internet berkecepatan rendah. Memuat gambar korsel sesuai permintaan adalah salah satu metode. Saat Anda melompat ke gambar yang sesuai, Anda dapat mengunduh gambar yang diperlukan. Ini adalah satu -satunya cara untuk mempercepat tampilan gambar dan menyimpan lalu lintas. Tapi semuanya memiliki dua sisi, dengan kelebihan dan kekurangan, lihat gambarnya:
Ini harus menjadi gambar yang sering Anda lihat. Proses pemuatan gambar terpapar pada pengguna, yang sangat jelas pada kecepatan jaringan yang rendah. Metode untuk menebus cacat ini juga sangat sederhana - gambar dimuat sebelumnya dan prompt ikon menunggu diberikan saat memuat, dan terus melihat gambar:
Preloading dapat memungkinkan gambar untuk ditampilkan sepenuhnya pada satu waktu tanpa mengekspos proses pemuatan, sehingga memberi pengguna ekspektasi yang masuk akal.
Dua pengalaman yang ditingkatkan yang akhirnya diterapkan adalah sebagai berikut:
6. Gambar dimuat sesuai kebutuhan;
7. Gambar dimuat sebelumnya dan prompt ikon menunggu diberikan selama proses pemuatan.
Siswa dapat mengklik di sini untuk mengalami efek gambar carousel yang disempurnakan.
Ada beberapa artikel yang menggunakan teknologi front-end untuk mendorong pengalaman pengguna. Saya harap artikel ini akan memberi Anda perspektif dan pemikiran baru. Tujuan utamanya adalah berharap bahwa pengguna dapat memiliki pengalaman yang lebih baik.