Sam Jones: Jak převést design aplikací do IOS 7

Když byl představen IOS 7, spousta uživatelů byla překvapena velkými změnami v UI. Ale co tyto změny znamenají pro samotné vývojáře v IOS?

O iOS 7 se toho od jeho uvedení na trh na počátku měsíce už hodně napsalo a většina článků se týkala designu a zvláště nových ikon. Měli jste dost času zamyslet se nad změnami a nyní se začínáte ptát, jak ovlivní design vašich vlastních aplikací. A je čas zamyslet se, jak velký vliv by nové uživatelské rozhraní iOS 7 mělo mít.

Článek byl přeložen s laskavým svolením serveru webdesignerdepot.com. Originální znění článku (EN) naleznete zde: How to transition app designs to iOS 7.

Zatímco jedna část uživatelů věří, že by aplikace měly zůstat věrné svému vlastnímu stylu a jejich design by se neměl měnit jen proto, aby odpovídal vzhledu iOS 7, druhá část uživatelů říká, že by se design aplikací měl změnit, aby byl přirozenější. Zdá se, že není zcela zřejmé, jak striktní vlastně jsou iOS Human Interface Guidelines.

Chci do celé záležitosti vnést trochu světla, prostudoval jsem tedy dokumenty na stránkách Applu zabývající se designem a nyní se s vámi podělím o některá svá zjištění.

Jak porozumět pokynům Applu

Je čistě věcí názoru, zda by měly všechny aplikace nyní převzít plochý vzhled a pokud používáte svůj vlastní design prvků uživatelského rozhraní, je konečné rozhodnutí čistě na vás a vašem týmu. Apple sice doporučuje, abyste se zamysleli nad používáním stínů, přechodů či reliéfů, ale nikde jsem nenašel, že by se jednalo a jasný požadavek.

V následujícím úryvku, který jsem převzal z iOS 7 UI Transition Guide, jsou uvedeny další informace související s různými úrovněmi úprav dle vašich požadavků a najdete zde informaci, kolik vám dá práce, než aplikaci připravíte k převodu.

Podle míry přizpůsobení lze aplikace rozdělit do následujících tří typů:

• Standardní –aplikace obsahují pouze standardní prvky uživatelského rozhraní bez jakýchkoliv úprav; poskytované UIKitem.
• Vlastní – aplikace prezentují naprosto originální UI, které neobsahuje žádné prvky UIKitu.
• Hybridní –aplikace obsahují směs standardních a uživatelských prvků včetně upravených standardních prvků přebarvených v rámci UIKitu nebo s využitím API pro změnu vzhledu.

U standardních aplikací se musíte rozhodnout, zda je váš vizuální a uživatelský design vhodný i pro prostředí iOS 7. Pokud se rozhodnete, že zůstanete u současného modelu uspořádání a interakce, většina práce obvykle spočívá pouze v menších úpravách a kontrole, zda aplikace správně gesta přebírá.

Uživatelské aplikace, které nepoužívají žádné prvky uživatelského rozhraní UIKitu, jsou na tom různě. Například pokud se vám zdá, že jsou současné uživatelské rozhraní a práce s aplikacemi v pořádku, nemusíte provádět mnoho změn, avšak pokud máte pocit, že je třeba změnit charakter aplikací a uživatelský přístup, abyste vyšli vstříc uživatelům iOS 7, čeká vás více práce.

U hybridních aplikací záleží na tom, jaké úpravy jste provedli a jak jste propojili uživatelské a standardní prvky. Při kontrole kompletního designu hybridní aplikace se musíte ujistit, že vaše uživatelské úpravy fungují správně a že vypadají dobře i po sjednocení se standardními prvky.

Na konci výše uvedeného dokumentu se poznamenává, že aplikaci, která používá design standardního iOS 6 UI, ovšem na zcela vlastním grafickém základě, bude zřejmě nutno z velké části přepracovat, protože bude vypadat zastarale, a to byste rozhodně měli brát v potaz.

I následující text byl převzat z iOS 7 UI Transition Guide. Obsahuje dva seznamy, a to seznam věcí, které musí každá aplikace dělat, a věcí, které by měla každá aplikace dělat, Předpokládám, že první seznam je seznamem striktních požadavků, a druhý je seznamem věcí, nad kterými je vhodné se nejmenším zamyslet.

Věci, které musí každá aplikace dělat:

• Aktualizovat ikony aplikací. Ikony aplikací mají v iOS 7 velikost 120 x 120 pixelů (vysoké rozlišení).
• Aktualizovat spouštěcí zobrazení, aby obsahovalo stavovou lištu (pokud tomu tak již není).
• Ve všech předlohách a designech podporovat retina displej a iPhone 5 (pokud tomu tak již není).

Věci, které by měla každá aplikace dělat:

• Ujistit se, že obsah aplikace je rozpoznatelný přes průsvitné prvky uživatelského rozhraní, jako jsou lišty a tlačítka klávesnice, a průsvitnou stavovou lištou. V iOS 7 používá zobrazovač celou obrazovku, více viz návod Using View Controllers.
• Revidovat ikony vlastních lišt. V iOS 7 jsou ikony lišt subtilnější a mají jiný design.
• Připravit se na příchod designu tlačítek bez okraje: odsunout je dál od tlačítek pro vypnutí/zapnutí a dát pozor, aby nesplývaly s případnými obrázky na pozadí.
• Přezkoumat aplikace na přítomnost neměnných hodnot (např. velikosti a polohy) a nahradit je za hodnoty dynamicky získávané ze systému. Používejte Auto Layout, který pomůže aplikacím reagovat na požadavky změny vzhledu. Více se o Auto Layoutu dozvíte v příručce Cocoa Auto Layout Guide.
• Přezkoumat místa, kde metrické a stylové změny ovládacích prvků a view UIKitu ovlivňují rozložení a vzhled (například přepínače jsou širší, již nejsou vkládány seskupené tabulky a progress bar je tenší. Více informací o konkrétních prvcích UI naleznete zde: Bars and Bar Buttons, Controls, Content Views a Temporary Views.
• Převzít Dynamic Type. V iOS 7 si uživatelé mohou přizpůsobit velikost textu v aplikacích; pokud se pro Dynamic Type rozhodnete, získáte text, který náležitě reaguje na uživatelem určené změny velikostí. Více informací naleznete zde: Using Fonts.
• Ujistit se, zda aplikace nereaguje nepatřičně na gesto pro Control Center či na gesto zpět ovladače navigace, a to zvláště pokud zpracováváte dotyky vlastními prostředky.
• Zvážit používání stínů, přechodů či reliéfů. Vzhledem k tomu, že je zhled iOS 7 jemný a vrstevnatý (je kladen menší důraz na používání vizuálních efektů, tak, aby prvky UI vypadaly jako reálný ovládací panel), je možné, že budete chtít přehodnotit používání těchto efektů.
• V případě nutnosti aktualizovat vaši aplikaci na osvědčené prvky používané v iOS 6 (například Auto Layout a storyboard) a ujistit se, že aplikace nepoužívá neschválené API.

iOS 7 neznamená konec extrémně detailních ikon aplikací. Níže uvedený úryvek z dokumentu iOS Human Interface Guideline s naznačuje, že stále ještě existuje prostor pro realismus. V tom případě ovšem, jak již bylo řečeno, budou muset být všechny ikony aplikací aktualizovány.

Pokud chcete zobrazit věci, dělejte to důkladně. Ikony a obrázky zastupující skutečné objekty by měly vypadat, jako by byly vyrobeny ze skutečných materiálů a jako by byly hmotné. Realistické ikony naprosto přesně kopírují charakteristické znaky látek, skla, papíru či kovu a informují o hmotnosti daného objektu a o tom, jaký je na dotyk.

Shrnutí

Čerpal jsem, jak již bylo uvedeno, z dokumentu Apple’s iOS 7 Design Resources. Vybral jsem tři úryvky, u kterých jsem měl pocit, že obsahují potřebné informace, nicméně doporučuji přečíst si celý dokument. Možná že je Apple s vyhýbáním se stínům, přechodům či reliéfům na správné cestě, to ale neznamená, že se jejich postupem musíte řídit, a je čistě věcí názoru, zda byste vůbec měli.

Bez ohledu na to, jak se k otázce stylů postavíte, pokud si pečlivě prostudujete zde uvedené informace, neměli byste mít s úspěšným převedeným vaší aplikace do iOS 7 problém.

Rozplynuly se vaše obavy? Těšíte se na převádění aplikace? Zanechte zde svůj komentář.

O autorovi

Sam Jones je nezávislý designer a jeho práce zahrnuje širokou škálu oborů od brand identity, přes tiskový a webový design až po ilustrace. Je majitelem a jediným zaměstnancem designového studia Sivioco a své rady poskytuje Mostashu. Neváhejte a spojte se s ním přes twitter @Sivioco. Zde naleznete další články Sama Jonese.

About translation

• Original article: How to transition app designs to iOS 7 (Webdesigner Depot).
• Translation: Miluše Pokorná.
• Language and expert collaboration: Miroslav Kučera.

Language of translation: Czech (for readers from Czech and Slovak republics). Translated with the permission of Webdesigner Depot. Other translations.