Share
Indipendentemente dal modo in cui cerchiamo di rendere semplici le nostre applicazioni web, è spesso utile guidare i nuovi utenti nella loro prima esperienza. I tour visivi sono probabilmente il modo più semplice.
Se hai seguito il mio Envato Tuts + Crea il tuo avvio con la serie PHP, hai familiarità con Meeting Planner. Dopo aver visto gli utenti che pianificano il loro primo incontro, ho deciso che sarebbe stato meglio costruire una sorta di guida.
All'inizio, ho pensato di costruirlo da solo, ma poi ho trovato un'opzione open source, Shepherd.
Nel tutorial di oggi, ti presenterò per creare un tour visivo dell'utente con Shepherd. Usare Shepherd è relativamente semplice, e rivedrò alcuni dei miei codici che ho usato per semplificare il processo di authoring.
Shepherd è un'offerta open-source di HubSpot, un servizio di marketing in entrata. Complimenti a loro per l'offerta di una libreria robusta con una buona documentazione.
Parteciperò alle discussioni dei commenti qui sotto, quindi non esitate a fare domande e condividere il vostro feedback. Sarei particolarmente interessato alla tua esperienza con altre soluzioni di guida turistica visiva. Puoi raggiungermi anche su Twitter @lookahead_io.
Passiamo attraverso un semplice scenario per Shepherd.
Integrare un tour di base con Shepherd alla tua applicazione è semplice. Innanzitutto, scegli un file di temi e integri il loro JavaScript in questo modo:
Puoi scaricare i file dalla pagina di Shepherd GitHub. Sto usando il Pastore-theme-arrows.css sopra, ma puoi scegliere uno dei valori predefiniti di seguito e personalizzarli:
Successivamente, si crea un oggetto tour:
var tour; tour = new Shepherd.Tour (defaults: classes: 'shepherd-theme-arrows', scrollTo: true);
Le impostazioni predefinite possono essere definite per tutti i passaggi durante la creazione del tour. Le classi si riferiscono alle definizioni del tema che hai usato, ad es. Pastore-theme-frecce. E scrollTo assicura che tutti i passaggi vengano visualizzati nella finestra visibile.
Quindi, aggiungi singoli passaggi al tour:
Accentsconagua
tour.addStep ('example-step', text: 'Questo passaggio è allegato alla fine del . esempio-css-selettore elemento. ', attachTo:' .example-css-selector bottom ', classi:' example-step-extra-class ', pulsanti: [text:' Next ', action: tour.next]);Il testo è ciò che appare nel corpo del tour visivo. allegare a punta a un selettore CSS per l'elemento a cui vuoi far puntare il popup del tour in questo passaggio. Il pulsanti ti permettono di definire uno o più pulsanti e le loro azioni, ad es. Il prossimo.
E infine, inizi il tour:
tour.start ();
Shepherd si basa su Tether, un'altra offerta open source di HubSpot, che aiuta a posizionare gli elementi su altri elementi in una pagina. Tether assicura che i tuoi passi non trabocchino mai dallo schermo o vengano tagliati.
Sebbene non abbia avuto problemi con Tether, ho trovato dei problemi con Shepherd che non mostrava correttamente le frecce su alcuni elementi. Questo è successo casualmente, e io non sono l'unico con questo problema. Il team di HubSpot non ha risposto a nessuna delle mie richieste GitHub dopo due settimane, il che è un po 'deludente. Ancora, Shepherd è nel complesso una grande libreria JavaScript.
Quando ho iniziato a sperimentare con Shepherd, ho scoperto rapidamente che la creazione di una guida con molti passaggi poteva essere abbastanza lunga. Questo è qualcosa che ho affrontato nella mia stessa implementazione.
Non volevo creare il tour con un lungo pacchetto di codice JavaScript che avrebbe dovuto essere mantenuto nel tempo. Invece, ho scelto di creare un array e di personalizzare i pulsanti a livello di programmazione in base al fatto che gli utenti fossero all'inizio o alla fine del tour.
Ad esempio, creo a passi [] array e definito il tour popolando l'array:
var tour; var steps = []; steps.push (['. nav-tabs top', 'Welcome', 'Permettimi di mostrarti come pianificare un' + title + '.Se preferisci, puoi disattivare questa guida.
']); steps.push (['# headingWho top', 'Chi ti piacerebbe invitare?', 'Puoi aggiungere una persona o un gruppo di persone al tuo' + title + '.Fai clic sul pulsante persona per aggiungere partecipanti.
']); steps.push (['# invito-url in basso', 'Invito via e-mail', 'In alternativa, puoi inviare via e-mail il link della riunione ai tuoi partecipanti']); steps.push (['# headingWhat bottom', 'Di cosa parla il tuo incontro?', 'Puoi personalizzare l'oggetto del tuo' + title + '. Lo useremo per le e-mail di invito e promemoria.Fai clic sul pulsante a forma di matita per modificare l'oggetto.
']); if ($ ('# headingActivity'). length> 0) steps.push (['# headingActivity top', 'Che cosa vuoi fare?', 'Puoi suggerire una o più idee di attività. i tuoi partecipanti possono aiutarti a selezionare il loro preferito.Fai clic sul pulsante più per suggerire attività.
']); steps.push (['# headingWhen top', 'Quando vuoi incontrarti?', 'Suggerisci una o più date e orari per il tuo' + title + '. Con più di uno, i tuoi partecipanti possono aiutarti a scegliere.Fai clic sul pulsante + per aggiungerli.
']); steps.push (['# headingWhere top', 'Dove vuoi incontrare?', 'Suggerisci uno o più posti per il tuo' + titolo + '. Con più luoghi, i partecipanti possono aiutarti a scegliere.Usiamo Google Places per semplificare l'aggiunta di questi. Fai clic sul pulsante + per iniziare.
']); steps.push (['. virtualThing top', 'È un incontro virtuale?', 'Cambia tra di persona e virtuale '+ titolo +' come telefonate o conferenze online. ']); steps.push (['# actionSend top', 'Invio di inviti', 'La pianificazione è collaborativa. Dopo aver aggiunto orari e luoghi, puoi Invitare partecipanti per selezionare i loro preferiti. Un posto non è necessario per virtual '+ title +' \ s.']); steps.push (['# actionfinalizza a destra', 'Finalizza il piano', 'Una volta che scegli un'ora e un luogo, puoi Completare il programma. Ti invieremo via email gli inviti e i promemoria per l'impostazione. ']); steps.push (['# tourDiscussion sinistra', 'Condividi messaggi con partecipanti', 'Puoi scrivere avanti e indietro con i partecipanti sul messaggi linguetta.I messaggi vengono consegnati via email.
']); steps.push (['. container', 'Fai una domanda', 'Hai bisogno di aiuto? Fai una domanda e ti risponderemo il più velocemente possibile.Se preferisci, puoi disattivare la guida nelle impostazioni.
']);
Ogni elemento dell'array che ho aggiunto includeva tre elementi:
"#headingWho top" "Quando vuoi incontrarti?" Mantenere questo array era molto più semplice per me che definire i pulsanti per ogni singola fase del tutorial. Tuttavia, ciò significava che avevo bisogno di definire i pulsanti in modo programmatico mentre caricavo i passaggi nel tour.
Ho scritto questo codice per aggiungere e rispondere correttamente ai pulsanti del tour. Ad ogni passo, crea a pulsante array, che altrimenti dovrei definire manualmente:
per (i = 0; i < steps.length; i++) buttons=[]; // no back button at the start if (i>0) buttons.push (text: 'Back', classi: 'shepherd-button-secondary', action: function () return tour.back ();); // nessun pulsante successivo all'ultimo passo se (i! = (steps.length-1)) buttons.push (text: 'Successivo', classi: 'shepherd-button-primary', action: function () return tour.next ();); else buttons.push (text: 'Close', classi: 'shepherd-button-primary', action: function () return tour.hide (););
Ad esempio, il primo passo ha no Indietro pulsante, e l'ultimo passo ha no Il prossimo pulsante. Ma l'ultimo passo ha un Vicino pulsante.
Quindi, ciascuno passo dal mio array e ciascuno pulsante array viene aggiunto al tour.
tour.addStep ('step _' + i, text: steps [i] [2], titolo: steps [i] [1], attachTo: steps [i] [0], // classes: 'shepherd shepherd-open pastore-tema-frecce shepherd-transparent-text ', pulsanti: pulsanti,);Utilizzando questo approccio, non ho dovuto ridefinire ripetutamente gli stessi pulsanti per ogni fase del mio tutorial. Offre anche alcune possibilità programmatiche per personalizzare il tour in modo dinamico per il futuro.
Usando Yii, il mio framework di programmazione PHP scelto, ho aggiunto i file di inclusione necessari al mio file di asset. Questo viene caricato in particolari pagine in cui è necessario il tour. Nel mio caso, la pagina di pianificazione della riunione:
Vedrai sopra il CSS per il tema Shepherd e il JavaScript per Tether, Shepherd e il mio file di definizione del tour,
meeting_tour.js.Ho anche aggiunto i CSS per controllare la larghezza complessiva del mio popup di tour in 40% della vista:
.shepherd-element.shepherd-theme-arrows larghezza massima: 40%;Puoi guardare il video del tour di esempio sopra o su Vimeo. Se desideri provare tu stesso, iscriviti a Meeting Planner e sarai immediatamente portato al tour di programmazione.
Altre cose da considerare
Disattivazione del Visual Tour
Ho creato un'impostazione utente per consentire alle persone di disattivare rapidamente il tour. Piuttosto che includere un pulsante Off distraente su ogni passaggio, ho aggiunto un link a spegni la guida sul primo e sull'ultimo step del tour:
La disattivazione avviene in modo interattivo tramite AJAX e visualizza un collegamento utile alla pagina delle impostazioni di seguito. Ciò aiuta i nuovi utenti a trovare facilmente come riattivare il tour:
Shepherd's Advanced Capabilities
Ti ho appena mostrato le basi di Shepherd e come integrarlo rapidamente nella tua applicazione web. Finora, ha funzionato bene per me oltre ai problemi occasionali con le frecce. Tuttavia, Shepherd offre molto più di quello che ho recensito, in particolare per quanto riguarda l'elaborazione e la gestione degli eventi. Ciò consente di adattare il tour alla propria applicazione e lo stato corrente dell'utente in un modo più personalizzato. Hanno anche un'ottima documentazione.
Ad esempio, se un utente salta su un'area della tua pagina web, puoi fare in modo che l'evento attivi automaticamente un salto in un'altra fase del tour. Potrei tuffarmi in questo in un futuro tutorial.
In chiusura
Spero ti sia piaciuto imparare a conoscere Shepherd. È certamente un tour visivo visivamente raffinato, adatto agli sviluppatori che puoi integrare rapidamente in qualsiasi applicazione.
Per favore condividi la tua esperienza con Shepherd e altre librerie di visite visive nei commenti. E sentiti libero di fare domande.
Puoi sempre contattarmi direttamente su Twitter @lookahead_io. Se desideri leggere di più dei miei tutorial Envato Tuts +, eccone alcuni interessanti:
Link correlati
