Alle tommelfingre, hvorfor rækkevidde skal udskiftes Navbar i iOS-design

Navbaren er udtaget

UINavigationBar, navbar for kort, har eksisteret siden den originale iPhone. Historisk set har navbars været praktisk og tydelige, let at forstå og let at opbygge.

Derefter ballonerede telefoner, nok til, at iPhone 7 Plus erstattede salget af iPad mini. Hvis du nu ejer en moderne iPhone, kan navbars føles uhåndterlige - bogstaveligt talt uden berøring.

Sprudlende skærme betyder, at afstanden mellem navlen og vores tommelfingre er vokset. Skærmen på en 7 Plus er så høj, at det vil tage en tommelfingerlængde på 150 procent for at nå disse irriterende knapper med den ene hånd. Bare en anden knog eller to. Intet underligt.

Hurffs berøringszoner illustrerer højrehåndet tommelfingerbarhed.

Når enheder ændres, ændres vores visuelle sprog med dem. Det er tid til at bevæge sig væk fra navlen til fordel for navigation inden for tommelfinger rækkevidde. Med henblik på denne artikel kalder vi denne rækkevidde-navigation.

Hvorfor Navbar er ude af berøring

Navbar er en grundpille i applikationen "systemstandard", der bruges i telefon, meddelelser, mail, kalender og utallige andre. Der er mange grunde til, at det fik fordel:

  • iOS Standard Apple byggede navbaren til at være tilpasselig, skalerbar, tilgængelig og let at implementere. Fordi det er en iOS-standard, kan den genkendes på tværs af apps.
  • Navigation Venstre og højre side af navbaren giver plads til knapper. Det venstre område navigerer ofte brugere op i hierarkiet, og det højre område er ude af fat. Tilbageknappen informerer brugerne om, at de ikke er i rodvisningen.
  • Titel Giver et konsistent sted for tekst, der definerer visningens funktion. Da navbaren altid forbliver på skærmen, hjælper den yderligere med at etablere informationshierarkiet.
  • Ledsagelse til fanebjælke Hvis du har en række med tappbare ikoner i bunden af ​​skærmen (nemlig en fanebjælke), er det at sætte andre ikoner øverst på skærmen med til at adskille forholdet mellem forældre og barn.
  • Logo Din klient kan sætte et logo her! Geni. Lol jk, jeg finder dette klistret, men jeg tager af.
Nogle eksempler på navbars til din fornøjelse.

Oh my gosh, så mange gode grunde til at bruge en navbar i dit projekt. Undtagen, forbandet! Det er svært at få tommelfingeren derop nu.

Det er tilfældet, lad os tale nogle Navbar ulemper:

  • Det er sværere at vende tilbage. Du kan stryge fra kanten, så længe den udsigt, du er på, ikke har noget, der ruller vandret, men hvis det gør det, er du i strækningsby.
  • At navngive alle synspunkter er en smerte. Ikke alle skærme har brug for en vedvarende titel, og nogle kræver etiketter for lang til at passe. At forlade et tomt navigationsområde spilder skærmrummet og ser golde ud.
  • Navigation kræver to hænder. Hvis du kan holde en enhed i den ene hånd, skal du være i stand til at betjene enheden med den ene hånd. Det føles bedre, og det er mere praktisk i en verden fuld af indkøbsvogne at skubbe og babyer at bære.
  • Enkle apps bliver mere komplekse end nødvendigt. Navbars fører ofte til informationsarkitektur, der løber dybt. Det er let at udvikle til horisontal progressiv afsløring, hvilket betyder, at det kan være en kamp for at udvide inline eller bruge et ark.

Okay. Nu ved vi, hvordan navbars kan være crap. Så hvad laver vi?

Nå navigation og Apple

Som iOS-designer er dette den del, hvor jeg støtter min afhandling ved at påpege, hvordan Apple allerede inkorporerer Reach Navigation. Parat? Vi starter med to af de åbenlyse måder, hvor Apple passer til større mobilskærme.

I stedet for en tilbage-knap skal du navigere tilbage ved at stryge fra venstre kant.

Først behøver du ikke at trykke på tilbage-knappen mere, du kan navigere tilbage ved at stryge fra venstre kant. Du kan også kontrollere bevægelsen af ​​skærmen, når den svejer bagud, så du kan kigge på en forrige skærm, før du begår. Det fungerer ikke i hver app, men når det kommer, får du se den bagerste etiket overgang til titlen, som bare er smuk.

Ved let at trykke let på hjemmeknappen forskydes indholdet.

For det andet inkluderer iOS en funktion, der kaldes Reachability, hvor indholdet på din skærm skifter ned for at hjælpe dig med at nå knapper nær toppen, når du let trykker let på hjemmeknappen. Arbejdbar i øjeblikket, men det føles som en Bandaid-løsning.

Her er det, hvor drejen mod Reach Nav bliver tydeligere. Apple er allerede begyndt at fravænge deres apps fra navlen. Kort og musik havde begge strukturelle redesign til iOS 10, der mindskede eller fjernede behovet for navbars.

Apple Music skifter fra iOS 9 (venstre) til iOS 10 (højre). Fjernelse af navigationslinjen tillod det primære visningsmærke at stige i størrelse. Smuk.

Nu bruger begge apps et ark, du kan stryge ned for at afvise.

Apple Maps skifter fra iOS 9 (venstre) til iOS 10 (højre). Brugergrænsefladen er næsten helt omvendt. Kortindstillinger og lås til den aktuelle placering er sværere at nå, mens søgning og resultater er prioriteret.

Et par tilbage-knapper i Apple Music overlevede chop-blokken til iOS 10, men de ser ud til at være markeret til fjernelse i et fremtidig operativsystem. Det er fjollet at øremærke så meget vandret plads til en knap, der kun optager 20 procent af fast ejendom. Apple Music er også vendt tilbage til en ren Back-etiket i stedet for at beskrive returneringsdestinationen, en hjørnesten i tilbage-knapens funktionalitet gennem iOS 7-udgivelsen.

Tilbage-knappen i iOS 10 optager en masse fast ejendom her. Virker midlertidig, nej? Ja.

Så det ser ud til, at dette er retningen, som Apple tager, som giver dig en chance for at ændre dine design i overensstemmelse hermed.

Inkorporering af rækkevidde-navigation

Her er nogle detaljer om, hvordan du integrerer Reach Nav i dine apps. Hvis du arbejder på:

En ny app ved hjælp af en fanebjælke:

  • Brug ark, der dukker op fra bunden og kan stryges væk.
  • I stedet for at sætte vigtige knapper som Filter eller Skift visning højt op, kan du se, om du kan flyde dem over fanebjælken.
  • Hold nogle samtaler om, hvilke funktioner der er kritiske for mission, før du vælger faner til din mest dyrebare skærm ejendom.
  • Anbring ikke en destinationsknap - som Søgning, Indkøbskurv, Ny besked - i navlen. Lav enten en fane eller integrer den i indholdsområdet.

En ny app uden fanebjælke:

  • Prøv en eksponeret skuffe som Kort eller ark som Mail.
  • Skal jeg sige dette? Prioriter placering af knapper i bunden af ​​skærmen.

En modernisering af et arv design:

  • Flyt de mest anvendte emner til bunden.
  • Sørg for, at du stryger fra kanten af ​​skærmen for at gå tilbage fungerer for alle visninger.
  • Se hvad du kan reden for at frigøre plads i de mest anvendelige skærmområder.
  • Fjern vigtige handlinger fra øverste højre navbarsplet, og anbring dem andre steder.
En hurtig gengivelse af, hvordan Safari kunne flytte adresselinjen til bunden, fjerne værktøjslinjen og stadig bevare funktionaliteten.

Endelig er der et par undtagelser fra at placere missionskritiske knapper inden for rækkevidde. Hvis en handling har alvorlige konsekvenser, er det at hjælpe din bruger med at undgå en fejl at flytte knappen uden for rækkevidde. Så hvis en sag med fed tommelfinger kan koste nogen tusinder af dollars, eller slette et vigtigt dokument, skal du flytte disse indstillinger lidt op.

Eksempler på Reach Nav in the Wild

Nye Apple-apps er ikke de eneste produkter, der begynder at respektere Reach Nav. Lyft og Pokémon Go sætter alt inden for enhånds rækkevidde.

Pokémon Go og Lyft anvender Reach Navigation.

Nogle andre apps som Overcast er begyndt at bruge ark, der lader dig skubbe ned.

Overskyet bruger ark, der lader brugere svejse ned.

IOS Twitter-appen fjerner behovet for at stryge fra kanten af ​​skærmen for at gå tilbage, nu kan du stryge hvor som helst.

Forvent at se flere apps flytte funktionalitet til bunden på den mest tilgængelige del af skærmen. Det er temmelig let at tilpasse, selvom apps med overdrevne funktioner har mest problemer.

Holde kontakt

Navbaren har været en vigtig del af iOS, siden Apple frigav det første udviklersæt, og det har tjent os godt. Men det er tid til at give slip.

Lad os acceptere at stoppe med at klæbe vigtige knapper øverst på skærmen. Bedre navigation er inden for rækkevidde.

Brad Ellis er grundlæggeren af ​​Tall West, et designbureau, hvis kunder inkluderer Airbnb og Target. Han er en Apple Design Award-vinder og har modtaget to Webbys til app-design. Hvis du gerne vil arbejde sammen, slip ham en linje hos Brad på Tallwest.com.

Bidragsydere: Ronan Rooney og Maggie Mason