Carousels Image dalam Reka Bentuk Web - Manfaat & Amalan Terbaik

Tidak ada kekurangan tayangan slaid ciri karusel di web. Bahkan, trend ini tidak dilakukan kecuali berkembang dalam tempoh 5-10 tahun yang lalu dengan lebih banyak lagi sokongan penyemak imbas sekarang berbanding sebelum ini. Tetapi carousel imej benar-benar bernilai usaha? Apa jenis manfaat yang mereka hasilkan, dan bagaimana mereka harus digunakan secara produktif dalam susun atur?

Saya ingin berkongsi beberapa trend umum, contoh hidup, dan idea untuk pereka web yang berminat dengan carousels imej. Slider dinamik ini banyak diperdebatkan, tetapi saya rasa mereka menambah nilai ketika dibuat dalam konteks yang tepat.

Carousels produk untuk e-dagang

Dunia e-dagang penuh dengan carousels berputar di halaman rumah dan halaman produk. Matlamatnya ialah mengekalkan ketumpatan maklumat yang jelas dengan gambar dan teks itu berikan cerita yang unik namun bernilai untuk membantu menjual produk.

Disana ada dua peletakan utama untuk slider produk e-dagang:

1. Di halaman rumah kedai
2. Pada halaman produk

Mereka berdua bekerja dengan berbeza tetapi melayani matlamat yang sama - untuk menjual produk secara visual.

Contoh 1: Au Lit Fine Linens - halaman rumah

Lihat laman utama untuk Au Lit Fine Linens, itu menggunakan carousel auto-berputar skrin penuh untuk memamerkan produk yang berbeza, seperti duvets, bantal, dan penutup katil.

Imej-imej mengambil lebar penuh halaman rumah, dan mereka kelihatan jauh di atas lipatan. Malah, gelangsar ini harus menjadi perkara pertama untuk menarik perhatian anda apabila pendaratan pertama pada halaman. Setiap slaid membawa kepada halaman yang berbeza di laman web ini membimbing pelanggan melalui pengalaman membeli-belah.

Gelangsar ini boleh menjadi tajam apabila mendarat pertama pada halaman, tetapi dengan pautan butang dan teks tindanan ia juga boleh menjadi sangat menggalakkan untuk pelawat yang hanya mahu menyelam dan berbelanja.

Contoh 2: Kes telefon Eden - halaman produk

Anda boleh melihat contoh yang lebih spesifik di halaman produk kes telefon Eden. Ia menggunakan gelangsar auto berputar untuk memamerkan imej produk.

Saya dapati ini sedikit “terlalu banyak” dalam dunia e-dagang. Apabila melihat produk saya mahu menjadi dalam kawalan beralih antara imej.

Pilihan yang lebih baik adalah melakukan galeri imej dengan kawalan yang diberikan kepada pengunjung. Sebagai contoh, halaman Reka Bentuk oleh Manusia menggunakan thumbnail untuk setiap foto yang lebih menggalakkan, dan memberi lebih banyak kawalan kepada pengguna.

Carousels portfolio web

Portfolio laman web dalam talian agak berbeza kerana slaid ini tidak selalu klik ke halaman lain. Memang benar bahawa sesetengah akan membawa kepada kajian kes atau menulis mengenai projek, tetapi banyak carousels di laman web portfolio hanya dimaksudkan untuk tunjukkan kerja visual.

Contoh 1: Biboun - halaman rumah

Artis Perancis yang bekerja di bawah nama Biboun mempunyai a gelangsar karusel di halaman rumah memaparkan coretan karya seni. Slaid individu membawa kepada halaman dalaman dalam portfolio yang meliputi keseluruhan projek dengan pelbagai foto.

Ini mungkin cara terbaik untuk melakukan slider di laman web portfolio. Hanya mempamerkan senarai kerja secara rawak adalah sia-sia melainkan karya-karya tertentu itu mempunyai sebab untuk dipamerkan.

Semua keping adalah indah di slider Biboun, dan ia tidak mengambil banyak ruang sama ada. Walaupun saya tahu sesetengah orang membenci persembahan slaid auto-berputar untuk alasan yang baik, pada susun atur minimalis saya mempunyai masa yang sukar mengadu mengenai ciri reka bentuk ini.

Contoh 2: laman web Aaron Blaise - laman utama

Saya sangat suka contoh yang ditemui di laman web Aaron Blaise kerana dia mempamerkan kerjanya sebagai satu portfolio, tetapi kebanyakannya menggunakan laman web ini menjual video seninya. Aaron Blaise bekerja di Disney selama beberapa dekad, dan dia mempunyai kemampuan untuk membuktikannya.

Walaupun slider halaman rumah di laman webnya tidak putar auto, saya tidak merasa sangat menjengkelkan atau tidak. Setiap slaid mempunyai sedikit kandungan yang berkaitan dengan imej, dan ia membantu Aaron menarik perhatian kepada pelajaran video terbarunya yang mengajar artis muda bagaimana untuk menguasai kemahiran tertentu.

Carousel portfolio yang hebat memberi tumpuan kepada visual, dan membawa pelawat lebih jauh ke dalam laman web. Jika anda boleh mendapatkan dua perkara ini, saya tidak akan menentang ciri seperti ini dalam laman web portfolio peribadi.

Arah aliran reka bentuk yang biasa

Jika anda melihat beberapa contoh di atas, anda akan melihat terdapat dua jenis slider yang berbeza: skrin penuh dan lebar tetap.

Pilihan gaya ini sering berkaitan dengan susun atur dan berapa kandungan yang boleh dipegangnya. Jika susun atur merangkumi lebar halaman penuh maka masuk akal untuk memperluas slider juga. Tetapi ini juga memaksa anda mencari imej yang berkualiti tinggi yang masih kelihatan baik pada skrin penuh pada monitor resolusi besar.

Saya secara peribadi lebih suka gaya lebar tetap seperti yang anda akan lihat dalam dua contoh portfolio seni. Ini adalah lebih mudah dikawal, dan mereka sering tidak tinggi - menjadikannya mudah bagi pengunjung hanya abaikan mereka jika mereka mahu.

Juga pertimbangkan nilai slaid auto-maju, dan betapa sukarnya bagi pengguna untuk menangkap kandungan ini. Terdapat kajian kes yang hebat oleh Kumpulan Nielsen Norman yang menunjukkan bahawa ia lebih baik tidak mempunyai slider auto-maju.

Saya berada di atas kapal dengan pendekatan ini dalam erti kata itu kurang intensif di ingatan dengan kurang animasi dan gerakan dalam pelayar, dan kebanyakan orang tidak suka karusel auto berputar sama ada - dan anda harus selalu memenuhi khalayak anda.

Walau bagaimanapun, saya tidak boleh mengatakan bahawa ia tidak berbaloi untuk menambah gelangsar auto-maju, terutamanya sejak dengan slider statik anda tidak mendapat banyak pandangan, dan anda juga perlu buat slaid pertama anda yang paling penting kerana ramai pengguna tidak akan meneruskan ke slaid seterusnya. Memutuskan sama ada untuk membuat slider auto-berputar atau tidak, malangnya kawasan percubaan dan kesilapan.

Apa yang harus dielakkan di semua kos

Berikut adalah perkara penting yang saya fikirkan secara peribadi jatuh di bawah “mengelakkan di semua kos”. Lihat atau klik pada tangkapan skrin di bawah, dan cuba meneka apa yang mungkin.

Laman web kafe Yozenn menggunakan slider header skrin penuh. Ia tidak putar auto yang bagus, namun slaid juga tidak berfungsi selain dari dekorasi.

Imej-imej jangan dihubungkan ke mana-mana sahaja, dan mereka memamerkan sebilangan kecil produk. Mereka semua boleh jadi ditambah ke latar belakang laman utama tanpa slider untuk menyelamatkan kekeliruan dan kilobyte JavaScript tambahan.

Saya akan berhujah ciri gelongsor latar ini tidak menambah banyak nilai ke laman web yang sudah sempit. Jika imej mempunyai pautan atau teks yang disertakan, sekurang-kurangnya mereka akan lebih relevan.

Jangan ragu untuk menggunakan imej di bahagian kepala anda yang mengambil halaman penuh, namun jika mereka jangan dihubungkan ke mana-mana atau menawarkan sebarang maklumat tulen maka jangan menjadikannya karusel.

Ciri-ciri interaktif

Cara pengguna menavigasi karusel mempengaruhi reka bentuk itu sendiri. Terdapat a pelbagai gaya navigasi, tetapi ini adalah yang paling popular:

• Navigasi berasaskan dot
• Navigasi anak panah
• Navigasi thumbnail
• Senaraikan pautan atau item tajuk

Yang paling biasa ialah pelayaran dot yang anda akan dapati di beratus-ratus laman web moden.

Contoh 1: Chic at Home - halaman rumah

Chic at Home adalah contoh hebat menggunakan tiga titik kecil di bawah gelangsar untuk menunjukkan navigasi. Setiap imej berputar melalui secara automatik, dan titik yang berkaitan dalam siri ini dipenuhi dengan hitam. Dua lagi titik kosong menandakan potensi slaid untuk pengguna menyemak imbas.

Ini adalah corak reka bentuk yang popular bahawa ramai pengguna sudah mengenali. Ia jatuh ke dalam kategori yang sama dengan menu hamburger yang banyak pereka tidak suka, tetapi pengguna sudah mengenalinya, dan secara naluriah tahu cara menggunakannya.

Contoh 2: Kitaran Murni - halaman rumah

Halaman rumah Cycle Pure menggunakan a gabungan titik dan navigasi anak panah. Dengan cara ini pengguna mempunyai navigasi ke hadapan & belakang, tetapi juga lihat “keseluruhannya” navigasi melalui pautan dot di bahagian bawah.

Saya benar-benar mencari pautan titik dalam contoh ini sukar untuk dilihat. Kesukaran dengan slaid visual adalah bahawa banyak unsur tidak mudah dibezakan, jadi anak panah dan titik boleh mudah digabungkan dengan latar belakang.

Contoh 3: IGN - halaman rumah

Di laman utama IGN anda akan mencari yang lain karusel auto berputar yang menggunakannya pautan tajuk untuk navigasi. Ini sangat biasa bagi penerbit yang mahu menjual tajuk utama bukan produk. Setiap pautan pergi ke slaid individu yang akhirnya membawa kepada halaman artikel.

Pautan ini boleh digantikan dengan lakaran kecil, atau bahkan termasuk lakaran kecil dari setiap cerita - bagaimanapun juga Aspek visual ditunjukkan dalam karusel, jadi tidak menghiraukan thumbnail itu sebenarnya menjimatkan ruang.

Laman web yang berbeza menggunakan gaya navigasi yang berbeza untuk alasan yang berbeza. Pertimbangkan matlamat pelawat anda, dan reka bentuk untuk pengalaman pengguna yang terbaik.

Pengambilan kunci

Anda harus berhasrat untuk menghasilkan nilai tulen, atau maklumat tambahan dengan karusel. Ini mungkin maklumat pengunjung yang tidak mempunyai sebelumnya, atau ia mungkin membawa kepada halaman yang tidak dijumpai pelawat sebaliknya.

Cuba untuk mengelakkan karusel auto berputar, dan hanya gunakannya di halaman pendaratan utama (halaman rumah menjadi satu contoh). Selagi karusel itu mempunyai tujuan, dan tidak kelihatan seperti iklan, Reka bentuk anda perlu dilakukan dengan baik.

Jika anda mencari maklumat lanjut mengenai carousels web, lihat beberapa jawatan berikut:

• Carousels oleh Brad Frost
• 8 Keperluan UX untuk Merancang Carousel Laman Web Mesra-Pengguna
• Keupayaan Carousel: Merancang UI Berkesan untuk Laman Web dengan Beban Kandungan