Frumos meniu de burgeri în css. Pictograma Hamburger: noi moduri de utilizare. Aplicație pe tablete

2. Introduceți o pictogramă de hamburger în meniul de navigare

Pe site iconfinder.com găsiți pictograma dorită, schimbați culoarea în cea dorită (Editare pictogramă), descărcați în format SVG, deschideți-l în browser, copiați codul din inspectorul web.

Lipiți codul copiat mai sus în loc de textul „Meniu”.

În această etapă, pe rezoluțiile desktop, meniul arată astfel: SVG Am ascuns pictograma scriind următorul cod.

MeniuBurger (
afișaj: niciunul; /* pictograma hamburger ascunsă */
}

3. Accesați interogarea media

Pe o lățime mică a ecranului, de la zero la 530 de pixeli. Trebuie să facem invers, să arătăm pictograma meniu de hamburgerși ascunde toate elementele de meniu la rând.

Ecran @media și (lățime maximă: 530 px) (
.meniul (
afișaj: niciunul; /* elementele de meniu sunt ascunse */
fundal: #f1f2f4;
poziție: absolută;
}

Meniul (
plutire: nici unul; /* elemente de meniu în coloane */
}

MeniuBurger (
display: inline-block; /* pictograma hamburger vizibilă */
}
}

4. Extindeți meniul de hamburgeri

Ce trebuie făcut înainte de deschidere meniu de hamburger? Este necesar să comentați temporar în CSS codul de interogare media /* afisare: nici unul; */și transformă meniul orizontal într-unul vertical. Pentru a face acest lucru, să anulăm acțiunea pluti, adăugați următorul cod la interogarea media.

De la Vitaly Rubtsov, nu am putut rezista dorinței de a realiza acest lucru.

În acest tutorial, vă voi arăta cum să faceți acest lucru folosind doar CSS, fără a utiliza JavaScript. Așa că vom vedea câteva trucuri CSS (și SCSS) care ne vor permite să realizăm animații aproape la fel de fluide ca acest gif animat.

Iată un exemplu de ceea ce vom face:

Marcare

Să începem cu structura HTML pe care o vom folosi. Vezi comentariile pentru o mai bună înțelegere.

Pornirea stilurilor SCSS

Acum să adăugăm un stil de bază pentru a obține aspectul pe care îl dorim. Codul este destul de simplu.

/* Stiluri de bază */ * ( dimensiunea casetei: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( text-decoration: niciunul; ) .container (poziție: relativă; margine: 35px automat 0; lățime: 300px; înălțime: 534px; culoare de fundal: #533557; overflow: ascuns; )

Funcționarea comutatorului

Înainte de a începe să creăm restul interfeței, vom adăuga câteva funcționalități de comutare pentru a trece cu ușurință de la o stare la alta.

HTML-ul de care avem nevoie este deja acolo. Și stilul care o face să funcționeze este cam așa:

// Ascunde caseta de selectare #toggle ( display: none; ) // Stiluri pentru starea „deschisă” atunci când caseta de selectare este selectată #toggle:checked ( // Orice element al cărui stil trebuie să-l schimbați la deschiderea meniului merge aici cu un selector ~ // Stiluri pentru deschiderea unui meniu de navigare, de exemplu & ~ .nav ( ) )

Crearea unei stări închise

Pentru a face starea închisă, trebuie să convertim elementele de meniu în linii pentru a obține o pictogramă hamburger. Există mai multe modalități de a realiza această transformare. Am decis să procedăm astfel:

Și aici este codul care implementează acest lucru.

$tranzitie-durata: 0.5s; // Afișează elementele de navigare ca linii care alcătuiesc pictograma hamburger.nav-item (poziție: relativă; afișare: bloc inline; float: stânga; clar: ambele; culoare: transparent; dimensiunea fontului: 14px; spațiere între litere: - 6.2px; înălțime: 7px; line-height: 7px; text-transform: majuscule; white-space: nowrap; transform: scaleY(0.2); tranziție: $transition-duration, opacitate 1s; // Adăugați lățime pentru primul line & :nth-child(1) ( letter-spacing: -8px; ) // Adăugarea lățimii pentru a doua linie &:nth-child(2) ( letter-spacing: -7px; ) // Setări pentru elemente care încep de la al patrulea & :nth-child (n + 4) ( spațiere între litere: -8px; margin-top: -7px; opacitate: 0; ) // Obțineți linii pentru pictograma hamburger &:before (poziția: absolut; conținut: ""; sus: 50%; stânga: 0; lățime: 100%; înălțime: 2px; culoare de fundal: #EC7263; transformare: translateY(-50%) scaleY(5); tranziție: $tranziție-durată; ) )

Vă rugăm să rețineți că aici am inclus doar stilurile de bază pentru elementele de navigare care sunt cele mai importante. Puteți găsi codul complet pe Github.

Creați un meniu deschis

Pentru a crea un meniu deschis, trebuie să restabilim elementele de navigare de la linii la legături de text obișnuite, precum și să facem o serie de modificări minore. Să vedem cum să facem asta:

$tranzitie-durata: 0.5s; #toggle:bifat ( // Deschide & ~ .nav ( // Restaurează elementele de navigare din „linii” din meniu pictograma.nav-item (culoare: #EC7263; spațiere între litere: 0; înălțime: 40px; linie- înălțime: 40px ; margin-top: 0; opacitate: 1; transformare: scaleY(1); tranziție: $tranziție-durată, opacitate 0,1 s; // Ascunde liniile &:before ( opacitate: 0; ) ) ) )

Magia este în lucrurile mărunte

Dacă ne uităm mai atent la gif, vedem că toate elementele de meniu nu sunt mutate în același timp, ci într-un model de șah. Putem face acest lucru și în CSS! Practic, trebuie să selectăm fiecare element (folosind :nth-child ) și să setăm valoarea întârzierii tranziției să crească treptat. Aceasta este cu siguranță o muncă repetitivă. Dacă avem mai multe elemente? Nu vă faceți griji, putem face totul mai bine folosind puțină magie SCSS:

$articole: 4; $tranziție-întârziere: 0.05s; .nav-item ( // Setați întârzierea pentru elementele de navigare la închiderea @for $i de la 1 la $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - întârziere; întârziere de tranziție: $întârziere; &:înainte (întârziere de tranziție: $întârziere; ) ) ) )

Rețineți că cu acest cod vom obține comportamentul pas dorit pentru animația de închidere. Trebuie să calculăm $delay , ușor diferit pentru animația de deschidere, pentru a recupera tranziția pasului. Ca aceasta:

$întârziere: ($articole - $i) * $întârziere-tranziție;

Concluzie

Am terminat cu meniul nostru chic! Am inclus, de asemenea, câteva elemente false ca în gif-ul animat și puteți vedea.

Deci, am creat un meniu simplu și funcțional folosind doar CSS. Cu toate acestea, dacă nu doriți să utilizați sistemul de comutare CSS, acesta poate fi înlocuit perfect cu câteva linii de JavaScript fără prea mult efort.

Sperăm că ți-a plăcut acest tutorial și l-ai găsit util!

Simplă, funcțională, intuitivă și memorabilă, ca orice semn rutier, pictograma hamburger a devenit o adevărată tendință anul trecut și un element integrant al oricărui design modern de site web și aplicație mobilă.

Această pictogramă simplă imită aspectul unei liste de meniu, ideală pentru dispozitive cu ecran mic și site-uri web unde imaginile sunt importante și navigarea trebuie să fie ținută la o parte. Aceasta este o soluție foarte eficientă și viabilă, care îndeplinește cerințele lumii moderne.

Ca orice alt element de interfață, pictograma hamburger poate avea unele abateri de la versiunea originală, în funcție de nevoile fiecărui proiect individual.

În funcție de proiect și temă, pictograma hamburger poate lua diferite forme care completează designul sau poate deveni propria sa caracteristică distinctivă.

Colecția de astăzi include 20 de variante diferite ale pictogramei hamburger.

Pictograma hamburger de la designerul Dave Games emană imediat multă energie caldă. Stilul de desene animate adaugă joacă și creează doar cele mai pozitive emoții. Puteți utiliza în siguranță o astfel de pictogramă pe majoritatea interfețelor ilustrate moderne.

Această pictogramă val oceanului a fost proiectată de Mat Walker. Se va simți grozav la diverse proiecte dedicate mării. Albastrul deschis ca culoare principală și chenarul din jurul lui fac această insignă exclusivă.

O implementare curată, strălucitoare și plină de spirit va permite acestui design să funcționeze ca o pictogramă de meniu pe site-urile de gătit. În acest caz, interfața va primi o întorsătură artistică plăcută.

Designerul oferă 10 versiuni interesante de icoane de hamburger, care sunt realizate cu suflet. Seria acoperă diferite tipuri de burgeri: unul cu brânză, altul cu slănină, altul cu curcan și mulți alții. Dacă aveți un site web sau o aplicație mobilă dedicată unui restaurant fast-food, atunci cu siguranță vă vor veni la îndemână. Sunt atât de interesante din punct de vedere vizual încât își pot găsi un loc în aproape orice temă.

Și acest proiect reprezintă un hamburger realist în vector. Butonul de inchidere se face sub forma de cartofi prajiti, luand forma unui “X”, cu sau fara sos. Aceasta este o soluție creativă care poate adăuga exotism designului paginii.

Site-ul oficial Star Wars include o pictogramă interesantă de hamburger care se rotește. Fiecare linie este împărțită în două părți pentru a obține vectorul de reflexie al luminii săbiilor laser. Soluția sporește impresia generală a site-ului și întărește brandul.

Meniul Burger de Peter Twaury este o versiune frumos ilustrată a pictogramei. Caracteristica cheie a acestei pictograme este alegerea culorilor care imită chifla tăiată și chifletul de carne.

Seria are diverse opțiuni de hamburger, care sunt implementate folosind stilul de linie. Aici veți găsi un hamburger dublu, un hamburger cu brânză și salată verde, un sandviș deschis și multe altele. Găsirea soluției perfecte pentru interfața dvs. îngrijită și plată va fi ușor de adăugat aromă și fler.

Artistul demonstrează trei versiuni distractive ale butonului: un hamburger clasic, un cheeseburger și un hot dog. Fiecare se bazează pe una sau două culori, ceea ce îl face potrivit pentru o varietate de interfețe mici. Aici culoarea creează aspectul potrivit pentru sandviș.

Artistul oferă o mică animație care include doar o pictogramă de meniu și mai multe tranziții netede care însoțesc transformarea într-un „X” obișnuit (butonul de închidere). Există efecte speciale care apar atunci când treceți cu mouse-ul sau faceți clic.

Spre deosebire de majoritatea exemplelor de mai sus, acest exemplu arată mai degrabă o manipulare pricepută a greutății decât a culorii. Liniile de sus și de jos sunt mai îndrăznețe decât mijlocul și creează aspectul potrivit de „hamburger”. Artistul a îndeplinit cu succes sarcina.

Animația de meniu a pictogramei ninja de la Andrew Kovardakov diferă de majoritatea butoanelor de hamburger și oferă o soluție interesantă și extraordinară, cu o tentă misterioasă și atractivă. Aici, fiecare linie este un ninja într-un vector.

Și această icoană este o ilustrare a unui burger cu salată verde și brânză. Poate adăuga un pic de poftă oricărei interfețe plictisitoare. O soluție excelentă pentru site-ul unui restaurant sau cafenea.

Acesta este un articol în care puteți găsi discuții interesante despre pictograma de meniu la modă. Este marcat cu o imagine care arată trei variante ale butonului pentru hamburger. Prima este o ilustrație plată premium, a doua este o pictogramă colorată cu trei linii, iar a treia este o versiune monocromatică a celui de-al doilea design - cea mai populară alegere printre designeri.

GIF-ul arată tranzițiile line între starea inițială a acestei pictograme minimaliste și elegante și starea sa finală. Deoarece animația începe de la linia de jos, este mai scurtă decât celelalte.

Meniul de hamburger al lui Liam Spradlin arată ca un set de semne de carte de școală. Această implementare este îndrăzneață și oarecum brută. Această pictogramă este imediat vizibilă, cu toate acestea, poate fi dificil să găsiți mediul potrivit pentru ea.

Până acum am analizat pictogramele separat, dar ele funcționează bine cu cuvintele, mai ales când cuvântul este „Meniu”. Deși poate părea exagerat, ele arată sofisticate împreună. Liniile ultra-subțiri de 1px lățime utilizate în acest caz se potrivesc împreună ca piese de puzzle.

Proiectul demonstrează că o icoană de hamburger poate arăta mai strălucitoare și mai atractivă atunci când este înrămată. Aceasta este o alegere excelentă pentru dispozitivele mici, unde o astfel de pictogramă va fi convenabilă pentru navigarea tactilă.

Designerul afișează o pictogramă simplă, elegantă, cu trei linii, care suferă diferite metamorfoze pentru a deveni o cruce sau o săgeată. Animația include mai multe soluții care pot fi utile pentru orice proiect.

Rezultate

La prima vedere, poate părea că un lucru atât de mic precum o pictogramă de meniu nu merită să-i acordați o atenție deosebită. Dar dacă arăți puțină imaginație, îl poți transforma într-un fel de evidențiere a interfeței tale. Mai ales dacă dezvoltatorii încep să se joace cu semnificația lui și folosesc tehnici artistice pentru a-l face mai neconvențional și mai atrăgător.

În care a propus cinci alternative la meniul „hamburger” pentru organizarea navigației într-o aplicație mobilă..

„Dacă lucrezi la produse digitale, probabil că ai citit zeci de articole despre cum și de ce meniurile de hamburger afectează experiența utilizatorului pe dispozitivele mobile, fiind confuze și ineficiente. Tot mai multe proiecte experimentează cu opțiuni alternative de prezentare a meniului”, scrie Zoltan Kollin.

Designerul notează că niciuna dintre alternativele enumerate în material nu este în mod evident mai convenabilă sau mai eficientă decât altele - toate sunt potrivite pentru diferite situații.

1. Filele

După cum subliniază Colleen, filele pot fi o soluție utilă dacă aplicația dvs. mobilă are mai multe secțiuni principale și utilizatorii doresc să poată comuta rapid între acele secțiuni.

Dezvoltatorii consideră adesea, continuă Colleen, că filele sunt unul dintre cele mai simple modele de navigare. Dar atunci când creați un astfel de meniu, ar trebui să respectați mai multe reguli:

• Nu ar trebui să fie mai mult de cinci secțiuni.
• Una dintre file (cea activă) ar trebui să fie evidențiată vizual.
• Prima filă ar trebui să fie „acasă”. Filele trebuie aranjate în funcție de prioritate sau de ordinea în care sunt destinate să fie utilizate.
• Filele pot fi plasate în partea de sus sau de jos a ecranului, în funcție de context și platformă.
• Ar trebui să utilizați pictograme în loc de etichete pentru a indica file, dacă utilizatorul știe exact ce înseamnă fiecare pictogramă și dacă este familiarizat cu acțiunile posibile (de exemplu, sunt potrivite pentru aplicațiile de rețele sociale).

2. File cu opțiunea „Altele”.

Dacă aplicația dvs. are mai mult de cinci secțiuni principale, Colleen sugerează să utilizați o versiune modificată a primului tip de meniu - file cu opțiunea „Altele”. În acest caz, dezvoltatorul va putea plasa patru secțiuni cu prioritate ridicată pe panou și va putea ascunde restul într-o filă suplimentară.

„Această opțiune poate părea că nu este o opțiune mai bună decât un meniu de hamburger, dar dacă proiectați filele astfel încât aproape toate informațiile de care are nevoie utilizatorul să fie în primele patru secțiuni, UX-ul nu va suferi prea mult”, explică Colleen.

3. Meniu derulant

Variație de file cu secțiunea „Altele” - un meniu care se adaptează la dimensiunea ecranului și arată un număr diferit de file la fiecare rezoluție. Acele file care nu se potrivesc pe ecran ajung în secțiunea „Altele”.

4. Meniu de derulare

„Dacă aveți mai multe secțiuni și nu le puteți identifica pe cele principale, utilizarea file cu o secțiune suplimentară poate să nu fie o soluție eficientă. Apoi puteți enumera toate elementele din meniu și puteți derula panoul”, scrie Colleen.

Dezavantajul acestei soluții, notează designerul, este că inițial utilizatorul încă vede doar o parte din file, iar pentru a vedea restul, trebuie să defilați prin meniu. Cu toate acestea, dacă utilizatorii se află într-o aplicație de magazin online cu categorii de produse enumerate într-un panou sau într-o aplicație de știri cu file de categorii, aceasta nu va fi o problemă.

Acestea fiind spuse, designerii ar trebui să se asigure că este clar pentru utilizatori cum să deruleze - și să ofere indicii vizuale. De exemplu, aplicați un efect de „decolorare” ultimului element.

5. Meniu derulant

Potrivit designerului, există un șablon interesant, dar nu cel mai comun, care este utilizat atunci când vizibilitatea și accesibilitatea secțiunilor nu sunt semnificative - un meniu derulant.

Acest meniu servește ca titlu al paginii pe care se află utilizatorul. În același timp, săgeata de lângă cuvânt îi informează pe proprietarul smartphone-ului că există și alte secțiuni la care poate trece. Și deși opțiunile sunt ascunse, utilizatorului este clar că fie sunt similare ca importanță cu cea deschisă, fie sunt subsecțiuni ale acesteia.

Uneori, notează Colleen, un meniu cu hamburgeri poate fi o soluție bună. Potrivit designerului, acest model nu este recomandat pentru utilizare la proiectarea unui meniu principal, dar poate fi util pentru funcțiile secundare de navigare. „Hamburgerul” poate fi folosit și atunci când utilizatorul efectuează toate acțiunile principale pe ecranul principal - de exemplu, ca în aplicația Uber.

Pictograma hamburgerului este peste tot. Peste tot în jurul nostru. În aplicații web, pe site-uri mobile și desktop, în software. Această pictogramă omniprezentă cu trei linii este atât de comună în zilele noastre încât pare să fie asociată în mod unic cu meniul de navigare. Dar este?

Recent, discuțiile despre eficiența pictogramei hamburger au atins noi culmi. Articole ale designerilor proeminenți și mai multe site-uri, inclusiv The Atlantic, TechCrunch, The Next Web și Nielsen Norman Group, concluzionează că acesta este un anti-model UX, o pictogramă la modă și ușor de implementat, care este o regresie de la mai simplu, mai mult. alternative expresive... Dar anti-model sau nu, utilizarea pictogramei a crescut atât de mult încât este aproape un fix pe majoritatea site-urilor web, în ​​special pe ecranele mici.

Având în vedere poziția mea de designer în echipa m.booking.com și utilizarea acestei pictograme pentru a afișa un meniu glisant, am decis să explorez acest obiect. Am început prin a studia originile icoanei pentru a încerca să înțeleg calea ei către infamie.

Acest lucru sună promițător. Dar chiar dacă pictograma este un clasic și a existat pentru totdeauna, designerii web au fost mai puțin consecvenți în utilizarea sa. Pictograma a fost folosită pentru liste, glisare și reordonare, aliniere și multe altele. Poate că această utilizare greșită explică critica sa ca pictogramă de meniu. Poate datorită distribuției sale largi și utilizării variate, această pictogramă și-a pierdut capacitatea de a transmite o singură metaforă și, la rândul său, derutează utilizatorii.

Toată această poveste m-a făcut să pun întrebări: „Ne înșelim cu adevărat și toți ceilalți au dreptate? Cauza acest lucru inconveniente utilizatorilor noștri? Există oameni care înțeleg cu adevărat care sunt acele trei rânduri mici de pe site-ul nostru?”

Cititorii obișnuiți ai acestui blog nu vor fi surprinși să afle că următorul nostru pas a fost să punem aceste întrebări sub forma unui test A/B. Ca orice altceva, pictograma hamburger a fost supusă influenței numeroșilor noștri clienți care, prin interacțiunea cu meniul, au trebuit să stabilească dacă pictograma era cea mai bună soluție. Până atunci, citisem suficiente articole și informații pentru a fi încrezător că lipsa de consens sau rezultate diferite nu se datorau comportamentului clienților pentru care se dezvolta designul. Am decis să urmez metoda descrisă James Foster, care a fost menționat de mulți, inclusiv de unul dintre specialiștii noștri de top în mobil - Luke Wroblewski.

Am testat anterior mai multe poziții și stiluri de pictograme (cu chenar, fără chenar, cu pictogramă, culori diferite etc.), dar nu am testat niciodată cuvântul „Meniu” din cauza complexității dorinței noastre de a testa în patruzeci de ani. o singură limbă, susținută de noi. Cu toate acestea, am continuat, am găsit traducerile cu ajutorul echipei noastre de experți lingvistici și am rulat testul:

Pictograma noastră originală de meniu „hamburger” este în stânga titlului și cu o linie albă de separare în dreapta.

Cuvântul „Meniu” în interiorul unui bloc cu un cadru alb cu colțuri rotunjite, de asemenea aliniat la stânga.

Am lansat un experiment în întreaga noastră bază de utilizatori. Și având în vedere popularitatea și ubicuitatea acestui element de interfață, am sperat că nu va dura prea mult timp pentru a-l testa cu milioane de clienți din întreaga lume, în fiecare limbă acceptată și pe o mare varietate de dispozitive.

Deci, care este rezultatul final? Cuvântul a învins fast-food-ul, așa cum a făcut-o în experimentul lui James Foster, sau vor câștiga chifla și cotlet?

rezultate

Desigur, nu putem extrapola aceste date la toate. În unele țări, pe unele limbi sau dispozitive, este posibil să fi funcționat mai bine sau mai rău. Dar la scară globală, putem trage concluzia că „hamburgerul” a fost ridiculizat prea mult. În general, a fost la fel de recunoscut ca și cuvântul „Meniu”. În spiritul gestionării progresului de proiectare, probabil că ar trebui să luăm în considerare alte opțiuni și poate să încercăm să adăugăm brânză, o slănină și cartofi prăjiți la pictograma noastră de hamburger, dar deocamdată suntem bucuroși să raportăm că „prietenul nostru cu trei linii” este tencuit peste tot. Amplasarea, forma, dimensiunea, poziția și culoarea sa reală reprezintă, desigur, un subiect pentru teste viitoare.

Cu siguranță aceasta este o lecție pentru noi toți despre natura testării A/B. Nu testați niciodată elementele UI, modelul sau funcția în ansamblu. Testați aceste lucruri pe un public de utilizatori foarte specific în scenarii specifice și specifice. Ceea ce funcționează pentru Booking.com poate să nu funcționeze pentru dvs. sau pentru utilizatorii dvs. Acesta este unul dintre motivele pentru care ne-am făcut testarea A/B. Constatările de la alți experți, datele de pe alte site-uri sau ipotezele formulate într-un pub în timp ce mănânci un burger, toate nu vor fi dovedite până când sunt testate cu clienții noștri și pe platforma noastră.

Să nu ne pierdem în propria metaforă, dar este ca o rețetă pentru un hamburger bun. Chiar dacă ai notat toate ingredientele exact după mine, vei ajunge cu un cu totul alt hamburger. Acest lucru, desigur, va fi afectat de calitatea cărnii disponibile pe piață, de făina folosită pentru pâine și de mii de alți factori. Pentru noi personal, ideea este bună dacă este bună pentru Booking.com. Dacă îl putem repeta pe site-ul nostru, și dacă funcționează pentru toți clienții noștri.

Parerea noastra