Accentsconagua

Sätt användare i kontroll med bekräftelseknapparna

Webbdesign
Share

Denna handledning lär dig hur man skapar en lyhörd webbsida med knappar som tar på olika tillstånd beroende på användarens interaktion. Denna typ av interaktion är särskilt användbar på länkar som "köp" eller "radera" där det är klokt att bekräfta att användaren verkligen vill vidta en särskild åtgärd.

Denna interaktion är en som många känner till; Du kan se en liknande effekt i Apples appbutik när du köper appar.


Ursäkta för franska, du får idén ...

Sidan vi skapar i denna handledning kommer också att fungera på mobila enheter, eftersom det är en lyhörd design.

Introduktion

Vi skapar en provsida baserat på Tuts + -nätet, den här sidan innehåller bekräftelseknapparna. Även om exemplet använder bekräftelsesknappar "anslut nu" kan du tänkbart använda denna interaktionsstil var som helst där du behöver en användare för att bekräfta åtgärden de ska ta.

När och varför att välja denna interaktion

Bra UI-design ger användarna en förståelig känsla av kraft som konsekvent hjälper dem att känna sig i kontroll.

En viktig aspekt av mänsklig datorsamverkan är att ge användaren en känsla av kontroll. När användarna är i kontroll känner de sig bekväma. När de inte är i kontroll blir de frustrerade. Men när du tänker på det är människor alltid i kontroll. Datorer gör aldrig någonting utan att du först instruerar dem.

Här är vikten av bra programvara och UI-design in i bilden. Bra UI-design ger användarna en förståelig känsla av kraft som konsekvent hjälper dem att känna sig i kontroll. De kommer aldrig att fråga "vänta varför hände det?" eller "vänta hur kom jag hit?"

Du kan förmedla en känsla av kontroll till användaren genom att kommunicera insikter mot dem med varje interaktion. Hjälp dem att förstå orsak och verkan i systemet. För att använda ett grundläggande exempel, om du sparar något, kommer systemet att ge dig ett positivt meddelande som säger "dina inställningar har sparats". Således kommer användarna aldrig ifrågasätta "Jag undrar om det var frälst?"

Vad har detta att göra med handledningen?

Samspelet vi skapar i den här handledningen hjälper användaren att få en känsla av kontroll. Genom att ändra knapptillståndet och ha användaren bekräftar sitt beslut att köpa, ser vi till att användaren aldrig gör någonting oavsiktligt. Det här är speciellt användbart när du frågar användarna att dela med sina hårt intjänade pengar. Det sista som någon vill är att av misstag betala för något!

Skönheten i denna interaktion är att i stället för att få en popup-prompning som säger "är du säker på att du vill köpa?", Anmäls användarna via knappen tillståndsändring de håller på att göra något viktigt. Om de inte vill göra det, kan de helt enkelt fortsätta att bläddra på webbplatsen. medan en varningsprompt skulle uttryckligen kräva att användaren fattar ett ja / nej beslut.

Innan du börjar

Se till att du tar tag i bildfilberoende för denna handledning. Lägg dem i en mapp med namnet "bilder". Alla dina andra filer (HTML, CSS, JavaScript) kommer att gå i huvudkatalogen. I slutet av handledningen kommer din filstruktur att se ut så här:

Steg 1: Komma igång med HTML

Låt oss börja med att skapa en del grundläggande HTML som definierar vår sidstruktur.

    Bekräftelse Feedback Knapp Styles

Så här har vi vår grundläggande HTML5-sidstruktur. Vi inkluderade vår DOCTYPE, vår sidtitel och en huvud

element med ett ID av #behållare

Steg 2: Koppling till beroende

Låt oss nu lägga till länkarna till markupens beroenden.

Först lägger vi till en länk till vårt CSS-stilark (som vi snart kommer att skapa). Detta går in i element.

Nästa kommer vi att inkludera en länk till Googles värdversion av jQuery, liksom en länk till "script.js" som kommer att innehålla javascript-koden som vi skapar senare. Låt oss sätta dessa rätt innan stängningen märka.

Eftersom vi använder HTML5-element som och

vi måste lägga till HTML5-shiv så att vår markering fungerar i IE8. Inkludera detta i din rubrik:

Steg 3: Flexibelt design

Vi ska utforma den här sidan för att vara responsiv och flexibel ner till mobilen. För att säkerställa att mobila webbläsare gör vår sida korrekt måste vi ställa in meta viewportegenskapen. För att lära dig mer om det här, kolla in Ian Yates artikel om visningsmetataggen. Annars lägger du bara till det här koden i din element.

Steg 4: Skapa huvudmarkering

Låt oss börja med att lägga till en sidhuvud i vårt dokument.

  
 
Det bästa sättet att lära sig kreativa och tekniska färdigheter som design, utveckling och mer!

Vårt huvud (i olika storlekar) är ganska grundläggande och ser så här ut:

Steg 5: Skapa listmärkning

Nu ska vi skapa en oorderad lista under vår element. Vi använder det här för att paketera våra listade objekt i.

Den oorderade listan

Som du kan se gav vi vår oordnade lista en klass av "lista" som vi ska använda för att rikta in sina stilar med CSS.

Listobjektstrukturen:

 
  •

    • Som du kan se, insidan av varje

  • , vi har två huvudelement; en
    och a
    . Figurelementet är idealiskt för att hysa vår listaobjekts ikon. Div med en klass av "info" är där vi lägger informationen i samband med ikonen. Återigen finns allt detta inne i en
  • element.

    Ikonen

    Insidan av

    vi ska lägga objektets ikon med hjälp av märka. Figurelementets bredd kommer att styras. Då, genom att ange att bilden ska ha en maximal bredd som är lika med figuren, kommer den att ändra storlek enligt moderelementet!

    Informationen

    Insidan av

    vi kommer att ha tre element:

    1. Artikelns rubrik (med hjälp av

      element)

    2. Åtgärdsknappen (med hjälp av element)
    3. Objektets beskrivning (med hjälp av

      element)

    Vi ska ge vår knapp (the element) en klass av "join" för CSS styling senare.

     
     
    Activetuts+
     $ 15.99 
    Lorem ipsum dolor sit amet, konsekutiv adipisiting elit, tempor incididunt ut labore et dolore magna aliqua.

    Slutkod för varje
  • element

    •  
  •  
      
     
     
    Activetuts+
     $ 15.99 
    Lorem ipsum dolor sit amet, konsekutiv adipisiting elit, tempor incididunt ut labore et dolore magna aliqua.

    • Här är vad vi har hittills:

    Steg 6: Duplicering och modifiering av var och en
  • Element

    • Nu när vi har den grundläggande strukturen för varje

  • element, allt vi behöver göra är att duplicera det för varje Tuts + post. Vi måste ändra följande för varje listobjekt:

    1. De

      text

    2. De länk
    3. De filnamn

    Du kan fortsätta och kopiera / klistra in listobjektkoden för varje Tuts + -sida.

    Så här har vi nu:

    Steg 7: Grundläggande CSS

    Nu när vi har hela vår markering klar, låt oss börja utforma sidan. Vi börjar med att ställa några grundläggande återställningar:

     / * snabb återställning * / kropp, h1, h2, p, ul, li marginal: 0; padding: 0;  ul listformat-typ: none;

    Låt oss nu stila huvudet kropp element.

     kropp bakgrund: #eee; typsnitt: 16px / 1.4em Helvetica, Arial, sans-serif; color: # 333;

    Här ställer vi in ​​bakgrundsfärgen och några standardvärden för vår typografi, t.ex. typstorlek, färg och linjehöjd.

    Steg 7: Går Responsive (Liquid)

    Vi vill att vår sida ska vara flexibel hela vägen ner till mobilen. Så, de två nyckelkomponenterna vi ska använda för att uppnå detta är procentsatser och maximal bredd regel.

    Genom att titta på vår HTML ser du

    är huvudbehållaren för innehållet på vår sida. Vi använder procentvärden för bredden och vi lägger till några grundläggande styling för att skilja den visuellt från sidans bakgrund.

     #container width: 100%; marginal: 0 auto 40px; max-width: 600px; bakgrund: #fff; gränsstråle: 0 0 3px 3px; gränsen: 1px solid # d0d0d0; border-top: 0; boxskugga: 0 1px 0px #fff;

    Här ställer vi in ​​vår behållares bredd för att vara 100% av webbläsarens visningsport. Våra marginaler centrerar innehållet på sidan. Vi har också lagt till max-bredd: 600px eftersom vi inte vill att våra listobjekt någonsin ska vara större än det.

    Som du kan se, i större storlekar har behållaren lite extra utrymme på sidorna med en ljus bakgrund. Men i mindre storlekar försvinner det extra utrymmet och vi har bara en vit bakgrund för vårt innehåll.

    Låt oss inte glömma att göra våra bilder lyhörda:

     img maxbredd: 100%;

    Steg 8: Header Styles

    Låt oss nu stila vår huvud element och innehållet inuti det.

     rubrik text-align: center; vaddering: 30px 20px;  header h1 margin-bottom: 20px;  rubrik p färg: # 413c38; font-size: 1.2em; line-height: 1.4em;

    Vårt huvudelement och dess innehåll är nu snyggt centrerade och dimensionerade.

    Steg 9: Strukturella listartyper

    Nu ska vi börja utforma våra listobjekt och deras syskon. Låt oss först skapa några grundläggande strukturella stilar:

     .ikon, .info box-size: border-box;  .icon float: left; bredd: 15%; text-align: right; padding-vänster: 3%;  .info bredd: 85%; flyta till vänster; vaddering: 0 5%;

    Om du kommer ihåg rätt, har vi två huvudelement: 'ikon' och 'info' inuti varje listobjekt. Ikonfiguren kommer att svängas åt vänster och ges en liten bredd. "Info" div kommer att svängas rätt och ges större delen av moderbredd.

    Som du kan se använde vi box-limning: border-box; regel på dessa två div. Detta gör det möjligt för oss att ha en total bredd på upp till 100% och kan fortfarande lägga till vadderingar utan att gå över en total bredd på 100%. (Läs mer om att uppmuntra formulär för responsiva formulär att spela Nice).

    Steg 10: Lista objekt stilar

    Efter våra strukturella CSS-tillägg har vi nu något som ser ut så här:

    Som du kan se behöver det städas upp lite. Först eftersom vi flyter våra element "info" och "ikon", måste vi lägga till en klar för varje listelement. Vi lägger också till en liten styling för varje listobjekt.

     .lista li vaddering: 20px 0; border-top: 1px solid #eee; overflow: auto; tydligt: ​​båda;  .list li: sväva bakgrund: # f7f7f7;

    Slutligen ska vi ställa in informationen inom varje listobjekt:

     .info h2 margin-bottom: 10px; font-size: 1.75em; line-height: 1em; display: inline-block;  .info p font-size: 14px; color: # 777;

    Nu har vi något som börjar se ganska solidt ut.

    Steg 11: Knappformat

    Låt oss nu tillämpa någon styling på våra knappar. Vi gör dem visuellt framträdande:

     en text-decoration: none; färg: #fff;  .join background: # 57a9eb; / * Gamla webbläsare * / bakgrund: -moz-linjär gradient (topp, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * FF3.6 + * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, rgba (87,169,235,1)), färgstopp (100%, rgba (53,156,234,1 ))); / * Chrome, Safari4 + * / bakgrund: -webkit-linjär gradient (topp, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Chrome10 +, Safari5.1 + * / bakgrund: -o-linjär gradient (topp, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * Opera 11.10+ * / bakgrund: -ms-linjär gradient (topp, rgba (87,169,235,1) 0%, rgba (53,156,234,1) 100%); / * IE10 + * / bakgrund: linjä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; färg: #fff; font-weight: bold; text-trans: versaler; textskugga: 0 -1px 0 # 1e3c5e; font-size: 11px; border-radius: 5px; boxskugga: 0 1px 0 #bbb, 0 1px 0 # 9cccf3 inset; white-space: nowrap; -webkit-övergång: alla .25 s enkelhet; -moz-övergång: alla .25 s enkelhet; övergång: alla .25 s enkelhet; float: höger; display: inline-block; vaddering: 1px 1em 0; / * gör att du ser centrum från 1px markering * / linjehöjd: 2.25em;

    Vad gjorde vi här?

    Placera
    Vi flöt vår knapp till höger. Detta gör att knappen visas till höger om huvudlistans rubrik.
    Stoppning
    Vi använde linjens höjdfastighet för att göra knappen den höjd vi önskade. Vi lade också till 1px av vaddering på toppen, vilket kompenserar 1px-höjdpunkten som vi lagt till med att använda boxskuggegenskapen.
    Visual Styling
    Vi lade till några visuella stilar med hjälp av gränser, boxskuggor etc. Vi använde också CSS3-bakgrundsgradientfunktionen (du kan använda användbara generatorverktyg som ColorZilla för att generera dina gradienter).

    Steg 11: Alternativa knappar

    Allt ser bra ut. Vad vi vill göra nu är att lägga till stilar för en klass som kommer att appliceras på knappen / knapparna när de klickas. För denna handledning kommer vi att lägga till texten "gå med nu" till den befintliga knapptexten när knappen klickas. I huvudsak måste användaren fatta beslutet att "gå med" två gånger.

    För att uppnå detta ska vi använda någon CSS styling, inklusive CSS3 pseudoklassen ::efter

    Klickade klassstilar

    Låt oss skapa en klass som heter "klickad" som vi kan lägga till våra "klickade" -knappstilar (för utvecklingsändamål kan du manuellt lägga till en klass av "klickade" på alla $ 15.99).

     .join.clicked background: # 24a501; / * Gamla webbläsare * / bakgrund: -moz-linjär gradient (topp, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * FF3.6 + * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, rgba (30.183,0,1)), färgstopp (100%, rgba (36,165 , 1,1))); / * Chrome, Safari4 + * / bakgrund: -webkit-linjär gradient (topp, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Chrome10 +, Safari5.1 + * / bakgrund: -o-linjär gradient (topp, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * Opera 11.10+ * / bakgrund: -ms-linjär gradient (topp, rgba (30,183,0,1) 0%, rgba (36,165,1,1) 100%); / * IE10 + * / bakgrund: linjä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: # 176.701; border-top-color: # 24a501; boxskugga: 0 1px 0 #bbb, 0 1px 0 # acc63d inset; vaddering: 1px 2em 0; markören: pointer;  .join.clicked: aktiv box-shadow: 0 0 8px # 777 insert;

    Som du kan se, fäster vi klassen "klickad" till klassen "knappen". På så sätt visas de stilar vi förklarar för "klickade" bara på element som också har en klass av knapp. När det gäller styling, ändrade vi helt enkelt dess färg och gränser. Du kan också ha märkt att vi lagt till en boxskugga till knappen när den klickas. Detta lägger till en inramad knappstil som hjälper till att förstärka användaren att knappen klickades.

    ::efter klassstilar

    När användaren klickar på prisknappen är det vi vill göra med knappen expandera och förordna texten "join now". För att göra detta använder vi CSS3 pseudoklassen ::efter för att infoga den text vi vill ha.

     .join.clicked :: före innehåll: 'Gå med nu';

    Nu har vi något som detta:

    Steg 12: Mediafrågor

    Som du kan se, på mobilstorlek börjar vår "join now" -knapp bli lite trång. Om vår rubriktext är riktigt lång kommer vår knapp att gå in i vår rubrik. Så, vi kommer att utnyttja kraften i mediefrågor för att stöta vår åtgärdsknapp till nästa nivå när vi har mindre skärmstorlekar.

    Låt oss skapa en mediafråga för att flytta vår knapp:

     @media skärm och (maxbredd: 450px) .info h2 display: block;  .join float: none; margin-bottom: 20px;

    Nu kommer vår knapp att stöta ner under rubriken vid mindre skärmstorlekar!

    Steg 13: Knappinteraktion med jQuery

    Låt oss nu gå in i vår "script.js" -fil och skriva lite javascript som ändrar våra knappstilar när de klickas.

    Låt oss först skapa vårt skript för jQuery

     $ (dokument) .ready (funktion () // kod här);

    Steg 14: Växla klasser

    Vårt skript är faktiskt ganska enkelt. Allt vi behöver göra är att växla klassen "klicka" närhelst en knapp blir klickad.

    Så låt oss konfigurera en funktion:

     $ ('.a join'). på ('klicka', funktion () // kod här);

    Nu, vad vi vill göra är att kolla och se om knappen som klickades redan har en klass av "klickade" (kanske den klickades tidigare). Om det inte har klassen "klickat" lägger vi till det och förhindrar href attributet för länken från att följas.

     // om det inte finns någon klass av klickat, // lägg till en och förhindra att länken följs om (! ($ (this) .hasClass ('clicked'))) // Ta bort eventuella "klickade" klasser om det finns $ ('klickat'). removeClass ('clicked'); // Lägg till "klickade" klassen till knappen som klickades $ (detta) .addClass ("klickade"); // förhindra att länken följs tillbaka falsk;

    Om den knapp som klickade redan har en klass av "klickade" på href värdet kommer att följas av webbläsaren. Det fungerar bra för att om en användare möter den här sidan och har javascript inaktiverat, kommer de helt enkelt inte att kunna bekräfta sitt beslut att "gå med nu". Länken kommer snarare att följas utan någon bekräftelse om återkoppling.

    Steg 15: Ta bort den klickade klassen

    Om en användare klickar på prisknappen får de ett ändrat knapptillstånd. Vad händer om de vill avvisa knappen och de klickar utanför själva knappen? Vi ska registrera det klicket och ta bort klassen "clicked". Detta är en enkel linje av jQuery:

     // om klick händer utanför .buy-knappen, ta bort det är klassen $ ('body') på ('klick', funktion () $ ('klickat'). removeClass ('klickat'););

    Steg 16: Lägga till en övergång

    Vi vill lägga till lite mer interaktivitet genom att göra övergången mellan "klickade" och normalknappstillstånden mjukare. Vi använder bara en CSS3-övergång och tillämpar den på "join" -knappen:

     -webkit-övergång: alla .25 s enkelhet; -moz-övergång: alla .25 s enkelhet; -ms-övergång: alla .25 s enkelhet; -o-övergång: alla .25 s enkelhet; övergång: alla .25 s enkelhet;

    Det är allt!

    Du har nu en bra bekräftelseknapp. Det hjälper användarna att bekräfta sitt val för att göra ett viktigt beslut med din webbsida / ansökan. Känn dig fri att leka med det här konceptet, göra det bättre och lära dig mer!

    Webbdesign
    • ×