Umblați utilizatorii prin site-ul dvs. cu turneu Bootstrap

Atunci când aveți o aplicație web care necesită un obișnuit de la utilizatorii dvs., o interfață de interfață este în ordine. Crearea unui walkthrough direct pe partea de sus a interfeței face lucrurile foarte clare, deci asta vom construi folosind Bootstrap Tour.

Întrebări, întrebări

Bootstrap Tour este un plugin bazat pe jQuery pentru bootstrap Twitter, care vă permite să construiți cu ușurință walkthrough-uri interactive utilizând o cantitate minimă de configurare declarativă JavaScript în legătură cu structura dvs. DOM existentă.

Dacă acest lucru nu are sens pentru dvs., citiți mai departe - o vom rupe pentru a putea crea instrucțiuni utile pentru utilizatorii dvs..

De ce aș vrea să creez instrucțiuni?

Dacă site-ul dvs. necesită un anumit nivel de familiaritate, arătând utilizatorilor ce pot face, poate fi foarte util. Odată finalizată, utilizatorul poate, într-un fel, să vadă "umbra" instrucțiunilor pe care le-ați furnizat în walkthrough. Astfel, utilizatorul trebuie să interpreteze instrucțiunile dacă ați folosit un mediu mai puțin clar, cum ar fi ghidurile text sau video sau chiar mai rău.

Un alt caz de utilizare pentru un tur interactiv este descrierea unei fotografii. Imaginați-vă că construiți un site dedicat arătării de minunate panorame ale orașelor din întreaga lume. Când un utilizator dă clic pe un oraș, un turneu interactiv vă permite să indicați elemente ale fotografiei care altfel ar putea trece neobservate.

Există o mulțime de cazuri de utilizare atunci când doriți să utilizați un tur.

Când trebuie să evit să folosesc un tur?

Dacă interfața dvs. urmează convenții foarte clare și nu ați auzit plângeri de confuzie, adăugarea unui tur poate împiedica utilizatorii să facă ceea ce doresc să facă cel mai mult: utilizați aplicația.

În timp ce ne referim la ceea ce trebuie evitat, ar fi înțelept să țineți turul cât mai scurt posibil. Utilizatorii doresc să adune toate informațiile necesare pentru a utiliza aplicația dvs. sau pentru a vedea povestea dvs., dar doresc ca aceasta să aibă loc cât mai repede posibil. Singura excepție de la această regulă ar fi un site care se bazează aproape exclusiv pe un tur ca element de bază (site-ul cu fotografii descris ar fi un exemplu posibil), dar chiar și în aceste cazuri, ar trebui să fie ușor pentru un utilizator să iasă din tur . Din fericire, acest lucru este acceptat în mod implicit în Turneul Bootstrap; un buton "End Tour" este prezent la fiecare pas.

Începeți, rapid

Bootstrap Tour necesită, desigur, elemente de Twitter Bootstrap, precum și propriul fișier CSS și fișier JavaScript, în plus față de jQuery. Din documentație, aici sunt activele necesare.

   ...    …

Observați că va trebui să includeți și fișierul css de bază al Bootstrap pentru a afișa popup-ul Bootstrap.

Încetați turul

În continuare, pentru a începe un turneu, efectuați următoarele în fișierul JavaScript (pe care îl vom acoperi în scurt timp):

 // Creați un tur nou var tour = new Tour (); // Adăugați pașii dvs. tour.addSteps ([element: ".message.message-1", // selector de elemente pentru a afișa popup lângă titlu: "Bine ați venit la turneul meu!", Conținut: "Vom merge pentru a face acest lucru rapid și util. ", element:" .message.message-2 ", titlul:" Să terminăm acest lucru cu un bang. ", conținut:" Boom, bang, bam! // Initializeaza metoda in clasa Tour. Ia totul încărcat și gata să plece. tour.init (); // Aceasta inițiază turul propriu-zis tour.start ();

Acest exemplu a fost luat aproape direct din documentație și este cel mai simplu mod de a începe cu Bootstrap Tour.

Să mergem mai adânc, să fim noi?

Bootstrap Tour oferă tone de opțiuni pentru personalizarea fiecărui pas al turului pe care doriți să îl creați. În mod implicit, acesta acceptă localStorage (pentru a vă păstra locul în tur, dacă închideți fila și reveniți mai târziu), funcțiile următoare și anterioare, precum și toate tipurile de apeluri pe care le puteți configura pentru a răspunde acțiunilor utilizatorilor. Oferă, de asemenea, funcții de poloneză frumoase, cum ar fi un element de evidențiere a elementelor, modul reflex (vom explica mai jos), pași de avansare automată și chiar tururi cu mai multe pagini.

Subiect inițial

De dragul acestui demo, vom începe cu un șablon gratuit de la StartBootstrap.com. StartBootstrap de la Iron Summit Media Strategies este o colecție de teme gratuite și premium de bootstrap.

Odată ce ați descărcat proiectele, structura fișierelor ar trebui să arate așa.

. ├──CSS │ ├──────────────────┘ │ ├── bootstrap.css │ └── landing-page.css ├── font-minunat ... Fonturi ├────────── │ ├─────────────────────────────────── │ ├────────────────────────────────────── │ ├──────────────────────────────────── │ └───────────────────────────────────── ├────────────── │ ├── Banner-bg.jpg │ ├── doge.png │ ├─────────────────────────┘ │ ├── ipad.png │ └── telefoane.png ├── index.html └── js ├───────────────────────────────┼ ├───────────────────────┼ └── jquery-1.10.2.js

Notă: am ignorat structura internă a FontAwesome, deoarece nu va fi importantă pentru acest tutorial.

Includeți active

Apoi, veți dori să includeți CSS și JavaScript de la Bootstrap Tour în index.html fişier. din documentul dvs. ar trebui să arate astfel:

      Pagina de șablon pentru șirul Bootstrap

Și la sfârșitul documentului, veți vedea JavaScript chiar înainte de închidere etichetă. Odată ce ați început să funcționeze, este timpul să începeți! Desigur, va trebui să adăugați propriul JavaScript personalizat, așa că vom adăuga un "script.js" după fișierul Tour Bootstrap.

Veți dori să concatenați și să micșorați aceste fișiere în procesul dvs. de construire. Nu vom acoperi procesele de construire în acest tutorial, dar puteți afla mai multe despre acest lucru prin citirea celor mai bune practici pentru creșterea performanței site-ului sau întâlnirea cu Grunt: Instrumentul Build pentru JavaScript.

Configurarea câtorva pași

Să stabilim câțiva pași simpli cu următorul cod în fișierul "script.js".

 (functie () var tur = tur nou (storage: false); tur.addSteps ([element: " Pagina noastră de destinație! ", conținut:" Acest tur va va ghida prin câteva dintre caracteristicile pe care am dori să le menționăm. ", element:" .tour-step.tour-step-two ", destinație de plasare: ", titlu:" Navigare principală ", conținut:" Aici sunt secțiunile acestei pagini, ușor de întocmit ", element:" .tour-step.tour-step-three ", plasarea:" sus " : true, title: "Sectiunea principala", continut: "Aceasta este o sectiune pe care o poti citi, are informatii valoroase",]); // Initializeaza tour.init (); .start(); ());

Acest cod este foarte similar cu exemplul de pornire ușoară de mai sus. Inițiem pe noi Tur de exemplu, și de dragul tutorialului nostru dezactivăm spațiul de stocare, astfel încât turul să înceapă de la începutul paginii când pagina se încarcă de fiecare dată. (Dacă scoateți această opțiune după ce ați terminat procesul de creare a turului dvs., spațiul de stocare va funcționa foarte bine.)

Apoi, definim câteva clase de pas și argumente asociate. Observați argumentul "fundal" al treilea pas; acest lucru evidențiază elementul pe care l-am selectat pentru a atașa popupul de mai sus.

Efectuarea modificărilor de marcare

Apoi, vom adăuga clasele pas la elementele relevante. În partea de sus a fișierului nostru index ar trebui să pară acum următoarele.

        Pagina de șablon pentru șirul Bootstrap               Porniți Bootstrap 
    Despre
 Servicii
 a lua legatura
 
 
 
 
      Pagina de aterizare
 Un șablon de start Bootstrap
 
   Stare de nervozitate
  github
  LinkedIn
 
 
 
 
 
 
     
 
 Moartea la fotografia de stoc: 
Multumiri speciale
 O mulțime de mulțumiri deosebite pentru Moartea pentru fotografia de fotografie pentru furnizarea fotografiilor pe care le vedeți în acest șablon. Vizitați site-ul web pentru a deveni membru.

Și pagina noastră ar trebui să arate cam așa:

În al treilea pas putem vedea fundal caracteristică în acțiune:

Grozav! Am făcut un tur în funcționare în aproximativ treizeci de linii de JavaScript.

Utilizând conținut dinamic

Excursiile sunt mult mai bune atunci când sunt personalizate, așa că să ne întrebăm utilizatorul care este numele lor la începutul turneului și să îl folosească pe parcursul tuturor pașilor turului. Iată JavaScript pe care îl folosim pentru a realiza acest lucru.

 (functie () var nume = "Prieten"; var tur = nou Tur (storage: false); ", titlul:" Bine ați venit pe pagina noastră de destinație! ", conținut:" Care este numele dvs.? 
", onNext: functie (tur) var nameProvided = $ (" input [nume = numele_in_la_name] ") , element: ".tour-step.tour-step-two", destinatie: "bottom", title: function () ", element:" .tour-step.tour-step-three ", plasarea:" sus ", fundal: true, title:" Secțiunea principală ", conținut:" Aceasta este o secțiune pe care o puteți citit. El are informații valoroase., Element: ".tour-step.tour-step-four", destinație: "top", orfan: true, title: "Thank you. Nu putem aștepta să vedem ce credeți, "+ nume +"! ",]); // Inițializați turul tour.init (); // Începeți turul tour.start (); ());

Rețineți că conţinut și titlu argumentele pot fi fie un șir sau o funcție, care le permite să fie evaluate în momentul în care se afișează popup. Apelul pentru primul pas primește numele utilizatorului (folosind clasele construite pentru stilul Bootstrap) și apoi afișăm acest nume în al doilea și ultimul (nou) pas. Dacă utilizatorul nu introduce un nume sau introduce doar un spațiu alb, setăm numele implicit la "Friend".

Ultimul pas introduce, de asemenea, o proprietate nouă, orfan. Aceasta permite detașarea pasului de orice element particular. Am părăsit doar clasele de elemente din motive de continuitate și, în cazul în care, în cele din urmă, dorim să atașăm acel pas la un element. Iată cum arată ultimul pas:

Creați-vă reclama!

Dacă doriți ca turneul dvs. să fie util, aveți nevoie de o bună strategie de conținut. Nu puneți doar câteva propoziții în configurația JavaScript și sunați-l; gândiți-vă la ceea ce încercați să impuneți utilizatorului, fie că este vorba de utilizarea aplicației dvs., fie pur și simplu pentru a fi încântat.

Scrieți o narațiune

Înainte de a vă scrie turul, scrieți povestea utilizatorului care va experimenta turul. Aflați cine este utilizatorul și ce vor gândi și vor face pe parcursul întregului proces. Un tur este în mod inerent stabilit pe un fel de cronologie; profitați de acest lucru. Dezvoltați o linie complot, cu o introducere dinamică, creștere și concluzii, și aplicați conceptul în tur.

Informați-vă și încântați

Horace a spus odată:

Scopul poetului este acela de a informa sau de a încânta, sau de a combina împreună, în ceea ce spune el, atât plăcerea, cât și aplicabilitatea vieții.

Frumosul designer Milton Glaser a extins acest lucru spunând:

Scopul artei este de a informa și de a încânta.

Acest lucru poate fi și un tur al unui site bun. Aflați cum puteți nu numai să creați conținut de informație, ci să distrați utilizatorul în timpul procesului. De exemplu, dați utilizatorului un sentiment de împlinire atunci când finalizează turneul:

 var tur = nou Tur (onEnd: functie (tur)) giveAward ();); funcția giveAward () $ (".de atribuire") addClass ("show"); setTimeout (funcție () $ (".de atribuire") removeClass ("show");

Acest fragment ar putea afișa utilizatorului ceva la sfârșitul turului ca un fel de "mulțumire" din ghidul de turism (care sunteți tu) pentru completarea călătoriei.

Utilizați mediul

HTML este pliabil. Nu faceți doar pas cu pas; scufundați în utilizarea apelurilor de apel și urmăriți comportamentul utilizatorilor pentru a face experiențe precum tururile mai interactive. De exemplu, ați putea folosi această bibliotecă pentru a face o narațiune de stil "Alegeți-vă propria aventură" care sărind între pași, folosind mergi la() metodă. Utilizați callbacks pentru a declanșa un comportament bogat, cum ar fi animațiile sau injecțiile iFrame. Creați-vă creativitatea și amintiți-vă de puterea mediei.

Concluzie

Bootstrap Tour este un plug-in puternic care vă poate ajuta să începeți rapid. Dacă aplicați cele mai bune practici ale design-ului UX și al conținutului, un tur poate fi doar un lucru bun pentru a vă conecta cu publicul într-un mod puternic. Bootstrap Tour oferă o flexibilitate și mai mare decât am acoperit-o aici, așa că dacă doriți ca un al doilea articol să meargă mai departe cu Bootstrap Tour, asigurați-vă că ne anunțați în comentarii! Cu ce alte utilizări puteți să veniți? Permiteți tuturor să știe mai jos!

Web design