Veb-dizayndagi maxsus kursorlarga kirish: Maslahatlar, g'oyalar + o'quv qo'llanmalari

Hozirgi kunlarda veb-dizayndagi eng katta tendentsiyalardan biri bu maxsus kursorlardir. Bir qarashda, maxsus veb-sayt kursori boshqa stilistik element kabi ko'rinishi mumkin. Ammo bu dizayn kontseptsiyasida yana ko'p narsa bor.

Veb-saytni ish stoli qurilmasidan ko'rishda kursor foydalanuvchi va veb-sayt o'rtasidagi bo'shliqni yopadigan asosiy komponent hisoblanadi. Agar siz yetarlicha ijodkor boʻlsangiz, veb-saytlar bilan oʻzaro taʼsirlashish va qatnashish tezligini hech qachon boʻlmaganidek oshirish uchun ushbu kursordan oʻz foydangiz uchun foydalanishingiz mumkin.

Ushbu qoʻllanmada biz maxsus kursorlar nima haqida ekanligini batafsil koʻrib chiqamiz, Nima uchun ulardan foydalanish kerak va oʻz shaxsiy kursorlaringizni loyihalash boʻyicha bir nechta qoʻllanmalarni taklif qiling.

Keling, boshlaylik.

Envato Elements bilan tanishing

Maxsus kursor nima?

Oddiy qilib aytganda, maxsus kursor sichqoncha kursorining (yoki ko'rsatgichning) standart piktogramma dizaynini o'zgartiradi. Kompyuteringizda tizim sozlamalari yordamida kursorni osongina o'zgartirishingiz mumkin. Veb-sayt dizaynida ham xuddi shunday qilish mumkin, faqat maxsus veb-sayt kursorlari har bir alohida veb-saytga xosdir.

HTML, CSS va biroz JavaScript yordamida siz veb-saytlar uchun noyob kursor dizaynlarini loyihalashingiz mumkin. . Esda qolarli taassurot yaratish uchun kursorni oʻzgartirishingiz, kursorni oʻzgartirish animatsiyalarini qoʻshishingiz, chertish effektlari va boshqa koʻp narsalarni amalga oshirishingiz mumkin.

Ulardan nima uchun foydalaniladi?

Ha, bu asosanuslub va ko'rinish. Biroq, veb-sayt dizaynini yanada jozibali qilish uchun maxsus kursordan foydalanishingiz mumkin.

Animatsiyalar, parallaks effektlari va harakatlanuvchi obyektlar bilan voqea sahifasi uchun ajoyib veb-sayt tajribasini loyihalashni tasavvur qiling. Shunga qaramay, kursor bir xil eski tizim dizayniga ega. Bu haqiqiy kayfiyatni buzuvchi bo'lishi mumkin.

O'rniga, foydalanuvchilarning veb-sayt bilan muloqot qilishini yanada qiziqarli qilish uchun maxsus kursordan foydalanishingiz mumkin. Foydalanuvchilarga qaerga borish va nima qilish kerakligi haqida ko'rsatmalar bering. Va eng muhimi, veb-saytingizni olomondan ajralib turishi uchun.

Maxsus kursor g'oyalari & Misollar

Quyidagi misollar sizga maxsus kursor qanchalik kuchli bo'lishi va ulardan qanday foydalanish haqida fikr beradi.

Mutt agentligi

Ushbu agentlik veb-saytida bo'limga asoslangan veb-sayt dizayni. Uning kursori foydalanuvchilarga saytni osongina boshqarishga yordam berish uchun mukammal tarzda yaratilgan. Agar foydalanuvchi kursorni veb-saytning pastki qismiga olib borganida, u pastga qaragan strelkaga va tepaga o'tganda yuqoriga o'qga o'zgaradi.

Bu foydalanuvchilarni ko'proq narsalarni o'rganishga undash uchun ajoyib yondashuv. veb-sayt. Kursor sehrli tarzda o'qga aylangandan so'ng, nima sodir bo'lishini ko'rish uchun uni bosishga majbur bo'lasiz.

SSSolitaire

Shuningdek, kursorga to'g'ridan-to'g'ri ko'rsatmalar berish uchun maxsus kursordan foydalanishingiz mumkin. foydalanuvchi. Ushbu veb-sayt foydalanuvchiga aniq nima qilish kerakligini aytib berish uchun maxsus animatsion kursordan foydalanadi. Va ergashganingizda nima bo'ladiyo'nalish yana bir ajoyib syurprizdir.

14islands

Agar siz ko'proq ijodiy va eksperimental bo'lishni istasangiz, bitta veb-sayt dizayni davomida turli uslubdagi maxsus kursorlarni sinab ko'rishingiz mumkin. Ushbu agentlik veb-saytida bu qanday amalga oshirilganligi ko'rsatilgan.

U saytning turli bo'limlari uchun bir nechta turli maxsus kursorlardan foydalanadi. Ammo oxiridagi bo'limda eng ijodiy maxsus kursor mavjud. U sichqoncha ko‘rsatgichini markerga aylantiradi va butun veb-sayt bo‘ylab chizish imkonini beradi.

Aleks van der Lit

Maxsus kursorlar foydalanuvchiga harakat qilish mumkin bo‘lgan yo‘nalishlarni berish uchun ham juda mos keladi. Ushbu misolda, Aleks o'zining UX dizayn portfelining turli sohalari asosida o'z belgisini o'zgartiradigan maxsus kursordan foydalanadi.

Havola ustiga sichqonchani olib o'tayotganda kursorni o'rnatish elementi havolaga qulflanadi. Va kursorni keys tadqiqoti ustiga olib borganingizda, u foydalanuvchiga har bir elementni ko‘rish uchun bosish kerakligini aytadi.

MDFF Afina

Boshqa ijodiy tushuncha - bu maxsus kursorni yaratish uchun foydalanishdir. ta'sirini ochib beradi. Ushbu veb-sayt ushbu kontseptsiyaning ekstremal namunasidir, chunki u veb-saytni o'qishni qiyinlashtiradi.

Biroq, siz kattalashtirish effektini yaratish uchun xuddi shu strategiyadan foydalanishingiz mumkin. Masalan, siz foydalanuvchilarga mahsulotning muayyan qismlarini kattalashtirish uchun mahsulot tasviri ustiga kursorni olib borishiga ruxsat berishingiz mumkin.

PPP

Ushbu veb-sayt biz uchun eng noyob maxsus kursorlardan biriga ega. ko‘rganman. Unda iz qoldiradigan rangli jonlantirilgan kursor mavjudkursorni harakatlantirganda. Bu deyarli rang-barang ilonga o'xshaydi.

U sizga maxsus kursor dizayni bilan qanchalik uzoqqa borishingiz mumkinligi haqida tasavvur beradi.

Maxsus veb-sayt kursorlarini loyihalash bo'yicha maslahatlar

Sizdan oldin maxsus kursorlarni loyihalashni boshlang, haddan tashqari oshirib yubormaslik uchun ushbu maslahat va ko'rsatmalarga amal qilishni unutmang.

O'zaro ta'sirga e'tibor qarating

Maxsus kursordan foydalanishning asosiy maqsadi quyidagilardan iborat bo'lishi kerak. ko'proq o'zaro ta'sirlarni hosil qiladi. Ko'proq ko'rish uchun foydalanuvchilarni havola yoki rasm ustiga bosishga undash kabi.

Kursorni butunlay stilistik qilish o'rniga, foydalanuvchi tajribasini yaxshilaydigan kursorlarni loyihalashga e'tibor qarating.

Bir nechta kursor dizaynlaridan foydalaning

Kichik matnli havolani bosish kerak bo'lmaguncha, g'alati shakllar bilan katta maxsus kursor dizaynlaridan foydalanish juda qiziqarli va o'yin. Yaxshi amaliyot - bir nechta maxsus kursorlardan foydalanish, ayniqsa menyu bo'limlari uchun oddiyroq ko'rsatgichni qo'shish.

Bu foydalanuvchilarga ulkan blob kursori yordamida to'g'ri havolani bosishga urinishdan umidsizlikdan qochishga yordam beradi.

Ulardan qachon foydalanishni biling

Maxsus kursorlar barcha turdagi veb-saytlar uchun mos emas. Uber, Airbnb, Shopify kabi yirik brend, korporativ va elektron tijorat veb-saytlari hech qachon maxsus kursor dizaynidan foydalanmasligining sababi bor.

Asosan, bu yirik brendlar turli mintaqalar uchun bir nechta veb-saytlarga ega va ular barcha veb-saytlarda izchil dizayn.

Shuningdek, foydalanishnotijorat veb-saytlardagi maxsus kursorlar ham juda o'ylamasdan bo'lishi mumkin. Ulardan qachon va qayerda foydalanayotganingizga e'tibor bering.

Mobil qurilmada o'chirib qo'ying

Maxsus kursorlar kichikroq ekranlarda yaxshi ishlamaydi. Mobil telefonda veb-saytni ko'rish uchun surganingizda, maxsus kursor shunchaki yopishib qoladi va foydalanuvchi tajribasiga xalaqit beradi. Shuning uchun mobil ko'rinishda maxsus kursorni o'chirishni unutmang.

Maxsus kursorni qanday qilish kerak

Maxsus veb-sayt kursorlarini loyihalashda bir nechta yondashuvlar mavjud. Siz oddiyroq kursor dizaynlarini yaratish uchun CSS-dan foydalanishingiz mumkin. Yoki JavaScript-ni aralashtirib, yanada ilg‘or kursorlarni animatsiya va effektlar bilan loyihalashtiring.

CSS-dagi kursor xususiyati maxsus veb-sayt kursorlarini loyihalashda qo‘llashingiz mumkin bo‘lgan eng oddiy yondashuv bo‘lib, u bilan ishlashingiz uchun juda ko‘p xususiyat qiymatlari taklif etiladi.

Tajriba va amaliyot uchun ba'zi kod parchalarini olish ancha oson yondashuvdir. CodePen-da siz o'ynashingiz mumkin bo'lgan juda ko'p maxsus kursor kod parchalari mavjud. Yoki Codrops’dan ushbu maxsus kursor effektlari to‘plamidan foydalanib ko‘ring.

Maxsus veb-sayt kursorlari uchun qo‘llanmalar

Agar siz o‘zingizning shaxsiy veb-sayt kursorlaringizni qanday yaratishni o‘rganmoqchi bo‘lsangiz, bu yerda foydalanishingiz mumkin bo‘lgan bir nechta ajoyib qo‘llanmalar mavjud. .

Maxsus kursorlarni yaratish (YouTube)

Bu maxsus kursorlarni yaratish bo‘yicha eng to‘liq qo‘llanmalardan biridir. Bu sizga faqat CSS va JavaScript yordamida maxsus kursorlarni qanday yaratishni ko'rsatadi. Eng zo'rUshbu o'quv qo'llanmaning asosiy tomoni shundaki, u har bir qadamni tavsiflaydi va har bir kod elementi nima qilishini tushuntiradi. O'quv jarayonini boshlash uchun ajoyib joy.

Maxsus kursorni qanday yaratish (bosqichma-bosqich qo'llanma)

Qanday qilib yaratishni ko'rsatuvchi bosqichma-bosqich qo'llanma. butunlay boshqacha dizaynga aylanadigan maxsus kursor. Bu portfel bo'limlari uchun maxsus kursorlarni loyihalashni o'rganish uchun juda mos keladi.

Veb-sayt uchun maxsus kursorni qanday qilish kerak (YouTube)

Ushbu qo'llanma sizga maxsus kursorni qanday yaratishni ko'rsatib beradi. bosish effekti. Dars sodda va tushunarli tarzda tushuntirilgan bo'lib, qo'llanma hatto yangi boshlanuvchilar uchun ham mos keladi.

CSS yordamida kursor ko'rinishini qanday o'zgartirish mumkin (qo'llanma)

Bu CSS yordamida standart kursor dizaynini qanday o'zgartirishni ko'rsatadigan tez va oddiy qo'llanma. Bu kursor dizaynini bir necha qator kod bilan boshqarish qanchalik osonligini ko'rsatadi. O‘quv qo‘llanma jarayonni bosqichma-bosqich ko‘rsatib beradi.

PNG yoki GIF tasvirli maxsus kursorlar (YouTube)

Standart kursorlarni shunchaki almashtirish orqali maxsus kursorlar yaratishning yana bir oson yo‘li mavjud. PNG yoki GIF tasvirli kursor. Ushbu usul veb-saytlar uchun maxsus kursorlarni loyihalash uchun tavsiya etilmaydi. Biroq, siz ushbu hiyladan kichikroq loyihalar, jumladan, portfelingiz uchun qiziqarli tajribalarni yaratish uchun foydalanishingiz mumkin.

Xulosa

Agar siz CSS va CSS bilan allaqachon tanish bo'lsangiz vaJavaScript-da siz o'zingiz ishlayotgan turli loyihalar uchun ajoyib va ​​ijodiy maxsus kursorlarni yaratishingiz mumkin. Yuqorida aytib o‘tganimizdek, maxsus kursorlardan qachon va qayerda foydalanishni bilish ajoyib foydalanuvchi tajribasini taqdim etishning kalitidir.

Bu yerda bo‘lganingizda, bizning eng yaxshi UX dizayn kurslari va o‘quv qo‘llanmalarimizni o‘qib chiqishingiz kerak. Dizayner sifatida foydalanuvchi tajribasi dizaynini tushunish juda muhim. Ushbu qo'llanma sizga boshlashingizga yordam beradi.