Mājas lapa » UI / UX » Šis 500 baitu JavaScript var paredzēt lietotāja kursora kustības

    Šis 500 baitu JavaScript var paredzēt lietotāja kursora kustības

    Jūs varat darīt dažas patiešām atdzist lietas ar JavaScript un atvērtā pirmkoda padara darbu vēl vieglāku.

    Premonish ir viena no stilīgākajām bibliotēkām, ko esmu redzējis, un tā ir veidota tikai 500 baiti JavaScript. Izmantojot šo spraudni, varat noteikt, kur pārvietojas lietotāja pele, un paredzēt, kuru elementu viņi virzās.

    Tas var izklausīties kā sarežģīta ideja, bet to ir diezgan viegli īstenot. Nemaz nerunājot par šo piedāvājumu a tonnu iespēju izstrādātājiem radīt dažas patiešām atdzistas sekas, piemēram, animācijas vai dinamiskās izkārtojuma efekti.

    Jūs sākat ar mērķauditorijas atlase lapā un definējot, kā tas izskatīsies kad lietotājs virzās uz šo elementu.

    Visi aprēķini tiek veikti backendā ar Premonish bibliotēku, tāpēc jums nav jāuztraucas par matemātiku vai loģiku aiz šī.

    Tā vietā jūs meklējat veidu, kā apstrādāt prognozi pamatojoties uz lietotāju uzvedības uzticamību. Tas viss tiek ievadīts JavaScript, lai jūs varētu rakstīt savas funkcijas rīkoties ar lietotāja uzvedību.

    Šeit ir piemērs no Premonish demo:

     premonish.onIntent ((el, confidence) => // el ir paredzamais DOM elements // uzticība ir rezultāts no 0-1 par to, cik pārliecināti mēs esam šajā prognozēšanā.); 

    The onIntent () metode tiek cepta Premonish, un tā tiek saukta ikreiz, kad tiek paziņots bibliotēkā lietotājs virzās uz kādu elementu.

    Varat izmantot arī citu metodi, onMouseMove (), kas darbojas katru reizi kursors maina X / Y pozīcijas ekrānā. Tādā veidā jūs varat redzēt, kā Premonish aprēķina lietotāja nodomu izredzes.

    Galvenajā GitHub repo ir atrodama virkne informācijas ietver vienkāršus koda fragmentus lai jūs sāktu. Inicializācija tikai prasa virkni selektoru vai DOM elementu mērķtiecīgi.

    Kā jūs faktiski izmantojat šo spraudni, tas ir atkarīgs no jums. Tas nav paredzēts kā pilnīgs risinājums, bet gan sākuma punkts, lai palīdzētu jums uzņemties lietotāja nodomus un veidojiet tādu pieredzi.

    Pārbaudiet tiešraides demonstrācija lai redzētu, kā tas viss darbojas, un redzēt a “atkļūdošanas režīms” kur var skatīties, kā prognozēšanas algoritms darbojas reālā laikā.

    Jūs varat arī dalīties savās domās un pateikt pateicību autorei Matthew Conlen par savu čivināt @mathisonian.