Share
Denne opplæringen vil lære deg hvordan du oppretter en responsiv nettside med knapper som tar på forskjellige stater avhengig av brukerens interaksjon. Denne typen interaksjon er spesielt nyttig på lenker som "kjøp" eller "slett" hvor det er lurt å bekrefte at brukeren faktisk ønsker å ta en bestemt handling.
Denne interaksjonen er en som mange er kjent med; Du kan se en lignende effekt i Apples appbutikk når du kjøper apper.
Siden vi lager i denne opplæringen, vil også fungere på mobile enheter, da det er en responsiv design.
Vi lager en eksempelside basert på Tuts + -nettverket, denne siden inneholder bekreftelses tilbakekoblingsknapper. Selv om eksemplet bruker "nå til" bekreftelsesknapper, kan du tenkelig bruke denne interaksjonsstilen hvor som helst der du trenger en bruker for å bekrefte handlingen de skal ta.
God UI-design gir brukerne en forståelig maktfølelse som konsekvent hjelper dem til å føle seg i kontroll.
Et viktig aspekt ved menneskelig datamaskininteraksjon er å formidle brukeren en følelse av kontroll. Når brukerne er i kontroll, føler de seg komfortable. Når de ikke er i kontroll, blir de frustrert. Men når du tenker på det, er mennesker alltid i kontroll. Datamaskiner gjør aldri noe uten at du først instruerer dem.
Dette er hvor viktigheten av god programvare og UI-design kommer inn i bildet. God UI-design gir brukerne en forståelig maktfølelse som konsekvent hjelper dem til å føle seg i kontroll. De vil aldri spørre "vent hvorfor skjedde det?" eller "vent hvordan kom jeg hit?"
Du kan formidle en følelse av kontroll til brukeren ved å formidle innsikt til dem med hver interaksjon. Hjelp dem å forstå årsak og effekt i systemet. For å bruke et grunnleggende eksempel, hvis du lagrer noe, vil systemet gi deg en positiv melding som sier at "innstillingene dine er lagret". Dermed vil brukerne aldri stille spørsmål "Jeg lurer på om det ble frelst?"
Samspillet vi lager i denne opplæringen bidrar til å gi brukeren en følelse av kontroll. Ved å endre knappestatus og ha brukeren bekrefter deres beslutning om å kjøpe, sørger vi for at brukeren aldri gjør noe utilsiktet. Dette er spesielt nyttig når du ber brukerne å dele med sine hardt opptjente penger; Det siste du vil ha er å tilfeldigvis betale for noe!
Skjønnheten i denne interaksjonen er at i stedet for å motta en popup-ledetekst, sier du "Er du sikker på at du vil kjøpe?", Blir brukerne varslet via knappendringsendringen de skal gjøre noe viktig. Hvis de ikke vil gjøre det, kan de ganske enkelt fortsette å bla gjennom nettstedet; mens en varslingsprompt vil utvilsomt kreve at brukeren foretar en ja / nei beslutning.
Pass på at du tar tak i bildefilavhengighetene for denne opplæringen. Sett dem i en mappe som heter "bilder". Alle dine andre filer (HTML, CSS, JavaScript) vil gå i hovedkatalogen. På slutten av opplæringen vil filstrukturen se slik ut:
La oss komme i gang ved å lage noen grunnleggende HTML som vil definere vår sidestruktur.
Bekreftelse Tilbakemelding Knapp Styles
Så her har vi vår grunnleggende HTML5 sidestruktur. Vi inkluderte vår DOCTYPE, vår side tittel og en hoved element med en ID av #container
La oss nå legge til linkene til markupens avhengigheter.
Først vil vi legge til en link til vårt CSS stilark (som vi snart skal lage). Dette går i element.
Deretter vil vi inkludere en kobling til Googles hostedversjon av jQuery, samt en lenke til "script.js" som vil holde javascript-koden vi lager senere. La oss sette disse rett før avslutningen stikkord.
Fordi vi skal bruke HTML5-elementer som og vi må legge til HTML5 shiv slik at vårt oppslag fungerer i IE8. Inkluder dette i overskriften din:
Vi designer denne siden for å være lydhør og fleksibel ned til mobil. For å sikre at mobilnettlesere gjengir vår side riktig, må vi sette egenskapen meta viewport. For å lære mer om dette, sjekk ut Ian Yates 'artikkel om visnings-metataggen. Ellers legger du ganske enkelt til denne koden i koden din element.
La oss begynne med å legge til et sidelinje i dokumentet vårt.
Den beste måten å lære kreative og tekniske ferdigheter som design, utvikling og mer!
Vår topptekst (i forskjellige størrelser) er ganske grunnleggende og ser slik ut:
Nå skal vi lage en uordnet liste under vår element. Vi bruker dette til å pakke inn våre oppførte elementer i.
Som du kan se, ga vi vår uordnede liste en klasse med "liste" som vi skal bruke for å målrette sine stiler med CSS.
Som du kan se, innsiden av hver Inni Inni Vi skal gi vår knapp (the Du er her for å være sikker på at du er i stand til å hjelpe deg med tid og tid, og du kan lære mer om deg selv.. Du er her for å være sikker på at du er i stand til å hjelpe deg med tid og tid, og du kan lære mer om deg selv.. Her er det vi har så langt: Nå som vi har den grunnleggende strukturen for hver Du kan fortsette og kopiere / lime inn listeelementkoden for hver Tuts + -side. Dette er hva vi har nå: Nå som vi har fullført alle våre oppslag, la oss begynne å utforme siden. Vi begynner med å sette noen grunnleggende tilbakestillinger: La oss nå stilen Her setter vi bakgrunnsfargen og noen standardverdier for vår typografi, for eksempel typen størrelse, farge og linjehøyde. Vi vil at vår side skal være fleksibel helt ned til mobilen. Så, de to hovedkomponentene vi skal bruke for å oppnå dette er prosentandeler og Ved å se på vår HTML, vil du se Her setter vi beholderens bredde til å være 100% av nettleserens visningsport. Våre marginer senterer innholdet på siden. Vi har også lagt til Som du kan se, har våre containere i større størrelser litt ekstra plass på sidene med en lys bakgrunn. Men i mindre størrelser forsvinner den ekstra plassen, og vi har bare en hvit bakgrunn for innholdet vårt. La oss ikke glemme å gjøre bildene våre lydhør: La oss stilen vår viktigste Vårt hovedelement og innhold er nå pent sentrert og størrelse. Nå skal vi begynne å utforme våre listeposter og deres søsken. La oss først lage noen grunnleggende strukturelle stiler: Hvis du husker riktig, har vi i hver liste element to hovedelementer: 'ikon' og 'info'. Ikonfiguret vil bli floppet til venstre og gitt en liten bredde. "Info" div vil bli floated rett og gitt størstedelen av foreldre bredden. Som du kan se brukte vi Etter våre strukturelle CSS tillegg har vi nå noe som ser slik ut: Som du kan se, må dette ryddes opp litt. Først fordi vi flyter elementene våre 'info' og 'ikon', må vi legge til et klart for hver av listelementene. Vi legger også til en liten styling til hver liste element. Til slutt skal vi stile informasjonen i hver liste element: Nå har vi noe som begynner å se ganske solidt ut. La oss nå bruke styling til knappene våre. Vi gjør dem visuelt fremtredende: Hva gjorde vi her? Alt ser bra ut. Hva vi vil gjøre nå, er å legge til stiler for en klasse som vil bli brukt på knappen (e) når de klikkes. For denne opplæringen skal vi legge til teksten "Bli med nå" til den eksisterende knappeteksten når knappen klikkes. I hovedsak må brukeren bestemme seg for å "bli med" to ganger. For å oppnå dette, skal vi bruke noen CSS styling, inkludert CSS3 pseudoklassen La oss lage en klasse som heter "klikket" som vi kan legge til våre "klikkede" knappestiler (for utviklingsformål kan du manuelt legge til en klasse av "klikket" til noen Som du kan se, har vi lagt klassen "klikket" til "knappen" -kategorien. På den måten vil stilene vi erklærer for "klikket", bare vises på elementer som også har en klasse med knapp. Når det gjelder styling, endret vi bare farge og grenser. Du har kanskje også lagt merke til at vi har lagt til en bokseskygge til knappen når den blir klikket. Dette vil legge til en innrykket knappestil som bidrar til å forsterke til brukeren at knappen ble klikket. Når brukeren klikker på prisknappen, er det vi ønsker å gjøre, ved å trykke på knappen og utvide teksten "bli med nå". For å gjøre dette bruker vi CSS3 pseudoklassen Nå har vi noe slikt: Som du kan se, ved mobilstørrelse begynner vår "join now" -knapp å bli litt trangt. Hvis vår topptekst er veldig lang, vil vår knapp komme inn i vår overskrift. Så, vi vil utnytte kraften til medieforespørsler for å støte vår handlingsknapp til neste nivå når vi har mindre skjermstørrelser. La oss lage et mediesøk for å flytte knappen vår: Nå vil vår knapp støte ned under overskriften på mindre skjermstørrelser! La oss nå gå inn i vår "script.js" -fil og skrive noe javascript som vil endre våre knappestiler når de blir klikket. La oss først sette opp vårt skript for jQuery Vårt skript er faktisk ganske enkelt. Alt vi trenger å gjøre er å bytte klassen "klikket" når en knapp blir klikket. Så la oss sette opp en funksjon: Nå, hva vi vil gjøre, er å se om knappen som ble klikket, allerede har en klasse av "klikket" (kanskje den ble klikket tidligere). Hvis den ikke har klassen, vil vi legge til den og forhindre Hvis knappen som ble klikket, har allerede en klasse av "klikket" på Hvis en bruker klikker på prisknappen, får de en endret knappestatus. Hva om de vil avvise knappen og de klikker utenfor knappen selv? Vi skal registrere det klikket og fjerne klassen "klikket". Dette er en enkel linje av jQuery: Vi ønsker å legge til litt mer interaktivitet ved å gjøre overgangen mellom "klikket" og normal knappen sier jevnere. Vi bruker bare en CSS3 overgang og bruker den til "join" -knappen klassen: Du har nå en fin tilbakemelding tilbakemeldingsknapp. Det vil hjelpe brukerne med å bekrefte sitt valg for å ta en viktig beslutning med din nettside / søknad. Ta gjerne med dette konseptet, gjør det bedre og lær mer!, vi har to hovedelementer; en element. Ikonet
Infoen
element) element) element) element) en klasse med "join" for CSS styling senere.
Activetuts+
$ 15.99 Endelig kode for hver
element
Activetuts+
$ 15.99 
Trinn 6: Dupliserer og modifiserer hver
Element element, alt vi trenger å gjøre er å duplisere det for hver Tuts + -oppføring. Vi må endre følgende for hvert liste element:
tekst link
Trinn 7: Grunnleggende CSS
/ * rask tilbakestilling * / kropp, h1, h2, p, ul, li margin: 0; padding: 0; ul liste-stil-type: none;
kropp element. kropp bakgrunn: #eee; font: 16px / 1.4em Helvetica, Arial, sans-serif; color: # 333;
Trinn 7: Går Responsive (Liquid)
max bredde regel. er hovedbeholderen for innholdet på siden vår. Vi bruker prosentverdier for bredden, og vi legger til noen grunnleggende styling for å adskille den visuelt fra sidebakgrunnen. #container width: 100%; margin: 0 auto 40px; max-bredde: 600 piksler; bakgrunn: #fff; grense-radius: 0 0 3px 3px; grense: 1px solid # d0d0d0; border-top: 0; boks-skygge: 0 1px 0px #fff;
max-bredde: 600 piksler fordi vi ikke vil at våre listeposter alltid skal være større enn det.
img maksimal bredde: 100%;
Trinn 8: Header Styles
element og innholdet inne i det. header text-align: center; polstring: 30px 20px; header h1 margin-bottom: 20px; header p farge: # 413c38; font-size: 1.2em; linje-høyde: 1.4em;
Trinn 9: Strukturelle listestilarter
.ikon, .info box-size: border-box; .icon float: left; bredde: 15%; tekst-Justering: høyre; padding-left: 3%; .info bredde: 85%; float: venstre; polstring: 0 5%;
box-sizing: border-box; herske på disse to divene. Dette gir oss mulighet til å ha en total bredde på opptil 100% og fortsatt kunne legge til utfylling uten å gå over en total bredde på 100%. (For å lære mer om denne egenskapen, les Oppmuntre Responsive Form Elements to Play Nice).
Trinn 10: Listemodell Styles
.liste li polstring: 20px 0; border-top: 1px solid #eee; flow: auto; klar: begge; .list li: svever bakgrunn: # f7f7f7;
.info h2 margin-bunn: 10px; font-size: 1.75em; linje-høyde: 1em; display: inline-blokk; .info p font-size: 14px; color: # 777;
Trinn 11: Knappstiler
en tekst-dekorasjon: ingen; farge: #fff; .join bakgrunn: # 57a9eb; / * Gamle nettlesere * / bakgrunn: -moz-lineær gradient (topp, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, rgba (87,169,235,1)), fargestopp (100%, rgba (53,156,234,1 ))); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær gradient (topp, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Chrome10 +, Safari5.1 + * / bakgrunn: -o-lineær gradient (topp, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Opera 11.10+ * / bakgrunn: -ms-lineær gradient (topp, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * IE10 + * / bakgrunn: lineær gradient (topp, 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; farge: #fff; font-vekt: bold; text-transform: store bokstaver; tekstskygge: 0 -1px 0 # 1e3c5e; font-size: 11px; border-radius: 5 px; boksskygge: 0 1px 0 #bbb, 0 1px 0 # 9cccf3 innsett; white-space: NOWRAP; -webkit-overgang: alle .25s enkelhet; -moz-overgang: alle .25s enkelhet; Overgang: alle .25s enkelhet; float: right; display: inline-blokk; polstring: 1px 1em 0; / * Gjør vises senter fra 1px høydepunkt * / linjehøyde: 2.25em;
Trinn 11: Alternativ knappestiler
::etterKlikkte klassestiler
$ 15.99). .join.clicked bakgrunn: # 24a501; / * Gamle nettlesere * / bakgrunn: -moz-lineær gradient (topp, rgba (30.183,0,1) 0%, rgba (36.165,1,1) 100%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, rgba (30.183,0,1)), fargestopp (100%, rgba (36.165 , 1,1))); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær gradient (topp, rgba (30.183,0,1) 0%, rgba (36.165,1,1) 100%); / * Chrome10 +, Safari5.1 + * / bakgrunn: -o-lineær gradient (topp, rgba (30.183,0,1) 0%, rgba (36.165,1,1) 100%); / * Opera 11.10+ * / bakgrunn: -ms-lineær gradient (topp, rgba (30.183,0,1) 0%, rgba (36.165,1,1) 100%); / * IE10 + * / bakgrunn: lineær gradient (topp, 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: # 176701; border-top-color: # 24a501; boks-skygge: 0 1px 0 #bbb, 0 1px 0 # acc63d innsett; polstring: 1px 2em 0; Markøren: pekeren; .join.clicked: aktiv box-shadow: 0 0 8px # 777 insert;
::etter klassestiler::etter å sette inn teksten vi vil ha. .join.clicked :: før innhold: 'Bli med nå';
Trinn 12: Medieforespørsler
@media skjerm og (maksimal bredde: 450px) .info h2 display: block; .join float: none; margin-bottom: 20 piksler;
Trinn 13: Knappinteraksjon med jQuery
$ (dokument) .ready (funksjon () // kode her);
Trinn 14: Bytte klasser
$ ('.no'). på ('klikk', funksjon () // kode her); href Attributt for lenken fra å bli fulgt. // hvis det ikke har en klasse klikket, // legg til en og forhindre at lenken følges hvis (! ($ (dette) .hasClass ('klikket'))) // Fjern noen klikkede 'klasser hvis det er noen $ ('klikket'). removeClass ('klikket'); // Legg til 'klikket' klassen til knappen som ble klikket $ (dette) .addClass ('klikket'); // hindre at lenken blir fulgt tilbake, falsk; href verdien vil bli fulgt av nettleseren. Dette fungerer bra, fordi hvis en bruker møter denne siden og har javascript deaktivert, vil de ganske enkelt ikke kunne bekrefte sin beslutning om å bli med nå. Snarere vil linken bare følges uten tilbakemelding om tilbakemelding.
Trinn 15: Fjerner klikkeklassen
// hvis klikk skjer utenfor .buy-knappen, fjern det er klassen $ ('body'). på ('klikk', funksjon () $ ('klikket'). removeClass ('klikket'););
Trinn 16: Legge til en overgang
-webkit-overgang: alle .25s enkelhet; -moz-overgang: alle .25s enkelhet; -ms-overgang: alle .25s enkelhet; -Overgang: alle .25s enkelhet; Overgang: alle .25s enkelhet;
Det er det!
Accentsconagua
