Navrhování pro tvOS vs jiná zařízení s ohledem na interakci

Minulý rok jsem dostal šanci pracovat pro norskou streamingovou společnost, kde jsem se rychle stal vedoucím návrhářem pro jejich tvOS aplikaci. Byl to opravdu zábavný a poučný zážitek, kde jsem úzce spolupracoval s vývojáři a dozvěděl jsem se vše o navrhování televizní platformy.

Zde je malý průvodce, co byste měli mít na paměti při navrhování pro TVOS

Navrhování pro tvOS, základy

Pokyny pro lidské rozhraní

Apple HIG je skvělý průvodce, jak začít a naučit se základy. Tato příručka byla moje malá bible při navrhování pro streamingovou společnost. Obsahuje doporučení a osvědčené postupy pro navrhování a vývoj krásných a konzistentních zkušeností. Při použití standardů poskytovaných platformou bude aplikace vypadat nativně, ale pamatujte, že je to pouze průvodce. Je důležité najít rovnováhu mezi značkou aplikace, kterou vytváříte, a pokyny pro platformu. Apple také poskytuje mnoho skvělých inspirací prostřednictvím mnoha svých tvOS aplikací, jako jsou Apple Music, Apple TV App a Movies iTunes.

Velikost obrazovky a okraje

Při navrhování pro TVOS stačí myslet na jednu velikost obrazovky! 1920 x 1080 (16: 9). Toto je vzrušení ve srovnání se stolními a mobilními zařízeními, kde je třeba zvážit mnoho různých velikostí obrazovky. K neúmyslnému oříznutí však může dojít, kvůli staršímu skenování na starších televizorech, takže primární obsah držte dále od okrajů. Dobrým vodítkem je vyhnout se 60 pixelům shora a zdola a 90 pixelům ze stran. Apple TV zobrazuje obrázky ve standardním rozlišení na HD televizorech a obrázky ve vysokém rozlišení na 4K televizorech. Vaše aplikace by měla poskytovat obrázky v obou formátech. Za tímto účelem by všechna aktiva měla být v rozlišení 1x (HD) a @ 2x (4 kB).

Vzdálenost

Všimni si škvíry! Rozhraní na televizi je vidět z několika metrů. Velký kontrast k mobilním a stolním zařízením, kde máte téměř svou tvář na obrazovce. Ujistěte se, že se váš uživatel nemusí snažit zjistit, co je na obrazovce. Nebojte se zvětšovat prvky rozhraní (text, tlačítka, ovládací prvky atd.). Je také důležité mezi prvky vložit dostatek prostoru. Usnadníte tím navigaci a výběr, ale také pomůžete lidem vidět jednotlivé položky.

Typografie a text

San Francicso (SF) je skvělé systémové písmo pro tvOS. Existují dvě varianty: San Francisco Display a San Francisco Text. Při navrhování použijte SF Text pro text 19 bodů nebo menší a SF Display pro text 20 bodů nebo větší a vhodně upravte mezery mezi písmeny. Pokud používáte toto písmo, tvOS automaticky použije nejvhodnější styl textu na základě velikosti bodu. Pokud chcete použít vlastní písmo, ujistěte se, že je čitelné na dálku a respektuje nastavení přístupnosti.

Ukaž, to neříkej. Čtení velkého textu na televizní obrazovce z celé místnosti není moc zábavné a zatěžuje oči. Zkuste tedy omezit množství textu a místo toho použít obrázky, ilustrace nebo animace.

Šablony a rozvržení mřížky

Apple tvOS nabízí mnoho krásných a konzistentních rozvržení, díky nimž je obsah středem pozornosti. Pokud je vaše aplikace zaměřena na obsah, bylo by rozumné zvážit použití některých z těchto šablon. Šablony rozvržení jsou vysoce přizpůsobitelné, před použitím je však třeba dbát na to, aby byla vkusná a porozuměla účelu šablony. Použili jsme šablony pro obsah, jako je upozornění a vyhledávání.

Opravdu se mi líbilo rozložení mřížky zobrazené v HIG společnosti Apple. Existuje mřížka ze tří až devíti sloupců. Dobře předvádí obsah, lze jej snadno procházet na dálku a rychle procházet dálkovým ovladačem. Opravdu doporučuji používat tuto mřížku, aby byl váš design konzistentní a uživatelsky přívětivý.

Nápověda mimo obsah obrazovky

Řádky a sloupce, jejichž obsah přesahuje obrazovku, musí být zarovnány tak, aby zobrazovaly alespoň 10–20% tohoto obsahu. To umožňuje uživateli pochopit, že je možné dále navigovat. Pokud budete postupovat podle rozložení mřížky zobrazené v HIG společnosti Apple, bude obsah zarovnán tak, jak má.

Interakce

Sdílené vs osobní / mobilní vs stacionární

Apple TV je nejstacionární a sdílené zařízení. Televizi používáme ve společných prostředích, jako je obývací pokoj, společné kancelářské prostory, sportovní bary a další veřejné prostory. Je to zařízení, které si může užívat více lidí najednou, což dělá zážitek jedinečným ze zbytku zařízení Apple. Takže při navrhování pro TVOS mějte na paměti tuto sdílenou zkušenost. Ostatní zařízení jsou více osobní, soukromé a mobilní. Přestože vám MacBook umožňuje mít více uživatelů, ve srovnání s Apple TV se stále cítí mnohem více soukromě.

Loose vs přesná interakce

Na MacBooku máte klávesnici a myš, která vám umožní být opravdu přesná. Totéž platí pro iPad (ještě více, když používáte tužku). Na druhé straně Apple Watch s malou obrazovkou ztěžuje přesnost. Také většina zařízení je vám blíže. Máme je na rukou a přímo s nimi komunikujeme. Ale televizor není v ruce, dálkové ovládání je. Dotykový dálkový ovladač způsobuje, že se naše ovládání ve srovnání s ostatními zařízeními snížilo.

Vzdálené interakce

Seznamte se s dálkovým ovladačem, vaším novým nejlepším přítelem. Má dotykovou plochu, akcelerometr a gyroskop. Díky tomu máte celou řadu možností, jak se uživateli pomoci připojit se k vaší aplikaci, i když sedí na dálku. tvOS používá tři hlavní gesta: Přejetím prstem, klepnutím a klepnutím.

Pokud jde o hry, lidé si také mohou koupit herní ovladače pro Apple TV, ale to je jen možnost. Pokud tedy chcete ve vaší aplikaci podporovat herní ovladače, měli byste rozhodně zvážit, zda je možné dálkový ovladač použít i jako herní ovladač.

https://developer.apple.com/tvos/human-interface-guidelines/remote-and-controllers/remote/

Interakce založené na zaměření

Na Apple TV používáme dálkové ovládání k nepřímé interakci s prvky na obrazovce. Navigace je založena na modelu zaostření. Můžete procházet obsahem a ovládacími prvky, přičemž vždy je vybrán jeden objekt. Jak se mění zaostření, jemné animace a efekt paralaxy vyvolávají pocit hloubky, který jasně identifikuje položku, která je v současné době v centru pozornosti. Tento způsob navigace je obrovským rozdílem od všech ostatních zařízení. Chcete-li poskytnout přesvědčivý zážitek, je nezbytné porozumět enginu zaměření a zvážit, jak by prvky měly vypadat, když jsou zaměřeny.

V Apple TV mohou mít zaostřitelné položky až pět různých stavů, z nichž každý by měl vypadat vizuálně odlišně.

Horizontální vs vertikální svitek

Vodorovné posouvání je snazší a plynulejší než svislé posouvání. To platí pro samotné gesto na dálkovém ovladači, posunutím palce ze strany na stranu je to jednodušší, než pohybovat nahoru a dolů. Také pokud jde o samotný obsah na obrazovce. Je plynulejší posouvat obsah na stranu než pohybovat všemi objekty (což se obvykle děje při svislém posouvání). Protože svislý posuv je těžší interakcí, rozhraní by to mělo odrážet a mělo by být použito pro zásadní věci, jako je změna kategorií.

Shrnutí klíčů

  1. Seznamte se s pokyny společnosti Apple pro lidské rozhraní pro tvOS. Chcete-li, aby se rozhraní ve vaší aplikaci cítilo přirozeně a intuitivně, použijte pokyny k rozestupům, typografii, šablonám rozložení, parametrům mřížky a velikostem komponent rozhraní. Nezapomeňte, že se jedná pouze o pokyny a nezapomeňte také vylepšit vaši značku a být kreativní.
  2. Aplikace pro tvOS jsou většinou pro sdílená prostředí. Uživatelé si aplikaci užívají z celé místnosti pomocí dálkového ovladače. To je obrovský rozdíl ve srovnání s jinými zařízeními. Zážitek pro vaši aplikaci by měl odrážet toto sdílené uživatelské prostředí.
  3. Díky dotykové ploše, akcelerometru a gyroskopu na dálkovém ovladači se lidé budou cítit připojeni k vašemu obsahu. Je zásadní, aby rozhraní usnadňovalo interakce založené na zaměření. Vždy zvažte, jak by elementy měly vypadat, když jsou zaostřeny, a je zcela zřejmé, kde je další zaostřitelná kontrola.

Užitečné odkazy