Cum se face un buton „Solicitați un apel înapoi”. Design material: de ce un buton de acțiune flotant nu este o bună practică în designul UX

Salutari dragi prieteni. Astăzi vă voi arăta cum să faceți un buton înapoi în sus pe un site web. Se întâmplă că șablonul meu de blog nu a fost echipat inițial cu acest lucru functie utila, iar vizitatorii nu s-au putut muta rapid din partea de jos a articolului în partea de sus. Prin urmare, în același timp cu crearea unui astfel de buton pentru mine, vă voi spune cum să o faceți (Poate că aveți aceeași problemă și nu ați știut cum să o rezolvați).

Articolul va conține următoarele părți:

Pentru ce este acest buton?

Sincer vorbind, milioane de oameni trăiesc fără un astfel de buton. Nu există nimic critic în absența lui, dar utilizarea acestui element poate aduce anumite beneficii, atât pentru vizitatori, cât și pentru tine, în calitate de proprietar al resursei.

Beneficii pentru vizitatori

Paginile site-ului sunt adesea supraîncărcate cu conținut. Articolele lungi și detaliate îi obligă pe vizitatori să deruleze în jos și în jos, derulând textul cu rotița mouse-ului. La final, îi așteaptă zeci de comentarii, iar pentru a le adăuga pe ale lor, trebuie să lucreze și mai mult.

În timp ce suntem ocupați să citim, o astfel de defilare nu este deosebit de obositoare. Dar întoarcerea nu mai este la fel de distractivă și, în loc să meargă înapoi și să exploreze alte secțiuni ale site-ului tău, utilizatorul pur și simplu îl închide.

Utilizarea săgeții în sus pentru un site vă permite să reveniți la meniul de sus rapid si confortabil.

Beneficiu pentru site

Beneficiile pentru site decurg direct din textul anterior. Butonul simplifică navigarea în pagină și se îmbunătățește factori comportamentali pentru resursa dvs., deoarece utilizatorii sunt mai activi și vor acorda mai multă atenție materialelor dvs.

La randul lui, navigare convenabilă iar factorii comportamentali buni duc la o creștere a autorității în ochi și, în consecință, la o creștere a pozițiilor în rezultatele căutării.

Buton simplu de sus pentru site-ul html

Voi analiza două moduri de a oferi site-ului dvs. un astfel de buton. Primul va fi destinat site-urilor simple pentru care nu există nicio posibilitate sau dorință de a conecta biblioteci suplimentare sau Javascript.

Pentru implementare, funcționalitatea standard a limbajului va fi suficientă Marcaj HTML, completat cu stiluri CSS. Butonul sus va acționa ca un link obișnuit, trimițând vizitatorul în partea de sus a paginii.

Avantaje:

• Simplitate și ușurință de configurare;
• Nu este nevoie de suport pentru bibliotecă sau script.

Defecte:

• Butonul este întotdeauna vizibil, chiar și atunci când vizitatorul se află chiar în partea de sus a paginii;
• Mișcarea în sus nu are loc lin, ci instantaneu, cu o smucitură.

Codul butonului va fi format din două elemente. Primul este link HTML, plasat în codul site-ului. Al doilea este Stilul CSS butonul, se află în fișierul de stil și este responsabil pentru locația butonului și a acestuia aspect.

Plasați următorul cod în interiorul corpului site-ului (în interiorul eticheta corporală, mai bine, chiar înainte de a se închide). Vă rugăm să rețineți că veți avea nevoie de o imagine care va servi drept buton (înlocuiți secțiunea de cod cu calea către imagine și numele acesteia).

< a href = "#" title = "Înapoi sus" class = "buttonup" > < img src = "путь к картинке/картинка.png" > < / a >

Butonup ( lățime: 88 px; înălțime: 118 px; poziție: fix; jos: 20 px; dreapta: 50 px; )

Butonul sus ( lățime: 88px; înălțime: 118px; poziție: fixă; jos: 20px; dreapta: 50px;

Acest cod este responsabil pentru poziția butonului, prin editarea numerelor îl puteți schimba. De îndată ce salvați fișierul, butonul va intra în vigoare. parametrul de lățime setați-o egală cu lățimea imaginii, jos – indentare din marginea de jos a ecranului, dreapta – din marginea dreaptă a ecranului.

Buton plutitor în partea de sus pentru site

Deci, prieteni, buton simplu Am făcut-o în HTML, acum să trecem la implementarea unei versiuni mai avansate. În ea vom scăpa de acele neajunsuri care au fost prezente în versiunea anterioară, și anume:

• Butonul nu va apărea constant în fața ochilor tăi, ci va apărea doar atunci când vizitatorul derulează în jos pe pagină;
• Efectul revenirii în partea de sus a paginii va fi neted, ceea ce arată elegant;
• În plus, butonul nostru se va schimba atunci când treceți cursorul (schimbați culoarea sau luminozitatea).

Există o mulțime de moduri și scripturi care vă permit să creați un buton. Recunosc sincer, nu sunt programator și, dacă în versiunea anterioară mi-am dat seama de HTML, atunci sunt în JavaScript ibric plin. Așa că m-am uitat și am studiat o grămadă versiuni diferiteși am ales pentru mine opțiunea care este cel mai ușor de implementat (mai puține modificări în fișiere diferite).

În general, procesul de creare a unui astfel de buton este puțin mai complicat, dar oricine își poate da seama. Totul se face in 2 etape:

1. Conexiune biblioteci jQuery

Dacă utilizați WordPress sau un alt CMS standard, atunci această bibliotecă este cel mai probabil inclusă în mod implicit. În acest caz, puteți sări peste acest punct.

Pentru a conecta biblioteca jQuery, trebuie să scrieți următoarea linie în secțiunea site-ului dvs.:

2. Conectarea unui script care afișează un buton

Codul de script poate fi inserat în două moduri:

• sau plasați-l complet între etichete,
• sau plasând scriptul într-un fișier separat și specificând conexiunea acestuia în codul paginii.

Prima variantă este mai simplă, a doua, după părerea mea, mai convenabilă.

jQuery(document).ready(funcție($)( $(""+ "..png) 0 0 fără repetare; )" + ".scrollTop:hover( fundal-poziție:0 -133px;)" +"" ).appendTo(„corp”); var viteza = 550, $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( scrollTop: 0), viteza); )); //funcția de apariție show_scrollTop())( ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); ) $ (fereastra).scroll(function())( show_scrollTop(); )); show_scrollTop(); ));

jQuery (document). gata(funcție($)( $ ("" + „.scrollTop( display:none; z-index:9999; position:fix;” + "jos:20px; stânga:90%; lățime:88px; înălțime:125px;" + „background:url(https://site/img/arrow.png) 0 0 no-repeat; )” + „.scrollTop:hover( poziție de fundal:0 -133px;)” + "") . appendTo("corp"); viteza = 550, $scrollTop = $(" ").appendTo("corp"); $scrollTop. faceți clic (funcția (e) ( e. preventDefault(); $ ("html:nu(:animat),corp:nu(:animat)" ) . anima (( scrollTop : 0 ), viteza ) ; } ) ; //aspect funcția show_scrollTop() ( ($(window).scrollTop() > 330)? $scrollTop. fadeIn(700): $scrollTop. fadeOut(700); $(fereastra). scroll(funcție()(show_scrollTop();)); show_scrollTop(); } ) ;

Dacă utilizați un fișier separat pentru script, așa cum am făcut eu, atunci plasați codul între etichete în el; nu este necesar să copiați etichetele în fișier. Plasați fișierul pe găzduirea dvs.

Am numit fișierul buttonup.js. Pentru a-l conecta, scriem următoarea linie în antetul site-ului:

În loc de „calea către fișier”, introduceți adresa unde se află fișierul dvs. cu scriptul.

Un buton plutitor este o nouă modalitate de a adăuga un sondaj, un anunț sau un alt conținut 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 butonul, se va deschide o fereastră modală suplimentară cu conținutul 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.

Un plugin pentru buton wordpress numit 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” Buton 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. In general, orice!

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

Prezent în Leadback un numar mare de setări care vă permit să organizați aproape orice algoritm pentru widgetul de apel invers. Primele setări se referă la logica apariției widget-ului pe site.

Primirea apelurilor în nr timp de lucru— numerele introduse în timpul orelor nelucrătoare vor fi distribuite între manageri în timpul programului de lucru. Managerul va primi un apel, iar robotul telefonic îl va informa că un apel a fost comandat în afara orelor de lucru și îl va pune în legătură cu un potențial client.

Prinde vizitatorul la ieșire - widgetul detectează momentul în care vizitatorul este pe cale să părăsească site-ul tău și îl invită să contacteze managerul în 27 de secunde.

Buton flotant „Telefon” - există întotdeauna un buton vizibil pe site într-un anumit loc, atunci când dați clic pe el puteți introduce un număr și puteți contacta departamentul de vânzări. Vă recomandăm să utilizați această funcție.

Configurarea ferestrei widget - Puteți alege 2 opțiuni pentru afișarea widget-ului: opțiunile „Fereastră” și „Ecran complet”. De asemenea, alege schema de culoriși schimbați legenda de pe widget. Vă recomandăm să folosiți informații despre reduceri și promoții pentru a motiva clientul să lase un număr de contact.

Widget pentru apelare inversă „Ecran complet”

Configurarea unui buton plutitor este o secțiune în care personalizăm aspectul și schema de culori a butonului. Sunt disponibile următoarele opțiuni: Sonerie, buton rotund cu receptor, buton pătrat cu receptor și buton elegant cu un tub care amintește de pictogramele populare de mesagerie.

Vă rugăm să rețineți că culoarea butonului poate fi potrivită cu schema de culori a site-ului dvs., iar butonul poate fi plasat oriunde. Există setări suplimentare pentru aceasta.

Permiteți apeluri multiple pentru un client - același client vă poate suna de mai multe ori? DA/NU Clientul este determinat de browser.

Modificați ora „Vă vom apela înapoi în ... secunde” - Puteți modifica timpul în care promiteți că veți suna clientul în sus sau în jos.

Oferiți un apel unui client nu mai mult de 1 dată pe... - dacă aveți activată funcția „Prinți un vizitator la ieșire”, puteți specifica un interval pentru a nu deranja vizitatorul cu o fereastră pop-up de fiecare dată.

Primiți apeluri din CSI și Europa - Dacă lucrați numai pentru piata ruseasca, vă recomandăm să nu activați această funcție. Dacă aveți nevoie de clienți din alte țări, atunci activați-l. Pentru alte țări (cu excepția Rusiei), pentru un minut de conversație se vor percepe următoarele: Ucraina - 3 minute, Kazahstan - 2 minute, Belarus - 4 minute, toate celelalte țări - 5 minute.

Nume widget de raportare - Dacă utilizați mai multe widget-uri pe același domeniu.

Va apărea un mesaj. Vă rugăm să rețineți că nu este nevoie să actualizați codul de pe site!

Configurarea widget-ului este completă

După finalizarea configurării în dvs cont personal Leadback Primul dvs. widget va apărea în secțiunea de widget-uri.

Widget în contul personal

Acum trebuie să instalați codul widget pe site-ul dvs. web.

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 datorită 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 — 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ă parte 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 atunci când FAB a blocat steaua „favorită”, precum și ora de pe ecranul aplicației sale. Acest lucru 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 sus. 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, cea mai mare parte a efortului ar trebui depusă în proiectarea acestuia cantitate mica 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 de dispozitive mobile tind să le folosească aplicații de e-mail a citi e-mailuri.

Poate un număr de oameni 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 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 acolo unde sunt localizate de obicei 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, aceasta ridică întrebarea: sunt necesare?

Când ne uităm la dezavantajele de a avea FAB-uri în aplicații, ne putem rezuma 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; V aplicația Gmail utilizatorii doresc să-și citească e-mailurile; si in aplicația 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 utilizată acțiune dintr-o aplicație și când trebuie să găsești căi de ocolire (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.

este un asistent ușor, elegant, dinamic, rapid și eficient, care vizează sprijinirea navigației de bază și atragerea utilizatorilor. Fiind doar un mic element rotund care se mișcă odată cu utilizatorul, plutind independent deasupra întregii structuri de design și aderând în general partea dreapta, este capabil să extindă funcționalitatea fiecărui ecran, precum și să facă programul mai convenabil.

După cum sugerează specificațiile Google, butonul ar trebui să fie semnificativ și să ofere acces rapid la instrumente importante. Acest element ar trebui să fie simplu și plăcut pentru ochi, să conțină o grafică intuitivă și clară, plină de viață și design luminos, dar în același timp evită funcțiile distructive. Am adunat o mică colecție de concepte mobile proaspete interfața cu utilizatorul care au îmbrățișat această nouă tendință.

Reproiectarea materialului Instagram

Acest design prezintă un mic buton rotund cu o umbră subtilă, colorat într-un ton de albastru închis asortat. Oferă acces rapid la fotografii și, de asemenea, oferă proprietarilor funcționalități suplimentare. Însoțește majoritatea ecranelor.

Ecosistem de aplicații Android și Wear

Designerul Stefan Castro folosește un buton rotund plutitor care, datorită tonului său roșu, contrastează puternic cu conținutul. Deschide cinci pictograme minuscule cu vârfuri, tot în culori strălucitoare, situate de jos în sus.

Magnet.me

Aici se folosește aceeași tehnică ca în exemplul anterior. În primul rând, este doar un buton rotund obișnuit care se lipește în partea de jos a paginii. Când utilizatorul îl apasă, dezvăluie fără probleme alte trei pictograme, plasate vertical una după alta.

UI de colorat

Designerul Lois Yang demonstrează buna treaba opțional paleta de culori Pentru a acestui element. Interfața site-ului este destul de grea în conținut. Un fundal roșu solid și strălucitor combinat cu umbre subtile separă pictograma de fluxul de informații, atrăgând subtil atenția.

Salivarea de Henrique Ferreira

Aici, butonul plutitor este susținut de o suprapunere elegantă a ecranului translucid. Ecranul este necesar pentru a atrage atenția asupra pictogramelor și titlurilor, deoarece baza aplicației este plină de imagini mari și suculente. O mică abatere de la traiectorie adaugă fler designului.

Butoane de adăugare media flotante

Un buton de acțiune în formă de O este prezent în partea de jos a paginii și include patru CTA-uri aranjate într-un cerc. Din acest motiv, sunt disponibile rapid. Fiecare pictogramă are o dimensiune relativ mare, o culoare strălucitoare și un simbol clar și clar.

UI zilnic 010

Aici butonul este conectat la o bară laterală mare care iese din partea dreaptă și mută conținutul ușor spre stânga. În legătură cu social media, include toate portalurile populare: Pinterest, Twitter, Facebook, Google etc.

Aplicația Alex Ryabushko

Butonul de acțiune și CTA sunt proiectate într-un mod excelent stil plat si intr-o singura culoare. Cu toate acestea, starea de hover este într-un mod vesel culoare portocalie implicit se schimbă în albastru. Glifele uriașe din interiorul cercurilor sunt intuitive și ușor de citit. Elementul oferă utilizatorilor indicii vizuale pentru a atinge rapid obiectivele.

Șablon PSD aplicație de design material (de Daniel De Santis)

UI creat în cele mai bune tradiții specificațiile Google actuale. Apeluri clasice cu butoane plutitoare panou mare, care ocupă aproape întregul ecran și acoperă acțiunile necesare pentru a funcționa în secțiunea Inbox.

Interfața de utilizare mobilă (de Smiley)

Artistul demonstrează numeroase concepte de ecran funcționale. După cum puteți vedea, aproape fiecare pagină are propriul său buton de acțiune. Acesta din urmă provoacă un mic, dar suficient panou înalt, care se află în stânga și ocupă aproximativ cincisprezece la sută din spațiu.

Buton de acțiune plutitor de Tyler Berry

Această opțiune este diferită de majoritatea exemplelor enumerate în colecția noastră. Nu numai că au culori bogate și umbre minunate, dar dezvăluie și pictograme într-o linie în partea de sus a interfeței.

Butoane de acțiune plutitoare de Giulio „bart172” Smedile

Deși majoritatea butoanelor din acest design sunt similare cu altele, ele sunt conectate la o tastatură sterling. Autorul primește randament maxim de la acest mic ajutor plutitor. De asemenea, oferă un efect de tranziție lină între două stări.

Explorare UX

În acest design, un buton plutitor prezintă un set de CTA aranjate pe rând. Aceasta ocupă toată partea de jos a ecranului. Lucrările de vopsire în două nuanțe, pânzele monocrome solide și glifele și umbrele perfecte pentru pixeli creează o estetică cool.

Thumb User Interface (de Jochem van der Veer)

Conceptul din spatele acestui design este utilizarea unui buton de acțiune plutitor, similar cu majoritatea. Se lipește pe partea dreaptă, are un aspect simplu și atrage imediat privirea. În unele cazuri, butonul merge mână în mână cu o versiune în miniatură a logo-ului.

Buton magic plutitor

Aceste butoane plutitoare sunt minimaliste din punct de vedere al funcționalității. Sunt folosite doar pentru a oferi utilizatorilor acces rapidîntr-un spațiu de lucru în care vă puteți crea cărțile. Designul respectă standardele și se potrivește cu starea de spirit a aplicației.

theScore Android

Aici butonul CTA arată elegant, sofisticat și sofisticat. Stilul liniar, combinat cu o schemă frumoasă de culori în două tonuri, unde domină albastrul, creează o estetică remarcabilă, transformând totodată acțiunea în puncte focale.

FAB pentru implicarea utilizatorilor

Dezvoltatorul folosește un buton de acțiune, al cărui design răsună ușor panoul de sus navigare. Acesta își propune să implice utilizatorii și să îi ajute să se simtă confortabil cu întregul proiect. Butonul se suprapune cu fereastra pop-up din colțul din dreapta jos și preia întregul ecran.

Alternacare

Autorul acestui design ascunde filtrele sub butonul de acțiune plutitor, permițând utilizatorilor să sorteze informațiile redundante și să-și atingă obiectivele în câteva secunde. Datorită aspectului său îndrăzneț și culoare aprinsa, butonul nu se potrivește cu conținutul și atrage imediat atenția.

Aplicația Swipii

Conceptul Swipii App se bazează pe mai multe soluții noi. Butonul plutitor este unul dintre ele. Își servește bine scopul, ușurând viața utilizatorului. Butonul este situat în colțul fiecărei pagini și afișează o pagină pop-up cu un cod QR.

Buton de acțiune care curge de designerul Shu Makino

Acest design este scurt GIF animat demonstrează fluxul de lucru standard al unui buton de acțiune plutitor. El este puternic cu al lui tranziții netedeși include șapte elemente de formă elegantă care apar unul după altul și aderă pe partea dreaptă.

În concluzie…

Butoanele de acțiune plutitoare pot deveni cu ușurință elemente esențiale ale UI. Acesta este un mod elegant și destul de simplu de a-l îmbunătăți. Oferirea utilizatorilor cu acces rapid la vital funcții importante aplicatii mobile, ajung direct la obiect și pot face ca utilizarea aplicației să fie rapidă, eficientă și productivă.