Vývoj pro Android vs. iOS: Navigační vzory

V článku z minulého týdne jsme začali s přístupem na vysoké úrovni, kde jsme popsali rozdíly mezi jazyky návrhu iOS a Android: plochý design a materiálové provedení.

Pokud ještě nemáte dobré znalosti o Flat vs Material, doporučujeme vám si přečíst tento článek před přečtením tohoto článku.

Během několika příštích týdnů projdeme další vývoj mobilních telefonů Native vs. Hybrid a další rozdíly mezi platformami Android vs. iOS.

Tento týden pojďme mluvit o vzorcích navigačního designu.

Když přemýšlíte o tom, jak vaši uživatelé procházejí mobilní aplikaci, měli byste si položit následující otázky:

  • Jak by měl uživatel navigovat přes rozdílné části mé aplikace?
  • Mám používat navigační zásuvku nebo karty?
  • Mají se mé karty nahoře nebo dole na obrazovce?
  • Jak nechám svého uživatele vrátit se ze svého aktuálního zobrazení?

Budeme odpovídat na tyto otázky pro platformu iOS i Android (s případovými studiemi některých velmi populárních aplikací). Pokud jste tak již neučinili a chtěli byste dostávat informace o novinkách při zveřejnění těchto dalších článků, přihlaste se k odběru našeho seznamu adresátů (žádný spam, slibuji). Pokud jste podnikatel / vývojář v mobilním prostoru a plánujete uvolnit svou mobilní aplikaci pro iOS i Android, je naprosto nezbytné, abyste porozuměli specifikům každého ekosystému a uživatelské základny, abyste mohli dodávat lepší software.

Proč se obtěžovat studiem Navigace?

Navigace je jednou z (pokud ne) nejdůležitějších součástí mobilní aplikace. Vzhledem k tomu, že obrazovky mobilních zařízení jsou ve srovnání s notebooky velmi malé, obvykle nemůžete na jediné obrazovce zobrazit vše, co vaše aplikace dokáže. Proto je důležité uživateli vysvětlit, jak se pohybovat z jedné sekce do druhé. Inteligentnější rozhodování o uživatelském prostředí (a zaznamenávání toho, jak na ně uživatelé reagují) může výrazně změnit způsob, jakým uživatelé vaši aplikaci využívají (nebo opouštějí).

Tab

Pokud má aplikace několik hlavních sekcí a chcete, aby mezi nimi uživatel rychle přepínal, jsou karty skvělou volbou. Karty umožňují uspořádat hlavní zobrazení aplikace a uživatelům umožňují rychle prozkoumat obsah v každém z nich.

iOS

V systému iOS jsou záložky ve spodní části obrazovky. Jedná se o velmi dobře známý a známý přístup k návrhu navigace, který používá mnoho úspěšných produktů, jako jsou Facebook, Twitter a Instagram. Karty iOS obvykle obsahují ikonu i text.

Karty na Twitteru pro iOS aplikaciPanel karet v aplikaci iOS Trello

Typické použití karet zahrnuje každou část aplikace:

  • Domů (hlavní obsah) Tab
  • Hledat (pokud je k dispozici obsah pro vyhledávání) Tab
  • Záložka Compose / Create
  • Oznámení Tab
  • Karta Profil
Karty navíc často obsahují ikony nebo čísla označující, že je pro uživatele k dispozici nový obsah

Existují konvence a omezení týkající se až 5 karet. Obvykle by vaše aplikace neměla obsahovat více než 5 „velkých“ věcí (obecně se jedná pouze o dobrý zážitek UX).

V režimu na výšku je na zařízeních iOS vodorovně pouze tolik místa. Pokud tedy umístíte 6. kartu, nebude pro ně všechny místo a systém by je „flopoval“ do další karty. Klepnutím na tuto tečkovanou kartu se otevře seznam dalších možností karty, které se nedostaly do lišty Tab.

Příklad karty More (Více) v aplikaci Apple Music App

Android

V systému Android jsou karty nahoře a obvykle se zobrazují jako text nebo ikony (spíše než text a ikony), pokud se nejednáte o dolní navigační panel, viz níže.

Karty na Twitteru pro Android

Karty Android se obvykle více zaměřují na sekce specifické pro aplikace než na iOS a méně na „sekundární“ sekce, jako je Vyhledávání, Vytvoření / Vytvoření a Profil, protože Android má další navigační prvky k plnění těchto rolí.

Přejetí

Aplikace pro Android (například kulisy) obvykle umožňují uživatelům vodorovně posouvat obrazovku a procházet mezi kartami.

Spodní navigační lišta

Spodní navigační lišta je relativně nový vzorový návrh systému Android, který se snaží napodobovat, jak se karty používají v systému iOS. I když osobně tvrdím, že spodní karta je v systému Android hloupá (protože je příliš blízko k ikonickému navigačnímu panelu systému Android), Google na kartách vs. dolní navigace říká:

Karty usnadňují vyhledávání a přepínání mezi různými pohledy a

Spodní navigační lišty usnadňují prohlížení a přepínání mezi pohledy nejvyšší úrovně jediným klepnutím.

Zásuvka pro boční navigaci

Pokud vaše aplikace obsahuje více než hrst hlavních sekcí (nebo „sekundárních“ sekcí, jako je nastavení a zpětná vazba), je další velmi populární designový vzor navigační zásuvka. To vám umožní poskytnout uživateli seznam sekcí, které mohou zastrčit, když to nevyžadují.

iOS

V systému iOS nejsou navigační zásuvky nativním návrhovým vzorem. Přišli na platformu s vývojem designu iOS, ale stále jsou důležitou součástí navigace v mnoha aplikacích.

Protože společnost Apple neposkytuje API k implementaci navigačních zásuvek, vývojáři obvykle používají knihovny třetích stran (zde je částečný seznam).

Android

V systému Android jsou navigační zásuvky nativním vzorem designu, a proto vám Google poskytuje API, která potřebujete k vytvoření navigačního slotu, aniž byste museli hledat API třetích stran.

Pokud je to možné, horní část navigační zásuvky obvykle zobrazuje informace specifické pro uživatele.Ve spodní části navigační zásuvky lze zobrazit sekundární sekce.

Horní bary

iOS

V systému iOS se horní lišta nazývá navigační lišta. Navigační lišty obvykle zahrnují:

  • Název sekce, ve které se uživatel právě nachází
  • Tlačítko Zpět vlevo, pokud je k dispozici obrazovka pro navigaci zpět
  • Prvek řízení obsahu vpravo (pokud je to použitelné) (např. Hledat)
Navigační panel aplikace iOS na TwitteruNavigační panel aplikace iOS na Twitteru s tlačítkem zpět

Hlavním účelem navigačního panelu je umožnit uživateli navigaci prostřednictvím řady hierarchických obrazovek aplikací pomocí tlačítka Zpět.

Android

V systému Android se horní lišta nazývá Panel nástrojů. Panel nástrojů Android je standardizovanější než systém iOS a obvykle zahrnuje:

  • Název sekce, ve které se uživatel právě nachází
  • Tlačítko Nahoru vlevo, pokud existuje obrazovka, na kterou se můžete vrátit zpět
  • Tlačítko Navigační zásuvka, pokud není tlačítko Nahoru
  • Tlačítka nabídky a nabídka přetečení s více možnostmi
Upozorňujeme, že v aplikacích pro Android s lištou Toolbar i kartami jsou obě sloučeny do jednoho prvku.Nabídka přetečení na YouTube pro Android

Tlačítka nabídky a nabídka přetečení lze použít jako alternativu a doplněk k zásuvce pro boční navigaci. Nabídka přetečení může potenciálně odstranit potřebu boční navigační zásuvky v závislosti na tom, kolik různých zobrazení aplikace potřebuje.

Alternativně můžete nechat každou sekci ze svého postranního navigačního zásuvky mít vlastní nabídku přetečení s dalšími možnostmi, se kterými může uživatel interagovat.

Tlačítka Zpět (a navigační lišta Android)

Je skvělé přejít na obrazovku, ale je také důležité uživatelům vysvětlit, jak se vrátit.

iOS

Na iOS je jediným možným způsobem, jak se uživatel vrátit zpět, prostřednictvím tlačítka zpět / zavřít na levé straně navigačního panelu.

Android

Protože Android má na obrazovce navigační lištu, projektová dokumentace rozlišuje mezi tlačítkem Nahoru a tlačítkem Zpět.

Tlačítko Nahoru

Tlačítko Nahoru je obvykle součástí panelu nástrojů a přesune uživatele zpět na poslední obrazovku, kterou si prohlížel ve vaší aplikaci (dokud se nedostane na domovskou obrazovku aplikace).

Navigační lišta Android a tlačítko Zpět

Tlačítko Zpět je součástí navigačního panelu a „naviguje v obráceném chronologickém pořadí v historii naposledy prohlížených obrazovek“. Zatímco tlačítko Nahoru uživatele nevyvede z vaší aplikace, tlačítko Zpět může uživatele přenést z aktuální aplikace do té, kterou dříve používali.

Jeden významný rozdíl mezi iOS a Androidem spočívá v tom, jak předchozí zařízení má fyzické tlačítko domů (které také slouží jako skener tisku palce), a ten se vzdává fyzického tlačítka směřujícího dopředu, aby měl větší obrazovku (a hodí skener tisku palce na zadní část telefonu).

I když se jedná spíše o „systémový“ návrhový vzor než o „aplikaci“, lze Navigační lištu Android skrýt a pohlcující mediální aplikace (jako jsou Youtube, Google Photos, Netflix, atd.) Skryjí navigační lištu, aby se uživatel mohl soustředit na obsah, který aplikace představuje.

Protože navigační panel obsahuje tlačítko Zpět, není neobvyklé vidět aplikace pro Android, které neobsahují tlačítko Nahoru, a nechat uživatele, aby tlačítko Zpět používal, protože jejich funkce je velmi podobná.

Závěr

To je pro tento týden tento článek o Navigačních vzorcích pro iOS a Android.

V dalším článku projdeme vývoj Native vs. Hybrid pro mobilní aplikace.

Pokud chcete dostávat aktualizace, když jsou tyto další články aktivní, přihlaste se k odběru našeho seznamu adresátů. Pokud jste podnikatel / vývojář v mobilním prostoru a máte v úmyslu zacílit na systémy Android i iOS, podstatně zvýšíte své šance na úspěch, pokud pochopíte rozdíly v designu a funkcích mezi těmito dvěma operačními systémy a očekáváním uživatelů.

Tento článek byl spoluautorem:

Jordan Rejaud, softwarový inženýrský konzultant, který pomáhá klientům v mobilním prostoru tím, že architektuje a zapisuje potřebný software.

a

Alex Bush, softwarový inženýr ve společnosti SmartCloud. Blogy o pokročilých tématech pro iOS a Ruby on Rails.