Når du har et webprogram som krever at noen blir vant til fra brukerne, er en gjennomgang av grensesnittet i orden. Å skape et walkthrough direkte på toppen av grensesnittet gjør ting veldig klart, så det er det vi skal bygge med Bootstrap Tour.

---

Spørsmål, spørsmål

Bootstrap Tour er en jQuery-basert plugin for Twitter Bootstrap som lar deg enkelt bygge interaktive gjennomganger med en minimal mengde deklarativ JavaScript-konfigurasjon i forbindelse med din eksisterende DOM-struktur.

Hvis det ikke er fornuftig for deg, les videre - vi skal bryte det ned, slik at du kan skape verdifulle og engasjerende instruksjoner for brukerne dine.

Hvorfor vil jeg lage instruksjoner?

Hvis nettstedet ditt krever noe kjent, viser brukerne hva de skal gjøre, veldig hjelpsomt. Når du er ferdig, kan brukeren på en måte se "skyggen" av instruksjonen du oppgav i gjennomgangen. Dette unngår at brukeren må tolke retninger hvis du brukte et mindre klart medium, for eksempel video, eller enda verre, tekstveiledninger.

En annen brukstilfelle for en interaktiv tur er å beskrive et bilde. Tenk deg at du bygger et nettsted dedikert til å vise flotte panoramaer av byer rundt om i verden. Når en bruker klikker på en by, kan en interaktiv tur vise på elementene i bildet som ellers kan bli ubemerket.

Det er mange brukskilder for når du vil bruke en tur.

Når skal jeg unngå å bruke en tur?

Hvis grensesnittet følger svært klare konvensjoner og du ikke har hørt noen problemer med forvirring, kan det hende at å legge til en tur kan blokkere brukerne fra å gjøre det de vil gjøre mest: bruk søknaden din.

Mens vi er på emnet for å unngå, ville det være lurt å holde turen så kort som mulig. Brukere vil samle all nødvendig informasjon for å bruke søknaden din eller se historien din, men de vil også at det skal skje så raskt som mulig. Det eneste unntaket til denne regelen er et nettsted som nesten utelukkende er basert på en tur som en kjernevirksomhet (det beskrevne fotografiet ville være et mulig eksempel), men selv i disse tilfellene, bør det være enkelt for en bruker å avslutte turen . Heldigvis støttes dette i Bootstrap Tour som standard; En "End Tour" -knappen er til stede ved hvert trinn.

---

Kom i gang, Rask

Bootstrap Tour krever selvfølgelig elementer av Twitter Bootstrap, samt egen CSS-fil og JavaScript-fil, i tillegg til jQuery. Fra dokumentasjonen er her de nødvendige eiendelene.

   ...    …      

Legg merke til at du også må inkludere Bootstraps base css-fil for å vise Bootstrap popover.

Slå av turen

Neste, for å komme i gang med en tur, gjør du følgende i JavaScript-filen din (som vi dekker kort tid):

 // Opprett en ny tur var tur = Ny tur (); // Legg til trinnene tour.addSteps ([element: ".message.message-1", // elementvelger for å vise popover ved siden av; tittel: "Velkommen til min tur!", Innhold: "Vi skal for å gjøre dette raskt og nyttig. ", element:" .message.message-2 ", tittel:" La oss avslutte denne tingen med et slag. ", innhold:" Boom, bang, bam! "]); // Initialiser metode på tursklassen. Få er alt lastet opp og klar til å gå. tour.init (); // Dette starter turen selv tour.start ();

Dette eksemplet ble tatt nesten direkte fra dokumentasjonen, og er den enkleste måten å komme i gang med Bootstrap Tour.

---

La oss gå dypere, skal vi?

Bootstrap Tour tilbud tonn av alternativer for å tilpasse hvert trinn av turen du vil opprette. Som standard støtter den localStorage (for å bevare stedet i turen hvis du lukker fanen og returnerer senere), neste og forrige funksjoner, samt alle typer tilbakeringinger du kan sette opp for å svare på brukerens handlinger. Det gir også fine, polske funksjoner som et elementheiser, "refleksmodus" (vi vil forklare mer nedenfor), automatisk fremskrittende trinn og til og med flersideturer.

Starter tema

For denne demonstras skyld skal vi starte med en gratis mal fra StartBootstrap.com. StartBootstrap fra Iron Summit Media Strategies er en samling av gratis og premium bootstrap temaer.

Når du har lastet ned prosjektene, bør filstrukturen se slik ut.

.
├── css
│ ├── bootstrap-tour.min.css
│ ├── bootstrap.css
│ └─ - landing-page.css
─ - font-awesome
...
├── skrifter
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └─ - glyphicons-halflings-regular.woff
├── img
│ ├── banner-bg.jpg
│ ├── doge.png
│ ├── intro-bg.jpg
│ ├── ipad.png
│ └── phones.png
├── index.html
└── js
├── bootstrap-tour.min.js
├── bootstrap.js
└── jquery-1.10.2.js


Merk: Vi har hoppet over FontAwesomes interne struktur, da det ikke vil være viktig for denne opplæringen.

Inkluder eiendeler

Deretter vil du inkludere Bootstrap Tour CSS og JavaScript i index.html fil. De av dokumentet ditt skal se slik ut:

Og på slutten av dokumentet vil du se JavaScript like før avslutningen stikkord. Når du får oppsettet på jobb, er det på tide å komme i gang! Selvfølgelig må du legge til i din egen tilpassede JavaScript, så vi legger til et "script.js" etter Bootstrap Tour-filen.

Du vil kombinere og redusere disse filene i byggeprosessen. Vi vil ikke dekke byggeprosesser i denne opplæringen, men du kan lære mer om dette ved å lese Best Practices for å øke Website Performance eller Meet Grunt: Byggverktøyet for JavaScript.

Setter opp noen trinn

La oss sette opp noen enkle trinn med følgende kode i filen "script.js".

 (funksjon () var tur = ny tur (lagring: falsk); tour.addSteps ([element: ".tour-step.tour-step-one", plassering: "bunn", tittel: "Velkommen til vår destinasjonsside! ", innhold:" Denne turen vil lede deg gjennom noen av funksjonene vi ønsker å påpeke. ", element:" .tour-step.tour-step-two ", plassering:" bunn ", tittel:" Hovednavigering ", innhold:" Her er seksjonene på denne siden enkelt lagt ut. ", element:" .tour-step.tour-step-three ", plassering:" topp ", bakteppe : sant, tittel: «Hoved seksjon», innhold: "Dette er en seksjon som du kan lese. Den har verdifull informasjon.",]); // Initialiser tour tour.init (); // Start tour tour .start(); ());

Denne koden ligner på det enkle starteksemplet ovenfor. Vi starter vår tur eksempel, og for vår veiledning er vi deaktivert lagring slik at turen starter i begynnelsen når siden lastes hver gang. (Hvis du fjerner dette alternativet når du har ferdig med å lage turen, vil lagringen kunne fungere like bra.)

Deretter definerer vi noen få trinnsklasser og tilhørende argumenter. Legg merke til det tredje trinnets "bakteppe" -argument; Dette fremhever elementet som vi har valgt for å legge til popover over.

Gjør markupendringer

Deretter legger vi til trinnklassene til de relevante elementene. Øverst i vår indeksfil skal nå se ut som følgende.

                    
 
 
 
 
 
Destinasjonsside
 
En mal ved Start Bootstrap
 
 
 
 Twitter
 
 GitHub
 
 link~~POS=TRUNC
 
 
 
 
 
 
 
 
 
 
 
 
 
Døden til arkivfotoet: 
Spesiell takk
 
En spesiell takk til Døden til arkivfotoet for å gi bildene du ser i denne malen. Besøk deres nettside for å bli medlem.
 
 
  
 
 
 
   

Og siden vår burde se noe slikt ut på lasten:

På tredje trinn kan vi se bakteppe funksjon i aksjon:

Flott! Vi har laget en fungerende tur i rundt tretti linjer med JavaScript.

---

Utnytte dynamisk innhold

Turer er mye bedre når de er tilpasset, så la oss spørre brukeren hva deres navn er i begynnelsen av turen, og bruk det gjennom resten av turen. Her er JavaScript vi bruker til å oppnå dette.

 (funksjon () var navn = "venn"; var tur = ny tur (lagring: false); tour.addSteps ([element: ".tour-step.tour-step-one" ", tittel:" Velkommen til vår destinasjonsside! ", innhold:" Hva heter du? 
", onNext: function (tour) var nameProvided = $ (" input [navn = ditt navn] ") .val (); hvis ($ .trim (nameProvided)! ==" ") name = nameProvided; , element: ".tour-step.tour-step-two", plassering: "bunn", tittel: funksjon () return "Velkommen," + navn;, innhold: "Her er delene av denne siden, enkelt lagt ut. ", element:" .tour-step.tour-step-three ", plassering:" topp ", bakteppe: sant, tittel:" Hoved seksjon ", innhold:" Dette er en seksjon som du kan lese. Den har verdifull informasjon. ", Element:" .tour-step.tour-step-four ", plassering:" topp ", foreldreløs: sant, tittel:" Takk. ", Innhold: funksjon Vi kan ikke vente på å se hva du synes, "+ navn +"! ",); // Start tour tour.init (); // Start tour tour.start (); ());

Legg merke til at innhold og tittel Argumenter kan enten være en streng eller en funksjon, noe som gjør at de kan evalueres når popover vises. Tilbakeringingen til det første trinnet får brukerens navn (ved hjelp av Bootstraps innebygde klasser for styling), og så viser vi det navnet i det andre og siste (nye) trinnet. Hvis brukeren ikke oppgir et navn, eller bare går inn i hvitt plass, angir vi standardnavnet til "venn".

Det siste trinnet introduserer også en ny eiendom, foreldreløs. Dette gjør at trinnet kan løsnes fra et bestemt element. Vi har bare forlatt elementklassene for kontinuitetens skyld, og i tilfelle vi til slutt ønsker å knytte dette trinnet til et element. Her ser det siste trinnet ut:

---

Bli kreativ!

Hvis du vil at turen skal være nyttig, trenger du en god innholdsstrategi. Ikke bare sett noen setninger i JavaScript-konfigurasjonen din og ring den ferdig; tenk på hva du prøver å _inspire_ brukeren å gjøre, enten det er å bruke søknaden din eller bare å være glad.

Skriv en fortelling

Før du skriver turen, skriv ut historien om brukeren som skal oppleve turen. Finn ut hvem brukeren er, og hva de vil tenke og gjøre gjennom hele prosessen. En tur er iboende satt på en slags tidslinje; dra nytte av dette. Utvikle en tomtlinje med en dynamisk introduksjon, oppgang og konklusjon, og bruk konseptet til turen.

Informere og glede

Horace sa en gang:

Diktens mål er å informere eller glede, eller å kombinere sammen, i det han sier, både glede og anvendelighet til livet.

Famed designer Milton Glaser utvidet dette ved å si:

Formålet med kunsten er å informere og glede.

Dette kan også være målet med en god nettside tur. Finn ut hvordan du ikke bare kan opprette informasjon, men underholde brukeren mens du er i prosessen. Gi brukeren for eksempel en viss følelse når de fullfører turen:

 var tur = ny tur (onEnd: funksjon (tur) giveAward ();); funksjon giAward () $ (". award"). addClass ("show"); setTimeout (funksjon () $ (". award"). removeClass ("show");)

Denne brikken kan vise brukeren noe på slutten av turen som en slags "takk" fra reiseguiden (det er du) for å fullføre reisen.

Bruk mediet

HTML er fleksibel. Ikke bare gjør ting trinnvis; dykk inn i å bruke tilbakeringinger og se brukeradferd for å gjøre erfaringer som turer mer interaktive. For eksempel kan du bruke dette biblioteket til å gjøre en "velge din egen eventyr" stil fortelling som hopper mellom trinnene, ved hjelp av gå til() metode. Bruk tilbakeringinger for å utløse rik oppførsel, som animasjoner eller iFrame-injeksjoner. Bli kreativ og husk kraften i mediet.

   Kom til meningen!

---

Konklusjon

Bootstrap Tour er et kraftig plugin som kan komme i gang raskt. Hvis du bruker beste praksis med UX og innholdsdesign, kan en tur være den rette tingen å koble til publikum på en kraftig måte. Bootstrap Tour tilbyr enda mer fleksibilitet enn vi har dekket her, så hvis du vil at en annen artikkel går enda lenger med Bootstrap Tour, sørg for å gi oss beskjed i kommentarene! Hvilke andre bruksområder kan du komme med? La alle få vite det nedenfor!