Navrhování pro iPhone X v Adobe XD: Průvodce

V dnešní digitální éře je design mobilních aplikací klíčový pro úspěch každého digitálního produktu. S neustálým vývojem smartphonů, jako je iPhone X s jeho charakteristickým výřezem, je nezbytné, aby se designéři přizpůsobili novým rozměrům a specifikům zařízení. Adobe XD se stalo jedním z preferovaných nástrojů pro UI/UX designéry díky své rychlosti a zaměření na prototypování. Avšak i přes své nesporné výhody má mobilní aplikace Adobe XD a samotný nástroj pro některé uživatele svá úskalí. Tento článek vás provede procesem správného nastavení vašeho artboardu pro iPhone X v Adobe XD a ukáže vám, jak efektivně využít bezpečné oblasti iOS pro bezchybný design.

Předtím než se ponoříme do technických detailů, je důležité si uvědomit, že i přes pokročilé možnosti desktopové verze Adobe XD, mobilní aplikace pro prohlížení prototypů má svá omezení. Mnozí uživatelé si stěžují na nedostatečnou funkčnost, která může ovlivnit celkový dojem z hotového prototypu. Například, jakmile v mobilní aplikaci vyberete prototyp k prohlížení, často se zobrazí pevně přizpůsobený velikosti artboardu s černým prostorem kolem. Pokud v desktopové verzi XD rozšíříte zobrazení a znovu publikujete pro plnou vertikální velikost, artboard se v mobilní aplikaci objeví jako úzký proužek. To by samo o sobě nebyl takový problém, kdyby aplikace podporovala zoom. Bohužel, nemůžete přiblížit žádný artboard, na rozdíl od většiny jiných prototypových aplikací na trhu. Možnost přiblížení je intuitivní a naprosto nezbytná pro jakýkoli objekt, který chcete detailně prozkoumat.

Dalším běžným problémem je navigace v mobilní aplikaci. Uživatelé často zjistí, že je téměř nemožné vrátit se do menu prototypu. Klepání všude po obrazovce ve snaze získat přístup k omezené navigační liště je frustrující. Několikrát se menu sice objevilo, ale bez zjevného důvodu nebo opakovatelného postupu, což z něj činí záhadu. Tyto nedostatky v základních funkcích dělají pracovní postup méně efektivním a mohou narušit proces testování uživatelského rozhraní na skutečném zařízení. Je důležité si tyto limity uvědomit, abyste věděli, co očekávat při testování vašich návrhů.

Navrhování pro iPhone X: Proč na něm záleží?

Ačkoli se možná chceme hned vrhnout do práce a začít navrhovat, je velmi důležité dodržovat pokyny stanovené zařízeními, pro která aplikace navrhujeme. V případě iPhone X, na rozdíl od jednoduššího obdélníkového rozložení iPhone 6/7/8, má iPhone X jedinečný výřez v horní části obrazovky, který přidává jedinečný designový prvek, na který musí UI/UX designéři pamatovat. Ignorování těchto specifik může vést k tomu, že části vaší aplikace budou zakryty nebo špatně zarovnány, což výrazně zhorší uživatelský zážitek. Cílem je vytvořit aplikaci, která bude působit přirozeně a intuitivně na daném zařízení.

Pochopení bezpečných oblastí iOS (iOS Safe Areas)

Co jsou to bezpečné oblasti? Podle společnosti Apple „bezpečné oblasti vám pomáhají umístit vaše pohledy do viditelné části celkového rozhraní“. Zjednodušeně řečeno, jsou to oblasti na obrazovce, které nejsou zakryty systémovými prvky, jako je stavový řádek, výřez, indikátor domů nebo navigační lišty. Tyto oblasti se mohou lišit v závislosti na orientaci obrazovky (vertikální nebo horizontální), ale obecně jsou vertikální pokyny nejběžnější a je důležité, abyste je jako UI/UX designér znali. Pokud vlastníte iPhone X, jednoduše se podívejte, jak na něm vypadá aplikace, a porovnejte ji s níže uvedenými bezpečnými oblastmi.

Zde je podrobnější rozpis klíčových bezpečných oblastí:

• Stavový řádek (Status Bar): Tato oblast v horní části obrazovky je vyhrazena pro systémové informace, jako je čas, stav baterie, síla signálu a ikony oznámení. Je přítomen jak na iPhone 6/7/8, tak na iPhone X.
• Indikátor domů (Home Indicator): Jedná se o tenký horizontální proužek ve spodní části obrazovky iPhone X (a novějších modelů), který slouží pro gesta pro návrat na domovskou obrazovku nebo přepínání aplikací. Tato oblast je specifická pro iPhone X a je klíčové ji respektovat, aby uživatel mohl pohodlně ovládat zařízení.
• Navigační lišta (Navigation Bar): Obvykle se nachází v horní části obrazovky pod stavovým řádkem. Tato lišta je často přizpůsobena pro různé aplikace (např. Instagram & Twitter) a může být zobrazena v mírně odlišných výškách. Obsahuje obvykle titul obrazovky, tlačítka zpět nebo akční tlačítka.
• Lišta karet (Tab Bar): Umístěná ve spodní části obrazovky, tato lišta obsahuje přepínací tlačítka pro navigaci mezi hlavními sekcemi aplikace. Stejně jako navigační lišta, i lišta karet může být přizpůsobena.
• Hlavní obsahová oblast: Šedá oblast rozvržení (vyhýbající se okrajům rozvržení) je bezpečná pro umístění hlavního obsahu vaší aplikace, včetně textu, tlačítek a obrázků. Obrázky jsou výjimkou a mohou být buď uvnitř okraje, nebo na plnou šířku (např. fotografie na Instagramu).

Celkově jsou aplikace navrženy pro mobilní zařízení, takže pokud si děláte jen tak po svém, aniž byste brali v úvahu, jak to bude vypadat na skutečném zařízení, uživatelský zážitek a rozhraní budou špatné.

Získání a použití UI Kitů pro iOS v Adobe XD

Adobe XD nabízí několik UI kitů, které designéři mohou použít jako výchozí bod pro své designové produkty. Tyto kity obsahují předpřipravené komponenty a šablony, které odpovídají pokynům pro design iOS, což vám výrazně usnadní práci a zajistí konzistenci.

Krok za krokem: Nastavení artboardu pro iPhone X

Začínáme s prázdným plátnem, abychom správně nastavili náš design pro iPhone X:

1. Otevřete Adobe XD a vyberte artboard: Na úvodní obrazovce Adobe XD vyberte artboard pro iPhone X & iPhone 6/7/8. Tím získáte základní rozměry pro vaše zařízení.
2. Získejte oficiální UI Kit pro iOS: V horním menu Adobe XD vyberte Soubor > Získat UI kity > Apple iOS. Tím se vám otevře webová stránka s Apple Design Resources.
3. Stáhněte si kit: Na stránce Apple Design Resources klikněte na „Download for Adobe XD“ pro stažení Apple Design Resources pro iOS. Ujistěte se, že stahujete verzi kompatibilní s Adobe XD.
4. Otevřete stažený soubor: Po stažení otevřete složku „iOS Adobe XD“ na vašem počítači a poté otevřete složku s názvem „UI Elements + Design Templates + Guides“. Zde najdete soubor XD, který obsahuje prvky pro iPhone X a iPhone 8.
5. Zkopírujte potřebné UI prvky: Jakmile otevřete soubor UI kitu, uvidíte všechny UI prvky, které se nacházejí na iPhone X & iPhone 8. Pro tento tutoriál zkopírujeme pouze tři klíčové UI prvky: průvodce pro výřez obrazovky (notch screen guide), stavový řádek (status bar) a indikátor domů (home indicator). Pro zkopírování těchto objektů na váš vlastní artboard pro iPhone X stiskněte Cmd ⌘ (Mac) nebo Ctrl (PC) + L pro odemknutí objektu, pokud je zamčený, a poté stiskněte Cmd ⌘ (Mac) nebo Ctrl (PC) + C pro zkopírování. Následně přejděte na svůj artboard a vložte je stisknutím Cmd ⌘ (Mac) nebo Ctrl (PC) + V.
6. Uspořádejte a zamkněte: Uspořádejte zkopírované objekty tak, aby vaše nastavení pro iPhone X bylo kompletní a odpovídalo bezpečnými oblastem. Jakmile jsou prvky na svém místě, doporučuje se zamknout vrstvy průvodců stisknutím Cmd ⌘ (Mac) nebo Ctrl (PC) + L. Tím zajistíte, že je omylem nepřesunete, zatímco budete navrhovat váš hlavní obsah.

Nyní můžete s klidným svědomím začít navrhovat! Tyto průvodce vám zajistí, že váš design bude vždy v bezpečné a viditelné oblasti obrazovky iPhone X.

Tipy pro pokročilé: Světlé a tmavé režimy

Oficiální UI kity často obsahují průvodce pro světlé a tmavé uživatelské rozhraní. Využijte je k tomu, abyste zajistili, že vaše aplikace bude vypadat skvěle bez ohledu na preferované nastavení uživatele. Design pro oba režimy od začátku vám ušetří spoustu času a úsilí později a zlepší celkovou přístupnost vaší aplikace. Pamatujte, že dobrý design není jen o estetice, ale také o použitelnosti a inkluzivitě.

Často kladené otázky (FAQ)

Lze v mobilní aplikaci Adobe XD zoomovat?

Ne, bohužel mobilní aplikace Adobe XD aktuálně nepodporuje funkci zoomu pro prohlížení prototypů. To je jedno z hlavních omezení, které uživatelé často kritizují, protože znemožňuje detailní kontrolu návrhů přímo na zařízení. Pro detailní kontrolu je stále nutné spoléhat se na desktopovou verzi.

Je Adobe XD vhodné pro webový design?

Ačkoli Adobe XD primárně cílí na design mobilních aplikací a UI/UX, lze jej použít i pro webový design. Nicméně, uživatelé si stěžují na nedostatečnou podporu správy barev, což může vést k rozdílům ve vzhledu barev mezi návrhem a finálním zobrazením na různých zařízeních a prohlížečích. Pro webový design s vysokými nároky na barevnou věrnost mohou být jiné nástroje vhodnější.

Kde najdu UI kity v Adobe XD?

UI kity naleznete v menu Soubor > Získat UI kity. Adobe XD nabízí několik oficiálních kitů, například pro Apple iOS, Google Material Design a Microsoft Windows, které vám usnadní začátek a zajistí dodržování designových pokynů jednotlivých platforem.

Proč jsou bezpečné oblasti tak důležité pro design v iOS?

Bezpečné oblasti zajišťují, že váš obsah bude vždy viditelný a přístupný uživateli, aniž by byl zakryt systémovými prvky (jako je stavový řádek, výřez nebo indikátor domů). Ignorování bezpečných oblastí vede k špatnému uživatelskému zážitku, nefunkčnímu rozhraní a potenciálnímu odmítnutí aplikace v App Storu, pokud porušuje designové směrnice Apple.

Jaké prvky UI Kitu bych měl použít pro iPhone X?

Pro iPhone X byste měli použít zejména průvodce pro výřez (notch screen guide), stavový řádek (status bar) a indikátor domů (home indicator). Tyto prvky vám pomohou správně umístit obsah a respektovat specifika obrazovky iPhone X, což je nezbytné pro kvalitní uživatelský zážitek.

Jak mohu zlepšit uživatelský zážitek v Adobe XD?

Kromě správného používání bezpečných oblastí a UI kitů se zaměřte na zjednodušení uživatelských toků, intuitivní navigaci a konzistentní vizuální design. Testujte své prototypy s reálnými uživateli a sbírejte zpětnou vazbu. Využívejte funkce prototypování v XD k simulaci interakcí a animací, což pomáhá odhalit potenciální problémy před vývojem. Dbejte na optimalizaci velikosti souborů pro rychlejší načítání prototypů, zejména při sdílení s klienty nebo týmem.

Využijte také možnosti komponent v Adobe XD. Komponenty vám umožní vytvářet opakovaně použitelné prvky, jako jsou tlačítka, navigační lišty nebo ikony. Změna hlavní komponenty automaticky aktualizuje všechny její instance v celém projektu, což výrazně šetří čas a zajišťuje designovou konzistenci. Provedení změn v globálním měřítku se tak stává otázkou několika kliknutí namísto manuálních úprav na desítkách artboardů. To je obzvláště užitečné pro rozsáhlé projekty s mnoha obrazovkami a variacemi.

Nezapomeňte na responzivní design. Ačkoli se článek zaměřuje na iPhone X, aplikace jsou často navrženy pro více velikostí obrazovek. Adobe XD nabízí funkce pro responzivní změnu velikosti, které vám umožní snadno přizpůsobit design různým zařízením. Pochopení toho, jak se vaše prvky mění a přizpůsobují, je klíčové pro vytvoření univerzálně použitelné aplikace.

Závěrem lze říci, že navrhování pro iPhone X v Adobe XD vyžaduje pečlivost a pozornost k detailům, zejména pokud jde o bezpečné oblasti a využití oficiálních UI kitů. Ačkoli mobilní aplikace Adobe XD má své nedostatky, desktopový nástroj poskytuje robustní sadu funkcí, které vám pomohou vytvořit vizuálně atraktivní a funkční aplikace. Doufáme, že tento průvodce vám pomohl pochopit základy a poskytl vám nástroje potřebné k vytvoření vynikajících designů pro iOS. Pamatujte, že klíčem k úspěchu je vždy uživatelský zážitek a pečlivé testování na skutečných zařízeních.

Chceš-li si přečíst další články podobné jako Navrhování pro iPhone X v Adobe XD: Průvodce, navštiv kategorii iPhone.