Gehen Sie mit Bootstrap Tour auf Ihre Website

Wenn Sie über eine Webanwendung verfügen, die von Ihren Benutzern gewöhnungsbedürftig ist, ist eine Komplettlösung der Benutzeroberfläche erforderlich. Das Erstellen einer exemplarischen Vorgehensweise direkt über der Benutzeroberfläche macht die Dinge sehr klar. Deshalb werden wir dies mithilfe von Bootstrap Tour erstellen.

Fragen, Fragen

Bootstrap Tour ist ein jQuery-basiertes Plugin für Twitter Bootstrap, mit dem Sie interaktive Komplettlösungen mit minimaler deklarativer JavaScript-Konfiguration in Verbindung mit Ihrer vorhandenen DOM-Struktur erstellen können.

Wenn dies für Sie nicht sinnvoll ist, lesen Sie weiter - wir werden es aufspalten, damit Sie wertvolle, ansprechende Anweisungen für Ihre Benutzer erstellen können.

Warum sollte ich Anweisungen erstellen??

Wenn Ihre Website ein gewisses Maß an Vertrautheit erfordert, kann es sehr hilfreich sein, Ihren Benutzern zu zeigen, was zu tun ist. Nach Abschluss des Vorgangs kann der Benutzer in gewisser Weise den "Schatten" der Anweisung sehen, die Sie in der exemplarischen Vorgehensweise angegeben haben. Dies vermeidet, dass der Benutzer die Anweisungen interpretieren muss, wenn Sie ein weniger übersichtliches Medium verwenden, z. B. Video oder sogar Textleitfäden.

Ein weiterer Anwendungsfall für eine interaktive Tour ist die Beschreibung eines Fotos. Stellen Sie sich vor, Sie bauen eine Website, auf der Sie wunderschöne Panoramen von Städten auf der ganzen Welt präsentieren können. Wenn ein Benutzer auf eine Stadt klickt, können Sie bei einer interaktiven Tour auf Elemente des Fotos aufmerksam machen, die ansonsten unbeachtet bleiben könnten.

Es gibt viele Anwendungsfälle, wann Sie eine Tour nutzen möchten.

Wann sollte ich eine Tour vermeiden??

Wenn Ihre Benutzeroberfläche sehr klaren Konventionen folgt und Sie keine Beschwerden über Verwirrung gehört haben, kann das Hinzufügen einer Tour Ihre Benutzer daran hindern, das zu tun, was sie am meisten wollen: Verwenden Sie Ihre Anwendung.

Während wir uns mit dem Thema beschäftigen, was Sie meiden sollten, ist es ratsam, Ihre Tour so kurz wie möglich zu halten. Benutzer möchten alle erforderlichen Informationen sammeln, um Ihre Anwendung zu verwenden oder Ihre Story anzuzeigen, aber sie möchten auch, dass dies so schnell wie möglich geschieht. Die einzige Ausnahme von dieser Regel ist eine Site, die sich fast ausschließlich auf eine Tour als Kernmerkmal stützt (die beschriebene Foto-Site wäre ein mögliches Beispiel), aber selbst in diesen Fällen sollte es für einen Benutzer leicht sein, die Tour zu beenden . Glücklicherweise wird dies standardmäßig in Bootstrap Tour unterstützt. Bei jedem Schritt ist eine Schaltfläche "Tour beenden" vorhanden.

Schnell loslegen

Bootstrap Tour setzt neben jQuery natürlich Elemente von Twitter Bootstrap sowie eine eigene CSS- und JavaScript-Datei voraus. Aus der Dokumentation entnehmen Sie bitte die erforderlichen Assets.

   …    …

Beachten Sie, dass Sie auch die Basis-CSS-Datei von Bootstrap einschließen müssen, um das Bootstrap-Popover anzuzeigen.

Starten Sie die Tour

Um mit einer Tour zu beginnen, führen Sie folgende Schritte in Ihrer JavaScript-Datei aus (die wir in Kürze behandeln werden):

 // Neue Tour erstellen var tour = new Tour (); // Füge deine Schritte hinzu tour.addSteps ([element: ".message.message-1"), // Elementauswahl, um den Popover neben; Titel: "Willkommen auf meiner Tour!", Inhalt: "Wir gehen Um dies schnell und nützlich zu machen. ", element:" .message.message-2 ", Titel:" Lassen Sie dieses Ding mit einem Knall beenden. ", Inhalt:" Boom, Bang, bam! "]); // Methode für die Tourklasse initialisieren. Holen Sie sich alles fertig und los geht's. tour.init (); // Dies startet die Tour selbst. Tour.start ();

Dieses Beispiel wurde fast direkt aus der Dokumentation übernommen und ist der einfachste Einstieg in die Bootstrap Tour.

Lass uns tiefer gehen, sollen wir?

Bootstrap Tour bietet Tonnen Optionen zum Anpassen der einzelnen Schritte der Tour, die Sie erstellen möchten. Standardmäßig unterstützt es localStorage (um Ihren Platz in der Tour beizubehalten, wenn Sie die Registerkarte schließen und später zurückkehren), die nächsten und vorherigen Funktionen sowie alle Arten von Rückrufen, die Sie so einrichten können, dass sie auf die Aktionen der Benutzer reagieren. Es bietet auch schöne polnische Funktionen wie einen Element-Textmarker, einen "Reflex-Modus" (wir werden weiter unten näher erläutern), Schritte zum automatischen Weiterschalten und sogar mehrseitige Touren.

Starter-Thema

Im Interesse dieser Demo beginnen wir mit einer kostenlosen Vorlage von StartBootstrap.com. StartBootstrap von Iron Summit Media Strategies ist eine Sammlung kostenloser und erstklassiger Bootstrap-Designs.

Nachdem Sie die Projekte heruntergeladen haben, sollte Ihre Dateistruktur so aussehen.

. ├── css ├── ├── bootstrap-tour.min.css ├── ├── bootstrap.css └── └── landing-page.css ├── font-awesome … ├── Schriftarten ├── ├── 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 │ └── Handys.png ├── index.html └── js ├── bootstrap-tour.min.js ├── bootstrap.js Jquery-1.10.2.js

Hinweis: Wir haben die interne Struktur von FontAwesome übersprungen, da es für dieses Tutorial nicht wichtig ist.

Assets einschließen

Als nächstes sollten Sie CSS und JavaScript von Bootstrap Tour in die index.html Datei. Das Dein Dokument sollte so aussehen:

      Landing Page-Vorlage für Bootstrap

Und am Ende des Dokuments sehen Sie das JavaScript kurz vor dem Schließen Etikett. Sobald Sie das Setup zum Laufen gebracht haben, können Sie loslegen! Natürlich müssen Sie Ihr eigenes benutzerdefiniertes JavaScript hinzufügen, so dass wir nach der Bootstrap Tour-Datei eine "script.js" hinzufügen.

Sie möchten diese Dateien in Ihrem Build-Prozess verketten und minimieren. In diesem Lernprogramm werden nicht die Erstellungsprozesse behandelt. Sie können jedoch mehr darüber erfahren, indem Sie Best Practices zur Steigerung der Website-Performance oder Meet Grunt: Das Build-Tool für JavaScript lesen.

Einige Schritte einrichten

Lassen Sie uns mit dem folgenden Code in unserer Datei "script.js" einige einfache Schritte einrichten.

 (function () var tour = neue Tour (storage: false); tour.addSteps ([element: ".tour-step.tour-step-one", Platzierung: "bottom", Titel: "Willkommen bei unsere Landingpage! ", Inhalt:" Diese Tour führt Sie durch einige der Funktionen, auf die wir hinweisen möchten. ", element:" .tour-step.tour-step-two ", Platzierung:" unten ", Titel:" Hauptnavigation ", Inhalt:" Hier sind die Abschnitte dieser Seite, die sich leicht anordnen lassen. ", Element:" .tour-step.tour-step-three ", Platzierung:" oben ", Hintergrund : true, Titel: "Hauptabschnitt", Inhalt: "Dies ist ein Abschnitt, den Sie lesen können. Er enthält wertvolle Informationen.",]); // Initialisieren Sie die Tour tour.init (); // Starten Sie die Tour .Start(); ());

Dieser Code ist dem oben beschriebenen Beispiel für den einfachen Start sehr ähnlich. Wir initiieren unsere Tour In unserem Beispiel wird der Speicher deaktiviert, so dass die Tour am Anfang der Seite beginnt, wenn die Seite jedes Mal geladen wird. (Wenn Sie diese Option entfernen, nachdem Sie Ihre Tour erstellt haben, funktioniert der Speicher gut.)

Dann definieren wir einige Schrittklassen und zugehörige Argumente. Beachten Sie das Argument "Hintergrund" des dritten Schritts. Dies hebt das Element hervor, das wir ausgewählt haben, um den Popover oben anzuhängen.

Markup-Änderungen vornehmen

Als Nächstes fügen wir die Schrittklassen zu den relevanten Elementen hinzu. Der Anfang unserer Indexdatei sollte jetzt wie folgt aussehen.

        Landing Page-Vorlage für Bootstrap               Starten Sie Bootstrap 
    Über
 Dienstleistungen
 Kontakt
 
 
 
 
      Zielseite
 Eine Vorlage von Start Bootstrap
 
   Twitter
  Github
  Linkedin
 
 
 
 
 
 
     
 
 Tod zum Stock-Foto: 
Besonderer Dank
 Ein besonderer Dank geht an Tod an das Stock Photo für die Bereitstellung der Fotos, die Sie in dieser Vorlage sehen. Besuchen Sie die Website, um Mitglied zu werden.

Und unsere Seite sollte beim Laden so aussehen:

Auf der dritten Stufe sehen wir die Hintergrund Feature in Aktion:

Großartig! Wir haben eine funktionierende Tour in ungefähr dreißig Zeilen JavaScript durchgeführt.

Verwendung dynamischer Inhalte

Touren sind viel besser, wenn sie personalisiert sind. Fragen Sie also unseren Benutzer, wie er zu Beginn der Tour heißt, und verwenden Sie ihn für die restlichen Schritte der Tour. Hier ist das JavaScript, das wir verwenden, um dies zu erreichen.

 (function () var name = "friend"; var tour = neue Tour (storage: false); tour.addSteps ([element: ".tour-step.tour-step-one", Platzierung: "bottom ", Titel:" Willkommen auf unserer Landingpage! ", Inhalt:" Wie heißen Sie?? 
", onNext: function (tour) var nameProvided = $ (" input [name = Ihr_name] "). val (); if ($ .trim (nameProvided)! ==" ") name = nameProvided; Element: ".tour-step.tour-step-two", Platzierung: "bottom", title: function () return "Welcome", + name;, content: "Hier sind die Abschnitte dieser Seite. leicht angelegt. ", element:" .tour-step.tour-step-three ", Platzierung:" oben ", Hintergrund: wahr, Titel:" Hauptabschnitt ", Inhalt:" Dies ist ein Abschnitt, den Sie können lesen. Es enthält wertvolle Informationen. ", Element:" .tour-step.tour-step-four ", Platzierung:" oben ", verwaist: wahr, Titel:" Danke. ", Inhalt: function () return" Wir können es kaum erwarten zu sehen, was Sie denken: "+ name +"! ",]); // Tour initialisieren Tour.init (); // Tour starten Tour.start (); ());

Notiere dass der Inhalt und Titel Argumente können entweder eine Zeichenfolge oder eine Funktion sein, sodass sie zum Zeitpunkt der Anzeige des Popovers ausgewertet werden können. Der Rückruf für den ersten Schritt erhält den Namen des Benutzers (unter Verwendung der in Bootstrap integrierten Klassen für die Gestaltung), und dann zeigen wir diesen Namen im zweiten und letzten (neuen) Schritt an. Wenn der Benutzer keinen Namen oder nur Leerzeichen eingibt, setzen wir den Standardnamen auf "Freund"..

Der letzte Schritt führt auch eine neue Eigenschaft ein, Waise. Dadurch kann der Schritt von einem bestimmten Element getrennt werden. Wir haben die Elementklassen nur aus Gründen der Kontinuität gelassen, und falls wir diesen Schritt irgendwann einem Element zuordnen möchten. So sieht der letzte Schritt aus:

Werde kreativ!

Wenn Sie möchten, dass Ihre Tour nützlich ist, benötigen Sie eine gute Inhaltsstrategie. Fügen Sie nicht einfach ein paar Sätze in Ihre JavaScript-Konfiguration ein und nennen Sie sie erledigt. Überlegen Sie, was Sie versuchen, den Benutzer _inspire_ zu machen, ob Sie nun Ihre Anwendung verwenden oder einfach nur begeistert sind.

Schreibe eine Erzählung

Bevor Sie Ihre Tour schreiben, schreiben Sie die Geschichte des Benutzers heraus, der die Tour erleben wird. Finden Sie heraus, wer der Benutzer ist und was er während des gesamten Prozesses denken und tun wird. Eine Tour ist von Natur aus auf einer Art Zeitleiste festgelegt. nutzen sie das aus. Entwickeln Sie eine Plotlinie mit dynamischer Einführung, Aufstieg und Schlussfolgerung und wenden Sie das Konzept auf die Tour an.

Informieren und erfreuen

Horace sagte einmal:

Das Ziel des Dichters ist es, zu informieren oder zu erfreuen oder in dem, was er sagt, sowohl Vergnügen als auch Anwendbarkeit auf das Leben zu kombinieren.

Der berühmte Designer Milton Glaser hat dies mit folgenden Worten erweitert:

Der Zweck von Kunst ist zu informieren und zu erfreuen.

Auch dies kann das Ziel einer guten Website-Tour sein. Finden Sie heraus, wie Sie nicht nur Informationsinhalte erstellen können, sondern den Benutzer gleichzeitig unterhalten können. Geben Sie dem Benutzer beispielsweise ein Gefühl der Erfüllung, wenn er die Tour abgeschlossen hat:

 var tour = neue Tour (onEnd: function (tour) giveAward ();); function giveAward () $ (". award"). addClass ("show"); setTimeout (function () $ (". award"). removeClass ("show");)

Dieses Snippet könnte dem Benutzer etwas am Ende der Tour als eine Art "Dankeschön" des Reiseleiters (das sind Sie) für den Abschluss der Reise zeigen.

Verwenden Sie das Medium

HTML ist biegsam. Machen Sie nicht einfach Schritt für Schritt; Tauchen Sie ein in die Verwendung von Rückrufen und das Beobachten des Benutzerverhaltens, um Erfahrungen wie Touren interaktiver zu gestalten. Sie können diese Bibliothek beispielsweise verwenden, um eine Erzählung im Stil "Wählen Sie Ihr eigenes Abenteuer" zu erstellen, die mit den Schritten zwischen den einzelnen Schritten springt gehe zu() Methode. Verwenden Sie Callbacks, um umfangreiches Verhalten auszulösen, beispielsweise Animationen oder iFrame-Injektionen. Werden Sie kreativ und erinnern Sie sich an die Kraft des Mediums.

Fazit

Bootstrap Tour ist ein leistungsstarkes Plugin, mit dem Sie schnell loslegen können. Wenn Sie Best Practices für UX und das Design von Inhalten anwenden, ist eine Tour möglicherweise genau das Richtige, um sich auf kraftvolle Weise mit Ihrem Publikum zu verbinden. Bootstrap Tour bietet noch mehr Flexibilität als wir hier beschrieben haben. Wenn Sie also einen zweiten Artikel über Bootstrap Tour erhalten möchten, geben Sie uns bitte in den Kommentaren Bescheid! Welche anderen Verwendungen können Sie finden? Lassen Sie alle unten wissen!

Web-Design