+420 603 755 610
info@inited.cz
flagEnglish (Angličtina)
flagČeština
Vývoj mobilních aplikací - firma INITED Solutions s.r.o.
  • Domů
  • Pro agentury
  • Pro firmy
  • Ukázky naší práce
  • Blog
  • Náš tým
  • Kontakt

7 tipů, jak navrhovat aplikace pro nový iPhone X

4.10.2017Jaroslav Pavlíček

Apple nedávno představil top produkt své dílny – iPhone X, což pro nás vývojáře a designery znamená jednak ověřit, jak na něm budou fungovat stávající aplikace a jednak nový svět možností, který můžeme svým zákazníkm otevřít.

Pojďme se v několika bodech podívat, které vychytávky to jsou a jak je můžeme využít, jak navrhovat aplikace, aby využily nabízené možnosti.

1. Využijte plnou velikost obrazovky

Rozměry obrazovky

Odstraněním tlačítka změnou tvaru Apple rozšířil velikost displeje na výšku o přibližně 20% oproti předchozí generaci „malých“ iPhonů. Těchto 20% představuje rozšíření o 145pt grafického prostoru („pt“ zde představuje pixely ne-retinové velikosti, o tom později). Proto, navrhování pro iPhone X znamená rozšíření pláten ve Sketchi nebo Photoshopu na 375×812.

2. Vytvářejte grafiku pro jemnější rozlišení

Export @3x

Nový display není jen větší, ale má i vyšší rozlišení. Nová super retina iPhonu X má ohromující rozlišení 2436 x 1125 v rozměru 5,8 palce, což odpovídá hustotě 458ppi. Co to pro nás znamená? Samozřejmě, budeme exportovat grafiku jako @3x stejně jako jsme začali v minulosti exportova @2x, když přišla retina.

3. Využijte specifického tvaru nového displaye

Oblé rohy a vykousnutý vršek

Nevšední vlastností nového displaye jsou zaoblené rohy v horní části, mezi které je „zakousnutý“ kraj s kamerou, senzory a reproduktorem. Vykousnutím je horní status bar rozdělen na dvě části. Pozor, velikost status baru se zvětšila z 22pt na 44pt, aby zlepšila komfortní čtení v zaoblených rozích. Je pozitivní, že status bar je oddělený od zbytku prostoru a využívá část, která je jinak hůře využitelná. Z toho důvodu Apple doporučuje status bar neschovávat, jak se to doposud dělalo.

Apple také žádá designery, aby ve svých návrzích zohlednili toto uspořádání způsobem, který „rohy“ nezamaskuje, ani je nenechá vyčnívat. Například není vhodné, aby barva title baru končila v místě začátku status baru. Také status bar, by neměl být černý, aby zmizel a obrazovka dostala opticky „běžný“ tvar. Apple ocení návrhy, které využíjí full screen mód a kreativně využijí plnou plochu displaye bez ořezání.

4. Display iPhone X má jiný poměr stran

Display iPhone X má jiný poměr stran

Nový vyšší (nebo širší v landscape módu) poměr stran znamená, že existující grafika navržená pro předchozí typy telefonů, nebude vypadat nejlépe. Jsou dvě možnosti – buď dojde k oříznutí ze stran nebo doplnění ze shora a ze zdola.

Naopak, grafika vytvořená na nový iPhone X, bude oříznutá na předchozích typech. Znamená to tedy vytvářet samostaně grafiku pro všechny typy.

Poměr stran na starých iPhonech

5. Pozor na kolizi gest

Gesto domů

Absence fyzického tlačíka se vynahrazuje na úrovni systému podporou gest, která však potřebují určitý prostor, aby mohla fungovat. Tlačítko domů je nahrazeno indikátorem na dolní hraně obrazovky, jehož přetažení nahoru simuluje stisk tlačítka.
Apple naléhavě žádá o dodržení několika zásad: indikátor neschovávejte, pokud to není nezbytně nutné. Dále, buďte opatrní, a nedávejte do této části ovládací prvky, které by s ním mohly kolidovat.

Pokud navrhujete hru pro full screen a gesta tvoří neodmyslitelnou součást jejího ovládání, pak nechť je první gesto zpracováno hrou a druhé je předáno systému. Apple toto nazývá „edge protect“ a doporučuje to používat zřídka. Není v našem zájmu přidělávat uživatelům extra práci.

6. Využijte Face ID

Face ID

Pokud jste v minulosti používali pro ověření uživatelů Touch ID, určitě přivítáte a upgradujete na Face ID. Nový iPhone X obětoval čtečku otisků prstů ve prospěch projektoru a analyzátoru obličeje, který z více než 30.000 neviditelných bodů vytváří jeho 3D model. Pokud ve svém návrhu používáte Apple Pay nebo jiné metody zabezpečení, nezapomeňte na Face ID.

7. Využijte úžasných fantastických barev

P3 barvy

Apple povzbuzuje všechny designery a vývojáře k vytváření grafiky, která využije barevný prostor P3, ve kterém je k dispozici o 25 procent víc barev než ve standardním sRGB, takže zobrazuje daleko širší paletu odstínů zelené a červené. Ze současných nástrojů takovou grafiku, která použije 16 bitů na kanál, umí vytvořit program Adobe Photoshop.

Přitom je třeba mít na paměti, že ne každý počítač a display zvládne barvy P3 zobrazit, což je jisté omezení při vývoji. Nový 2015 Retina iMac byl první Mac, který tuto podporu už měl.

Podívejte se na video, které vysvětluje více detailů o P3 barvách.

Nový iPhone X přináší řadu revolučních prvků, které jsou pro designery a vývojáře velkou výzvou slibující tvorbu věcí, co doposud nebylo možné udělat a které nemají obdoby.

Diskuse k článku na Facebooku.

Jaroslav Pavlíček
Jaroslav je certifikovaný architekt (TOGAF) s 25+ lety praxe v IT. Díky tomu mají naše mobilní aplikace vysokou technickou úroveň a jsou postavené na spolehlivých technologiích. Své zkušenosti získával na projektech v zahraničí (Velká Británie, Malta) a vedle INITED působí jako konzultant Adobe Experience Manager, AEM.
Předchozí článek Aplikace prodává testy osobnosti a přivádí nové klienty Další článek Firmu jsme zbavili papírů a zrychlili prodej zboží

Kategorie článků

  • Marketing a prodej (18)
  • Mobilní aplikace (28)
  • Mobilní telefony a HW/Ostatní (8)
  • Ostatní (9)
  • Top (6)
  • Trendy (20)
  • Z naší dílny (11)

Přečtěte si také

  • 5 způsobů, jak využít rozšířenou realitu v mobilní aplikaci (a proč se vám to vyplatí)
  • Jak oslovit klienty? 61 % firem preferuje push notifikace
  • Co přinese Android 13? Méně notifikací i omezené instalace aplikací
  • Vývoj mobilních aplikací pro WordPress
  • Jak pracuje… Projektový manažer I
  • Povinnost požádat o zrušení účtu na iOS
  • 3 důvody, proč bude méně telefonů (a co to znamená pro mobilní aplikace)
  • Jak tvoříme vaše aplikace aneb 6 etap vývoje mobilních aplikací: bonus č. 2
  • Zájem o mobilní aplikace roste. Lidé v nich tráví stále víc času
  • Příležitost pro agentury: kvalitní aplikace potřebuje průzkum trhu i PR
  • Digitální peněženky zaplavily smartphony. Jakou příležitost nabízí běžným firmám?
  • Jak tvoříme vaše aplikace aneb 6 etap vývoje mobilních aplikací: bonus č. 1
  • Statistiky mobilních zařízení v ČR – jaro 2022
  • Gamifikace je zlatý grál pro zvýšení engagementu uživatelů
  • ASO je obdoba SEO ve světě mobilních aplikací
  • Jak tvoříme vaše aplikace aneb 6 etap vývoje mobilních aplikací VI
  • Jak tvoříme vaše aplikace aneb 6 etap vývoje mobilních aplikací V
  • Je třeba řešit „Declare your Ad ID permission“ ?
  • Jak tvoříme vaše aplikace aneb 6 etap vývoje mobilních aplikací IV
  • Jak navrhnout aplikaci? 7 věcí, které si musíte předem promyslet

Ahoj 123

blablabl

  • Domů
  • Pro agentury
  • Pro firmy
  • Ukázky naší práce
  • Blog
  • Náš tým
  • Kontakt
© 2020 Created by Provocado
Užíváme cookies, abychom vám zajistili co možná nejsnadnější použití našich webových stránek. Pokud budete nadále prohlížet naše stránky předpokládáme, že s použitím cookies souhlasíte.OkPrivacy policy