O primă pentru navigarea pe Android

Orice vehicul pe care cineva îl folosește pentru a vă deplasa între scene din interfața dvs. - aceasta este navigarea

De îndată ce faceți legătura între două ecrane într-o aplicație, aveți navigare. Această legătură - oricare ar fi ea - este vehiculul care îi transportă pe utilizatori între aceste ecrane. Și deși crearea navigației este relativ simplă, crearea navigării corecte pentru utilizatorii dvs. nu este întotdeauna simplă. În această postare, vom arunca o privire la unele dintre cele mai comune modele de navigație utilizate pe Android, cum au impact asupra navigației la nivel de sistem și cum să amesteci și să potriviți tiparele pentru a se potrivi cu interfața și utilizatorii dvs.

Definirea navigării

Înainte de a săpa în tiparele comune de navigare, merită să faceți un pas înapoi și să găsiți un punct de plecare pentru a vă gândi la navigare în aplicația dvs.

Specificația de proiectare a materialelor are câteva îndrumări grozave cu privire la modul de abordare a definirii structurilor de navigație, dar în scopul acestei postări putem reduce totul la două puncte simple:

  • Construiți navigare pe baza sarcinilor și a conținutului
  • Construiți navigare pentru oameni

Construirea navigării pe baza sarcinilor și a conținutului înseamnă a descompune sarcinile pe care oamenii le vor îndeplini și ce vor vedea pe parcurs și a face o relație între cei doi. Determinați modul în care sarcinile se raportează între ele - ce sarcini sunt mai mult sau mai puțin importante, ce sarcini sunt frații, care se cuibăresc în interiorul celuilalt și ce sarcini vor fi îndeplinite mai mult sau mai puțin des.

Acolo intervine construirea navigației pentru oameni - persoanele care utilizează interfața dvs. vă pot spune dacă funcționează sau nu pentru acestea, iar navigarea dvs. ar trebui să fie construită pentru a le ajuta să aibă succes în aplicația dvs.

După ce știți cum funcționează împreună sarcinile din aplicația dvs., puteți decide ce conținut utilizatori trebuie să vadă pe parcurs și când și cum să-l prezinte - acest exercițiu ar trebui să ofere o bază bună pentru a decide care modele servesc cel mai bine experienței aplicației dvs.

Găsiți îndrumări mai detaliate despre descompunerea sarcinilor și comportamentelor pentru navigare în specificațiile Materialului.

🗂 Tabele

Definiție

Filașii oferă o navigare rapidă între vizualizările fratilor din interiorul aceluiași ecran părinte. Sunt coplanare, ceea ce înseamnă că pot fi glisate și trăiesc într-o bară cu file extensibilă și identificabilă.

Tabele sunt ideale pentru filtrarea, segmentarea sau furnizarea de profunzime pentru bucăți de conținut conexe. Piesele de conținut care nu au legătură sau conținutul cu o ierarhie profundă pot fi mai bine servite utilizând alte modele de navigație.

Găsiți toate detaliile despre filele de proiectare aici și despre filele de implementare aici.

Tabele în acțiune

Joacă Muzică, Google+, Joacă Chioșc

Redarea muzicii (sus, stânga) folosește file pentru a adăuga adâncime bibliotecii muzicale, organizând același conținut general în moduri diferite pentru a găzdui diferite mijloace de explorare.

Google+ (deasupra, centrul) folosește file pentru a segmenta Colecțiile, un singur tip de conținut care duce la conținut foarte eterogen în aplicație.

Play Chioșc (mai sus, dreapta) folosește file pe ecranul Bibliotecii pentru a prezenta diferite seturi de aceleași informații - o filă prezintă o colecție holistică, cu mai multe straturi, în timp ce cealaltă arată un set condensat de titluri.

Istorie

Tabele există la un nivel împreună, în cadrul aceluiași ecran părinte. Așadar, navigarea între file nu trebuie să creeze istoric, nici pentru butonul înapoi al sistemului, nici pentru butonul de sus al aplicației.

Sertarele Nav

Definiție

Sertarul de navigare este, în general, un panou vertical atașat la marginea stângă a pânzei. Sertarele se pot manifesta în afara ecranului sau pe, persistente sau nu, dar împărtășesc întotdeauna unele caracteristici comune.

De obicei, sertarul Nav listează destinațiile părinte care sunt colegi sau frați unul cu altul. Un sertar nav poate fi utilizat în aplicații cu mai multe destinații principale și în anumite destinații unice de asistență, cum ar fi setări sau ajutor.

Dacă combinați sertarul cu o altă componentă de navigație primară - nav de jos, de exemplu - sertarul poate conține destinații secundare sau destinații importante care nu sunt urmate direct în ierarhia din navul de jos.

Când utilizați sertarul nav, fiți conștienți de tipurile de destinații pe care le prezentați - adăugarea prea multor destinații sau destinații care reprezintă niveluri diferite în ierarhia aplicației poate deveni confuză.

De asemenea, fiți conștienți de vizibilitate - sertarul poate fi bun pentru reducerea vizibilității sau compactarea navigației departe de zona principală de conținut, dar asta poate fi și un dezavantaj în funcție de modul în care trebuie prezentate și accesate destinațiile din aplicația dvs.

Obțineți îndrumări detaliate despre proiectarea sertarelor nav aici și implementarea aici.

Sertarele Nav în acțiune

Play Store, Google Camera, Inbox

Play Store (sus, stânga) folosește sertarul nav pentru a indica secțiuni diferite ale magazinului, fiecare dedicat unui tip diferit de conținut.

Google Camera (deasupra, centrul) folosește sertarul pentru a sprijini destinații - acestea sunt în mare parte destinații care măresc experiența de captare, plus o cale către setări.

Inbox (deasupra, dreapta) are un sertar de extensibilitate, care poate ajunge destul de mult. În partea de sus se află destinațiile principale care prezintă diferite segmente ale e-mailului dvs., iar sub acestea sunt segmente care susțin pachete.

Deoarece sertarul nav din Inbox poate obține atât de mult timp, elementele „setări” și „ajutor și feedback” sunt prezentate într-o foaie persistentă, accesibilă de oriunde în sertar.

Istorie

Sertarele Nav ar trebui, în general, să creeze istoric pentru butonul înapoi al sistemului atunci când aplicația are o destinație distinctă „Acasă”. În Play Store, destinația principală este intrarea Aplicații și jocuri, care prezintă de fapt utilizatorului navigare prin file pentru a vedea conținut evidențiat de toate tipurile. Așadar, Play Store creează istoricul pentru a vă întoarce la acea destinație din alte zone ale aplicației.

De asemenea, Google Camera îi readuce pe utilizatori la modul de captare implicit, primar minus orice majorare.

Intrarea „Start conducere” mărește vizualizarea principală a hărții

Același lucru este valabil și pentru Google Maps (mai sus) - orice destinație în sertar este prezentată fie ca un strat în partea de sus, fie o mărire a ecranului de hartă primară, astfel încât butonul din spate ne readuce la o ardezie curată.

Este posibil să observați că Play Store (de mai sus) nu schimbă indicatorul de sertar nav din bara de instrumente la un buton „sus” odată ce navigați la o destinație. Acest lucru se datorează faptului că destinațiile principale din sertar sunt la un nivel egal în ierarhia de navigare a aplicației. Deoarece nu vă deplasați mai adânc în aplicație selectând „Filme și televizor” din sertar, nu puteți merge mai departe. Sunteți încă la nivelul superior, doar pe un ecran paralel.

Navă de jos

Definiție

Pe Android, componenta nav de jos este cuprinsă între trei și cinci destinații principale. Important este că „mai mult” nu este o destinație. Nici meniurile, nici dialogurile nu sunt.

Navigarea de jos funcționează cel mai bine atunci când aplicația are un număr limitat de destinații de nivel superior disparate (navigația de jos nu ar trebui să deruleze niciodată) care trebuie să fie accesate instantaneu. Unul dintre avantajele principale ale unei „bara de jos” este posibilitatea de a sari de pe ecranul copilului la un ecran părinte care nu are legătură instantaneu, fără să navigați mai întâi la actualul părinte.

Este important să rețineți că, deși destinațiile din bara de jos ar trebui să fie egale în ierarhia de navigare a aplicației, elementele din bara de jos nu sunt coplanare așa cum sunt filele și nu ar trebui prezentate ca atare.

Trecerea dintre destinații în bara de jos sugerează o relație între destinații care nu există. Fiecare destinație ar trebui să fie un părinte discret, nu un frate al celorlalte destinații. Dacă destinațiile din aplicația dvs. sunt similare sau prezintă conținut similar, acestea pot fi mai potrivite pentru filele.

Găsiți aici instrucțiuni de proiectare mai detaliate pentru navigația de jos aici și detalii de implementare aici.

Nav de jos în acțiune

Google Photos

Nav-ul de jos are câteva considerente interesante dincolo de definiția sa de bază. Probabil cea mai complexă este noțiunea despre cât de persistentă ar trebui să fie bara de jos. Răspunsul, la fel ca la atâtea decizii de proiectare, este „depinde”.

De obicei, bara de jos persistă pe întreaga aplicație, dar există unele cazuri care ar putea justifica ascunderea barei de jos. Dacă utilizatorul intră într-o ierarhie foarte superficială - pe ecrane cu scop unic precum compoziția mesajelor - sau dacă aplicația dorește să prezinte o experiență mai imersivă la un pas sau doi adânc în ierarhie, bara de jos poate fi ascunsă.

În Google Photos (de mai sus), navul de jos dispare în albume. Albumele sunt prezentate ca un strat secundar în ierarhie și singura acțiune suplimentară de navigare este deschiderea unei fotografii, care se deschide în partea de sus a interfeței de utilizare a albumului. Această implementare respectă regula „cu un singur scop” pentru a ascunde navigația de jos, în timp ce servește obiectivul de a crea o experiență mai imersivă odată ce utilizatorul depășește nivelul superior.

Considerații suplimentare

Dacă bara este persistentă pe întreaga aplicație, următoarea considerație logică ar fi comportamentul atunci când săriți între destinații folosind bara. Dacă utilizatorul are mai multe straturi adânc într-o ierarhie care provine dintr-o destinație și trece la o altă destinație, apoi se întoarce la prima, ce ar trebui să vadă? Ecranul părinte sau ecranul copilului pe care l-au părăsit?

Această decizie ar trebui să fie informată de cei care utilizează aplicația. În general, atingerea unui element din bara de jos ar trebui să meargă direct la ecranul asociat, nu la un strat mai profund al ierarhiei, ci ca în orice ghid - să devieze cu scopul.

Istorie

Nav-ul de jos nu ar trebui să creeze istoricul pentru butonul înapoi al sistemului. Aflând mai adânc în ierarhii care provin din destinațiile nav de jos, puteți crea istoricul pentru butonul înapoi al sistemului și pentru butonul sus al aplicației, dar bara de jos poate servi și ca un fel de navigare istorică.

Atingerea unui element din navigarea de jos ar trebui să vă ducă direct la destinația asociată, iar atingerea acestuia din nou ar trebui să navigați înapoi la nivelul părinte sau să reîmprospătați nivelul părinte, dacă utilizatorul este deja acolo.

🕹 Navigare în context

Definiție

Navigarea în context cuprinde orice interacțiune de navigație în afara componentelor descrise mai sus. Aceasta include lucruri cum ar fi butoane, plăci, cărți și orice altceva care ia utilizatorul în altă parte dintr-o aplicație.

Navigarea în context este de obicei mai puțin liniară decât navigația explicită - interacțiunile pot transporta utilizatorul printr-o ierarhie, între diferiți pași în ierarhiile discrete sau în afara aplicației în întregime.

Căutați mai multe informații despre navigarea în context aici.

Navigarea în context în acțiune

Ceas, Google și Google Calendar

În aplicația Clock (sus, stânga) există un FAB; aplicația Google (deasupra, mijlocul) se bazează în principal pe informațiile aranjate în carduri; iar Google Calendar (mai sus, dreapta) creează plăci pentru evenimente.

Activarea FAB în ceas (sus, stânga) vă aduce pe un ecran de selecție a ceasului mondial, atingeți cardul meteo din aplicația Google (deasupra, centru) vă aduce la pagina de rezultate a căutării pentru „vreme” și atingeți o foaie de eveniment în Calendarul (mai sus, dreapta) vă duce la detaliile evenimentului respectiv.

De asemenea, vedem în aceste capturi de ecran diferitele moduri în care navigarea în context poate transporta utilizatorul. În aplicația Clock, am coborât un nivel de la ceas în sine, în aplicația Google am ajuns în esență la o mărire a ecranului principal, iar în Calendar am deschis un dialog pe ecran complet.

Istorie

Nu există nicio regulă grea pentru crearea istoriei prin navigare în context. Dacă istoria este creată se bazează în totalitate pe ce fel de navigare în context folosește aplicația și unde este dus utilizatorul. În cazurile în care nu este clar exact ce fel de istorie ar trebui creată, este bine să știm ce fac în general butoanele sus și înapoi.

Sus, spate și închide butoanele

Butoanele de întoarcere, de sus și de închidere sunt importante pentru navigarea pe o interfață de utilizator Android, dar sunt adesea înțelese greșit. Cele trei butoane au, de fapt, un comportament destul de simplu din perspectiva UX, așa că amintirea următoarelor reguli ar trebui să vă ajute să ieșiți din orice situație perplexă.

  • Up-ul se găsește în bara de instrumente a aplicației atunci când utilizatorul a coborât în ​​ierarhia aplicației. Acesta navighează înapoi în ierarhie în ordine cronologică până când utilizatorul ajunge la un ecran părinte. Deoarece butonul sus nu apare pe ecranele părinte, nu ar trebui să iasă niciodată dintr-o aplicație.
  • Înapoi este întotdeauna prezent în bara de navigație a sistemului. Navigă înapoi cronologic, indiferent de ierarhia aplicațiilor, chiar dacă ecranul cronologic anterior se afla în interiorul altei aplicații. De asemenea, respinge elemente temporare precum dialogurile, foile de jos și suprapunerile.
  • Close este de obicei utilizat pentru a respinge straturile tranzitorii ale interfeței sau a arunca modificările într-un dialog cu ecran complet. Luați în considerare ecranul de detaliu al evenimentului din Google Calendar (prezentat mai jos). Caracterul temporar al ecranului de detalii devine și mai clar pe ecrane mai mari. În Inbox (mai jos), trecerea de la inbox la mesaj sugerează că mesajul este un strat în partea de sus a intrării, deci butonul de închidere este adecvat. Gmail (de mai jos) poziționează mesajul ca un nivel distinct al aplicației și utilizează butonul sus.
Calendar, Inbox și Gmail

Consultați în mod specific comportamentul de rezervă în sus în Material Spec aici.

Combinarea tiparelor

De-a lungul acestui primer am văzut exemple de aplicații care implementează cu succes fiecare dintre componentele de navigare explicite. Multe dintre aceste exemple reușesc, de asemenea, să combine modele de navigație pentru a forma o structură care are sens pentru utilizatori. Pentru a încheia, să trecem în revistă câteva dintre aceste exemple cu privire la amestecare și potrivire.

Google+

Poate cel mai evident exemplu este Google+ (de mai sus), care amestecă toate modelele pe care le-am discutat - file, un sertar nav, nav de jos și navigare în context.

Pentru a o descompune, navigația de jos este focalizată în G +. Acesta oferă acces la patru destinații de nivel superior. Filașele măresc două dintre aceste destinații prin segmentarea conținutului lor în categorii sensibile. Sertarul Nav conține alte destinații, atât primare, cât și secundare, la care s-ar putea accesa mai rar.

Play Store

Play Store (de mai sus) folosește în primul rând un sertar nav, folosește frecvent navigare în context și, ocazional, folosește file.

În imaginile de mai sus, vedem destinațiile atinse prin sertarul nav. Sertarul este încă accesibil pe aceste ecrane, deoarece sunt toate destinațiile primare. Chiar sub bara de instrumente, vedem cipuri pentru a naviga către selecțiile de conținut filtrate, un exemplu de navigare în context. În graficele de aplicații, filele sunt utilizate pentru a sorta întreaga bibliotecă grafică în segmente specifice.

Google Calendar

Google Calendar (de mai sus) folosește un sertar nav și navigare în context și le folosește atât în ​​moduri cu adevărat interesante.

Sertarul din Calendar este non-standard, folosit mai ales pentru a mări calendarul. Calendarul în sine este controlat de un panou de bare de instrumente în expansiune, iar plăcile colorate duc utilizatorii la detaliile evenimentului.

Citiți mai multe despre combinarea modelelor de navigație aici.

Aveți mai multe întrebări?

Navigarea este un subiect complex. Sperăm că acest primer oferă o bază bună pentru înțelegerea principiilor de navigare comune pe Android. Dacă mai aveți întrebări, lăsați un răspuns sau urmăriți prima noastră sesiune #AskMaterial cu echipele de proiectare și relații de design pe Twitter aici!