10 interfețe de utilizator gratuite pentru integrarea CSS și JavaScript

Scopul onboarding-ului este de a familiariza noii utilizatori cu o interfață. Acesta vine în multe stiluri diferite și nu există o modalitate corectă de a o face. Dar dacă studiezi modul în care site-urile și aplicațiile efectuează integrarea, poți alege idei pentru propria ta activitate.

Și cu aceste interfețe de utilizare gratuite pentru CSS și JavaScript, veți avea o mulțime de idei care vă oferă atât inspirație, cât și fragmente de cod pentru a vă ajuta să începeți.

1. Carusel Slides

Încorporarea în carusel rotativ este extrem de populară pe dispozitivele mobile, unde spațiul pe ecran este limitat. Dar acest efect poate funcționa la fel de bine pe site-urile web unde trebuie să obțineți informații rapid.

Consultați această demonstrație de diapozitive carusel creată de Nick Wanninger pentru a vedea la ce mă refer.

Este un exemplu de onboarding complet gratuit creat folosind Flickity și un cod CSS de bază. Acest lucru funcționează atât pentru dispozitive mobile, cât și pentru desktop, deci este o alegere excelentă dacă aveți nevoie de o soluție receptivă.

2. React Daily UI

Ca un design simplu de practică, Jack Oliver a creat acest stilou React Daily UI de la zero. Și este una dintre cele mai elegante experiențe de îmbarcare pe care le-am văzut.

Interfața conține text fals, deoarece nu este destinată utilizării practice, în lumea reală, dar este foarte curată și ar trebui să lase suficient spațiu pentru a încadra aproape orice în pagină.

Un lucru de remarcat este că nu am putut face acest lucru să funcționeze pe mobil cu glisări și se pare că recunosc doar atingerile momentan. Dar pentru o soluție cu doar clic, este foarte frumos.

3. Ecrane de îmbarcare

Acest stilou nu numai că are o interfață incredibilă pentru onboarding, dar are și animații personalizate pentru a porni.

Dezvoltatorul Jeff Ham cunoaște o interfață și a creat acest ecran imaculat de integrare. Se bazează pe JavaScript pentru a crea animațiile „ecranul următor” și evenimentele de comutare pentru clicurile/atingerea utilizatorilor.

Un plus frumos la această interfață este butonul albastru următor din partea de jos. Acest lucru permite utilizatorului să avanseze ecran cu ecran cu un CTA mare la vedere. Pariez că acest lucru ar crește numărul total de persoane care convertesc și va îmbunătăți calitatea experienței în general.

4. Boardal

Acest fragment Boardal este destul de unic, deoarece nu este ceva ce îl vedeți des.

Utilizează o fereastră modală cu conținut de încorporare pentru a ajuta utilizatorii să treacă mai repede prin site. Este un design personalizat creat exclusiv pentru testare și este una dintre cele mai interesante modalități de a îmbunătăți procesul de integrare.

Rețineți că acest lucru funcționează cel mai bine pe un desktop, deoarece se bazează pe efectul modal (nu este ideal pentru ecrane mai mici).

Deci, dacă vă place designul și doriți o modalitate ușoară de a îmbunătăți integrarea pentru site-ul dvs., atunci dă o șansă Boardal.

5. Tur ghidat

De obicei, integrarea este considerată un proces pas cu pas care introduce noi pagini și funcții pentru utilizator. Dar personal găsesc tururile ghidate mult mai utile.

Dacă doriți un fragment simplu pentru a începe, atunci acest tur ghidat este perfect. Se bazează pe componentele Bootstrap și utilizează mici sfaturi cu instrumente cu butoane „următorul” pentru a avansa turul.

Utilizatorul poate închide turul în orice moment dacă este enervat sau nu-i mai pasă. Acest lucru îl face un tur opțional, astfel încât mai puține persoane vor fi enervate de proces.

În general, aceasta este metoda mea de onboarding preferată, deși este nevoie de puțin mai mult efort pentru ao configura. Dar această demonstrație vă oferă cel puțin un șablon pentru a începe.

6. Tur material

O metodă alternativă de tur este turul cu avansare automată care evidențiază caracteristici specifice.

Cel mai bun exemplu pe care l-am găsit este acest stilou creat de Gregor Adams. Se bazează pe instrucțiunile privind materialele și folosește cercuri evidențiate pentru a prezenta părți ale paginii. Această tehnică este perfectă dacă aveți interfețe foarte complexe, cu multe caracteristici.

Întunecând întreaga pagină, aduci focalizarea pe o zonă la un moment dat. Acest lucru atrage imediat atenția utilizatorului, ceea ce este exact ceea ce trebuie să faceți pentru o bună integrare.

Știu că acest lucru nu se va potrivi bine pe toate site-urile web, dar dacă vă place interfața, vă recomand cu căldură să o încercați.

7. Integrarea aplicației Android

De obicei, aplicațiile mobile au nevoie de procesul de integrare mai mult decât site-urile web. Este obișnuit ca designerii de interfață de utilizare mobilă să înghesuie funcții pe ecranul mai mic, ceea ce poate copleși utilizatorii fără o introducere ghidată.

Acest ghid de integrare al lui Mat Swainson este un exemplu mic, dar elocvent a ceea ce se poate face pentru aplicațiile pentru smartphone.

Se bazează pe un model Android, dar cu siguranță nu este singurul stil pe care îl poți folosi. Îmi place cum acceptă glisarea nativă, care funcționează chiar și în browserele web mobile.

În plus, indicatorul mic de progres din partea de sus este o atingere plăcută. Cu siguranță o pagină de înscriere simplă, dar care merită salvată dacă ești în căutarea inspirației.

8. Introducere ionică

Puteți face multe cu Ionic și acest stilou este un exemplu grozav.

Dezvoltatorul Clifford Fajardo a creat o introducere Ionic la bord rulând exclusiv pe cadrul JavaScript. Acceptă toate interacțiunile mobile, cum ar fi atingeri, glisări și chiar acceptă opțiuni pentru atingeri duble dacă doriți această funcție.

Ionic este folosit în principal pentru dezvoltarea mobilă și funcționează foarte bine și pentru site-urile web mobile. Nu pot spune că acest ecran de înscriere s-ar potrivi pe fiecare site web, dar este o alegere solidă dacă mai mult de 50% din publicul tău provine de pe dispozitive mobile.

9. Forma verticală

Cu o animație ușoară de IU și un design simplu, această formă verticală este un răsfăț unic.

Folosește proprietățile CSS flex într-un efect maxim, împreună cu unele animații JavaScript și CSS personalizate. Desigur, mi se pare că conținutul este puțin subțire, așa că nu oferă prea multe în ceea ce privește integrarea detaliată.

Cu toate acestea, puteți lua această interfață și o puteți face cu adevărat a dvs. fără prea mult efort, așa că lasă mult imaginației.

10. Tur ghidat Tooltip

Iată încă un exemplu de tur ghidat, dar acesta folosește o casetă completă de indicații, fixată pe pagină.

Dacă verificați fragmentul, veți vedea că nu este încorporat într-o interfață specifică. Mai degrabă, este doar un sfat instrument plutitor cu sfaturi și pași de progres pentru utilizator.

Combinarea acestei interfețe de utilizare cu un script fix de poziționare a balonului instrument vă va permite să mutați cu ușurință acest lucru în jurul interfeței dvs., cu sfaturi cu instrumente care să indice toate caracteristicile dvs. majore. Acest șablon va necesita personalizare reală pentru a-l face să funcționeze, dar pentru o interfață simplă, este frumos.