Bare de file și navigare de jos: reguli de proiectare care persistă
Cum să proiectați barele de file și navigarea de jos pe iOS și Android: 3 până la 5 destinații, navigare nu acțiuni, etichete, insigne, vizibilitate și stări active animate.
Core Takeaway
Utilizați o bară de file sau o navigare de jos pentru trei până la cinci destinații de nivel superior, nu pentru acțiuni. Dați fiecărei file o pictogramă și o etichetă, mențineți bara vizibilă pe măsură ce oamenii se deplasează între secțiuni, evitați depășirea filelor „Mai multe” acolo unde puteți și folosiți insignele cu moderație. Animați subtil starea activă, astfel încât oamenii să vadă unde se află.
Ce spun platformele
Material Design 3 spune că barele de navigare oferă acces la trei până la cinci destinații, fiecare cu o pictogramă și o etichetă, iar o destinație este întotdeauna activă. Ghidurile Apple spun să folosiți o bară de file pentru navigare, să nu furnizați acțiuni, să o păstrați vizibilă pe măsură ce oamenii se deplasează între secțiuni (cu excepția cazului în care o acoperă un modal) și pentru a evita filele de depășire.
Alegerea filelor
Filele reprezintă structura aplicației:
- Alegeți secțiunile pe care oamenii le folosesc cel mai des, nu toate secțiunile pe care le aveți.
- Folosiți substantive pentru destinații ("Biblioteca"), nu verbe pentru acțiuni ("Încărcare").
- Puneți acțiuni în ecranul propriu-zis, într-o bară de instrumente sau într-un buton de acțiune plutitor.
- Dacă aveți nevoie de mai mult de cinci, reconsiderați structura înainte de a adăuga o filă „Mai multe”.
Etichete și insigne
Filele numai cu pictograme economisesc spațiu, dar obligă oamenii să ghicească. Etichetele fac navigarea mai clară, în special pentru pictogramele mai puțin obișnuite. Insignele ar trebui să semnaleze ceva asupra căruia oamenii trebuie să acționeze; o insignă care este mereu prezentă încetează să fie observată.
Păstrați starea per filă
Apple observă că barele de file permit utilizatorilor să schimbe secțiunile, păstrând în același timp starea curentă de navigare în fiecare secțiune. Revenirea la o filă ar trebui să arate unde au rămas, nu resetate în partea de sus.
Mişcare
O mică tranziție pe indicatorul activ, cum ar fi o pastilă care alunecă sau o pictogramă care se umple, îi ajută pe oameni să urmărească unde se află. Păstrați-l rapid, sub aproximativ 250 de milisecunde, evitați să aruncați fiecare pictogramă la fiecare atingere și simplificați-l când este activată mișcarea redusă.
Cheie Principles de reținut
- Trei până la cinci destinații de top
- Navigare, nu acțiuni
- Pictogramă plus etichetă pentru fiecare filă
- Păstrați-l vizibil și păstrați starea fiecărei file
- Mișcare subtilă, rapidă în stare activă
Întrebări frecvente
Surse
- Navigation bar guidelines — Material Design 3
- Tab bars — Ghid Apple pentru interfața umană