Share
Questo tutorial ti insegnerà come creare una pagina web reattiva con pulsanti che assumono diversi stati a seconda dell'interazione dell'utente. Questo tipo di interazione è particolarmente utile su collegamenti come "acquisto" o "cancella", dove è opportuno confermare che l'utente vuole effettivamente intraprendere un'azione specifica.
Questa interazione è una che molti hanno familiarità con; è possibile vedere un effetto simile nell'app store di Apple al momento dell'acquisto di app.
La pagina che creiamo in questo tutorial funzionerà anche su dispositivi mobili, in quanto è un design reattivo.
Creeremo una pagina di esempio basata sulla rete Tuts +, questa pagina conterrà pulsanti di conferma di conferma. Anche se l'esempio utilizza i pulsanti di conferma "Iscriviti ora", potresti usare questo stile di interazione ovunque tu abbia bisogno di un utente per confermare l'azione che stanno per intraprendere.
La buona progettazione dell'interfaccia utente offre agli utenti un senso comprensibile di potenza che li aiuta a sentirsi in modo coerente.
Un aspetto importante dell'interazione uomo-macchina è il conferimento all'utente di un senso di controllo. Quando gli utenti hanno il controllo, si sentono a proprio agio. Quando non hanno il controllo, si sentono frustrati. Ma quando ci pensi, gli umani lo sono sempre nel controllo. I computer non fanno mai nulla senza che tu li abbia prima istruiti.
È qui che entra in scena l'importanza del buon software e della progettazione dell'interfaccia utente. La buona progettazione dell'interfaccia utente offre agli utenti un senso comprensibile di potenza che li aiuta a sentirsi in modo coerente. Non chiederanno mai "aspetta perché è successo?" o "aspetta come sono arrivato qui?"
Puoi trasmettere un senso di controllo all'utente comunicandogli informazioni dettagliate con ciascuna interazione. Aiutali a capire la causa e l'effetto nel sistema. Per utilizzare un esempio di base, se si salva qualcosa, il sistema ti darà un messaggio positivo che dice "le tue impostazioni sono state salvate". Quindi, gli utenti non metteranno mai in dubbio "Mi chiedo se sia stato salvato?"
L'interazione che creeremo in questo tutorial aiuta a dare all'utente un senso di controllo. Modificando lo stato del pulsante e confermando la decisione di acquisto da parte dell'utente, ci assicuriamo che l'utente non faccia mai qualcosa in modo non intenzionale. Ciò è particolarmente utile quando chiedi agli utenti di separarsi dai loro soldi duramente guadagnati; l'ultima cosa che chiunque vuole è pagare accidentalmente qualcosa!
La bellezza di questa interazione è che, piuttosto che ricevere un messaggio pop-up che dice "sei sicuro di voler acquistare?", Gli utenti vengono avvisati tramite il cambiamento di stato del pulsante che stanno per fare qualcosa di importante. Se non vogliono farlo, possono semplicemente continuare a navigare nel sito; mentre un avviso di allerta richiederebbe esplicitamente all'utente di prendere una decisione sì / no.
Assicurati di prendere le dipendenze del file immagine per questo tutorial. Mettili in una cartella chiamata "images". Tutti i tuoi altri file (HTML, CSS, JavaScript) andranno nella directory principale. Alla fine del tutorial, la struttura del file sarà simile a questa:
Iniziamo creando un codice HTML di base che definirà la struttura della pagina.
Stili dei pulsanti di feedback di conferma
Quindi qui abbiamo la nostra struttura di base HTML5. Abbiamo incluso il nostro DOCTYPE, il titolo della nostra pagina e un main elemento con un ID di #contenitore
Ora, aggiungiamo i collegamenti alle dipendenze del markup.
Per prima cosa aggiungeremo un link al nostro foglio di stile CSS (che presto creeremo). Questo va nel elemento.
Successivamente includeremo un link alla versione di jQuery ospitata da Google, oltre a un link a "script.js" che conserverà in seguito il codice javascript che creeremo. Mettiamole a posto prima della chiusura etichetta.
Perché utilizzeremo elementi HTML5 come e dovremo aggiungere il codice HTML5, quindi il nostro markup funziona in IE8. Includi questo nella tua intestazione:
Progetteremo questa pagina per essere reattiva e flessibile fino al mobile. Per garantire che i browser mobili rendano correttamente la nostra pagina, dovremo impostare la proprietà meta viewport. Per saperne di più, guarda l'articolo di Ian Yates sul meta tag viewport. Altrimenti, aggiungi semplicemente questo snippet di codice nel tuo elemento.
Iniziamo aggiungendo un'intestazione di pagina al nostro documento.
Il modo migliore per apprendere competenze creative e tecniche come design, sviluppo e altro!
Il nostro header (di diverse dimensioni) è piuttosto semplice e assomiglia a questo:
Ora creeremo una lista non ordinata sotto la nostra elemento. Lo useremo per avvolgere i nostri articoli elencati in.
Come puoi vedere, abbiamo fornito alla nostra lista non ordinata una classe di "lista" che useremo per scegliere come target i suoi stili con i CSS.
Come puoi vedere, all'interno di ciascuno All'interno di All'interno di Daremo il nostro pulsante (il Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempo incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, tempo incididunt ut labore et dolore magna aliqua. Ecco cosa abbiamo finora: Ora che abbiamo la struttura di base per ciascuno Puoi andare avanti e copiare / incollare il codice dell'oggetto della lista per ogni sito Tuts +. Questo è quello che abbiamo ora: Ora che abbiamo completato tutto il nostro markup, iniziamo a disegnare la pagina. Inizieremo impostando alcuni reset di base: Ora diamo uno stile al principale Qui impostiamo il colore di sfondo e alcuni valori di default per la nostra tipografia come la dimensione del tipo, il colore e l'altezza della linea. Vogliamo che la nostra pagina sia flessibile fino al mobile. Quindi, i due componenti chiave che useremo per raggiungere questo sono le percentuali e il Guardando il nostro codice HTML, vedrai Qui impostiamo la larghezza del nostro contenitore in modo che sia al 100% del viewport del browser. I nostri margini si concentrano sul contenuto della pagina. Abbiamo anche aggiunto Come puoi vedere, con dimensioni maggiori il nostro contenitore ha uno spazio extra sui lati con uno sfondo chiaro. Ma a dimensioni più piccole, quello spazio extra scompare e abbiamo solo uno sfondo bianco per il nostro contenuto. Non dimentichiamo di rendere le nostre immagini reattive: Ora diamo uno stile al nostro principale Il nostro elemento di intestazione e il suo contenuto sono ora ben centrati e dimensionati. Ora inizieremo a modellare le nostre voci di elenco e i loro fratelli. Innanzitutto, creiamo alcuni stili strutturali di base: Se ricordi correttamente, all'interno di ogni elemento della lista abbiamo due elementi principali: "icona" e "informazioni". La figura dell'icona verrà spostata a sinistra e verrà visualizzata una larghezza ridotta. Il div 'info' sarà flottato a destra e data la maggior parte della larghezza genitore. Come puoi vedere, abbiamo usato il Dopo le nostre aggiunte strutturali CSS, ora abbiamo qualcosa che assomiglia a questo: Come puoi vedere, questo deve essere pulito un po '. Innanzitutto perché stiamo facendo fluttuare i nostri elementi 'info' e 'icona', dobbiamo aggiungere un chiaro a ciascuno degli elementi dell'elenco. Aggiungiamo anche un po 'di stile ad ogni elemento della lista. Infine, modificheremo le informazioni all'interno di ciascuna voce dell'elenco: Ora abbiamo qualcosa che sta iniziando a sembrare abbastanza solido. Ora applichiamo alcuni stili ai nostri pulsanti. Li renderemo visivamente prominenti: Cosa abbiamo fatto qui? Tutto sembra abbastanza buono. Quello che vogliamo fare ora è aggiungere gli stili per una classe che verrà applicata ai pulsanti quando vengono cliccati. Per questo tutorial, aggiungeremo il testo "join now" al testo del pulsante esistente quando si fa clic sul pulsante. In sostanza, l'utente deve prendere la decisione di "aderire" due volte. Per fare ciò, useremo alcuni stili CSS, inclusa la pseudo classe CSS3 Creiamo una classe chiamata 'cliccata' a cui aggiungere i nostri stili di pulsante 'cliccati' (a scopo di sviluppo, puoi aggiungere manualmente una classe di "clic" a qualsiasi Come puoi vedere, abbiamo associato la classe "cliccata" alla classe "pulsante". In questo modo, gli stili che dichiariamo per "cliccati" appariranno solo sugli elementi che hanno anche una classe di pulsanti. Per quanto riguarda lo stile, abbiamo semplicemente cambiato colore e bordi. Potresti anche aver notato che abbiamo aggiunto un box-shadow al pulsante quando viene cliccato. Ciò aggiungerà uno stile di pulsante rientrato che aiuta a rafforzare all'utente che il pulsante è stato cliccato. Quando l'utente fa clic sul pulsante del prezzo, ciò che vogliamo fare è far espandere il pulsante e anteporre il testo "join now". Per fare ciò, useremo la pseudo classe CSS3 Ora abbiamo qualcosa di simile a questo: Come puoi vedere, a dimensione cellulare il nostro pulsante "Iscriviti ora" sta iniziando a diventare un po 'angusto. Se il nostro testo dell'intestazione è molto lungo, il nostro pulsante verrà inserito nella nostra intestazione. Quindi, sfrutteremo la potenza delle media query per aumentare il nostro pulsante di azione al livello successivo quando siamo su schermi di dimensioni più ridotte. Creiamo una query multimediale per spostare il nostro pulsante: Ora il nostro pulsante scenderà sotto l'intestazione a dimensioni dello schermo più piccole! Passiamo ora al nostro file "script.js" e scriviamo alcuni javascript che cambieranno i nostri stili di pulsanti quando vengono cliccati. Per prima cosa, impostiamo il nostro script per jQuery La nostra sceneggiatura è in realtà piuttosto semplice. Tutto quello che dobbiamo fare è alternare la classe di "clic" ogni volta che un pulsante viene cliccato. Quindi impostiamo una funzione: Ora, quello che vogliamo fare è controllare e vedere se il pulsante su cui è stato fatto clic ha già una classe di "clic" (forse è stato fatto clic in precedenza). Se non ha la classe 'cliccata', la aggiungeremo e impediremo il Se il pulsante su cui è stato fatto clic ha già una classe di "clic" su Se un utente fa clic sul pulsante del prezzo, otterrà uno stato di pulsante modificato. Cosa succede se vogliono chiudere il pulsante e fanno clic all'esterno del pulsante stesso? Registreremo quel clic e rimuoviamo la classe di "clic". Questa è una semplice linea di jQuery: Vogliamo aggiungere un po 'più di interattività rendendo più fluida la transizione tra gli stati dei pulsanti "cliccati" e normali. Useremo solo una transizione CSS3 e la applicheremo alla classe del pulsante 'join': Ora hai un bel pulsante di feedback di conferma. Aiuterà gli utenti a confermare la loro scelta per prendere una decisione importante con la tua pagina web / applicazione. Sentiti libero di giocare con questo concetto, renderlo migliore e saperne di più!, abbiamo due elementi principali; un elemento. L'icona
Le informazioni
elemento) elemento) elemento) element) una classe di "join" per lo stile CSS in seguito.
Activetuts+
$ 15.99 Codice finale per ciascuno
elemento
Activetuts+
$ 15.99 
Passaggio 6: duplicazione e modifica di ciascuno
Elemento elemento, tutto ciò che dobbiamo fare è duplicarlo per ogni voce di Tuts +. Dobbiamo cambiare quanto segue per ciascun elemento della lista:
testo collegamento
Passaggio 7: CSS di base
/ * reset rapido * / corpo, h1, h2, p, ul, li margine: 0; padding: 0; ul list-style-type: none;
corpo elemento. body background: #eee; font: 16px / 1.4em Helvetica, Arial, sans-serif; color: # 333;
Step 7: Going Responsive (Liquid)
larghezza massima regola. è il contenitore principale per il contenuto della nostra pagina. Useremo i valori percentuali per la larghezza e aggiungeremo alcuni stili di base per separarli visivamente dallo sfondo della pagina. #container width: 100%; margine: 0 auto 40px; max-width: 600px; sfondo: #fff; border-radius: 0 0 3px 3px; border: 1px solid # d0d0d0; border-top: 0; box-shadow: 0 1px 0px #fff;
max-width: 600px perché non vogliamo che gli elementi della nostra lista siano mai più grandi di così.
img larghezza massima: 100%;
Passaggio 8: stili di intestazione
elemento e il contenuto al suo interno. header text-align: center; imbottitura: 30px 20px; header h1 margin-bottom: 20px; header p color: # 413c38; font-size: 1.2em; line-height: 1.4em;
Passaggio 9: Stili elemento elenco strutturale
.icona, .info ridimensionamento della casella: border-box; .icon float: left; width: 15%; text-align: right; padding-left: 3%; .info width: 85%; float: sinistra; imbottitura: 0 5%;
box-sizing: border-box; regola su questi due div. Questo ci permette di avere la nostra larghezza totale aggiunta al 100% e di essere ancora in grado di aggiungere padding senza superare una larghezza totale del 100% (per saperne di più su questa proprietà, leggi Incoraggia gli elementi del modulo reattivo per giocare a Nizza).
Passaggio 10: elencare gli stili degli elementi
.lista li padding: 20px 0; border-top: 1px solid #eee; overflow: auto; clear: both; .list li: hover background: # f7f7f7;
.info h2 margin-bottom: 10px; font-size: 1.75em; line-height: 1em; display: inline-block; .info p font-size: 14px; color: # 777;
Passaggio 11: stili dei pulsanti
a decorazione del testo: nessuna; color: #fff; .join background: # 57a9eb; / * Vecchi browser * / background: -moz-linear-gradient (in alto, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * FF3.6 + * / background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, rgba (87,169,235,1)), color-stop (100%, rgba (53,156,234,1 ))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (in alto, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (in alto, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (in alto, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * IE10 + * / sfondo: gradiente lineare (superiore, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 57a9eb", endColorstr = "# 359cea", GradientType = 0); / * IE6-9 * / border: 1px solid # 326fa9; border-top-color: # 3e80b1; border-bottom-color: # 1e549d; color: #fff; font-weight: bold; text-transform: uppercase; text-shadow: 0 -1px 0 # 1e3c5e; font-size: 11px; border-radius: 5px; box-shadow: 0 1px 0 #bbb, 0 1px 0 # 9cccf3 inserito; white-space: nowrap; -webkit-transition: all .25s easy; -moz-transition: all .25s easy; transizione: tutte le .25s facilità; float: right; display: inline-block; padding: 1px 1em 0; / * fa apparire il centro da 1px highlight * / line-height: 2.25em;
Passaggio 11: stili di pulsanti alternativi
::dopoStili di classe cliccati
$ 15.99). .join.clicked background: # 24a501; / * Vecchi browser * / background: -moz-linear-gradient (in alto, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * FF3.6 + * / background: -webkit-gradient (lineare, sinistra in alto, in basso a sinistra, color-stop (0%, rgba (30,183,0,1)), color-stop (100%, rgba (36,165 , 1,1))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (in alto, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (top, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (in alto, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * IE10 + * / sfondo: gradiente lineare (superiore, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 1eb700", endColorstr = "# 24a501", GradientType = 0); / * IE6-9 * / border: 1px solid # 1e8701; border-bottom-color: # 176.701; border-top-color: # 24a501; box-shadow: 0 1px 0 #bbb, 0 1px 0 # acc63d inset; imbottitura: 1px 2em 0; cursor: pointer; .join.clicked: active box-shadow: 0 0 8px # 777 inset;
::dopo stili di classe::dopo per inserire il testo che vogliamo. .join.clicked :: before content: 'Join Now';
Passaggio 12: query multimediali
@media screen e (max-width: 450px) .info h2 display: block; .join float: none; margin-bottom: 20px;
Passaggio 13: Interazione pulsante con jQuery
$ (document) .ready (function () // code here);
Passaggio 14: attivazione delle classi
$ ('. join'). on ('click', function () // code here); href attributo del collegamento dall'essere seguito. // se non ha una classe cliccata, // aggiungi una e impedisce che il link venga seguito se (! ($ (this) .hasClass ('clicked'))) // Rimuovi qualsiasi classe 'cliccata' se ci sono $ ('. cliccato'). removeClass ('cliccato'); // Aggiungi la classe 'cliccata' al pulsante su cui è stato fatto clic $ (this) .addClass ('clicked'); // impedisce che il collegamento venga seguito restituisce false; href il valore sarà seguito dal browser. Funziona bene perché se un utente incontra questa pagina e ha javascript disabilitato, semplicemente non sarà in grado di confermare la loro decisione di "aderire ora". Piuttosto, il collegamento verrà semplicemente seguito senza alcun feedback di conferma.
Passaggio 15: rimozione della classe selezionata
// se il clic avviene al di fuori del pulsante .buy, rimuovi la sua classe $ ('body'). on ('click', function () $ ('. clicked'). removeClass ('clicked'););
Passaggio 16: aggiunta di una transizione
-transizione webkit: tutto a posto .25s; -moz-transition: all .25s easy; -ms-transizione: tutti i .25s si adattano; -o-transizione: tutte le .25s facilità; transizione: tutte le .25s facilità;
Questo è tutto!
Accentsconagua
