När du har en webbapplikation som kräver att vissa vanor sig från dina användare, är ett genomgång av gränssnittet i ordning. Att skapa ett genombrott direkt ovanpå gränssnittet gör sakerna mycket tydliga, så det är vad vi ska bygga med Bootstrap Tour.

---

Frågor, Frågor

Bootstrap Tour är ett jQuery-baserat plugin för Twitter Bootstrap som låter dig enkelt bygga interaktiva genomgångar med en minimal mängd declarative JavaScript-konfiguration i kombination med din befintliga DOM-struktur.

Om det inte menar dig, läs vidare - vi kommer att bryta ner det så att du kan skapa värdefulla, engagerande instruktioner för dina användare.

Varför skulle jag vilja skapa instruktioner?

Om din webbplats kräver en viss förtrogenhet, kan dina användare visa vad de ska göra. Det kan vara till stor hjälp. När du är klar kan användaren på ett sätt se "skuggan" av anvisningarna som du gav i genomgången. Detta undviker att användaren måste tolka riktningar om du använde ett mindre tydligt medium som video eller till och med sämre, textguider.

Ett annat användarfall för en interaktiv turné är att beskriva ett foto. Tänk dig att du bygger en webbplats dedikerad till att visa ut underbara panoramaer över städer runt om i världen. När en användare klickar på en stad kan du med hjälp av en interaktiv turnering påpeka element i fotot som annars annars skulle bli obemärkt.

Det finns många användarfall för när du vill använda en turné.

När ska jag undvika att använda en turné?

Om ditt gränssnitt följer mycket tydliga konventioner och du inte har hört några klagomål om förvirring, kan du lägga till en turné med att blockera dina användare från att göra vad de vill göra mest: använd din ansökan.

Medan vi är överens om vad du ska undvika, är det klokt att hålla din turné så kort som möjligt. Användare vill samla all nödvändig information för att kunna använda din ansökan eller se din historia, men de vill också att det ska ske så fort som möjligt. Det enda undantaget från denna regel skulle vara en webbplats som nästan uteslutande bygger på en turné som en kärnfunktion (den beskrivna bildsidan skulle vara ett möjligt exempel), men även i dessa fall borde det vara lätt för en användare att avsluta turnén . Lyckligtvis stöds detta som standard i Bootstrap Tour; En "End Tour" -knapp är närvarande vid varje steg.

---

Kom igång, snabbt

Bootstrap Tour kräver självklart delar av Twitter Bootstrap, såväl som sin egen CSS-fil och JavaScript-fil, förutom jQuery. Från dokumentationen är här de nödvändiga tillgångarna.

   ...    …      

Observera att du också måste inkludera Bootstraps bas css-fil för att visa Bootstrap popover.

Kick off turnén

Därefter, för att komma igång med en turné, utför följande i din JavaScript-fil (som vi kommer att täcka inom kort):

 // Skapa en ny turné var turné = Ny turné (); // Lägg till dina steg tour.addSteps ([element: ".message.message-1", // elementväljare för att visa popover bredvid; titel: "Välkommen till min turné!", Innehåll: "Vi ska för att göra det snabbt och användbart. ", element:" .message.message-2 ", titeln:" Låt oss avsluta den här sakten med ett bang. ", innehåll:" Boom, bang, bam! "]); // Initialisera metod i Tour-klassen. Få är allt laddat och redo att gå. tour.init (); // Detta startar resan själv tour.start ();

Detta exempel togs nästan direkt från dokumentationen, och är det enklaste sättet att komma igång med Bootstrap Tour.

---

Låt oss gå djupare, ska vi?

Bootstrap Tour erbjuder ton av alternativ för att anpassa varje steg i den turné du vill skapa. Som standard stöder den lokala storheten (för att bevara din plats i turnén om du stänger fliken och returnerar senare), nästa och tidigare funktioner, samt alla typer av återuppringningar som du kan ställa in för att svara på användarnas åtgärder. Det ger också snygga polska funktioner som ett elementstrålkastare, "reflexläge" (vi kommer att förklara mer nedan), auto-progressiva steg och till och med flersidiga turer.

Startteman

För denna demonstras skull kommer vi att börja med en gratis mall från StartBootstrap.com. StartBootstrap från Iron Summit Media Strategies är en samling gratis och premium bootstrap teman.

När du har laddat ner projekten ska din filstruktur se ut så här.

.
├── css
│ ├── bootstrap-tour.min.css
│ ├── bootstrap.css
│ └── landing-page.css
├── font-awesome
...
├── typsnitt
│ ├── 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


Notera: Vi har hoppat över FontAwesoms interna struktur, eftersom det inte kommer att vara viktigt för denna handledning.

Inkludera tillgångar

Därefter vill du inkludera Bootstrap Tour CSS och JavaScript i index.html fil. De av ditt dokument ska se ut så här:

Och i slutet av dokumentet kommer du att se JavaScript precis före stängningen märka. När du väl har installerat jobbet är det dags att komma igång! Självklart måste du lägga till egna anpassade JavaScript, så vi lägger till en "script.js" efter Bootstrap Tour-filen.

Du vill sammanfatta och begränsa dessa filer i din byggprocess. Vi kommer inte att täcka byggprocesser i den här handledningen, men du kan lära dig mer om detta genom att läsa bästa praxis för att öka webbplatsens prestanda eller möta grunt: Byggverktyget för JavaScript.

Ställer in några steg

Låt oss ange några enkla steg med följande kod i filen "script.js".

 (funktion () var tour = new Tour (lagring: false); tour.addSteps ([element: ".tour-step.tour-step-one", placering: "botten", titel: "Välkommen till vår målsida! ", innehåll:" Denna turné guidar dig genom några av de funktioner som vi skulle vilja påpeka. ", element:" .tour-step.tour-step-two ", placering:" bottom ", titel:" Huvudnavigering ", innehåll:" Här är sektionerna på den här sidan, enkelt utplacerade. ", element:" .tour-step.tour-step-three ", placering:" topp ", bakgrund : true, title: "Main section", innehåll: "Detta är en del som du kan läsa. Den har värdefull information.",]) // Initiera tour tour.init (); // Starta turné .Start(); ());

Den här koden ligner mycket på det lätta startexemplet ovan. Vi initierar vår Tur exempel och för vår handledning sköter vi inlagring så att turnén börjar i början när sidan laddas varje gång. (Om du tar bort det här alternativet när du har slutfört din turné kommer lagringen att fungera bra.)

Då definierar vi några stegklasser och tillhörande argument. Lägg märke till det tredje steget "bakgrunds" -argumentet; Detta belyser det element vi har valt för att bifoga popover ovan.

Gör ändringar i markeringen

Därefter lägger vi till stegklasserna till de relevanta elementen. Övre delen av vår indexfil ska nu se ut som följande.

                    
 
 
 
 
 
Landningssida
 
En mall genom Start Bootstrap
 
 
 
 Twitter
 
 github
 
 edin
 
 
 
 
 
 
 
 
 
 
 
 
 
Död till Stock Photo: 
Speciellt tack
 
Ett speciellt tack till Döden till Stock Photo för att ge de fotografier som du ser i denna mall. Besök deras hemsida för att bli medlem.
 
 
  
 
 
 
   

Och vår sida ska se ut så här på belastning:

På det tredje steget kan vi se bakgrund funktion i åtgärd:

Bra! Vi har gjort en fungerande rundtur i cirka trettio rader av JavaScript.

---

Använda dynamiskt innehåll

Resor är mycket bättre när de är personliga, så låt oss fråga användaren vad deras namn är i början av turnén och använd det under resten av turnéens steg. Här är JavaScript som vi använder för att uppnå detta.

 (funktion () var name = "Friend"; var turn = ny turné (lagring: false); tour.addSteps ([element: ".tour-step.tour-step-one" ", titel:" Välkommen till vår målsida! ", innehåll:" Vad heter du? 
", onNext: function (tour) var nameProvided = $ (" input [name = your_name] ") .val (); om ($ .trim (nameProvided)! ==" ") name = nameProvided; , element: ".tour-step.tour-step-two", placering: "bottom", title: function () return "Välkommen," + namn;, innehåll: "Här är sektionerna på den här sidan, enkelt lagt ut. ", element:" .tour-step.tour-step-three ", placering:" topp ", bakgrund: sant, titel:" Huvudavsnitt ", innehåll:" Detta är en sektion som du kan läsa. Den har värdefull information. ", Element:" .tour-step.tour-step-four ", placering:" top ", föräldralösa: sant, titel:" Tack. ", Innehåll: Vi kan inte vänta med att se vad du tycker, "+ namn +"! ",]) // Initiera tour tour.init (); // Starta turnéen tour.start (); ());

Observera att innehåll och titel Argument kan vara antingen en sträng eller en funktion som gör det möjligt att utvärdera dem när popoveren visas. Återkallelsen till det första steget får användarens namn (med Bootstraps inbyggda klasser för styling), och sedan visar vi det namnet i det andra och sista (nya) steget. Om användaren inte matar in ett namn eller går in i endast blankutrymme ställer vi standardnamnet på "Vän".

Det sista steget introducerar också en ny egendom, föräldralös. Detta gör att steget kan lösas från ett visst element. Vi har bara lämnat elementsklasserna för kontinuitetens skull, och om vi så småningom vill fästa det steget till ett element. Så här ser det sista steget ut:

---

Få kreativitet!

Om du vill att din turné ska vara användbar behöver du en bra innehållsstrategi. Lägg inte bara några meningar i din JavaScript-konfiguration och ring det gjort. Tänk på vad du försöker _inspire_ användaren att göra, oavsett om det är att använda din ansökan eller helt enkelt vara glad.

Skriv en berättelse

Innan du skriver din turné skriver du ut berättelsen om användaren som kommer att uppleva turnén. Ta reda på vem användaren är och vad de ska tänka och göra under hela processen. En tur är i sin tur inställd på någon slags tidslinje; dra nytta av detta. Utveckla en plotlinje med en dynamisk introduktion, uppgång och slutsats och tillämpa konceptet på turnén.

Informera och glädja

Horace sa en gång:

Diktens syfte är att informera eller glädja, eller att kombinera, i det han säger, både nöje och tillämplighet i livet.

Berömd formgivare Milton Glaser utökade detta genom att säga:

Syftet med konsten är att informera och glädja.

Detta kan också vara målet för en bra webbsidé. Ta reda på hur du inte bara kan skapa informationsinnehåll, utan också underhålla användaren under processen. Till exempel ge användaren viss känsla av prestation när de avslutar turnén:

 var tour = ny turné (onEnd: funktion (turné) giveAward ();); funktion giveAward () $ (". award"). addClass ("show"); setTimeout (funktion () $ (". award"). removeClass ("show");)

Detta utdrag kan visa användaren något i slutet av turnén som ett slags "tack" från guiden (det är du) för att slutföra resan.

Använd mediet

HTML är smidigt. Gör inte bara saker steg för steg; dyka in i att använda callbacks och titta på användarbeteende för att göra erfarenheter som turer mer interaktiva. Du kan till exempel använda det här biblioteket för att göra en "narrativ av ditt eget äventyr", som hoppar mellan steg, med hjälp av gå till() metod. Använd återuppringningar för att utlösa rika beteenden, som animeringar eller iFrame-injektioner. Få kreativitet och kom ihåg kraften i mediet.

   Komma till meningen!

---

Slutsats

Bootstrap Tour är ett kraftfullt plugin som kan komma igång snabbt. Om du tillämpar bästa praxis med UX och innehållsdesign, kan en turné vara bara rätt att ansluta till din publik på ett kraftfullt sätt. Bootstrap Tour erbjuder ännu mer flexibilitet än vad vi har täckt här, så om du vill att en andra artikel går ännu längre med Bootstrap Tour, var god och låt oss veta i kommentarerna! Vilka andra användningsområden kan du komma med? Låt alla veta nedan!