Design til fjernsyn, del 1

En introduktion til de grundlæggende ingredienser i et TV UI

Velkommen til tv'ens nye guldalder. Der produceres ikke kun mere fantastisk tv end nogensinde før, men vi har også flere valg i, hvordan vi ser vores foretrukne shows. Og selvom vi kan få adgang til disse shows overalt og når som helst gennem vores computere, telefoner og tablets, har tv'erne stadig stadig et særligt sted i mange hjem.

Men vi er ikke længere begrænset til en fjernbetjening og kabelboks til at kontrollere vores tv'er; vi bruger Smart TV'er, eller streamer fra set-top-bokse som Roku og Apple TV, eller bruger videospilkonsoller som Xbox og Playstation. Og hver af disse enheder tillader en brugergrænseflade, der er meget mere kraftfuld end din gammeldags guide på skærmen.

Sammenlignet med computere og endda mobiltelefoner er design af UI'er til tv stadig et relativt nyt område. Det er også en grundlæggende anden platform. Design til tv kræver et unikt sæt overvejelser, herunder skærmstørrelse og afstand, tekniske begrænsninger og kontekst for brug.

Dette vil være den første del af en serie, der graver i, hvordan man begynder at tænke på grænseflader til tv. Vi fokuserer også specifikt på gamepad som en inputenhed og det grundlæggende ved brug af Gamepad API. I del 2 viser vi, hvordan du kan prototype dine TV-UI'er og controllere sammen.

Skærmen

Hvordan tv'erne adskiller sig fra computere, telefoner og tablets

De første tv'er på markedet var lavet af katodestrålerør (CRT), en klodseteknologi, der producerede inkonsekvente billeder på tværs af tv-apparater. Dette problem var særlig dårligt langs kanterne på skærmen, så for at kompensere var CRT-tv'er underkastet overskanning. Med overscanning forstørres selve billedet lidt, så kanterne er uden for synsfeltets grænser.

© Alle rettigheder forbeholdt, Netflix

Da tv-stationerne forventede, at noget af billedet blev klippet, ønskede de at undgå, at kritiske oplysninger blev vist for tæt på kanten af ​​skærmen. Historisk var der et titel sikkert område, hvor tekst ikke ville blive vist uden forvrængning, og et handlingssikkert område, hvor billedet kunne vises sikkert.

Af fjollede og indviklede grunde findes der stadig overscan på HDTV'er. Den nuværende anbefaling er at indstille mindst en 5% margin for at definere et generelt sikkert område og for at holde alle UI inden for disse grænser. Denne procentdel er imidlertid fleksibel; Google holder deres sikre område smalt, mens Apples er mere generøs. Vi finder os ofte ved at justere det sikre område, når vi bygger vores layoutnet.

For at starte, lad os konfigurere vores lærred ved hjælp af de almindelige HDTV-dimensioner: 1920 x 1080 pixels med 60px øverste og nederste margen og 90px sidemargen. Vi berører 4k senere.

Navigation

Hvordan retningsindgang former tv-grænseflader

Hardware definerer ofte designmønstre. På mobilen fremkom faner som et navigationsmønster i betragtning af den lille, men høje skærmstørrelse. På tv-apparater egner det brede dog squat lærred sig til lange rækker med indhold, der maksimerer mængden af ​​synligt indhold. Som faneblade på mobil er dette mønster almindeligt på de fleste tv-streaming-UI'er.

Med uret øverst til venstre: Netflix TV-app, Hulu Plus på Playstation, iTunes Store på Apple TV, AMC på Apple TV

Ligeledes kontrolleres størstedelen af ​​tv-UI'er (med undtagelse af den utroligt søde og frustrerende LG Bean Bird) af en D-pude, forkortet for retningsbestemt pude. Uanset om det er på en fjernbetjening eller en gamepad, begrænser D-pad navigationen til fire retninger: op, ned, til venstre og højre. Dette gør et gitter til den naturlige UI-struktur til tv-applikationer.

Apple TV (øverst) bruger en skygge og z-akseposition til sin markør, mens HBO GO (nederst) bruger et blåt streg

Det andet kritiske element i TV UI'er er markøren. Uden berøring eller mus skal brugerne navigere til det element, de vil vælge. En markør fremhæver det aktuelt valgte element og bevæger sig, når D-pad-input ændres. Programmer bruger ofte rammer, skygger, z-akse eller en eller anden kombination af disse for at signalere den valgte tilstand. Hvert element på skærmen skal kunne nås med markøren, og det skal altid være klart, hvor markøren kan flytte næste gang.

For vores prototype, lad os genskabe et typisk tv-UI-layout med en vandret række af indhold. Vi tilføjer vores cursortilstand til det første emne.

Input

Hvordan folk interagerer med tv'er ud over fjernbetjeninger

Fra venstre til højre: Logitech Harmony, Samsung Smart TV, Apple TV, Roku, Amazon Fire TV

De fleste tv'er og streamingapparater er afhængige af en form for fjernbetjening. Nogle platforme eksperimenterer med stemmelinje, mens andre, såsom det nye Apple TV, også bruger touch-input. Efterhånden som flere streamingtjenester bringer deres apps til spilplatforme, bruger folk også i stigende grad gamepads til at navigere i tv-UI'er. Videospilkonsoller er effektive enheder til flere formål, og her i studiet er vi interesseret i, hvordan vi bedst kan designe og prototype med denne hardware.

Navigering med en gamepad giver en række fordele. Foruden en D-pude har gamepads også tommelfinger, der giver den standard fire bevægelse i retning, såvel som mere nuanceret diagonal bevægelse. Tommelfinger er hurtigere og mere lydhør end D-puder, især for dem, der spiller videospil.

En Xbox One-controller (L) og en Playstation 4-controller (R)

Der er nogle standardkonventioner, der er delt på tværs af platforme, som f.eks. Select- og Back-knapperne, der deler den samme position på tværs af controllere. Hver platform har også sine egne etablerede konventioner. På Xbox giver triggerne en "Page Up" og "Page Down" -kontrol, mens kofangerne bruges til at fane mellem indholdsvisninger. Der er også et antal "strømbruger" -knapper på hver platform, som mere erfarne spillere ville være bekendt med.

Kontekst er dog vigtig, når man designer til stuen. Selvom der muligvis er en primær bruger, der spiller videospil og er meget bekendt med controlleren, er stueenheder i sidste ende delte enheder. Vi kan forvente, at andre brugere, der er mindre bekendt med en gamepad, bruger en konsol til underholdning. For kernefunktionalitet er det bedst at holde sig til standardknapkonventionerne.

I del 2 undersøger vi, hvordan man kortlægger en gamepad-controller til en brugergrænseflade ved hjælp af Gamepad API.

Typografi

Læser en grænseflade fra 10 meter væk

Forestil dig, at du sidder i sofaen og ser et show på dit tv. Det er temmelig let at se handlingen ske, men hvad sker der når slutkreditterne begynder at spille? Eller dukker der op en menu?

TV-apps omtales ofte som 10-ft-oplevelser, et udtryk, der refererer til en fælles afstand mellem dig og dit tv. I betragtning af denne afstand er vi nødt til at behandle et UI lidt anderledes, end vi ville gjort på web eller mobil. UI'er skal være mindre tætte, og designelementer skal være større, så de kan læses fra et rum.

Typografi kan blive særlig vanskelig i 10-ft oplevelser. Når du er i tvivl, skal du gå større. Sæt op både størrelsen og vægten på din type. Vi har fundet, at 18px er den mindste læsbare størrelse og kun egnet til ikke-væsentlige etiketter, som et øjenbrynsmærke. Til vores design har vi indstillet titlerne til 92px og brødteksten til 24px.

Nøglen til god typografi på tv er at teste konstant. Tynd, lille type på din skærm ser ren og sprød ud, men en gang på et tv kan det se ud, at det er sprængt eller blive uforståeligt. Vi definerer vores fontstørrelser tidligt i vores proces ved at opbygge en testmock og testtype på en tv-skærm.

Farve

Forståelse af grænserne for et tv-skærm

Farveudvalget på HDTV'er er mere begrænset end på din computerskærm. Dette betyder, at mens du designer, har du adgang til et større farveområde, end der vises korrekt på et tv. Forskellige mærker og modeller af tv'er varierer meget, når det gælder lysstyrke, display og andre indstillinger. Som type, skal farve testes tidligt og ofte på tv'er.

Der er nogle få retningslinjer, du skal følge, når du begynder at designe: Undgå ren hvid, da det skarpe lys er hårdt på øjnene. Pas også på med gradueringer og dybe slør, da det begrænsede farveområde kan få banding til at vises. For at afslutte vores prototype-design, indstiller vi vores baggrundsfarve til #EEE og skjuler vores sikre område og guider.

4K fremtid

Forberedelse til næste generation

I modsætning til mobiltelefoner opgraderer de fleste forbrugere ikke deres tv'er i en regelmæssig cyklus. Så mens flere og flere 4K-kompatible tv'er produceres, designer vi stadig til et marked, der overvældende er begrænset til 1080p.

Til sidst vil dette ændre sig, og meget som at redegøre for forskellige skærmstørrelser i mobildesign, vil designere snart designe til tv på 2x. Ud over bedre billedkvalitet betyder den større pixeltæthed skarpere og mere læselig type og brugergrænseflade.

Den måske mest lovende udvikling til UI'er designet til 4K vil være et øget farveområde og dybde. Aktuelle HDTV'er bruger en farveprofil med navnet Rec. 709, som giver et ret begrænset farveområde. En ny profil, Rec. 2020, blev udviklet til 4K tv'er og giver et større farveområde.

Kilde

Vigtigere end området er farvedybden. De fleste nuværende HDTV'er giver 8-bit farve. Dette betyder, at der er 256 nuancer af hver RGB-farvekanal til rådighed for i alt 16,78 millioner mulige farver. Nye 4K-tv'er med 10-bit eller højere farve og giver mindst 1.024 nuancer af hver farvekanal, hvilket muliggør over 1 milliard farver. Med en større farvedybde er banding på gradueringer og sløringer ikke synlige, hvilket giver designere flere muligheder for at bruge farve og manipulere fotoudstyr.

Prototyping

Den vigtigste del af design til noget

Nu hvor vi har vores grundlæggende design, er vi klar til at begynde at prototype. I næste uge forklarer vi det grundlæggende ved prototyping af navigationsadfærd med en gamepad-controller ved hjælp af Gamepad API og nogle grundlæggende HTML / CSS / JS. Følg os her for at sikre dig, at du fanger del 2.

I mellemtiden er her nogle ressourcer til at begynde at designe dit eget UI:

Download eksempler (PSD)

tvOS retningslinjer for menneskelig grænseflade

Design til Android TV

Amazon Fire TV Design og retningslinjer for brugeroplevelse