Suunnittelu tvOS: lle verrattuna muihin laitteisiin, kun otetaan huomioon vuorovaikutus

Viime vuonna sain mahdollisuuden työskennellä norjalaisessa suoratoistoyrityksessä, jossa minusta tuli nopeasti heidän tvOS-sovelluksensa pääsuunnittelija. Tämä oli todella hauska ja valaiseva kokemus, jossa tein läheistä yhteistyötä kehittäjien kanssa ja oppin kaiken televisioalustalle suunnittelusta.

Tässä on pieni opas siitä, mitä pitää mielessä suunnitellessasi tvOS-ohjelmia

Suunnittelu tvOS: lle, perusteet

Ihmisrajapinnan ohjeet

Applen HIG on loistava opas aloittamiseen ja perusteiden oppimiseen. Tämä opas oli pieni Raamatuni suunnitellessani suoratoistoyritystä. Se sisältää suosituksia ja parhaita käytäntöjä kauniiden, yhdenmukaisten kokemusten suunnitteluun ja kehittämiseen. Käyttämällä alustan tarjoamia standardeja sovelluksesi tuntuu kotoisin, mutta muista, että se on vain opas. On tärkeää löytää tasapaino tekemäsi sovelluksen tuotemerkin ja käyttöympäristöohjeiden välillä. Apple tarjoaa myös paljon hyvää inspiraatiota monien heidän tvOS-sovellusten, kuten Apple Music, Apple TV App ja Movies iTunes, kautta.

Näytön koko ja reunat

Televisioita suunnitellessasi sinun on ajateltava vain yhtä näytön kokoa! 1920 x 1080 (16: 9). Tämä on jännitys verrattuna pöytätietokoneisiin ja mobiililaitteisiin, joissa sinun on harkittava monia erilaisia ​​näyttökokoja. Tahatonta leikkaamista voi kuitenkin tapahtua vanhempien televisioiden yliskannaamisen vuoksi, joten pidä ensisijainen sisältö kaukana reunoista. Hyvä opas on välttää 60 px ylhäältä ja alhaalta ja 90 px sivuilta. Apple TV näyttää vakioresoluutiokuvia HD-televisioissa ja korkearesoluutioisia kuvia 4K-televisioissa. Sovelluksesi tulisi tarjota kuvia molemmissa muodoissa. Tätä varten kaikkien omaisuuksien tulisi olla @ 1x -resoluutiota (HD) ja @ 2x (4K).

Etäisyys

Huomaa aukko! Television käyttöliittymää katsellaan useiden metrien päässä. Suuri kontrasti mobiililaitteisiin ja työpöytälaitteisiin, joissa melkein kasvot ovat näytössä. Varmista, että käyttäjän ei tarvitse vaivaa nähdäksesi mitä ruudulla on. Älä pelkää suurentaa käyttöliittymäelementtejä (teksti, painikkeet, säätimet jne.). On myös tärkeää sisällyttää runsaasti tilaa elementtien väliin. Tämä helpottaa navigointia ja valintaa, mutta auttaa myös ihmisiä näkemään jokaisen yksittäisen kohteen.

Typografia ja teksti

San Francicso (SF) on hieno järjestelmä fontti tvOS: lle. On olemassa kaksi vaihtoehtoa: San Francisco Display ja San Francisco Text. Suunnitellessasi käytä SF Text -tekstiä, kun teksti on 19 pistettä tai pienempi, ja SF Display, jos teksti on vähintään 20 pistettä, ja säädä kirjainten välinen etäisyys asianmukaisesti. Jos käytät tätä kirjasinta, tvOS käyttää automaattisesti sopivinta tekstityyliä pistekoon perusteella. Jos haluat käyttää mukautettua fonttia, varmista, että se on luettavissa etäältä ja että se noudattaa pääsyasetuksia.

Näytä, älä kerro. Paljon tekstin lukeminen television ruudulta huoneen poikki ei ole hauskaa ja rasittaa silmiä. Joten yritä rajoittaa tekstin määrää ja kommunikoida sen sijaan kuvien, piirrosten tai animaation avulla.

Mallit ja ruudukon asettelut

Apple tvOS tarjoaa monia kauniita ja yhdenmukaisia ​​asetteluja, jotka tekevät sisällöstä huomion keskipisteen. Jos sovelluksesi on sisältökeskeistä, voi olla viisasta harkita joidenkin näiden mallien käyttöä. Asettelumallit ovat helposti muokattavissa. Ole varovainen, jotta se on maukas ja ymmärrät mallin tarkoituksen ennen käyttöä. Käytimme malleja sisältöön, kuten hälytykseen ja hakuun.

Rakastin todella Applen HIG: ssä näkyvän ruudukkoasettelun käyttöä. On ruudukko kolmesta yhdeksään saraketta. Se esittelee sisältöä hyvin, sitä on helppo selata etäisyydellä ja selata nopeasti kaukosäätimen avulla. Suosittelen todella käyttämään tätä ruudukkoa tehdäksesi suunnittelustasi johdonmukaisen ja käyttäjäystävällisen.

Vihje ulkopuolisesta sisällöstä

Rivit ja sarakkeet, joiden sisältö ylittää näytön, on kohdistettava tavalla, joka näyttää vähintään 10–20% kyseisestä sisällöstä. Tämän avulla käyttäjä ymmärtää, että on mahdollista navigoida edelleen. Jos noudatat Applen HIG: ssä näkyvää ruudukkoasettelua, sisältö kohdistetaan niin kuin pitäisi.

vuorovaikutus

Jaettu vs henkilökohtainen / mobiili vs paikallaan

Apple TV on kiintein ja jaettu laite. Käytämme televisiota yhteisöllisissä ympäristöissä, kuten olohuoneessa, jaetuissa toimistotiloissa, urheilubaareissa ja muissa julkisissa tiloissa. Se on laite, josta useat ihmiset voivat nauttia samanaikaisesti, mikä tekee kokemuksesta ainutlaatuisen muihin Applen laitteisiin nähden. Joten televisio-ohjelmistoja suunniteltaessa pidä tämä jaettu kokemus mielessä. Muut laitteet ovat henkilökohtaisempia, yksityisiä ja mobiililaitteita. Vaikka MacBookilla voi olla useita käyttäjiä, se tuntuu silti paljon yksityisemmältä Apple TV: hen verrattuna.

Loose vs tarkka vuorovaikutus

MacBookilla on näppäimistö ja hiiri, joiden avulla voit olla todella tarkka. Sama pätee iPadiin (vielä enemmän, kun käytät kynää). Toisaalta Apple Watch on pienellä näytöllä vaikeampi olla tarkka. Lisäksi suurin osa laitteista on lähempänä sinua. Meillä on ne käsissämme ja olemme vuorovaikutuksessa heidän kanssaan suoraan. Mutta televisio ei ole kädessäsi, kaukosäädin on. Kosketuspohjainen kaukosäädin tekee ohjaimestamme heikentyneen verrattuna muihin laitteisiin.

Etäyhteydet

Tutustu kauko-ohjaimeesi, uusi paras ystäväsi. Siinä on kosketuspinta, kiihtyvyysanturi ja gyroskooppi. Tämä antaa sinulle erilaisia ​​mahdollisuuksia auttaa käyttäjää tuntemaan yhteyden sovellukseesi, vaikka hän istuu etäällä. tvOS käyttää kolmea pää elettä: pyyhkäisemällä, napsauttamalla ja napauttamalla.

Pelien osalta ihmiset saattavat ostaa peliohjaimia myös Apple TV: hen, mutta tämä on vain vaihtoehto. Joten jos haluat tukea peliohjaimia sovelluksessasi, kannattaa ehdottomasti harkita kaukosäätimen käyttökelpoisuutta pelin ohjaimena.

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

Fokuspohjainen vuorovaikutus

Apple TV: ssä käytämme kaukosäädintä vuorovaikutukseen epäsuorasti näytön elementtien kanssa. Navigointi perustuu tarkennusmalliin. Selaa sisältöä ja säätimiä läpi, jolloin yksi objekti on aina valittu. Kun tarkennus muuttuu, hienovaraiset animaatiot ja parallaksi-ilmiö tuottavat syvyyden tunteen, joka tunnistaa selkeästi kohteen, joka on nyt tarkennettuna. Tämä navigointitapa on valtava ero kaikista muista laitteista. Houkuttelevan kokemuksen tarjoamiseksi on ensiarvoisen tärkeää ymmärtää tarkennusmoottori ja pohtia, kuinka elementtien tulisi näyttää niiden keskittyessä.

Apple TV: ssä tarkennettavilla kohteilla voi olla jopa viisi eri tilaa, joista jokaisen tulee näyttää visuaalisesti erilliseltä.

Vaaka tai pystysuuntainen vieritys

Vaakasuuntainen vieritys on helpompaa ja sujuvampaa kuin pystysuuntainen vieritys. Tämä pätee itse kaukosäätimen eleeseen, peukalon liu'uttaminen sivulta toiselle tuntuu yksinkertaisemmalta kuin liikuttaminen ylös ja alas. Myös silloin, kun kyse on itse näytön sisällöstä. Sisällön liu'uttaminen sivulle on sujuvampaa kuin kaikkien esineiden siirtäminen (mikä tapahtuu yleensä pystysuuntaisen vierityksen yhteydessä). Koska pystysuuntainen vieritys on raskaampaa vuorovaikutusta, rajapinnan tulisi heijastaa tätä ja sitä tulisi käyttää välttämättömiin asioihin, kuten luokkien muuttamiseen.

Keskeinen yhteenveto

  1. Tutustu Applen tvOS-käyttöliittymän ohjeisiin. Käytä käyttöympäristöohjeita etäisyyksiä, typografiaa, asettelupohjia, ruudukkoparametreja ja liitäntäkomponenttikokoja varten, jotta sovelluksesi käyttöliittymä tuntuu luonnolliselta ja intuitiiviselta. Muista, että tämä on vain ohjeita, älä unohda myös tehdä brändistäsi loistavaa ja olla luova.
  2. TvOS-sovellukset on tarkoitettu enimmäkseen jaetuille ympäristöille. Käyttäjät nauttivat sovelluksesta huoneen toisella puolella kaukosäätimellä. Tämä on valtava ero verrattuna muihin laitteisiin. Sovelluksesi kokemuksen tulisi heijastaa tätä jaettua käyttökokemusta.
  3. Saa ihmiset tuntemaan yhteyden sisältöösi kaukosäätimen kosketuspinnan, kiihtyvyysanturin ja gyroskoopin avulla. On ratkaisevan tärkeää, että käyttöliittymä helpottaa keskittymistä keskittymiseen. Mieti aina, kuinka elementtien tulisi näyttää tarkennettuna, ja tee täysin selväksi, missä seuraava tarkennettava säädin on.

Hyödyllisiä linkkejä