Share
Acest tutorial vă va învăța cum să creați o pagină web receptivă cu butoane care să ia diferite stări în funcție de interacțiunea utilizatorului. Acest tip de interacțiune este util mai ales pentru legături precum "cumpărare" sau "ștergere" unde este înțelept să confirmați că utilizatorul într-adevăr dorește să ia o acțiune specifică.
Această interacțiune este una cu care mulți sunt familiarizați; puteți vedea un efect similar în magazinul de aplicații Apple atunci când achiziționați aplicații.
Pagina creată în acest tutorial va funcționa, de asemenea, pe dispozitive mobile, deoarece este un design receptiv.
Vom crea o pagină de probă bazată pe rețeaua Tuts +, această pagină va conține butoane de confirmare a confirmării. Deși exemplul folosește butoanele de confirmare "Alăturați-vă acum", ați putea folosi acest stil de interacțiune oriunde ați avea nevoie de un utilizator pentru a confirma acțiunea pe care urmează să o ia.
Designul bun UI oferă utilizatorilor un sentiment inteligibil de putere care îi ajută constant să se simtă sub control.
Un aspect important al interacțiunii cu computerul uman este transmiterea către utilizator a unui sentiment de control. Când utilizatorii au control, se simt confortabil. Când nu sunt în control, ei sunt frustrați. Dar când te gândești la asta, oamenii sunt mereu în control. Computerele nu fac niciodată nimic fără să le instruiți mai întâi.
Acesta este locul unde importanța software-ului bun și a designului UI intră în imagine. Designul bun UI oferă utilizatorilor un sentiment inteligibil de putere care îi ajută constant să se simtă sub control. Ei nu vor cere "așteptați de ce sa întâmplat asta?" sau "așteptați cum am ajuns aici?"
Puteți transmite un sentiment de control utilizatorului prin comunicarea de informații despre ele cu fiecare interacțiune. Ajutați-i să înțeleagă cauza și efectul în sistem. Pentru a utiliza un exemplu de bază, dacă salvați ceva, sistemul vă va da un mesaj pozitiv spunând că "setările dvs. au fost salvate". Astfel, utilizatorii nu vor pune niciodată întrebări "Mă întreb dacă a fost salvat?"
Interacțiunea pe care o vom crea în acest tutorial îi dă utilizatorului un sentiment de control. Prin modificarea stării butonului și a confirmării de către utilizator a deciziei de achiziționare, ne asigurăm că utilizatorul nu face niciodată nimic în mod involuntar. Acest lucru este util în special atunci când cereți utilizatorilor să se despartă de banii câștigați; ultimul lucru pe care cineva vrea să-l plătească accidental pentru ceva!
Frumusețea acestei interacțiuni este că, mai degrabă decât primirea unui prompt pop-up spunând "sunteți sigur că vreți să cumpărați", utilizatorii sunt notificați prin schimbarea stării butonului pe care urmează să facă ceva important. Dacă nu vor să facă acest lucru, pot pur și simplu să continue să navigheze pe site; în timp ce un avertisment ar cere în mod explicit utilizatorului să ia o decizie da / nu.
Asigurați-vă că ați apucat dependențele de fișiere imagine pentru acest tutorial. Puneți-le într-un director numit "imagini". Toate celelalte fișiere (HTML, CSS, JavaScript) vor intra în directorul principal. La sfârșitul tutorialului, structura fișierului dvs. va arăta astfel:
Să începem prin crearea unor coduri de bază HTML care vor defini structura paginii noastre.
Ștergerea butoanelor de confirmare a confirmării
Deci, aici avem structura noastră de bază HTML5. Am inclus DOCTYPE-ul nostru, titlul paginii noastre și unul principal element cu un ID de #container
Acum, să adăugăm linkurile la dependențele markupului.
Mai întâi vom adăuga un link spre foaia de stiluri CSS (pe care o vom crea în curând). Acest lucru merge în element.
În continuare vom include un link către versiunea găzduită de Google a jQuery, precum și un link către "script.js" care va conține codul javascript pe care îl creăm mai târziu. Să le punem înainte de încheiere etichetă.
Pentru că vom folosi elemente HTML5 cum ar fi și va trebui să adăugăm codul HTML5 astfel încât marcajul nostru să funcționeze în IE8. Includeți acest lucru în antetul dvs.:
Vom proiecta această pagină pentru a fi receptivă și flexibilă până la mobil. Pentru a asigura că browserele mobile fac redarea corectă a paginii noastre, va trebui să setăm proprietatea meta-fereastră. Pentru a afla mai multe despre acest lucru, consultați articolul lui Ian Yates cu privire la meta tag-ul de vizualizare. În caz contrar, pur și simplu adăugați acest fragment de cod în element.
Să începem prin adăugarea unui antet al paginii în documentul nostru.
Cel mai bun mod de a învăța abilități creative și tehnice cum ar fi designul, dezvoltarea și multe altele!
Antetul nostru (la diferite dimensiuni) este destul de simplu și arată astfel:
Acum vom crea o listă neordonată în cadrul nostru element. Vom folosi aceasta pentru a împacheta elementele listate în listă.
După cum puteți vedea, am dat o listă neordonată o clasă de "listă" pe care o vom folosi pentru a viza stilurile sale cu CSS.
După cum puteți vedea, în interiorul fiecăruia Interior de Interior de Vom da butonul nostru ( Lorem ipsum dolor stau amet, consecutiv de adipiscare elit, temporar incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor stau amet, consecutiv de adipiscare elit, temporar incididunt ut labore et dolore magna aliqua. Iata ce avem pana acum: Acum că avem structura de bază pentru fiecare Puteți continua și copiați / inserați codul elementului de listă pentru fiecare site Tuts +. Asta este ceea ce avem acum: Acum, când avem întregul nostru markup, să începem să styling pagina. Vom începe prin a seta câteva resetări de bază: Acum haideți stilul principal Aici setăm culoarea de fundal și unele setări implicite pentru tipografia noastră, cum ar fi dimensiunea, culoarea și înălțimea tipului de tip. Vrem ca pagina noastră să fie flexibilă până la mobil. Deci, cele două componente cheie pe care le vom folosi pentru a realiza acest lucru sunt procentele și Privind la HTML-ul nostru, veți vedea Aici setăm lățimea containerului nostru ca să fie 100% din portul de vizualizare al browserului. Marjele noastre centrează conținutul paginii. Am adăugat, de asemenea După cum puteți vedea, la dimensiuni mai mari, containerul nostru are un spațiu suplimentar pe laturi, cu un fundal ușor. Dar la dimensiuni mai mici, spațiul suplimentar dispare și avem doar un fundal alb pentru conținutul nostru. Să nu uităm să facem ca imaginile noastre să răspundă: Acum, să ne stilistă principala noastră Elementul antetului nostru și conținutul său sunt acum frumos centrate și dimensionate. Acum o să începem să stilizăm articolele din listă și frații lor. Mai întâi, să formăm câteva stiluri structurale de bază: Dacă vă amintiți corect, în interiorul fiecărui element din listă avem două elemente principale: "icon" și "info". Figura pictogramei va fi flotată la stânga și având o lățime mică. Divizia "info" div va fi flotată la dreapta și având în vedere majoritatea lățimii părintelui. După cum puteți vedea, am folosit După adăugările structurale CSS, avem acum ceva care arată astfel: După cum puteți vedea, acest lucru trebuie să fie curățat puțin. În primul rând, deoarece plutiți "info" și "icon" elementelor noastre, trebuie să adăugăm o claritate fiecăruia dintre elementele din listă. De asemenea, vom adăuga puțin stil pentru fiecare element din listă. În cele din urmă, vom schița informațiile din interiorul fiecărui element din listă: Acum avem ceva care începe să arate destul de solid. Acum, hai să aplicăm niște butoane butonului. Le vom face vizibile: Ce am făcut aici? Totul arată destul de bine. Ceea ce vrem să facem acum este să adăugăm stiluri pentru o clasă care va fi aplicată butonului (lor) la momentul când le faceți clic. Pentru acest tutorial, vom adăuga textul "alăturați-vă acum" la textul butonului existent la apăsarea butonului. În esență, utilizatorul trebuie să ia decizia de a se "înscrie" de două ori. Pentru a realiza acest lucru, vom folosi un stil CSS, inclusiv pseudo-clasa CSS3 Să creăm o clasă numită "clic", la care putem adăuga stilurile de butoane "clicate" (în scopuri de dezvoltare, puteți adăuga manual o clasă de "clicuri" După cum puteți vedea, am atașat clasa "clic" la clasa "buton". Astfel, stilurile pe care le declarăm pentru "clic" vor apărea numai pe elementele care au și o clasă de butoane. În ceea ce privește styling-ul, pur și simplu am schimbat culoarea și granițele. S-ar putea să fi observat, de asemenea, că am adăugat un buton la buton atunci când a fost făcut clic pe el. Acest lucru va adăuga un stil de buton indentat, care ajută la întărirea utilizatorului pe care a fost apăsat butonul. Când utilizatorul face clic pe butonul de preț, ceea ce dorim să facem este să extindeți butonul și să prefixați textul "Alăturați-vă acum". Pentru a face acest lucru, vom folosi pseudo-clasa CSS3 Acum avem ceva de genul: După cum puteți vedea, la dimensiunile mobile, butonul "Alăturați-vă acum" începe să fie puțin înghesuit. Dacă textul antetului este foarte lung, butonul nostru se va difuza în antetul nostru. Deci, vom folosi puterea interogărilor mass-media pentru a împinge butonul de acțiune la nivelul următor când avem dimensiuni mai mici. Să creați o interogare media pentru mutarea butonului nostru: Acum butonul nostru va coborî sub antet la dimensiuni mai mici ale ecranului! Hai să intrăm acum în fișierul "script.js" și să scriem niște javascript care vor schimba stilurile noastre de butoane atunci când se dau clic. Mai întâi, să ne configurați scriptul pentru jQuery Scenariul nostru este de fapt destul de simplu. Tot ce trebuie să faceți este să comutați clasa de "clic" ori de câte ori faceți clic pe un buton. Deci, să stabilim o funcție: Acum, ceea ce vrem să facem este să verificăm și să vedem dacă butonul la care a fost făcut clic are deja o clasă de "clic" (probabil că a fost făcută clic mai devreme). Dacă nu are clasa "clicked", o vom adăuga și vom preveni Dacă butonul la care a fost făcut clic există deja o clasă de "clic" Dacă un utilizator face clic pe butonul de preț, va primi o stare de buton modificată. Ce se întâmplă dacă doresc să respingă butonul și fac clic în afara butonului? Vom înregistra acest clic și vom elimina clasa de "clic". Aceasta este o linie simplă de jQuery: Vrem să adăugăm un pic mai multă interactivitate făcând trecerea mai ușoară între stările "clicate" și cele normale. Vom folosi doar o tranziție CSS3 și o vom aplica la clasa "join": Acum aveți un buton de confirmare a confirmării. Acesta va ajuta utilizatorii să își confirme alegerea de a lua o decizie importantă cu pagina dvs. web / aplicație. Simțiți-vă liber să jucați cu acest concept, să faceți mai bine și să aflați mai multe!, avem două elemente principale; A element. Pictograma
Informațiile
element) element) element) element) o clasă de "join" pentru stilul CSS mai târziu.
Activetuts+
$ 15.99 Codul final pentru fiecare
element
Activetuts+
$ 15.99 
Pasul 6: Duplicarea și modificarea fiecărui
Element element, tot ce trebuie să facem este să îl duplicăm pentru fiecare intrare Tuts +. Pentru fiecare articol din listă trebuie să modificăm următoarele:
text legătură
Pasul 7: CSS de bază
/ * resetare rapidă * / corp, h1, h2, p, ul, li margine: 0; padding: 0; ul list-style-type: none;
corp element. corp background: #eee; font: 16px / 1.4m Helvetica, Arial, sans-serif; Culoare: # 333;
Pasul 7: Mergeți la reacție (lichid)
lățimea maximă regulă. este containerul principal pentru conținutul paginii noastre. Vom folosi valorile procentuale pentru lățime și vom adăuga câteva elemente de bază pentru a le separa vizual de fondul paginii. #container lățime: 100%; margine: 0 auto 40px; max-width: 600px; fundal: #fff; raza de graniță: 0 0 3px 3px; frontieră: 1px solid # d0d0d0; border-top: 0; box-shadow: 0 1px 0px #fff;
max-width: 600px pentru că nu vrem ca articolele din listă să fie mai mari decât acestea.
img max-lățime: 100%;
Pasul 8: Stiluri de antet
element și conținutul interior al acestuia. header text-aliniere: centru; padding: 30px 20px; antetul h1 margin-bottom: 20px; antet p culoare: # 413c38; font-size: 1.2em; line-height: 1.4em;
Pasul 9: Stiluri de elemente structurale
.pictogramă, .info box-size: border-box; .icon float: left; lățime: 15%; text-align: dreapta; padding-left: 3%; .info lățime: 85%; plutește la stânga; umplutură: 0 5%;
box-dimensionare: de frontieră-box; se pronunță asupra acestor două diviziuni. Acest lucru ne permite să adăugăm până la 100% lățimea totală și să putem adăuga elemente de umplutură fără a depăși o lățime totală de 100% (Pentru a afla mai multe despre această proprietate, citiți Elementele de încurajare a formelor receptive pentru a juca frumos).
Pasul 10: Stiluri de articole listate
.listă li padding: 20px 0; frontieră: 1px solid #eee; overflow: auto; clar: ambele; .list li: hover fundal: # f7f7f7;
.info h2 marginea-jos: 10px; font-size: 1.75em; line-height: 1em; display: inline-block; .info p font-size: 14px; Culoare: # 777;
Pasul 11: Stiluri de butoane
a text-decoration: none; Culoare: #fff; .junge fundal: # 57a9eb; / * Browsere vechi * / background: -moz-linear-gradient (top, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * FF3.6 + / fundal: -webkit-gradient (liniar, stânga sus, fund stânga, oprire color (0%, rgba (87,169,235,1)), stop culoare (100% ))); / * Chrome, Safari4 + * / fundal: -webkit-gradient linear (top, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Opera 11.10+ * / fundal: -ms-gradient linear (top, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * IE10 + * / fundal: gradient liniar (top, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * W3C * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 57a9eb", endColorstr = "# 359cea", GradientType = 0); / * IE6-9 * / frontieră: 1px solid # 326fa9; border-top-color: # 3e80b1; border-bottom-color: # 1e549d; Culoare: #fff; font-weight: bold; text-transform: majuscule; text-umbra: 0 -1px 0 # 1e3c5e; font-size: 11px; border-radius: 5px; box-shadow: 0 1px 0 #bbb, 0 1px 0 # 9cccf3 inset; white-space: nowrap; -webkit-tranziție: toate .25s ușurință; -moz-tranziție: toate ușurința .25s; tranziție: ușurința tuturor .25s; float: right; display: inline-block; umplutura: 1px 1im 0; / * face să apară centrul de la 1px highlight * / line-height: 2.25em;
Pasul 11: Stiluri de butoane alternative
::dupăStiluri de clase clicate
$ 15.99). .join.clicked background: # 24a501; / * Browsere vechi * / fundal: -moz-linear-gradient (top, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * FF3.6 + / fundal: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0%, rgba (30,183,0,1) , 1,1))); / * Chrome, Safari4 + * / fundal: -webkit-gradient liniar (top, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Opera 11.10+ * / fundal: -ms-gradient linear (top, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * IE10 + * / fundal: gradient liniar (top, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * W3C * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 1eb700", endColorstr = "# 24a501", GradientType = 0); / * IE6-9 * / frontieră: 1px solid # 1e8701; border-bottom-color: # 176701; border-top-color: # 24a501; box-shadow: 0 1px 0 #bbb, 0 1px 0 # acc63d inset; umplutura: 1px 2im 0; cursor: pointer; .join.clicked: activă box-shadow: 0 0 8px # 777 inset;
::după stiluri de clasă::după pentru a insera textul dorit. .join.clicked :: înainte de conținut: 'Alăturați-vă acum';
Pasul 12: Întrebări media
Ecranul @media și (max-width: 450px) .info h2 display: block; join (float: none; margin-bottom: 20px;
Pasul 13: Interacțiunea butonului cu jQuery
$ (document) .ready (funcția () // cod aici);
Pasul 14: Schimbarea claselor
$ ('. join') la ('click', functie () // cod aici); href atributul linkului de urmărit. // dacă nu are o clasă de clicuri, // adăugați una și să împiedicați urmărirea link-ului dacă (! ($ (this) .hasClass ('clicked'))) // Eliminați toate clasele "clicked" dacă există vreo $ ('clicked'). removeClass ('clicked'); // Adăugați o clasă "clicked" pe butonul la care a fost făcut clic pe $ (this) .addClass ('clicked'); // împiedică returnarea false; href valoarea va fi urmată de browser. Acest lucru funcționează bine, deoarece dacă un utilizator întâlnește această pagină și are javascript dezactivat, pur și simplu nu va putea confirma decizia de a se alătura acum. Mai degrabă, linkul va fi pur și simplu urmat fără feedback de confirmare.
Pasul 15: Înlăturarea clasei clicute
// dacă faceți clic în afara butonului de cumpărare, eliminați-l din clasa $ ('body') pe ('click', funcția () $ ('clicked') removeClass ('clicked');
Pasul 16: Adăugarea unei tranziții
-webkit-tranziție: toate facilitățile .25s; -moz-tranziție: toate ușurința .25s; -ms-tranziție: toate .25s ușurință; -o-tranziție: ușurința tuturor .25s; tranziție: ușurința tuturor .25s;
Asta e!
Accentsconagua
