Meniul
AcasăWindows 7

Cum să faci un buton lateral în partea de sus. Buton flotant - plugin pentru buton WordPress. Vrem FAB? Tăiați pe cel precedent - avem nevoie de el?

Un buton plutitor este Metoda noua adăugați un sondaj, un anunț sau orice altul continut suplimentar fără a adăuga modificări la designul site-ului dvs. Funcționalitatea tuturor acestora este implementată sub forma unui buton plutitor pe site-ul dvs., iar după ce faceți clic pe buton, un alt fereastra modală cu continutul necesar. Pentru a îmbunătăți gradul de utilizare, puteți utiliza panoul de administrare, setările și opțiunile de navigare, precum și unele date pentru înregistrarea statisticilor și efectuarea de analize.

Conecteaza butoane wordpress, care se numește Buton plutitor, va adăuga un astfel de buton plutitor pe site-ul dvs.

Instalarea pluginului

Pluginul este instalat la fel ca oricare altul: accesați secțiunea „Plugin-uri” - „Adăugați nou”. Apoi, introduceți butonul Floating în bara de căutare și instalați-l.

Setări

După instalare, o filă suplimentară cu butonul flotant apare în partea dreaptă în consola de management a site-ului dvs. WordPress:

Faceți clic pe el și începeți configurarea butonului plutitor:

1. Stare buton - pornește și dezactivează afișajul butonului;

2. Sursa setărilor - această setare este responsabilă pentru funcționalitatea ulterioară a pluginului. Dacă selectați „Setări locale”, funcționalitatea va fi foarte limitată, așa că este recomandat să selectați a doua opțiune „Setări din probtn.com”;

3. Acum trebuie să vă înregistrați pe site-ul web al dezvoltatorilor de pluginuri - nu va dura mult timp, dar funcționalitatea butonului WordPress se va extinde semnificativ.

Înregistrare pe site-ul dezvoltatorilor

Accesați pagina https://admin.probtn.com/login/new și completați adresa E-mail, numele și parola și faceți clic pe butonul „Creați”:

Cu această înregistrare finalizată, trecem la configurarea ulterioară a pluginului, dar direct pe site-ul pe care tocmai ne-am înregistrat.

După înregistrare și autentificare pe site, vedem următoarea pagină:

Cele două butoane de mai jos sunt responsabile pentru crearea unui buton plutitor, al doilea pentru crearea unui sondaj care va apărea când dați clic pe butonul plutitor.

Să începem cu crearea, așa că faceți clic pe „Creați butonul plutitor”. Mai întâi indicăm numele butonului:

Vă rugăm să rețineți că puteți selecta o pictogramă pe computer sau puteți furniza un link către o imagine. Pentru frumusete, este recomandat sa folositi o poza cu fundal transparent mărime mică.

În etapa următoare, selectăm platforma pentru a afișa butonul. Am instalat pluginul pe site, așa că vom selecta opțiunea de afișare pe domeniul pe care îl specificăm:

Să terminăm configurare inițială făcând clic pe butonul „Trimite”.

Specificați acțiunea, apoi faceți clic pe butonul plutitor și continuați configurarea pluginului

După creare, butonul nostru este afișat în consola din stânga:

În secțiunea TOOL indicăm adresa care va fi deschisă într-o fereastră pop-up după ce faceți clic pe butonul:

Sau indicăm un sondaj care poate fi creat făcând clic pe linkul „Creează sondaj”:

Salvăm toate modificările făcute la fiecare pas. Un buton plutitor instalat pe un site web poate arăta astfel:

Și când faceți clic pe el, apare următoarea fereastră pop-up:

Există multe opțiuni pentru utilizarea acestui plugin pentru WordPress: puteți crea pagină separată, pe care să plasați o reclamă, un sondaj sau orice informație care nu poate fi inclusă în designul site-ului. În general, orice!

p.s. Dacă aveți nevoie de ajutor pentru configurare sau instalare, scrieți întrebările dvs. în comentarii. Ajutorul este gratuit!

Material Design este un limbaj de design introdus Anul Googleîn urmă, reprezentând încercarea îndrăzneață a companiei de a crea o unitate unificată experiența utilizatorului pe toate dispozitivele și platformele. Acest lucru este marcat de culori îndrăznețe, utilizarea liberală, dar principială a umbrelor pentru a indica straturile UI și animație lină, care oferă destul de experiență bună interacțiuni în Android (și unele aplicații Google pe iOS).

Cu toate acestea, există un lucru despre Material Design care mă deranjează de când a fost introdus anul trecut: butonul de acțiune plutitor.

FAB (butoanele de acțiune plutitoare), conform Google, sunt butoane rotunde care plutesc deasupra interfeței de utilizare și sunt „utilizate pentru a promova acțiunea”. Acţionează ca butoane de îndemn, concepute pentru a efectua acţiunea pe care utilizatorii o efectuează cel mai des pe ecranul respectiv.

Și din cauza stilului vizual îndrăzneț al Material Design, FAB este destul de greu de ignorat - și aici constă problema. În timp ce în practică, în conditii ideale FAB pare să ofere UX bun - folosirea excesivă a FAB va fi dăunătoare UX-ului general al aplicației. Iată câteva motive pentru aceasta.

Imersiunea vine din experiență

FAB-urile ies în evidență vizual — ele sunt literalmente deasupra oricărui element UI de pe ecran. De asemenea, adăugarea FAB ar duce automat la o UX mai puțin captivantă, afectând în special aplicațiile (sau ecranele) al căror scop este să ofere o experiență interactivă.

Un exemplu este noua aplicație pentru fotografii de la Google.

Aplicația foto se deschide ca o galerie cu un buton de căutare plutitor. Dar chestia este că, când deschid o aplicație foto, vreau doar să... îmi văd fotografiile. Astfel, butonul de căutare plutitor distrage atenția utilizatorului de la a se scufunda în răsfoirea fotografiilor, care este scopul principal al aplicației. Trimis de căutare inteligentă – trasatura unica Poza aplicației Google. Dar asta înseamnă că trebuie să i se acorde cel mai înalt nivel, FAB permanent în aplicație? (Cred că nu.)
În mod ciudat, Google este de acord cu mine. Pe pagina Material Design din FAB, Google explică că „nu orice ecran are nevoie de un buton de comandă plutitor”.
Și apoi adaugă că „acțiunea principală este să atingi imaginea din galerie, caz în care nu este nevoie de butonul.

Ei ies în evidență și ies în cale.

Aceasta poate părea ca cealaltă față a monedei, dar există ceva mai mult proprietate importantă FAB sta în calea utilităţii sale. Ocupând spațiu pe ecran, FAB blochează în mod eficient conținutul.

Bine, FAB este doar un mic buton rotund, nu? Cât conținut poate bloca?
Dacă te uiți la captura de ecran a aplicației foto, îți vei da seama că FAB de căutare blochează aproximativ 50% din imaginea în miniatură - cu siguranță suficient pentru a ascunde câteva fețe. Acest lucru creează în esență necesitatea unui derulare suplimentar pentru fiecare a patra imagine în miniatură. ultimul rând pe ecran. Și asta nu este partea cea mai rea.

FAB blochează butonul „Favorite” și data.

Utilizatorul Dumazy a postat pe Graphic Design Stack Exchange despre o problemă pe care a întâlnit-o când FAB a blocat steaua „favorită”, precum și ora de pe ecranul aplicației sale. Aceasta ilustrează o problemă cu toate aplicațiile de vizualizare a listei și devine deosebit de problematică atunci când ultimul element din listă nu poate derula mai departe. Aceasta înseamnă că o întreagă coloană trebuie sacrificată (schimbarea locației asteriscului etc.) pentru a oferi o utilizare adecvată a ecranului.

În consecință, FAB necesită mult mai mult spatiu pe ecran decât sugerează dimensiunea acestuia.

Acțiunea de facilitare nu este probabil folosită atât de des.

Când proiectați UX, trebuie să vă amintiți regula 80/20, care spune că utilizatorii vor folosi 20% din funcții în 80% din timp. Cu alte cuvinte, majoritatea efortului ar trebui depus în proiectarea acelor câteva elemente pe care utilizatorii le vor folosi de cele mai multe ori.

FAB chiar face asta - în teorie. Dar ce se întâmplă dacă Acțiunea de promovare nu este folosită la fel de des?

Luați de exemplu aplicația Google Gmail.

FAB al aplicației Gmail este un buton de scriere care presupune că acțiunea principală a utilizatorilor este să compună un e-mail.

Dar este?

Mai multe studii au arătat că cel puțin 50% dintre e-mailuri sunt citite pe un dispozitiv mobil și aproape niciunul nu spune asta despre crearea e-mailurilor. Cu alte cuvinte, după cum ar confirma experiența noastră zilnică, majoritatea utilizatorilor dispozitive mobile tind să le folosească aplicații de e-mail pentru a citi e-mailurile.

Este posibil să existe un număr de persoane care folosesc dispozitive mobile pentru a răspunde la e-mailuri, dar acest lucru se întâmplă numai după ce e-mailul este deschis (rețineți că acest lucru înseamnă că vor ocoli FAB). Acest comportament al utilizatorului este probabil cauzat de un mecanism de introducere destul de imperfect tastaturi virtuale iar înlocuirea automată înseamnă că principala acțiune pe care o efectuează utilizatorii este să citească (și să răspundă) e-mail-urilor, nu să creeze altele noi.

Deci, ce face butonul FAB „compune e-mail”? În rare ocazii, face plăcere utilizatorilor atunci când doresc să creeze o scrisoare folosind această aplicație. Dar în restul timpului, ocupă doar spațiu pe ecran, blochează „steaua” și timpul și distrage constant atenția cu o culoare roșie aprinsă.

Vrem FAB? Tăiați pe cel precedent - avem nevoie de el?

Desigur, nu toate utilizările FAB degradează experiența utilizării aplicațiilor Material. Există câteva exemple grozave de FAB-uri care au sens și care îmbunătățesc UX-ul acestor aplicații.

Hărți Google acesta este un exemplu grozav de FAB făcut corect. Principala acțiune pe care o efectuează utilizatorii pe Maps este obținerea de indicații, așa că este foarte potrivit să folosiți FAB în acest scop.

Dar rețineți că hărțile sunt destul de bune un caz special, când utilizatorii de conținut sunt aproape întotdeauna interesați să ajungă în centrul ecranului (unde se află punctul tău albastru, marcând poziția). În majoritatea aplicațiilor, totuși, o vizualizare grilă sau listă înseamnă că utilizatorii interacționează cu conținutul situat peste tot pe ecran, inclusiv unde ar fi amplasate în mod normal FAB-urile.

Vă rugăm să rețineți, de asemenea, că capturile de ecran de mai sus spun doar o parte din poveste: în timpul utilizării efective, FAB-urile rămân pe loc chiar și atunci când utilizatorul derulează (de cele mai multe ori). După cum a subliniat Google de multe ori în Material Design, designul în mișcare este la fel de important ca și designul UI.

Absența mișcării - accentul pus pe spațiul ecranului - în contextul mișcării conținutului creează mai mult nivel inalt o distragere a atenției pe care capturile de ecran nu o pot afișa.

Deci, din moment ce aproape nu avem exemple de implementări FAB bune, acest lucru ridică întrebarea: sunt necesare?

Când ne uităm la dezavantajele de a avea FAB-uri în aplicații, ne putem reduce la simpla intelegere: Utilizatorii nu numai că efectuează acțiuni în aplicații, ci și consumă conținut.

Designul FAB în Material Design se bazează pe premisa că utilizatorii își petrec majoritatea timpului făcându-le acțiune specifică, și, prin urmare, ar trebui să fie dat statut ridicat sub forma unui buton principal, de nivel înalt. Dar în multe aplicații, utilizatorii sunt concentrați și pe consumul de conținut: într-o aplicație foto, utilizatorii doresc să se uite la fotografii; in aplicatie utilizatorii Gmail doresc să-și citească e-mailurile; si in aplicație Facebook, utilizatorii doresc să citească mesajele prietenilor lor.

FAB este astfel o filozofie de design (sau cel puțin o alegere de design) care subordonează consumul optim de conținut performanței acțiunii. Și trebuie să ne întrebăm: este necesar un astfel de compromis? Chiar vrem să facem un astfel de compromis?

Când FAB-urile duc la un UX slab de cele mai multe ori, când este greu să dai seama care este cea mai folosită acțiune într-o aplicație și când trebuie să găsești căi indirecte (unde FAB dispare la defilare sau se suprapune cu alte elemente când glisezi), Aș spune că răspunsul este nu.

Material Design Google, un limbaj de design destul de bun, unificat, bazat pe principii, dar FAB nu este cel mai bun lucru la el.

Ziua bună tuturor. Astăzi vom vorbi despre ferestrele modale, iar folosind exemplul lor vom implementa butonul „Comandă”. apel înapoi". Probabil că ați văzut un astfel de buton pe multe pagini de destinație când faceți clic pe el, apare un formular de contact cu fundalul general întunecat. Aceasta este exact funcționalitatea pe care o implementăm astăzi.

De obicei, butonul „solicitați un apel invers” este situat în partea dreaptă colțul de sus. Puteți experimenta locația, dar amintiți-vă că oamenii sunt deja obișnuiți să vadă acest element acolo, deși acest lucru se aplică mai mult site-urilor web de afaceri și de servicii.

Desigur, în majoritatea cazurilor, ferestrele modale sunt realizate folosind javascript, dar astăzi vom încerca să ne descurcăm doar folosind cssși nu ne vom încărca pagina de destinație script suplimentar.

Și, în sfârșit, voi spune că nu m-am deranjat cu designul formularului de contact, am vrut doar să transmit esența modului în care este implementat un astfel de efect, așa că vă rugăm să nu forțați prea tare. Voi descrie doar punctele principale și apoi le puteți corecta după bunul plac.

Despre modul de configurare Formular de contact Puteți citi aceste articole:

Pentru a vă asigura că articolul nu se dovedește a fi foarte lung, voi furniza doar marcajul html, iar restul îl puteți vedea descărcând sursa.

Vom implementa această funcționalitate: :)


Încă o dată, acesta este doar un șablon mic pe care apoi îl puteți ajusta pentru a se potrivi cu designul dvs. Toate acestea vor fi apelate prin apăsarea unui buton.

Primul lucru de făcut este să includeți foaia de stil (mai puțin) furnizată în sursă. Am descris-o în detaliu cu comentarii, aruncați o privire și facem modificări.

Structura HTML este foarte simplă. Am plasat acest link în locul potrivit de pe site. Unde intenționați să afișați butonul „solicitați un apel înapoi”:

Solicitați un apel înapoi

Acum trebuie să creați un container de fereastră modală:

conținutul ferestrei modal

Lăsați numărul dvs. de telefon
iar consultantul nostru vă va contacta

Obțineți preț

Nu am publicat foaia de stil, puteți descărca sursa aici:

Si cu marcaj html- Toate. Deci e simplu. Avantajele acestei metode sunt că fereastra modală poate fi apelată de mai multe ori pe pagină și că nu se folosesc scripturi.

După cum probabil ați observat, am scris că am folosit mai puțin. Uită-te la structură. Nu am folosit nici măcar 5% din capabilitățile preprocesorului (doar imbricare), de când tocmai am început să-l învăț, dar plănuiesc să îl folosesc mai des în viitor. Am vrut să te întreb ce e mai bine. Te-ar deranja dacă exemplele de cod nu sunt în CSS, ci în mai puțin? eu am Google Chrome iar browserul Yandex a refuzat să compileze mai puțin în css fără a deschide fișierul prin Denver sau OpenServer. Pe Mazil și IE - înghițit. Deci, cel mai probabil, voi posta stiluri CSS obișnuite.

Și asta e tot pentru azi! Pa tuturor; la revedere tuturor!

Dacă nu doriți să creați singur un astfel de buton, vă recomand să acordați atenție, care vă permit să implementați această funcție și să aveți multe alte caracteristici suplimentare.

Bună ziua, dragi vizitatori!

Continuez să public articole tehnice.

Și astăzi voi atinge subiect interesant, în care vom discuta butonul de derulare în partea de sus a paginii de pe site. Vom vorbi despre importanța acestui buton, care este modul în care îmi place să-l fac. De asemenea, vă voi arăta cele mai interesante și eficiente implementări ale acestei funcții.

Este necesar

Cred că nu merită să arăți cum arată pe site-uri web, deoarece aproape fiecare resursă o are. Acesta este un buton simplu cu o săgeată în sus sau un cuvânt care, atunci când faceți clic, vă duce rapid în zona de sus a site-ului.

Această funcție este un element care, în anumite cazuri, îmbunătățește gradul de utilizare a site-ului. Acestea sunt cazurile în care vom discuta acum cu dumneavoastră.

Primul cel mai important și poate singurul caz în care este nevoie de butonul sus este prezența sumă uriașă continutul paginii. Dacă pagina este lungă, atunci este destul de dificil să derulați până sus.

Fie trebuie să utilizați bara de defilare, pe care puțini oameni o folosesc. Cel puțin nu o folosesc deloc, deoarece este o mișcare suplimentară a mouse-ului și nu foarte convenabilă. Sau trebuie să rotiți videoclipul pe mouse, ceea ce durează foarte mult și devine enervant în timp.

Prin urmare, dacă site-ul dvs. are articole cu adevărat mari, atunci puteți instala un buton, dar trebuie să îl faceți astfel încât să fie ușor să faceți clic pe el și să fie mai ușor să faceți acest lucru decât să rotiți un videoclip sau să utilizați bara de defilare din browser. Altfel, la ce va fi de folos dacă este echivalent cu acțiunile standard?

Pe baza acestui fapt, există cele mai comune și mai eficiente butoane de defilare în sus care funcționează cu adevărat eficient. O astfel de opțiune este butonul sus, ca în rețea socială In contact cu. Trecem la implementarea acestei metode.

Buton sus ca VKontakte

O caracteristică distinctivă a acestui buton este ușurința în utilizare. Arată ca o bară de defilare în partea stângă a site-ului, care ocupă întreaga înălțime a resursei.

Această opțiune s-a dovedit deja, deoarece practic nu există utilizatori care să nu o folosească pe rețelele sociale. Rețeaua VKontakte. Convenabil această implementare deoarece nu trebuie să îndreptați cursorul mouse-ului către niciun buton. Pur și simplu faceți clic pe zona din stânga a site-ului și pagina se va derula în partea de sus. Nu este nevoie să urmăriți cursorul, puteți pur și simplu să mutați mouse-ul până la marginea ecranului și să faceți clic o dată.

Nu va fi posibil să faceți exact aceeași implementare ca VKontakte, dar o versiune aproximativă este ușoară.

Pentru a-l implementa, trebuie doar să plasați scriptul pe site.

Pentru a încărca scriptul, puteți plasa codul în sine între etichete sau înainte de eticheta de închidere în fișierul footer.php. Sau puteți pur și simplu să încărcați un fișier cu un script pe găzduirea dvs. și apoi pur și simplu să încărcați fișierul pe site.

Dacă doriți să plasați scriptul și nu trebuie să vă faceți griji cu privire la încărcarea lui, atunci vă voi oferi codul de script în sine.

JavaScript

$(document).ready(function() ( $("corp").append("^ Înapoi la început"); $ (fereastră).scroll (funcție () ( dacă ($ (acest).scrollTop () > 300) ( $ (".button-up").fadeIn(); ) else ( $ (".button-up").fadeOut(); ) )); $(".button-up").click( function( )( $("body,html").animate(( scrollTop: 0 ), 100); return false; )); $(".button-up").hover(function() ( $(this)); .animate (( "opacitate":"1", )).css(("culoare-fond":"#E1E7ED","culoare":"#45688E")), function())( $(this). animate (( "opacitate":"0,7" )).css(("background":"none","culoare":"#45688E"); ));

$(document). gata(funcție()(

$(„corp”). append("^Înapoi la început");

$(fereastra). parcurge(funcție()(

dacă ($(this).scrollTop() > 300)(

$(".button-up"). fadeIn();

) altfel (

$(".button-up"). fadeOut();

} ) ;

$(".button-up"). faceți clic(funcție()(

$("corp,html") . anima ((

scrollSus: 0

} , 100 ) ;

returnează fals;

} ) ;

$(".button-up"). hover(funcție()(

$(acesta). anima ((

„opacitate” : „1” ,

) ) . css (( „culoare de fundal”: „#E1E7ED” , „culoare” : „#45688E” ) );

), funcția () (

$(acesta). anima ((

„opacitate”: „0,7”

) ) . css (( „fondul”: „niciunul” , „culoarea” : „#45688E” ) ); ;

} ) ;

} ) ;

În acest cod, puteți modifica unii parametri pentru a se potrivi nevoilor dvs.

  • Linia 4 este responsabilă pentru afișarea zonei de defilare a paginii în sine. Conține stilurile de bază pentru afișarea butonului. în principiu, acești parametri ar trebui să se potrivească aproape tuturor. Dar poate fi necesar să le editați pentru a vă potrivi;
  • În rândul 7 între paranteze se află un număr 300, care este responsabil pentru momentul în care apare butonul. Adică, butonul va apărea numai după derularea cu 300 de pixeli în jos. Vă recomand să alegeți o valoare aici, astfel încât derularea să fie posibilă doar atunci când meniul principal al site-ului sau alte elemente importante din navigare dispar din vedere;
  • În rândul 17, valoarea 100 este viteza de defilare. Cu cât valoarea este mai mică, cu atât mai rapidă revenirea în partea de sus a paginii.

Acest cod poate fi plasat între etichete din partea de sus a site-ului. Dacă site-ul este pe WordPress, atunci aceasta zona se află în fișierul șablon header.php. De asemenea, îl puteți plasa înaintea etichetei de închidere în partea de jos a site-ului (fișierul footer.php). Recomand ultima varianta, deoarece va grabi incarcarea site-ului. Va arata asa.

Chiar mai mult opțiune eficientă se încarcă acest script de la dosar separat. Puteți descărca fișierul folosind butonul de mai jos. Se află în interiorul arhivei.

Apoi, încărcați acest fișier pe găzduirea dvs. Îl puteți încărca în folderul cu teme sau în rădăcina site-ului. Eu, conform tradiției, fac asta în folderul șablon. Apoi ar trebui să scrieți codul care va încărca acest fișier în același loc. Pentru a face acest lucru, utilizați următoarea linie.

JavaScript

În el, va trebui să înlocuiți calea completă către fișier cu a dvs. din a doua linie. Apoi lipiți acest cod în aceeași zonă înainte de eticheta de închidere, așa cum se arată mai jos.


După editarea fișierului, dacă am făcut-o pe computer, îl încărcăm pe hosting cu înlocuire fișier sursă. După aceasta, un simplu buton de sus de pe site-ul dvs. va funcționa.

Pentru a edita parametrii în acest fișier, va trebui să-l deschideți folosind editorul Notepad.

Această opțiune foarte bun pentru simplitatea sa, atat in functionare cat si in montaj pe santier. O opțiune mai avansată este atunci când, pe lângă derularea în sus, aveți posibilitatea să vă întoarceți în locul din care ați derulat. Aceasta este exact opțiunea implementată în rețelele sociale. Rețeaua VKontakte. Cum se face, vezi mai jos.

A doua modalitate de a face buton de la VKontakte

De aceasta metoda Am înregistrat un tutorial video detaliat.

Această opțiune este acum pe blogul meu. Încă nu am putut să-i analizez utilitatea. Dar, dacă se află pe unul dintre giganții Runetului, atunci putem presupune cu siguranță că este de folos. Desigur, la o asemenea scară este o idee deloc. Dar pe o resursă mică, vă puteți gândi cu atenție înainte de a o instala. Dar mă uit la viitor, motiv pentru care am luat această decizie.

Implementarea celei de-a doua metode este puțin mai complicată, dar procesul ar trebui să vă fie deja familiar dacă alții au făcut-o puncte tehnice pe resursa dvs.

Constă din 3 etape:

  • Plasarea scriptului pe site;
  • Plasarea codului responsabil cu afișarea butonului;
  • Decorat cu folosind CSS stiluri.

    • În primul rând, trebuie să plasăm un script care va face derularea lină și culoarea să se schimbe fără probleme atunci când trecem cu mouse-ul, atât zona în sine, cât și culoarea bufniței „To Top”, în funcție de distanța la care pagina este derulată în jos.

    Puteți merge în 2 moduri, ca în primul caz. Fie plasați scriptul în sine în zona dorită (vezi punctul de mai sus), fie încărcați scriptul printr-un fișier. În continuare, vom face totul prin a doua metodă, astfel încât să fie eficientă.

    Descărcați fișierul script folosind butonul de mai jos.

    Plasați fișierul pe găzduire și încărcați fișierul prin codul din partea de jos a site-ului, așa cum ați făcut înainte. Fișierul este numit exact la fel ca în metoda 1, așa că puteți lua aceeași linie de cod pentru ieșire.

    ⇓ Înapoi ⇑ Sus

    < div class = "leftbar-wrap" >

    < a href = "#0" id = "scroll-back" >

    < span class = "active-area" >

    < span class = "bar-desc-niz" >⇓Înapoi< / span >

    < / span >

    < / a >

    < a href = "#" class = "left-controlbar" >

    < span class = "active-area" >

    < span class = "bar-desc-top" >⇑Sus< / span >

    < / span >

    < / a >

    Îl puteți plasa chiar în partea de jos a site-ului, înainte de eticheta de închidere din fișierul footer.php.

    Apoi scriem stilurile de design în fișierul nostru de stil (style.css) și încărcăm toate fișierele modificate în găzduire. Iată stilurile în sine.

    /* descrierea containerului */.leftbar-wrap (poziție: fix; înălțime: 100%; sus: 0; lățime: 99px !important; stânga: 0; ) /* descrierea butonului „Sus” */.left -bara de control ( înălțime: 100%; afișaj: bloc; text-decor: niciunul; ) /* descrierea butonului „Înapoi” */#scroll-back ( afișare: bloc; înălțime: 100%; sus: 0; afișare: none; text-align: center ) /* descrierea coloanei; culoare de fundal pentru ambele butoane */.active-area ( lățime: 100px; înălțime: 100%; afișare: bloc; text-align: center; ) /* setați transparența culorii de fundal atunci când treceți cu mouse-ul peste zona activă a paginii */.leftbar-wrap:hover .active-area ( fundal: #E1E7ED !important; opacitate:0.7 !important; ) /* face lumina de fundal puțin mai strălucitoare când treceți cu mouse-ul peste inscripția */.leftbar-wrap .active-area :hover ( ) /* centrați inscripția la butoane * /.bar-desc-niz ( sus: 26% !important; poziție: relativ; afișare: inline-block; ) .bar-desc-top ( sus: 10% !poziție: relativă;

    /* descrierea containerului */

    Leftbar-wrap (

    poziție: fixă;

    inaltime: 100%;

    sus: 0;

    latime: 99px !important;

    stânga: 0;

    /* descrierea butonului „Sus” */

    Bara de control din stânga(

    inaltime: 100%;

    afisare: bloc;

    text-decor: niciuna;

    /* descrierea butonului „Înapoi” */

    #scroll-back (

    afisare: bloc;

    inaltime: 100%;

    sus: 0;

    afișaj: niciunul;

    text-align: centru;

    /* Descrierea coloanei de culoare de fundal pentru ambele butoane */

    Zonă activă (

    lățime: 100px;

    inaltime: 100%;

    afisare: bloc;

    text-align: centru;

    /* setați transparența culorii de fundal când treceți cu mouse-ul peste zona activă a paginii */

    Leftbar-wrap:hover.active-area (

    fundal : #E1E7ED !important ;

    opacitate: 0,7 !important;

    /* face evidențierea puțin mai strălucitoare când treci cu mouse-ul peste inscripție */

    Leftbar-wrap .active-area:hover (

    /* centrați eticheta pe butoane */

    Bar-desc-niz (

    top : 26% !important ;

    poziție: relativă;

    display: inline-block;

    Bar-desc-top (

    sus : 10% !important ;

    poziție: relativă;

    display: inline-block;

    În funcție de designul și structura resursei dvs., va trebui să modificați puțin câțiva parametri în aceste stiluri. De exemplu, în rândurile 47 și 53, modificați parametrul de indentare pentru cuvintele „Înapoi” și „Sus” din partea de sus a paginii, respectiv

    După editarea tuturor fișierelor, le putem încărca în siguranță pe găzduire și această metodă va funcționa. Puteti vedea implementarea lui pe blogul meu. Fă-o pentru sănătatea ta.

    Trecem la următoarea metodă. Această opțiune va conține deja buton simpluîn zona din dreapta jos a ecranului, făcând clic pe acesta se va muta în partea de sus a paginii.

    A treia metodă pentru un buton înapoi în sus fără un plugin

    Implementarea butonului este, de asemenea, foarte simplă și funcționează 100% pe un site WordPress. Nu pot spune nimic despre site-ul HTML sau alt motor. Testează-l.

    Trebuie să copiați următorul cod cu scriptul în partea de jos a site-ului înainte de eticheta de închidere /

    JavaScript

    $(document).ready(function())( $("#back-top").hide(); $(function () ( $(window).scroll(function ()) ( if ($(this). scrollTop () > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top").fadeOut(); ) )); click(function () ()); $("body,html").animate(( scrollTop: 0 ), 400 return false;

    < p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p >

    Până acum a devenit o revelație pentru cei care lucrează cu aplicații activate Platforma Androidși, de asemenea, desene interfețe cu utilizatorul. A fost introdus de Google acum cativa ani. Scop design material a fost creația limbaj vizual, care ar uni principiile design clasic cu inovatie.

    Ideea pare foarte promițătoare și promițătoare. Designul materialului este cea mai recentă încercare de a face experiența utilizatorului (UX) confortabilă și eficientă în același timp. Google a făcut o treabă fantastică în acest domeniu: folosesc set minim elemente de proiectare, folosiți componente unice, culori deschise, animație și creați un mediu ușor de utilizat.

    În același timp, designerii practică așa-numitul buton de acțiune plutitor (FAB). Este un buton rotund aspect care este bine cunoscut utilizatorii de Android. Este un alt element distinctiv al designului materialului. FAB apare în partea de sus a interfeței aplicației și motivează utilizatorii să întreprindă o acțiune specifică.

    În esență, FAB se datorează faptului că scopul său este de a convinge o persoană să facă ceva (cum ar fi descărcarea sau încărcarea anumitor conținut). Un buton de acțiune țintă plutitor este de obicei plasat în colțul din dreapta al ecranului. Este foarte greu de observat, deoarece are un design luminos și atractiv. FAB motivează utilizatorul să efectueze cele mai populare acțiuni din aplicație. Cu toate acestea, există unele probleme la utilizarea acestor butoane.

    Ce este în neregulă cu butoanele de acțiune țintă plutitoare?

    FAB reprezintă abordare rezonabilă, care vă permite să motivați utilizatorul să ia măsuri, deoarece este greu de observat. Cu toate acestea, ele pot fi soluția greșită pentru proiectarea experienței utilizatorului în ansamblu. Mai jos sunt câteva motive pentru care butoanele de acțiune plutitoare pot avea un impact negativ asupra UX.

    FAB-urile pot interfera cu utilizatorii

    După cum sa menționat mai sus, butoanele de acțiune țintă plutitoare sunt de obicei plasate în colțul din dreapta jos al ecranului. În cele mai multe cazuri, acestea sunt situate deasupra conținutului aplicației, acoperind o parte din acesta.

    Desigur, FAB-urile sunt cu adevărat mici ca dimensiuni, așa că ascund doar o mică parte a conținutului de ochii utilizatorului. Cu toate acestea, aruncați o privire la aplicație Google Foto(capturi de ecran de mai jos) unde butonul de acțiune țintă plutitoare acoperă o parte semnificativă a fotografiei.

    Pentru a vedea ce este ascuns sub buton, utilizatorul va trebui să deruleze în jos pe pagină. Dar dacă este deja în partea de jos a paginii? Apoi, defilarea va fi imposibilă și utilizatorul va trebui să adauge ceva conținut de făcut parte ascunsă fotografii vizibile.

    Este foarte important să recunoaștem faptul că un buton de acțiune țintă plutitor, în ciuda dimensiunilor sale mici, poate ascunde o parte din conținutul aplicației de ochiul uman. Acest lucru poate avea consecințe negative asupra experienței utilizatorului.

    Designul lor previne imersiunea completă

    Butoanele de acțiune țintă plutitoare ies în evidență vizibil pe fundalul general. În multe cazuri, acest lucru creează obstacole în calea implementării cea mai importantă caracteristică experiența utilizatorului - imersiune totalăîn atmosfera aplicației.

    Exemplul este din nou aplicația Foto de la Google. Când o persoană o deschide, este dusă în galeria utilizatorului unde poate vizualiza pur și simplu fotografii. În această situație, funcția de căutare oferită de FAB poate fi utilă, dar nu este o prioritate.

    Butonul țintă plutitor îi distrage atenția de la vizualizarea absorbită a fotografiilor, ocupând spațiu pe ecran și blocând unele părți ale imaginilor. În astfel de cazuri, butonul nu ar trebui să iasă atât de mult în evidență.

    Ele pot fi inutile

    După cum explică experții Google, un buton plutitor încurajează utilizatorul să întreprindă o acțiune țintită. Cu toate acestea, dezvoltatorii uită uneori cât de des o persoană efectuează această acțiune în timp ce folosește aplicația.

    Regula de aur a designului experienței utilizatorului este să se asigure că elementele necesare și utilizate frecvent sunt vizibile, iar cele utilizate rar sunt aproape invizibile. Totuși, așa cum vedem în exemplu aplicații Gmail(captura de ecran de mai sus), dezvoltatorii nu au luat în considerare această regulă.

    Pe ecranul aplicației vedem un buton, făcând clic pe care utilizatorul poate trece rapid la scriere e-mail. Cu toate acestea, conform sondajelor recente, aproximativ jumătate dintre utilizatori văd e-mailurile doar folosind dispozitive mobile. Cu alte cuvinte, ei nu scriu adesea scrisori folosind smartphone-uri sau tablete.