All Thumbs, De ce să atingeți navigarea ar trebui să înlocuiți Navbar-ul în designul iOS

Navbar este selectat

UINavigationBar, navbar pentru scurt, a fost încă de pe iPhone original. Istoric, navele navale au fost convenabile și clare, ușor de înțeles și ușor de construit.

Apoi telefoanele s-au balonat, suficient încât iPhone 7 Plus să înlocuiască vânzările iPad mini. Acum, dacă dețineți un iPhone modern, navbar-urile se pot simți nelipsite - literalmente scăpat de la atingere.

Ecranele în vigoare înseamnă că distanța dintre navbar și degetele noastre a crescut. Ecranul de pe un 7 Plus este atât de înalt încât ar fi nevoie de o creștere a lungimii micului cu 150 la sută pentru a atinge acele butoane neplăcute cu o mână. Doar un alt nod sau două. Nimic ciudat.

Zonele Touch ale lui Hurff ilustrează accesibilitatea degetelor drepte.

Pe măsură ce dispozitivele se schimbă, limbajul nostru vizual se schimbă odată cu ele. Este timpul să vă îndepărtați de bara de navigație în favoarea navigației la distanță mare. În sensul acestui articol, vom apela la navigare în Reach.

De ce Navbar-ul nu este la atingere

Navbar este un element principal al aplicației „standard standard”, utilizat în telefon, mesaje, poștă, calendar și în nenumărate altele. Există o mulțime de motive pentru care a câștigat favoarea:

  • iOS Standard Apple a creat bară pentru a fi personalizabilă, scalabilă, accesibilă și ușor de implementat. Deoarece este un standard iOS, este recunoscut în aplicații.
  • Navigare Partea din stânga și cea din dreapta a barei navale oferă spațiu pentru butoane. Zona din stânga navigează adesea utilizatorii în ierarhie, iar zona dreaptă este în sus pentru apucări. Butonul din spate informează utilizatorii că nu se află la vizualizarea rădăcină.
  • Titlu Oferă o locație consistentă pentru textul care definește funcția vizualizării. Deoarece navbarul rămâne întotdeauna pe ecran, ajută la stabilirea în continuare a ierarhiei informațiilor.
  • Însoțitor la bara de filă Dacă aveți un rând de icoane tappabile în partea de jos a ecranului (și anume, o bară tab), punerea altor pictograme în partea de sus a ecranului ajută la separarea relației părinte / copil.
  • Logo Clientul dvs. poate pune un logo aici! Geniu. Lol jk, găsesc această problemă, dar mă descurc.
Câteva navbars de probă pentru plăcerea ta.

Oh, draga mea, atât de multe motive grozave pentru a utiliza o bară de navigație în proiectul tău. Cu excepția, al naibii! E greu să îți ridici degetul mare acum.

În acest caz, să vorbim despre câteva contravaloare Navbar:

  • Este mai greu să te întorci. Puteți trece de pe margine, atât timp cât vizualizarea pe care o aveți nu are nimic care să deruleze pe orizontală, dar dacă o face, atunci sunteți în orașul întins.
  • Denumirea tuturor punctelor de vedere este o durere. Nu toate ecranele au nevoie de un titlu persistent, iar unele necesită etichete prea lungi pentru a se potrivi. Lăsând o zonă de navigare goală risipește spațiul ecranului și pare stearp
  • Navigarea necesită două mâini. Dacă puteți ține un dispozitiv într-o mână, ar trebui să puteți folosi dispozitivul cu o singură mână. Se simte mai bine și este mai convenabil într-o lume plină de căruțe de cumpărături pe care să le împingeți și să le poarte bebelușii.
  • Aplicațiile simple devin mai complexe decât este necesar. Navbarile tind să conducă la o arhitectură informațională care se desfășoară în profunzime. Este ușor de dezvoltat pentru dezvăluirea progresivă orizontală, ceea ce înseamnă că poate fi o luptă pentru a extinde în linie sau pentru a utiliza o foaie.

In regula. Acum știm cum navbars-urile pot fi o prostie. Deci ce facem?

Atingeți navigația și Apple

În calitate de designer iOS, aceasta este partea în care îmi susțin teza subliniind cum Apple încorporează deja Reach Navigation. Gata? Vom începe cu două dintre modurile evidente pe care Apple le găzduiește pe ecrane mobile mai mari.

În loc de butonul înapoi, navigați înapoi glisând din marginea stângă.

În primul rând, nu mai trebuie să apăsați butonul înapoi, puteți naviga înapoi glisând din marginea din stânga. De asemenea, puteți controla mișcarea ecranului pe măsură ce se glisează înapoi, lăsându-vă să aruncați o privire spre un ecran anterior înainte de a face angajamentul. Nu funcționează în fiecare aplicație, dar atunci când ajungeți să vedeți tranziția din etichetă din spate în titlu, care este doar frumoasă.

Apăsând ușor de două ori butonul de pornire muta conținutul.

În al doilea rând, iOS include o caracteristică numită Accesibilitate, unde conținutul ecranului se reduce pentru a vă ajuta să atingeți butoanele din partea de sus când atingeți ușor butonul de pornire. Funcționabil deocamdată, dar se simte ca o soluție Bandaid.

Acum, aici este locul în care direcția către Reach Nav devine mai evidentă. Apple a început deja să-și scoată aplicațiile de pe navbar. Hărți și Muzică au avut ambele reproiectări structurale pentru iOS 10, care au diminuat sau au eliminat nevoia de bare navale.

Apple Music se schimbă de la iOS 9 (stânga) la iOS 10 (dreapta). Scoaterea barei de navigare a permis ca eticheta de vizualizare primară să crească în dimensiune. Frumos.

Acum ambele aplicații folosesc o foaie pe care o puteți glisa în jos pentru a respinge.

Apple Maps se schimbă de la iOS 9 (stânga) la iOS 10 (dreapta). UI este inversat aproape în întregime. Setările hărții și Blocarea la locația curentă sunt mai greu de atins, în timp ce căutarea și rezultatele sunt prioritare.

Câteva butoane înapoi din Apple Music au supraviețuit blocării pentru iOS 10, dar par marcate pentru eliminarea într-un viitor sistem de operare. Este o prostie să alocăm atât de mult spațiu orizontal pentru un buton care ocupă doar 20 la sută din imobiliare. Apple Music a revenit, de asemenea, la o simplă etichetă Back în loc să descrie destinația de întoarcere, o piatră de temelie a funcționalității butonului înapoi prin versiunea iOS 7.

Butonul Înapoi în iOS 10 ocupă multe imobiliare aici. Pare temporar, nu? Da.

Deci, se pare că aceasta este direcția pe care Apple o ia, ceea ce vă oferă o șansă de a schimba design-urile în consecință.

Încorporând navigarea în Reach

Iată câteva specificații despre cum să încorporați Reach Nav în aplicațiile dvs. Dacă lucrați la:

O aplicație nouă folosind o bară de taburi:

  • Folosiți foi care apar din partea de jos și pot fi glisate.
  • În loc să puneți butoane importante, cum ar fi Filtru sau Modificare vizualizare în sus, vedeți dacă le puteți pluti deasupra barei de file
  • Faceți câteva conversații despre care sunt caracteristicile critice pentru misiune, înainte de a alege filele pentru imobilul dvs. cel mai de preț.
  • Nu puneți un buton de destinație - cum ar fi Căutare, Coș, Mesaj nou - în bara de navigare. Fie faceți o filă, fie încorporați-o în zona de conținut.

O aplicație nouă fără bară de taburi:

  • Încercați un sertar expus, cum ar fi Maps, sau foi precum Mail.
  • Trebuie să spun asta? Prioritizează plasarea butoanelor în partea de jos a ecranului.

O reînnoire a unui proiect de moștenire:

  • Mutați elementele cele mai utilizate în partea de jos.
  • Asigurați-vă că trecerea de pe marginea ecranului pentru a reveni funcționează pentru toate vizualizările.
  • Vedeți ce puteți cuibă pentru a elibera spațiu în cele mai utilizate zone de ecran.
  • Eliminați acțiunile importante din locul de navigare din dreapta sus și puneți-le oriunde altundeva.
O redare rapidă a modului în care Safari ar putea muta bara de adrese în partea de jos, a elimina bara de instrumente și a menține în continuare funcționalitatea.

În cele din urmă, există câteva excepții de la punerea butoanelor critice pentru misiune la îndemână. Dacă o acțiune are consecințe grave, mutarea butonului la îndemână este o modalitate de a ajuta utilizatorul să evite o greșeală. Așadar, dacă un caz de grăsimi ar putea costa cuiva mii de dolari sau șterge un document important, mutați opțiunile un pic.

Exemple de Reach Nav in the Wild

Aplicațiile noi Apple nu sunt singurele produse care încep să respecte Reach Nav. Lyft și Pokémon Go pun totul la îndemână.

Pokémon Go și Lyft utilizează Reach Navigation.

Unele alte aplicații precum Overcast au început să folosească foi care vă permit să treceți în jos.

Înnorat folosește foi care permit utilizatorilor să alunece în jos.

Aplicația iOS Twitter elimină nevoia de a trece de pe marginea ecranului pentru a reveni, acum puteți trece de oriunde.

Așteptați-vă că mai multe aplicații mută funcționalitatea în partea de jos în partea cea mai accesibilă a ecranului. Este destul de ușor de adaptat, deși aplicațiile cu funcții excesive vor avea cele mai multe probleme.

Ține legătura

Navbar-ul a fost o parte esențială a iOS de când Apple a lansat primul kit de dezvoltatori, iar acesta ne-a servit bine. Dar a sosit timpul să plec.

Suntem de acord să nu mai lipim butoanele importante în partea de sus a ecranului. O navigare mai bună este la îndemână.

Brad Ellis este fondatorul Tall West, o agenție de design ai cărei clienți includ Airbnb și Target. Este câștigător al premiului Apple Design Award și a primit două Webbys pentru proiectarea aplicațiilor. Dacă doriți să lucrați împreună, aruncați-i o linie la Brad la Tallwest.com.

Colaboratori: Ronan Rooney și Maggie Mason